How to configure the Google Authentication Provider for Backstage.io

To configure the Google Authentication Provider for Backstage.io we need to create the credentials in the Google Console and then use them to configure Google in your Backstage App.

The general instructions can be found here:

https://backstage.io/docs/auth/google/provider#create-oauth-credentials

In this article we are going to complete this configuration in GCP and then modify our Backstage App so it uses this credentials.

Creating App Credentials in GCP

Log in to the Google Console

First we must go to: https://console.cloud.google.com/ and login using our Google account.

Select or create new project

Then we must select our project. If you don’t have one, you can create one selecting the “NEW PROJECT” option (”PROYECTO NUEVO” in the image). If you already have one just select it in the top left dropdown.

In this case I created a new project called “backstage-pqzada”.

Create credentials

Navigate to: https://console.cloud.google.com/apis/credentials, press the “CREATE CREDENTIALS” button and select the “OAuth client ID” option.

If this is our first time, it’s going to ask us to configure your consent screen. So, press the “CONFIGURE CONSENT SCREEN” button and complete the form.

Consent Screen Configuration

In this case we are going to configure and register our app for testing mode, so select the “External” option and press “CREATE”.

Next, complete with the app information. I’m going to fill only the required fields, but you must complete everything if this is not your development environment (DevOps team should have this super clear). When you are done, press “SAVE AND CONTINUE”.

In the next section, press the “ADD OR REMOVE SCOPES” button and select:

• openid
• auth/userinfo.email
• auth/userinfo.profile

Press the “UPDATE” button in the bottom-right corner and then “SAVE AND CONTINUE”.

After that we need to add test users. So, press the button “ADD USERS” and add all the test users that you need. Then, again, “SAVE AND CONTINUE”.

The last sections is a “Summary”, we have an “EDIT” link in case we need to modify something. If don’t just press the “BACK TO DASHBOARD” button.

Create credentials (second try)

Now we try to create our credentials again.

This time won’t ask for the consent screen configuration.

Now we must complete the form with:

• Application type: Web application
• Name: Any name you want
• Authorized JavaScript origins: http://localhost:3000
• Authorized Redirect URIs. http://localhost:7007/api/auth/google/handler/frame

Then click “CREATE”.

OAuth client created

Finally it’s going to show us a modal with our “Client ID” and “Client Secret”. Copy this values because you are going to need them in the next section.

Google Authentication Provider configuration in your Backstage App

This section assumes that you already have a Backstage.io App running in your local environment. If you don’t, you can find a step by step guide in this article: Creating a Backstage.io App with Google SSO Authentication.

To configure the OAuth credentials in our Backstage.io App, we must open the app-config.yaml file and add the following values in the auth section.

auth:
  environment: development
  providers:
    google:
      development:
        clientId: YOUR_CLIENT_ID
        clientSecret: YOUR_CLIENT_SECRET

Remember that we must replace the “YOUR_CLIENT_ID” and “YOUR_CLIENT_SECRET” strings with the Client ID and Client Secret values from the previous section.

And we are done…

Any doubts? comment below!! or reach me on Twitter: https://twitter.com/pqzada