Auth0-React: Best way to get user role/permission data to render app components

[brett3]

Hello,

I know this may have been addressed in certain forms, and I’m aware of the following tutorial: Role-Based Access Control

However that tutorial doesn’t use the same library I’m using, auth0-react, and I’m not sure I want to re-do everything, unless I have to.

Essentially I’m just curious as to the best way to get the Users Role, OR Permissions within the react application in order to display only relevant components. Does this need a custom rule? If so is there a rule template with this in mind? It seems like it would be a component of the auth0-react library- is there a way to get this information from useAuth0() that I haven’t discovered?

Side note, is there a rule template to make a new user automatically assume a ‘registered_user’ role?
Thanks

Edit:
Sorry I think I got it. Added the following rule:

function (user, context, callback) {
const namespace = ‘http://localhost:3000’;
const assignedRoles = (context.authorization || {}).roles;

let idTokenClaims = context.idToken || {};

idTokenClaims[${namespace}/roles] = assignedRoles;

context.idToken = idTokenClaims;

callback(null, user, context);
}

[konrad.sopala]

Solution shared by @brett3

Add the following rule:

function (user, context, callback) {
const namespace = ‘[http://localhost:3000](http://localhost:3000/)’;
const assignedRoles = (context.authorization || {}).roles;

let idTokenClaims = context.idToken || {};

idTokenClaims[ `${namespace}/roles` ] = assignedRoles;

context.idToken = idTokenClaims;

callback(null, user, context);
}