How to configure the Google Authentication Provider for Backstage.io
Tags: backstage, googlecloud
Published: 2022-09-12 01:30:58


![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yiyhqy7kqeqjnvpxe14z.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yiyhqy7kqeqjnvpxe14z.png)

To configure the Google Authentication Provider for [Backstage.io](http://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](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/](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.


![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx2fa3hriq4nj7v2srpf.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx2fa3hriq4nj7v2srpf.png)

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


![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iin0l9iaies9936d4vba.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iin0l9iaies9936d4vba.png)

## **Create credentials**

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


![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/io3bgk35ehh0ih4lkd8b.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/io3bgk35ehh0ih4lkd8b.png)

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.


![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zeurji9b14o7dpwx97ze.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zeurji9b14o7dpwx97ze.png)

## **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**”.


![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5pw4onhsvvdm7e4rdh6.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5pw4onhsvvdm7e4rdh6.png)

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

- **openid**
- **auth/userinfo.email**
- **auth/userinfo.profile**


![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2l7ho02jykub6pjqlx8.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2l7ho02jykub6pjqlx8.png)

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**”.


![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xk043jgxi492005i0l6.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xk043jgxi492005i0l6.png)

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.

![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/io3bgk35ehh0ih4lkd8b.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/io3bgk35ehh0ih4lkd8b.png)

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](http://localhost:3000/)
- **Authorized Redirect URIs**. [http://localhost:7007/api/auth/google/handler/frame](http://localhost:7007/api/auth/google/handler/frame)


![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebyi3be3en4aratj666o.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebyi3be3en4aratj666o.png)

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.


![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45o1b9hp8zvtxysf6tte.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45o1b9hp8zvtxysf6tte.png)

#**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](https://dev.to/pqzada/creating-a-backstageio-app-with-google-sso-authentication-2jlm).

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.

```yaml
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](https://twitter.com/pqzada)