Authentication with Auth0

In this tutorial we will show you how to integrate Auth0 with Abstra to enable in app authentication with the Sign-in and Sign-out actions.

Auth0 Settings

After you create your account you will be presented with a dashboard.
Go to the Applications menu.
Create a new application of the Single Page Web Application type.
Go to the Settings tab and scroll down to the Application URIs section. In the Allowed Callback URLs paste https://*.abstra.app/sign-in and in the Allowed Logout URLs paste https://*.abstra.app/sign-out
Scroll down to the Refresh Token Rotation section and make sure the Rotation toggle is enabled
Scroll up to the Basic Information section and take note of the Domain and Client ID values

Abstra Settings

Access your project and go to the Settings page.
Go to the Authentication tab. Paste the Domain in the Authority field prepended with the https:// protocol. Paste the Client ID in the respective field.
You will also need to add the end_session_endpoint in the OIDC metadata overwrite session. The value should be:
youOidcAuthorityUrl should be replaced by the authority url you used in the configuration, yourClientId should be the client id for your authority.
And that's it, now you can test these settings. On the right there is the Try now section:
Right bellow will appear a box containing all the information the provider sends, which can be accessed with the user context variable with $.user or {{ user }}. For example name can be accessed with $.user.profile.name or {{ user.profile.name }}.


In this example we will implement a login button and display the logged user name. We have a two pages:
The first has a Button, an Sign-in action when it is clicked and a Go To Page for the second page if the sign-in was successful.
The second has a Text with Mustache Notation and the Text Value isMy name is {{ user.profile.name }}.
This is the result.