How to use permissions in SPA to render UI?

Hello!

I’ve spent a lot of time searching for any information about using user permissions in a JS client (SPA). But I still can’t figure it out without your help. I’ve found some similar topics, but there is no useful information for me. What is the way to do it correctly?

I can check user permissions on my API endpoints using an access token. But also I want to check permissions to render the correct UI in my SPA. There are no permissions in the ID token. For example, a user who doesn’t have permission write:item shouldn’t see a link for editing an item. I should be able to check it out in client code.

Should I add an Action in the auth0 dashboard to hook login operation and add permissions to the ID token there? Looks like there is no way to do it without using the management API. It increases login request time.

Another way is to get it using my server API. Anyway, I have the endpoint to get some information about a current user from the server. But it doesn’t look safe.

Also, it looks weird to use the management API on the client-side. And it is not correct to parse the access token.

Please, help to find the way. Thank you.

Some additional information about stack:
Client: Vue 3, auth0-spa-js
Backend: Laravel 9

1 Like