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:
In this article we are going to complete this configuration in GCP and then modify our Backstage App so it uses this credentials.
First we must go to: https://console.cloud.google.com/ and login using our Google account.
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”.
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.
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:
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.
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 Redirect URIs. http://localhost:7007/api/auth/google/handler/frame
Then click “CREATE”.
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.
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