AWS Cognito & Google Auth Part(1)
Are you migrating to AWS Cognito besides adding a social media signing?
So, this article is written for you!!
As it could be a long article, it will be split into two parts.
AWS Cognito & Google Auth Part(1)
AWS Cognito & Google Auth Part(2)
By end of the two articles, you will be able to:
- Register manually by filling in a registration form.
- Register via social media account (article will cover SignIn with Google)
- Verification Email for the first time.
- Login via username & password.
- Login via Google account.
- Database for all the registered users with some info about them.
- Generating JWT token to secure your APIs
1- Open your AWS account, and search for Cognito.
2- Create a new user pool
3- Configure sign-in experience
Check the “Cognito user pool”, to enable the sign-up and sign-in manually using email & password.
From the “Cognito user pool sign-in options” -> Select the “Email” attribute, this will allow the user to register by email.
The main purpose of using the email attribute is to send a verification email later.
4- Configure security requirements
Let all the default configurations, just change the Multi-factor authentication to None.
It’s recommended to use the MFA, however, we need to make the example less complex.
5- Configure sign-up experience
As before, keep everything as it is, and add more required attributes based on your preferences, just make sure of them as you can’t change them later.
These attributes are used mainly on the registered page, Therefore any newly registered user will have to fill in all the required fields.
Also, you will see all those listed attributes in the database later.
Lastly, these attributes will also be fetched from your social media integrated account, in this article, we will use a Google account, so we will fetch all these attributes from our Google account.
6- Configure message delivery
Select “Send email with Cognito”, this will allow Cognito to send the verification email by itself.
Although, this is not recommended as Cognito has a hard limit of sending up to 50 emails a day, for the sake of simplicity we will use it.
7- Integrate your app
Choose your preferred user pool name, just be aware that the user pool names can’t be changed once the user pool is created.
Select the “Use the Cognito Hosted UI” option, as this will provide you a UI page for sign-up and sign-in besides adding the social media accounts such as “Sign-In with Google” as you will see later.
Enter a Cognito domain, this domain will be the URL domain for your Hosted UI.
Here I’ve chosen “mysuperapp” this will be translated later in the Hosted UI as the following “https://mysuperapp.{region}.amazoncognito.com/”
Select “Public client” and enter the “App client name”, the client which will be used later with the configured Hosted UI.
Don’t forget to check the “Generate a client secret” option, to generate a client secret as this will be used for configuring the Google account in the Hosted UI.
Enter the allowed callback URLs, this callback is where Cognito will redirect the user to it after the sign-in success.
We will use here “https://jwt.io”, you can redirect to your frontend application such as “http://localhost:4200/auth”, but as here we don’t have a frontend app, therefore we will the “https://jwt.io” to be our frontend app.
8- Review and create your user pool.
After creating our user pool, we will need to do just more one step before registering our first user.
9- Configure the Hosted UI to not use the authorization code flow.
Go to your user pool
Navigate to “App integration”
Scroll down and select your client.
Edit the Hosted UI section,
Change the “OAuth 2.0 grant types” by un-select the “Authorization code grant” and select the “Implicit grant”
Just be aware that the recommended is to use the authorization code flow, but it’s a little complex, sign-in will make Cognito redirect you with a “Code” this code should be exchanged for a token.
While the implicit grant will allow Cognito to redirect and return the token in the URL without the extra step of exchanging the code.
In case live it’s a live app, don’t forget to change it to authorization code flow and handle the extra step for more security.
Register our first user.
Go to your client Hosted UI, click the “View Hosted UI”
Do you remember the entered Domain in step#7? you will find it in the opened URL Because I’ve chosen “mysuperapp” ,So my Hosted UI as the following “https://mysuperapp.{region}.amazoncognito.com/”
It should look like
Click “Sign up” to register as a new user.
Do you remember the required fields from step#5? you should find them all in the registration form.
By clicking the “Sign up” button, Cognito will send you a verification email with a verification code.
Then will redirect you to the verification form to confirm your account.
Do you remember the redirect callback URLs from step#7? by confirming the account, Cognito will redirect you to the callback URL you have entered previously.
Here, I’ve redirected to “https://jwt.io/” as it was my redirect callback URL.
Do you remember the implicit grant and code grant from step#9? by looking at the redirect URL which looks like “https://jwt.io/#id_token=####&access_token=####&expires_in=3600&token_type=Bearer”
I think you know why this is not recommended in the live applications as it exposed all the token info in the URL.
Now let’s have a look at the users’ database.
Go to the user pools, Navigate to your user pool, and Scroll down, you should find the registered user before with a confirmation status “Confirmed”.
In this simple table, you as an admin can create a new user, delete an existing user, and update user info such as changing the user email verified status.
You also, will view all the pending confirmation users, and confirm them without doing that through the confirmation view and the confirmation code.
Congratulation! You Did It!
The next part will continue where this article ends, to integrate with Google auth for having the ability to sign-up with Google and sign-in with Google.
References:
Hope this article helped you to know more about AWS Cognito and its integration process.
See you in part(2)…
