# Best practice to identify user permissions client side (SPA)

**URL:** <https://community.auth0.com/t/best-practice-to-identify-user-permissions-client-side-spa/51185>\
**Category:** Get Help\
**Tags:** jwt, auth0\
**Created:** [October 7, 2020, 4:00pm UTC](https://community.auth0.com/t/best-practice-to-identify-user-permissions-client-side-spa/51185 "2020-10-07T16:00:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![udo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/udo/32/24769_2.png) [@udo](https://community.auth0.com/u/udo)\
**Post date:** [October 7, 2020, 4:00pm UTC](https://community.auth0.com/t/best-practice-to-identify-user-permissions-client-side-spa/51185/1 "2020-10-07T16:00:58Z")

</div>

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 🙂

thanks, udo

---

<div class="post-metadata">

**Author:** ![dan.woda](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dan.woda/32/18340_2.png) [@dan.woda](https://community.auth0.com/u/dan.woda)\
**Post date:** [October 13, 2020, 8:59pm UTC](https://community.auth0.com/t/best-practice-to-identify-user-permissions-client-side-spa/51185/3 "2020-10-13T20:59:53Z")

</div>

Hi @udo,

Welcome to the Community!

One option is to use roles to determine user permissions:

- You can [give users roles](https://auth0.com/docs/authorization/how-to-use-auth0s-core-authorization-feature-set), like an _editor_ role for instance
- Then [add the roles to the id and access tokens](https://auth0.com/docs/authorization/sample-use-cases-rules-with-authorization#add-user-roles-to-tokens)

---

<div class="post-metadata">

**Author:** ![udo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/udo/32/24769_2.png) [@udo](https://community.auth0.com/u/udo)\
**Post date:** [October 14, 2020, 6:25am UTC](https://community.auth0.com/t/best-practice-to-identify-user-permissions-client-side-spa/51185/4 "2020-10-14T06:25:46Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![dan.woda](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dan.woda/32/18340_2.png) [@dan.woda](https://community.auth0.com/u/dan.woda)\
**Post date:** [October 14, 2020, 7:37pm UTC](https://community.auth0.com/t/best-practice-to-identify-user-permissions-client-side-spa/51185/5 "2020-10-14T19:37:58Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![udo](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/udo/32/24769_2.png) [@udo](https://community.auth0.com/u/udo)\
**Post date:** [October 15, 2020, 9:53pm UTC](https://community.auth0.com/t/best-practice-to-identify-user-permissions-client-side-spa/51185/6 "2020-10-15T21:53:40Z")

</div>

@dan.woda,

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

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):

- [Sample Use Cases: Rules with Authorization](https://auth0.com/docs/authorization/sample-use-cases-rules-with-authorization#add-user-roles-to-tokens)

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…

---

<div class="post-metadata">

**Author:** ![dan.woda](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dan.woda/32/18340_2.png) [@dan.woda](https://community.auth0.com/u/dan.woda)\
**Post date:** [October 16, 2020, 4:20pm UTC](https://community.auth0.com/t/best-practice-to-identify-user-permissions-client-side-spa/51185/7 "2020-10-16T16:20:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [October 31, 2020, 4:20pm UTC](https://community.auth0.com/t/best-practice-to-identify-user-permissions-client-side-spa/51185/8 "2020-10-31T16:20:31Z")

</div>

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