Authenticating a User through 1 SPA that later gives access to Multiple APIs

[danco]

Hey, have you checked out the Auth0 react quickstart?

Part #1 of the quickstart will walk you through setting up authentication in a react SPA.
React Authentication Quickstart

Part #2 covers calling an API
Calling an API with React Quickstart

Will each role have specific permissions? If so you have a few options

Saving Role in app_metadata

1. Add a Role to each user’s app_metadata
2. Add the role to the access_token in a rule
3. Protect your endpoints using Roles

See my answer here for an example of a rule that adds the user’s role to an access_token
Sample rule for adding Role to access_token

RBAC
You can also use the Auth0 RBAC feature for more fine grain control. This feature lets you assign permissions to a Role for a specific ÅPI.

1. Enable RBAC in the Auth0 dashboard for all APIs
   

   

2. In the dashboard under Users & Roles > Roles click on + CREATE ROLE, give it a name and save
   

   

3. Click the Permissions tab, Add Permission, and select your API. You will then be prompted to assign permissions to that role.
   

   

4. Click the Users tab and assign users to the Role

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

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

For more information on RBAC in Auth0 check out this article
Auth0 RBAC