Hey Reader 👋🏽
Federated Authentication lets users sign in to your app using their existing accounts - most prominently Google!
This approach eliminates the need to create and remember new credentials (which most users are very happy for! ✨), improving user experience and likely increasing conversion rates. 📈
With OAuth 2.0 and Google as an identity provider, we can have secure authentication while Amazon Cognito handles identity management, user pools, and integration with other AWS services.
Using Cognito with Google authentication gives you the best of both worlds: Google’s widespread adoption and Cognito’s powerful identity management features, including user attributes, security policies, and AWS service integration.
We've built a small app powered by SST which showcases how easy it is to set this up! Apart from providing your Google OAuth client details and the name of your Cognito domain, you don’t need anything else to run a ready-to-use solution on your own account.
Let's go through the steps one-by-one!
Setting Up Google as a Federated Identity Provider
Before we start coding, we need to set up Google to use it as an identity provider for our application. Even if you’re new to authentication, this is quite simple to do.
What steps do we need to follow?
- Create a consent screen: This will be shown to the user on Google after they click the
Login with Google button.
- Create an OAuth Client: This client will be used to establish the connection between Cognito and Google. We will receive a client ID and a client secret.
- Add whitelisted redirect URLs: This is necessary to inform Google which targets it is allowed to redirect to.
Creating a Consent Screen
Before we can create an OAuth Client ID, we must set up our consent screen. This screen will appear when the user clicks the Google button to continue signing up.
We only need to provide a small amount of information here. This includes the name of our application, a support email that users can contact for issues, and a whitelisted domain.
Creating an OAuth Client
Next, we can move on to creating an OAuth Client.
Let’s choose Web Application and add http://localhost as a valid JavaScript origin.
Google needs to know where it is allowed to redirect, as these targets will receive the authorization code used to get a valid token for the logged-in user. In a nutshell: the user will be redirected to this URL after the authentication flow has finished.
When using the hosted UI version of Cognito, the URL will follow this pattern:
https://$POOL_DOMAIN.auth.$REGION.amazoncognito.com/oauth2/idpresponse
The $REGION will be the AWS region where we’ll deploy Cognito. In our example application, we’re using eu-west-1, but you can choose whichever region you prefer.
You can also choose the pool domain yourself. It needs to be globally unique, so pick something that’s unlikely to be taken.
Let’s finish the creation of the client.
After creating our client, we’ll receive a OAuth Client ID that should look like this: m9x[...]i9o.apps.googleusercontent.com
When clicking on our new client, you’ll also be able to get the secret for our client.
Don’t worry about copying both values right now. You can retrieve them later, even if you leave the page and return.
Amazon Cognito Setup
The manual setup is now complete. Let’s move on to AWS and create everything else using Infrastructure as Code with SST and Pulumi.
What do we need to create?
- Cognito User Pool: Holds and manages user identities, including registration and sign-in.
- User Pool Domain: Provides a unique URL for accessing Cognito’s hosted authentication UI.
- Google as an Identity Provider: Enables users to sign in with their Google accounts via OAuth.
- User Pool Client: Represents the application that will use the user pool for authentication, managing tokens and authentication flows.
- Next.js Frontend: A test application to interact with the authentication flow.
As you see, there are only a few AWS resources necessary - all of them are pay-as-you-go with a very generous free tier on the monthly active users at Cognito! 💸
If you're interested in the details, you can find the detailed description - including code snippets - at our full blog post. If you directly want to jump in, please check out the provided repository to deploy it straight into your own account! 🏗️ (Please don't forget to set your Google OAuth client details and your desired Cognito pool domain in the environment file! 😌)
Thanks for reading & enjoy playing around with this simple two-click sign-up and one-click sign-in method! 🔐
