Best practice for getting client-side permissions in an SPA

Help
,
1

Hi,

I am fairly new to Auth0 and was wondering if someone could sketch the best practice for getting user permissions on the client side in an SPA with a JSON API as a backend. My setup is as follows:

  • A frontend built in Angular 16 and using the Auth0 Angular libraries, mainly using Auth0 login via third party providers (Google and LinkedIn, currently)
  • A backend API (due to historical reasons, this is a Wordpress installation using the wp-json REST functionality) set up as an API in Auth0 with correct Audience, etc.

The access token contains the scopes of the user, but my understanding is that I should not inspect the access token on the client side. The access token should only be used to pass on to the server (i.e. in an HTTP authorization header), and currently this works fine by using the HTTP interceptor built into the Auth0 Angular library. Then I can inspect the access token on the server/API side and use this to block any actions not in scope for the user.

However, the Angular-based UI also needs to be “aware” of the user permissions/scopes. For instance, certain buttons or links should only be visible/clickable for users with certain permissions. According to the best practices described very thoroughly in ID Token and Access Token: What Is the Difference? (auth0.com), the ID token is the token to be inspected on the client side (in Angular, this can be done via the idTokenClaims$ observable), but this token does not contain the user’s permissions. So, how do I get the permissions on the client side?

I would be very grateful to have fundamental flaws in my understanding pointed out to me. Thanks in advance.

Kind regards, Chris

2

I think I might have an idea about this now, based on How can I use the Management API in Actions? - Auth0 Community.

One thing I have noticed is that the newest version of the ManagementClient apparently does not have a “getUserPermissions” method. Rather, this method has been moved to the “users” object and renamed:

const ManagementClient = require('auth0').ManagementClient;

const management = new ManagementClient({
      domain: event.secrets.domain,
      clientId: event.secrets.clientId,
      clientSecret: event.secrets.clientSecret,
});

// This is different from previous versions
management.users.getPermissions({id: event.user.user_id});

Documentation: UsersManager | auth0