Integrating with Auth0 Roles

In this tutorial we will show you how to use Auth0 roles with Abstra to enable in app authentication and permissions. We assume you have configured Auth0 credentials in your project (see more here)

Configuring Auth0

Auth0 natively support roles but they don't inject this information by default in the id_token claims.

Create Users and Roles

First check that you have users. In your dashboard go to User Management > Users and check.
Now create your role in User Management > Roles with name and description. Assign the role to a user.

Create Actions to inject the roles

Now you need to create an custom action to inject the role in the id_token claims. Go to Actions > Custom Actions and create a new action. Choose the name and select the trigger as Login / Post Login. Fill the code with
exports.onExecutePostLogin = async (event, api) => {
const namespace = 'https://example.com';
if (event.authorization) {
api.idToken.setCustomClaim(`${namespace}/roles`, event.authorization.roles);
api.accessToken.setCustomClaim(`${namespace}/roles`, event.authorization.roles);
and deploy your action. Note that as states in the docs, the claim must be an URI.
The last step is to add the new action to the respective flow. Go to Actions > Flows, select Login, drag the action to the flow and apply.
You are done! Now you can test this with Abstra.

Using roles in Abstra

Let's create a project with a protected page for super-admin users only. First go to your project and then Settings > Authentication. Scroll down to Try now and check to see the roles you injected.
You can access your roles via $.user.profile["https://example.com/roles"]
Create a page called /admin. Select the page and click in the security icon. Once in the security menu, you can protect the page and add an access rule:
As we discussed in the access rules docs, we need to fill the path and the selected role:
And that's its. If someone enters this page without the role they will be redirected to the main page.
But if they enter with proper clearance, they can see the page.