Google Authentication Provider
The Backstage core-plugin-api
package comes with a Google authentication
provider that can authenticate users using Google OAuth.
Create OAuth Credentials
To support Google authentication, you must create OAuth credentials:
- Log in to the Google Console
- Select or create a new project from the dropdown menu on the top bar
- Navigate to APIs & Services > Credentials
- Click Create Credentials and choose
OAuth client ID
- Configure an OAuth consent screen, if required
- For local development, you do not need to enter any Authorized domain
- For scopes, select
openid
,auth/userinfo.email
andauth/userinfo.profile
- Add yourself as a test user, if using External user type
- Set Application Type to
Web Application
with these settings:Name
: Backstage (or your custom app name)Authorized JavaScript origins
: http://localhost:3000Authorized Redirect URIs
: http://localhost:7007/api/auth/google/handler/frame
- Click Create
Configuration
The provider configuration can then be added to your app-config.yaml
under the
root auth
configuration:
auth:
environment: development
providers:
google:
development:
clientId: ${AUTH_GOOGLE_CLIENT_ID}
clientSecret: ${AUTH_GOOGLE_CLIENT_SECRET}
The Google provider is a structure with two configuration keys:
clientId
: The client ID that you generated, e.g.10023341500512-beui241gjwwkrdkr2eh7dprewj2pp1q.apps.googleusercontent.com
clientSecret
: The client secret tied to the generated client ID.
Adding the provider to the Backstage frontend
To add the provider to the frontend, add the googleAuthApi
reference and
SignInPage
component as shown in
Adding the provider to the sign-in page.