How can I get user roles client side?

[luke2]

Hi, I’m new to using Auth0 sos still trying to get an understanding of how things work.

What i’m wanting to do is conditional checks client-side which will show/hide certain content depending on authenticated user roles.

All users will either have a role of default or admin set. If a users role is admin, then the conditional will pass using something like the below.

Is there away to get role data set on a user through useUser? if not, is there a different or better way to achieve what i’m trying to do?

This is for a Nextjs project.

    const { isLoading, error, user } = useUser();

    if (isLoading) return <div>Loading...</div>;
    if (error) return <div>{error.message}</div>;

if (user.roles.includes('admin')) {
  console.log('User is an admin.');
  // Perform admin-specific actions here
} 

Thanks in advance!

[tyf]

Hey @luke2 welcome to the community!

@luke2

Is there away to get role data set on a user through useUser? if not, is there a different or better way to achieve what i’m trying to do?

Have you tried adding roles to tokens? In this case you’d want to focus on the ID token in particular:

How to add Roles and Permissions to the ID Token using Actions?

Problem statement Is it possible to retrieve the user’s Roles and/or Permissions and include them in the JWT Token? Solution Yes, it’s possible to retrieve the user’s Roles and/or Permissions and append them to either the ID Token or Access Token. To do so, you must use a Post-Login Action script. 1.1 Roles When adding the user’s Roles to the token, call the event.authorization.roles property and add it as a custom claim to the Token. Please see here on creating namespaced custom claims. Be…

roles should then be available via the useUser hook.

[luke2]

Yeah I managed to get it working in the end with

exports.onExecutePostLogin = async (event, api) => {
  const namespace = 'roleType';
  
  if (event.authorization) {
    api.idToken.setCustomClaim(`${namespace}`, event.authorization.roles);
    api.accessToken.setCustomClaim(`${namespace}`, event.authorization.roles);
  }
}

[tyf]

That’s great, thanks for confirming!