AWS Cognito & Google Auth Part(2)
In this article, we will cover, how to configure your Cognito Hosted UI to have the social media signing, specifically the “Sign-In with Google”
If you didn’t configure the sign-up & sign-in using Cognito, then you should read AWS Cognito & Google Auth Part(1) first.
1- Open your Google Cloud Console, and create a new project.
2- Choose your project name and then click “Create”
3- Return to the home page, and make sure you are selecting the created project.
4- From the navigation menu -> API & Services -> OAuth consent screen
5- Select External, as we will not add any organization, then create it.
6- Enter the app information.
7- Add the developer contact information.
8- Let the rest of the steps as its default, by clicking “Save and Continue”
below are the working default configurations.
Then back to the dashboard.
9 -Create new credentials.
From the left navigation, navigate to Credentials.
Choose “OAuth client ID” as the OAuth is the standard protocol for integrating with Cognito.
10- Create OAuth client ID
From the application type, select web application, then enter your preferred name.
11- Add authorized redirect URIs
As we gonna integrate with AWS Cognito, So regarding this document from Amazon the redirect URI should exactly look like
https://yourDomainPrefix.auth.region.amazoncognito.com/oauth2/idpresponse
To get your domain name, go to Amazon Cognito -> User pools -> Select your user pool
According to my Cognito domain, the redirect URI will be
https://mysuprapp.auth.us-east-1.amazoncognito.com/oauth2/idpresponse
12- Save OAuth client info
After creating the credentials, a pop-up will show up with the client info, download the info as you will need it in a moment in Cognito.
Now the Google console API configurations are done, let’s go back to Cognito.
13- Go to AWS Cognito -> User Pools -> Select your user pool -> navigate to Sign-in experience tab
In the “Federated identity provider sign-in” section -> Add identity provider.
14- Select Google identity provider.
15- Enter the Google client info, you can find this info retrieved in step#12 previously.
16- Add authorized scopes “openid profile email”
You can read more about the authorized scopes in the OAuth documentation.
17- Map attributes between Google and your user pool
Do you remember the required attributes which added in part(1) in step#5?
Yes, exactly, here you will just need to map them to the Google attributes.
Usually, it’s pretty straightforward, you will nearly match the same names as the following.
After creating, you should find a new identity provider added called “Google” in the “Federated identity provider sign-in” section.
18- Add Google identity provider to the Hosted UI
Go to Cognito -> User pools -> Select your user pool -> Scroll down and select your app client -> scroll down to the Hosted UI section -> Click Edit
Select the google identity provider from the “Identity providers” dropdown.
It should look like the image below after selecting it.
Then save the changes.
19- Test Google auth.
Open the login page from the Hosted UI section “View Hosted UI”
Before opening it, just make sure that Google appears in the identity providers.
20- The magic happens and the “Continue with Google” finally appears in our form.
By clicking the “Continue with Google” it will redirect you to Google’s Sign-In form to enter your Google account email and password.
Then it will redirect you to our redirect URL which is “https://jwt.io”
To validate that the user is added to our Cognito users database.
Go to Cognito -> User Pools -> Select your user pool -> Scroll down to “Users” section.
You should find the user added to the users.
References:
Hope this article helped you to integrate your AWS Cognito with Google identity provider.
