Auth0 Authentication Provider
This documentation is written for the old backend which has been replaced by the new backend system, being the default since Backstage version 1.24. If have migrated to the new backend system, you may want to read its own article instead. Otherwise, consider migrating!
The Backstage core-plugin-api
package comes with an Auth0 authentication
provider that can authenticate users using OAuth.
Create an Auth0 Application
- 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
Configuration
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 these 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
It additionally relies on the following configuration to function:
session.secret
: The session secret is a key used for signing and/or encrypting cookies set by the application to maintain session state. In this case, 'your session secret' should be replaced with a long, complex, and unique string that only your application knows.
Auth0 requires a session, so you need to give the session a secret key.
Optional Configuration
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 theconnection
parameter
Adding the provider to the Backstage frontend
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.