Created Extension with Roles and Permissions but How can Front-end Get This info

Help
1

I created an extension called “Auth0 Authorization” with four defined roles and four defined permissions. I assigned these to two users.
I then go to “Users” in the dashboard and it looks great.
I see in “Users” section that in “app_metadata” the user has the newly defined roles (see json below).
However, in my front-end SPA website written in Angular, I’m unable to get the “app_metadata”.
What code do I need from my front-end Angular website to access the “app_metadata”?
Note, the tutorial gave me the code to access “profile” info. But this didn’t include “app_metadata”.
Can you please provide sample code on how to extract from Auth0 the roles that the user has when they login?
Thanks.
{
“roles”: [
“admin”
],
“authorization”: {
“roles”: [
“admin”
],
“permissions”: [
“edit-career-ads”,
“edit-admin”,
“edit-provider-pages”,
“edit-events”
]
}
}

2

@juan.vega the front-end can get this in one of two ways.

  1. Create a rule that adds this data to the id_token and have the front-end parse that.

  2. Create an API endpoint in your API that will read the access_token or the user.app_metadata stored in Auth0 and return that data.

Depending on how many roles and groups a user has it would be good to only include the necessary groups and roles for this application.

3

Thanks I was able to get this working using the following rule:

function (user, context, callback) {
user.app_metadata = user.app_metadata || {};
context.idToken[‘https://gpg.com’] = user.app_metadata.authorization.roles;
callback(null, user, context);
}

So now on the front-end when I print to the console, I see the following:

https://gpg.com:[“physician-user”],
name:"jane.doe@mail.com",
nickname:“jane.doe”,
picture:“https://s.gravatar.com/avatar/68e5e803a6b68aa2aa1efb6072afaffc?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fja.png”,
sub:“auth0|5b0a4e045d7d1617fd7fdb31”,
updated_at:“2018-05-29T23:18:01.097Z”

I can pull out name and nickname very easily like this:

public getProfile(cb): void {
const accessToken = localStorage.getItem(‘access_token’);
if (!accessToken) {
throw new Error(‘Access token must exist to fetch profile’);
}

const self = this;
this.auth0.client.userInfo(accessToken, (err, profile) => {
  if (profile) {
    self.userProfile = profile;
    console.log('profile from auth.service.ts');
    console.log(profile);
    console.log(self.userProfile.name);
    console.log(self.userProfile.nickname);

  }
  cb(err, profile);
});

}

But how can I pull out the actual role which is tied to a URL.

In other words, I can pull out “name” and “nickname”.

But I can’t figure out how to access the role “physician-user” as found in this section “https://gpg.com”

https://gpg.com:[“physician-user”],

If I say something like
console.log(self.userProfile.https://gpg.com);

I get all kinds of errors.

Any suggestions?

Thanks.

4

@juan.vega in JavaScript you can use bracket notation that getproperties that are not compatible with dot notation.

Try: self.userProfile['http://gpg.com'] to access the value.

5

Thank you so much… that worked.

Much appreciated.

Juan

1 Like