SPA and API Users, Roles, Scopes Understanding

[pwarner3]

I have been reading a lot of the docs and have done a lot of work/architecture to setup my frontend and backend. I am using React and .NET web api for reference.

My main problem or misunderstanding that I have is regarding how I am able to handle authorization on both the React and .NET side of things and the interaction between the two.

My current understanding is that the initial user creation/login is done on the frontend and since I followed the quickstart I am able to get the access and id tokens. Also, I understand that there are “scopes” which are supposed to be saying what resource can be accessed and permissions with those (I think). So my question is then how do I pass this to the backend with the backend necessary roles/permissions included? Or do I have to do something extra like call the management api from the backend once I get a valid access token from my frontend?

I also could just be thinking about doing authorization in the wrong way with my application which could be the problem. I really just want to make sure on the frontend the right people have the right permissions and that is also true for the backend resources.

I don’t think this is an exact duplicate of any of the other posts I have read but if it is I am sorry in advance, thanks for any help on this!

[marcelina.barycka]

Welcome @pwarner3 and thank you for posting!

@pwarner3

Also, I understand that there are “scopes” which are supposed to be saying what resource can be accessed and permissions with those (I think).

API’s scopes translate to the User’s permissions.

@pwarner3

So my question is then how do I pass this to the backend with the backend necessary roles/permissions included? Or do I have to do something extra like call the management api from the backend once I get a valid access token from my frontend?

To make scopes available in the access token that is consumed by your API, you would have to follow a few steps in your Auth0’s dashboard:

• add relevant scopes and their descriptions to the API in question (Applications → APIs → API in question → Permissions)
• enable the Add Permissions in the Access Token toggle (Applications → APIs → API in question → Settings → RBAC Settings)
• add relevant permissions to a user (User Management → Users → your test user → Permissions → Assign permissions).

The result is that by default, the access token (requested for a specific API) will now include the permissions array that are specific only for the API defined as an audience on your frontend and that are granted to the user.

After decoding with jwt.io we receive:

Please let us know if you could also receive the permissions claim in your access token!