I’m working a common use case where I have a SPA application protected by Auth0 and an API behind it. I can login just fine and get the id token. Just like the example I’m then able to silently get the access token for the API. Calls to the API are checked by the scope and everything works great. I am using the auth0-spa-ja library (GitHub - auth0/auth0-spa-js: Auth0 authentication for Single Page Applications (SPA) with PKCE).
A common use case is to be able to control elements of the UI depending on the permissions which are available. (ex: Don’t show an admin button if the user does not have a permission, etc). This is just for usability reasons as the API will be protected by the proper scopes, etc.
My questions basically boils down to what is the best way to achieve this? How can my SPA know what permissions the user has?
Should I create a rule to add the groups to the identity token? If yes, how? The downside to this is that users might exist across many applications so it doesn’t make much sense to have them there?
Should I grab the API access token in the application and decode that to obtain the permissions? I know I can add the permissions into the token via the RBAC core functionality.
Why does the auth0-spa-ja not give any functionality (or maybe I’m missing it) to decode the token and give me the scopes or permissions? Must I decode and verify it myself?
This is a common use case and should be maybe included as a example on the Angular demo. I think on the previous auth0.js it was.
Update: A simple solution would be adding the roles (as assigned to the user) in a custom namespace on the id token. I would think I could do this in a rule, but have not yet figured it out
Thanks!