| id | provider |
|---|---|
| title | Auth0 Authentication Provider |
| sidebar_label | Auth0 |
| description | Adding Auth0 as an authentication provider in Backstage |
The Backstage core-plugin-api package comes with an Auth0 authentication
provider that can authenticate users using OAuth.
- Log in to the Auth0 dashboard
- Navigate to Applications
- Create an Application
- Name: Backstage (or your custom app name)
- Application type: Single Page Web Application
- Click on the Settings tab
- Add under
Application URIs>Allowed Callback URLs:http://localhost:7007/api/auth/auth0/handler/frame - Click
Save Changes
The provider configuration can then be added to your app-config.yaml under the
root auth configuration:
auth:
environment: development
providers:
auth0:
development:
clientId: ${AUTH_AUTH0_CLIENT_ID}
clientSecret: ${AUTH_AUTH0_CLIENT_SECRET}
domain: ${AUTH_AUTH0_DOMAIN_ID}
audience: ${AUTH_AUTH0_AUDIENCE}
connection: ${AUTH_AUTH0_CONNECTION}
connectionScope: ${AUTH_AUTH0_CONNECTION_SCOPE}
session:
secret: ${AUTH_SESSION_SECRET}The Auth0 provider is a structure with three configuration keys:
clientId: The Application client ID, found on the Auth0 Application pageclientSecret: The Application client secret, found on the Auth0 Application pagedomain: The Application domain, found on the Auth0 Application page
Because Auth0 requires a session you need to give the session a secret key.
audience: The intended recipients of the tokenconnection: Social identity provider name. To check the available social connections, please visit Auth0 Social Connections.connectionScope: Additional scopes in the interactive token request. It should always be used in combination with theconnectionparameter
To add the provider to the frontend, add the auth0AuthApi reference and
SignInPage component as shown in
Adding the provider to the sign-in page.