This article is based on the Cruddur app used in Andrew Brown's AWS Cloud Project Bootcamp.
I have implemented a solution that may not be perfect, but it serves its purpose. If you have any suggestions or encounter any issues, let me know.
Setup Google Auth Provider
Go to Google developer console and click on Select a project
To begin, click on the New Project button and provide a name for your project. Then, select Create to create the project. After the project is created, navigate to APIs & Services from the left-hand side menu. From there, select Credentials.
Select Configure Consent Screen. Then, click on Create.
To set up the consent screen, provide the necessary details for the App Information and Developer Contact Information fields, then select Save and Continue three times (OAuth consent screen -> Scopes -> Test Users). After that, click on the Credentials tab from the left-hand menu. To create your OAuth 2.0 credentials, choose OAuth client ID from the Create credentials dropdown menu.
To create your OAuth client, choose Web application as the application type and provide a name for your client. Then, select Create. Make sure to take note of Your client ID and Your Client Secret as you will need them for the next section. Finally, choose OK.
Add a social IdP to your user pool
To configure Google as your social IdP, first navigate to the Amazon Cognito console and select User Pools. Choose the cruddur-user-pool user pool from the list, and then click on the Sign-in experience tab. Under Federated sign-in, select Add an identity provider. From the list of options, choose Google and enter the app client ID and app client secret generated in the previous section. Finally, add the required authorized scopes as given below.
Map attributes from your IdP to your user pool.
|User pool attribute||Google attribute|
To add an identity provider, select Add identity provider. Then, from the App client integration tab, choose App client from the list and select Edit hosted UI settings.
For now, add one URL
http://localhost:3000 for the Allowed callback URLs and the Allowed sign-out URLs (optional).
Select Google from the Identity providers menu.
Make sure to set the OAuth 2.0 grant types to Implicit Grant. This specifies that the client should directly receive the access token (and optionally, the ID token based on scopes).
There is a recommended option to use the authorization code, but in order to do so, we will need to implement Proof Key for Code Exchange (PKCE) in the backend, which will complicate things. Therefore, for now, stick with the option of sending the token directly to the client (Implicit grant).
- From the OpenID Connect scopes menu, select OpenID and then aws.cognito.signin.user.admin, Email, and Profile.
- Choose Save changes.
Note that we need to select aws.cognito.signin.user.admin for Sign Out to work. This scope is used to allow the user to sign out of their session from all devices. For more information, see this Stack Overflow post.
Although we have enabled Hosted UI, we won't be using it in our project. Hosted UI needs to be enabled for social IDP login to work. For more information, see Adding social identity providers to a user pool.
Add Cognito Domain to Google Developer Console
Go to the Google developer console. From the left navigation bar, choose Credentials.
Select the client you created in the first step and click the edit button.
In the Authorized redirect URIs field, enter your user pool domain with the
Click Save to save your changes.
Note: If you see an error message that says "Invalid Redirect: domain must be added to the authorized domains list before submitting" when adding the endpoint, please go to the authorized domains list and add the domain. More info: Social sign-in (OAuth)
Test your social IdP configuration
Go back to the cruddur-user-pool console and, from the Domain menu under the Actions dropdown, select Create Cognito domain.
Enter a unique domain prefix.
To view the Hosted UI, update the URL given below with your credentials and use it to access the Hosted UI authentication page:
<your_user_pool_domain>with the domain URL you just created
<your_client_id>with the Client ID of your user pool app
This is the page that will be displayed when you visit this URL.
Try signing in using this button. If you encounter any errors, make sure you followed all the previous steps correctly.
After a successful sign-up, you will be redirected to localhost:3000, and since nothing is running on port 3000, you will see a This site can't be reached error. Don't worry; we will fix this later.
Add this environment variable to the
docker-compose.yml file under the frontend service:
frontend-react-js/src/App.js file with the following changes:
⚠️ Note: Make sure that the user pool domain does not have a HTTPS prefix.
Automatically set redirect URLs in cognito
Remember the step where we added localhost:3000 to the Allowed callback URLs and Allowed sign-out URLs - optional
We need the redirect URL in Cognito Hosted UI settings to be the same as our frontend URL. To achieve this, create a
/bin folder inside
bin folder, create a bash script called
auto-redirect to automatically update the URL whenever we open up a workspace in Gitpod. Add this command:
Ensure that you make the script executable by running
chmod u+x ./frontend-react-js/bin/auto-redirect from the root folder.
Run this command from terminal and verify if you get a valid response and if changes have been made in cruddur-user-pool → App Integration → Select App client → Hosted UI
The Hosted UI status should be Available.
Add this line to the
.gitpod.yml file to enable the
auto-redirect script to run automatically when starting a new workspace:
Adding Google Sign In button
Add the following CSS to
Add the JSX code just below the closing tag of the form in
This will create a 'Sign in with Google' button.
Collect Access Token
Add this code to
Update React.useEffect to this:
Make sure the parameters in lambda trigger code is passed as List/tuples instead of using the unpacking operator otherwise you might run into some issues.
Change the order of
localStorage.removeItem to the first code that’s executed inside the signOut function in
I had issues with logout when
localStorage.remove remove was called after
docker compose up to start the application. Click the "Sign in with Google" button to open the Google sign-in page. After signing in, you will be redirected back to the frontend.
- Cognito User Pools with Social Identity Providers
- Integrating Social Media to your App with AWS Cognito
- The Complete Guide to User Authentication with the Amplify Framework
- Amplify Authentication documentation
- Cognito User Pools App Integration
- Using Tokens with User Pools
- Cognito client is not enabled for OAuth2.0 flows
- How to Access Tokens on Successful Auth SignIn