How to read user profile attributes user_metadata and app_metadata from SPA?

Help
1

Hi there,

I am building a SPA app in Vue.js and Azure AD as the IDP.

Following this good post, I have enriched the user profile with additional data from Azure AD (like manager, direct reports…). I can see that it works from the dashboard, I can see the data.

Now, I’d like to get access to those attributes from my client using auth0-spa-js.
When I print the user’s attributes using JSON.stringify($auth.user, null, 2) }, I can only see a few:

"given_name": "Romain",
"family_name": "Jourdan",
"nickname": "rjourdan",
"name": "Romain Jourdan",
"picture": "https://s.gravatar.com/avatar/dc9345a6f89b81f54ed990bdee43f275?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Frj.png",
"updated_at": "2020-02-02T05:33:55.159Z",
"email": "my email",
"email_verified": true,
"sub": "waad|3yeuY3hwypBFOu6KZ2d6WHLVDZq40jgJsdtlytm2dck"

What about the other ones? I need to check the last_login and app_metadata.

Based on the Auth0Client Class and Read-Metadata with Lock, I thought I would succeed.

if(this.$auth.isAuthenticated) {
                this.$auth.getTokenSilently()
                .then((token) => {
                    
                    this.$auth.lock.getUserInfo(token, function(error, profile) {
                    if (!error) {
                        console.log("otherMail "+profile.app_metadata.otherMail);
                    }
                    });
                 
                 }).catch((error) => {
            console.log("problem: "+error);
             });

No joy, I am successfuly getting a token but $auth.lock is ‘undefined’.

I understand that I can also use the Management API to get to the additional profiles. Is this recommended to use it from the SPA or should we use it only in the backend?

May be I am not on the right track. Any clue?

1 Like
2

Hi @rjourdan_net,

If there are additional profile attributes that you want to see “all the time”, probably the simplest solution is to add the attributes you are interested in to the user’s id_token and / or access_token. You can add additional attributes, “custom claims”, to one token and / or the other dynamically using a Rule. For example:

You can add the entire user_metadata or app_metadata as a single custom claim, though I would suggest the above approach of adding just the attributes of interest.

You can also call the /userinfo endpoint at any time to query for additional profile data.

3

Thanks for the quick answer.
So I had a look at the custom claims. I can load the data but how can I read it?
Do I need to change scope? what is the variable to use on the client side?
With your example, how could I read uuid? in the user profile, it will be stored in https://leanangle.io/claims/uuid.

4

Your token, which will be a json document, will include the additional claims. E.g.:

"https://leanangle.io/claims/uuid": "abc123"

In the same way it includes standard claims:

"given_name": "Romain",

The string “https://leanangle.io/claims/uuid” is just the key in the key-value pair. Custom claims should always use a custom namespace to avoid conflicting with standard claims. By convention we use a URL-formatted string for the namespace, though it does not need to be a resolvable URL.

I would also suggest checking out these vue.js related blog posts. The Auth0 content engineers do an excellent job of providing very detailed walk-throughs.

3 Likes
5

Gotcha. That was really helpful.
Thanks for the other links.

2 Likes
6

Glad you have it working now @rjourdan_net!

7

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.