1 SPA Web based on ReactJS, let’s call it https://dashboard.example.com that will access a few resources that belongs to several Services (API), namely:
Each of the resources above have permissions such as:
list:movies
read:movies
write:movies
edit:movies
list:books
read:books
write:books
*delete:books
and so on…
I also have multiple users that have been assigned to multiple roles
Users:
Batman (Managers)
Robin (Employees)
Alfred (Employees)
Roles:
Employee
Managers
What i imagine is that a user will first authenticate themselves through the SPA (e.g via a login screen), then Auth0 detects what permission a user has and then the SPA will render the menu based on the permission assigned to the user.
Additionally, if somehow the user try to access a resource they don’t have access to the API should denied it.
I am not where to start, and have been trying to implement this without success.
In your react application, when creating the Auth0Provider object, make sure to assign all possible scopes. The jwt validation in the API is smart enough to check the scopes in the user’s role.
NOTE: don’t forget to set the API audience or you will get an opaque token which will cause your API to return 401 unauthorized.
In your API, use the express-jwt-authz library to validate the scope. Below is an example using NodeJs and Express which is missing from Part #2 of the quickstart.
Thanks for replying to this thread. We have tried all the solution mentioned by you without success.
In your example here: It is only talking about 1 audience (i.g. the DemoAPI) while we are working with multiple audiences, each has multiple scopes.
We are still confused on the following:
When our user login (through Auth0 login screen), we expect to get the list of user’s permission (i.e. which API Services they have access to and what are the scopes). So that our SPA application can
a. Render the appropriate UI based on the permission
b. Use the token provided to access the API services.
We are still confused with the terminology and meaning between Roles, Rules, Users, Permission, Scopes and how each of these connect.
We are also confused on whether we use the User + Roles from the Auth0 Dashboard or we should use Authorization Extension
Multiple audiences
Regarding multiple audiences, the access_token can have max 2 audiences. 1 of those is always for the /userInfo endpoint on the authorization server. Because of this you can’t use 1 access_token to hit multiple APIs. You can read more about that here access_tokens
One way around this is to create middleware such as an API gateway that can use the client credentials grant to get a machine to machine token for each API. This link had more information on that and has a link to an example Client Credentials Grant
React SPA → login —(authorization code grant with PKCE)–> authorization server
authorization server ----returns {id_token}{access_token}–> React SPA
React SPA --sends {access_token}–> middleware —(client credentials grant) with audience=movieApi-> authorization server
authorization server —returns {access_token}–> middleware → Movie API
Movie API --returns result-> middleware --returns result → SPA
API Gateway This doc uses AWS but it can be applied to your APIs.
Show/hide UI based on permissions
If permissions are based on a user’s Role (Manager/Employee) you can add the Role to the id_token as a claim using a rule. You can then get this claim in your UI and show/hide the ui components based on it’s value. id_token Add claims to id_token
Role vs Authorization Extension
User + Role is the latest iteration and was upgraded from the authorize extension to a core feature. Role vs Authorization Extension RBAC
Rules are extension points that run after a successful authentication. Scopes are the permissions the user will have to consent to before accessing the resource server or in your case the movie api.
Scopes are permissions that can be assigned directly to a user, or assigned to a Role which is then propagated to the user.
