Enriching user profile visibility via custom claims inside a Vue JS SPA

[davedub]

Using the Auth0 sample repository, I created a VueJS app which includes a /profile route. This route shows standard claims data for the logged-in user. But I want it to also show “enriched profile” data using custom claims. To do this, I created a custom claim for a user in my Auth0 dashboard, then I created a rule for it in building the isAuthenticated token, using the required namespacing. Using Auth0’s test protocol, I can see that it works. But I cannot figure out how to make the value of the custom claim visible inside the app. I understand that in profile.vue, I cannot use double-bracketed data binding for {{ $auth.user.app_metadata.custom_claim }} like I would use {{ $auth.user.name }} because it is outside the standard OIDC scope. But what do I need to do to take this final step of actually using the custom claim data inside a web app? That is, while I have managed to add a “custom claim” to a token, what I don’t understand is how to actually use it so that it is visible to an end user. Is there anything readily that explains what else needs to be done in coding the app, or configuring Auth0 rules, hooks or functions, to make custom claims consumable inside a “/profile” route in a VueJS SPA?

[konrad.sopala]

Hey there Dave!

In order to handle that most effectively, can I ask you to raise a GitHub issue in the sample repo so we can work on that directly with the repo maintainers? Once you have it please share the link with us here so we can ping them. Thank you!

[davedub]

OK, thanks. Here is the link.

[davedub]

I spent another hour trying to figure this out and finally got it to work. Here’s how –

In /src/auth/authWrapper.js, for the “this.auth0Client” instantiation of the createAuth0Client() object [line 75 in the sample Vue auth0 login repo], I added to the other enumerated properties, one for scope:

scope: options.idToken,

I added this as the second to last one, the last is still redirect_uri.

In src/views/profile.vue, I wanted to show the data for a custom claim of the user’s physical address, so I added this line for where the data for it came from –

Address: {{ $auth.user[‘https://namespacedURLhere/address’] }}

It felt like there was nothing intuitive about this being the way to “extract” and “decode” the data for a custom claim, and it would really help if this was documented somewhere in all of the great help content that you have on the Auth0 site.

I will copy-paste this post to the issue I opened in the Github repo and close it.

[konrad.sopala]

Glad you have eventually figured it out! Thanks for sharing it with the rest of community!