Need some example in Scope/Permissions in Angular?

[haddis.e]

Want to load components based on user permission/role in angular, I enabled RBAC and add Permission in access token. and I used quick start sample angular app . everything is working perfectly. but couldn’t get access the scopes/permissions in the access token to customize my UI based on the user credentials. Any simple example ?
Thanks
Haddis

[tyf]

Hey @haddis.e welcome to the community!

A couple of things to check first and foremost:

• Does the user have a role and subsequent permissions correctly assigned to them?

• Can you confirm you are using the correct API Identifier as the audience param in your Angular app configuration?

If you wouldn’t mind sharing your AuthModule.forRoot and any example access/ID tokens (sensitive info redacted) that could be helpful as well.

Keep us posted!

[haddis.e]

thanks @tyf
I’m using the auth0 quick start sample angular spa provided by auth0 literally the default one.
So to answer your questions ,

• yes i assigned the role and permission correctly and got the protected and admin components load as intended in the sample example. Just wanted to load or show the admin tab if only the logged in user is admin or have the permission .
  The main issue here is decoding or accessing access token in way I could extract the permissions as an array from the “Scope” attribute.

AuthModule.forRoot({
…env.auth0,
httpInterceptor: {
allowedList: [${env.api.serverUrl}/api/messages/admin, ${env.api.serverUrl}/api/messages/protected],

[tyf]

@haddis.e

The main issue here is decoding or accessing access token in way I could extract the permissions as an array from the “Scope” attribute.

Thanks for clarifying!

You’ll need to be sure and pass your API identifier as the audience in authorizationParams one way or another - In the sample app this is configured in auth_config.json - In the quickstart code it looks like it’s defined here. You’d need to add an audience param to authorizationParams:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Import the module from the SDK
import { AuthModule } from '@auth0/auth0-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,

    // Import the module into the application, with configuration
    AuthModule.forRoot({
      domain: '{yourDomain}',
      clientId: '{yourClientId}',
      authorizationParams: {
        redirect_uri: window.location.origin,
        audience: "YOUR_API_IDENTIFIER"
      }
    }),
  ],

  bootstrap: [AppComponent],
})
export class AppModule {}