Best practice to identify user permissions client side (SPA)

hi,
I am writing a SPA (VueJS based) in which I have a button “EDIT” on a page. I would like to enable this button only for users which have a certain permission assigned, e.g. “update:blogs”.

I could decode the jwt and see if there is “update:blogs” in the permissions array of the tokens payload… is there a recommended “best practice” how to do this? something “out of the box” would be nice :slight_smile:

thanks, udo

Hi @udo,

Welcome to the Community!

One option is to use roles to determine user permissions:

thanks @dan.woda. so after adding the editor role I would always have to decode the token client side to check if the role (or check if he has the permission) to enable/disable certain interactions, correct? at the end it’s all in the token ¯_(ツ)_/¯ for this kind of checks I would not call some auth0 api to rerieve user data, correct?

@udo,

You should be verifying the token no matter what, which would require decoding it. If you are using our SDK then this is already happening.

The important distinction here is which token. Are you talking about the ID token or the access token? The permissions may be in the AT, but the AT is not meant to be consumed by the front end. Instead, you can add the role to the ID token, which is meant to be consumed by the vue app.

1 Like

@dan.woda,

without your “intervention” I would have looked at the access token :expressionless:

so far I understood the following:

  • Access Token: intended to be consumed by the API
  • ID Token: intended to be consumed by the front end

to add the role(s) to the ID Token I would use a rule like described here (and what you already suggested in your first reply):

then in the client (my vue app) I would check for the roles to enable the button/functionality.

if I summarized this correctly, you made a good job explaining this to me…

1 Like

That all sounds correct to me. Let me know if you run into anything and we can look into it.

1 Like