This project was bootstrapped with Create React App.
This is a POC for Role-based Access Control in a React app using Auth0 as the authentication provider. This code is almost entirely based on Role-Based Access Control and React Apps by Aditya Agarwal. The only material difference is that this version supports multiple roles per user.
Set Auth0 domain and clientId in src/auth0-variables.js.
The Auth0 app requires a rule with the following code. This is configured through
the Auth0 dashboard. You can/should change the email in this code. If you change the
idToken index name, you must also change it in src/auth0-variables.js. This value
is a namespaced claim id within the JWT token (idToken).
function (user, context, callback) {
user.app_metadata = user.app_metadata || {};
user.app_metadata.roles = [];
if (user.email === '[email protected]') {
user.app_metadata.roles.push('admin');
} else {
user.app_metadata.roles.push('writer');
}
user.app_metadata.roles.push('other');
auth0.users.updateAppMetadata(user.user_id, user.app_metadata)
.then(() => {
context.idToken['https://dealerinspire/roles'] = user.app_metadata.roles;
callback(null, user, context);
})
.catch((err) => {
callback(err);
});
}In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.