
This article is based on the Cruddur app used in [Andrew Brown's](https://www.exampro.co/) 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](https://console.developers.google.com/) and click on **Select a project**

<Image
  className="mx-auto rounded shadow"
  alt={`select-project`}
  src={`/images/cruddur-google-idp/1-select-project.png`}
  width={886}
  height={386}
/>

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**.

<Image
  className="rounded shadow mx-auto"
  alt={`api-creds`}
  src={`/images/cruddur-google-idp/2-api-creds.png`}
  width={579}
  height={365}
/>

Select **Configure Consent Screen**. Then, click on **Create**.

<Image
  className="rounded shadow mx-auto"
  alt={`click-create`}
  src={`/images/cruddur-google-idp/4-click-create.png`}
  width={993}
  height={602}
/>

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.

<Image
  className="rounded shadow mx-auto"
  alt={`oauth-creds`}
  src={`/images/cruddur-google-idp/7-oauth-creds.png`}
  width={955}
  height={407}
/>

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](https://console.aws.amazon.com/cognito/home) 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.

<Prism withLineNumbers language="text" className="not-prose my-3">
{`
profile email openid
`}
</Prism>

Map attributes from your IdP to your user pool.

<Image
  className="rounded shadow mx-auto"
  alt={`Map attributes`}
  src={`/images/cruddur-google-idp/6-attributes.png`}
  width={885}
  height={441}
/>

| User pool attribute | Google attribute |
| ------------------- | ---------------- |
| email               | email            |
| name                | name             |
| preferred_username  | given_name       |
| username            | sub              |

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**.

<Image
  className="rounded shadow mx-auto"
  alt={`Hosted UI`}
  src={`/images/cruddur-google-idp/9-edit-hosted-ui.png`}
  width={845}
  height={412}
/>

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).

<Image
  className="rounded shadow mx-auto"
  alt={`Implicit auth`}
  src={`/images/cruddur-google-idp/10-implicit-auth.png`}
  width={752}
  height={202}
/>

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](https://stackoverflow.com/questions/53149091/what-does-the-aws-cognito-signin-user-admin-scope-mean-in-amazon-cognito).

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](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html).

## Add Cognito Domain to Google Developer Console

Go to the [Google developer console](https://console.developers.google.com/). From the left navigation bar, choose **Credentials**.

Select the client you created in the first step and click the edit button.

<Image
  className="rounded shadow mx-auto"
  alt={`add-domain-oauth`}
  src={`/images/cruddur-google-idp/11-add-domain-oauth.png`}
  width={943}
  height={325}
/>

In the **Authorized JavaScript origins** field, enter your user pool domain.

In the **Authorized redirect URIs** field, enter your user pool domain with the `/oauth2/idpresponse` endpoint.

<Image
  className="rounded shadow mx-auto"
  alt={`add-url-google`}
  src={`/images/cruddur-google-idp/12-add-uri-google.png`}
  width={812}
  height={631}
/>

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)](https://docs.amplify.aws/lib/auth/social/q/platform/js/#configure-auth-category)

## 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.**

<Image
  className="rounded shadow mx-auto"
  alt={`Create Domain`}
  src={`/images/cruddur-google-idp/13-domain.png`}
  width={763}
  height={331}
/>

Enter a unique domain prefix.

<Image
  className="rounded shadow mx-auto"
  alt={`Unique Domain`}
  src={`/images/cruddur-google-idp/14-unique-domain.png`}
  width={777}
  height={299}
/>

To view the Hosted UI, update the URL given below with your credentials and use it to access the Hosted UI authentication page:

- Replace `<your_user_pool_domain>` with the domain URL you just created
- Replace `<your_client_id>` with the Client ID of your user pool app

<Prism withLineNumbers language="text" className="not-prose my-3">
  {`
https://<your_user_pool_domain>/login?response_type=token&client_id=<your_client_id>&redirect_uri=http://localhost:3000
`}
</Prism>

This is the page that will be displayed when you visit this URL.

<Image
  className="rounded shadow mx-auto"
  alt={`Hosted UI Google Button`}
  src={`/images/cruddur-google-idp/15-hosted-ui-google.png`}
  width={854}
  height={414}
/>

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.

## Update `App.js`

Add this environment variable to the `docker-compose.yml` file under the frontend service:

<Prism withLineNumbers language="text" className="not-prose my-3">
{`
REACT_APP_FRONTEND_URL: "https://3000-\${GITPOD_WORKSPACE_ID}.\${GITPOD_WORKSPACE_CLUSTER_HOST}";
`}
</Prism>

Update the `frontend-react-js/src/App.js` file with the following changes:

<Prism withLineNumbers language="jsx" className="not-prose my-3">
  {`
Amplify.configure({
  AWS_PROJECT_REGION: process.env.REACT_APP_AWS_PROJECT_REGION,
  aws_cognito_region: process.env.REACT_APP_AWS_COGNITO_REGION,
  aws_user_pools_id: process.env.REACT_APP_AWS_USER_POOLS_ID,
  aws_user_pools_web_client_id: process.env.REACT_APP_CLIENT_ID,
  oauth: {
    domain: "<your_user_pool_domain_without_http>",
    scope: ["email", "profile", "openid", "aws.cognito.signin.user.admin"],
    redirectSignIn: process.env.REACT_APP_FRONTEND_URL,
    redirectSignOut: process.env.REACT_APP_FRONTEND_URL,
    responseType: "token", // or 'token', note that REFRESH token will only be generated when the responseType is code
  },

  Auth: {
    // We are not using an Identity Pool
    // identityPoolId: process.env.REACT_APP_IDENTITY_POOL_ID, // REQUIRED - Amazon Cognito Identity Pool ID
    region: process.env.REACT_APP_AWS_PROJECT_REGION, // REQUIRED - Amazon Cognito Region
    userPoolId: process.env.REACT_APP_AWS_USER_POOLS_ID, // OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: process.env.REACT_APP_CLIENT_ID, // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
  },
});
`}
</Prism>


⚠️ 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 `frontend-react-js`.

Inside the `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:

<Prism withLineNumbers language="bash" className="not-prose my-3">
  {`
#! /usr/bin/bash

aws cognito-idp update-user-pool-client \\
--user-pool-id $AWS_USER_POOLS_ID \\
--client-id $CLIENT_ID \\
--callback-urls https://3000-$GITPOD_WORKSPACE_ID.$GITPOD_WORKSPACE_CLUSTER_HOST \\
--logout-urls https://3000-$GITPOD_WORKSPACE_ID.$GITPOD_WORKSPACE_CLUSTER_HOST \\
--supported-identity-providers Google \\
--allowed-o-auth-flows-user-pool-client \\
--allowed-o-auth-flows implicit \\
--allowed-o-auth-scopes {email,openid,profile,aws.cognito.signin.user.admin}
`}
</Prism>

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**.

<Image
  className="rounded shadow mx-auto"
  alt={`Hosted UI Available`}
  src={`/images/cruddur-google-idp/16-hosted-ui-available.png`}
  width={1021}
  height={518}
/>

Add this line to the `.gitpod.yml` file to enable the `auto-redirect` script to run automatically when starting a new workspace:

<Prism withLineNumbers language="yaml" className="not-prose my-3">
{`
source "$THEIA_WORKSPACE_ROOT/frontend-react-js/bin/auto-redirect"
`}
</Prism>

## Adding Google Sign In button

Add the following CSS to `SigninPage.css`

<Prism withLineNumbers language="css" className="not-prose my-3">
{`
@import url(https://fonts.googleapis.com/css?family=Roboto:500);
.google-btn {
  cursor: pointer;
  width: 184px;
  height: 42px;
  background-color: #4285f4;
  border-radius: 2px;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
}
.google-btn .google-icon-wrapper {
  position: absolute;
  margin-top: 1px;
  margin-left: 1px;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  background-color: #fff;
}
.google-btn .google-icon {
  position: absolute;
  margin-top: 11px;
  margin-left: 11px;
  width: 18px;
  height: 18px;
}
.google-btn .btn-text {
  cursor: pointer;
  float: right;
  margin: 11px 11px 0 0;
  background-color: transparent;
  border: none;
  font-size: 14px;
  letter-spacing: 0.2px;
  font-family: "Roboto";
}
.google-btn:hover {
  box-shadow: 0 0 6px #4285f4;
}
.google-btn:active {
  background: #1669f2;
}
.center-a-div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
`}
</Prism>

Add the JSX code just below the closing tag of the form in `pages/SigninPage.js`

<Prism withLineNumbers language="jsx" className="not-prose my-3">
{`
<div className="center-a-div">
  <div className="google-btn" onClick={() => Auth.federatedSignIn({ provider: 'Google' })}>
    <div className="google-icon-wrapper">
      <img className="google-icon" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" />
    </div>
    <p class="btn-text"><b>Sign in with google</b></p>
  </div>
</div>
`}
</Prism>

This will create a 'Sign in with Google' button.

<Image
  className="rounded shadow mx-auto"
  alt={`Google Login Button`}
  src={`/images/cruddur-google-idp/17-login-page-gbutton.png`}
  width={1021}
  height={518}
/>

## Collect Access Token

Add this code to `pages/HomeFeedPage.js`

<Prism withLineNumbers language="jsx" className="not-prose my-3">
{`
const getIdToken = async () => {
  Auth.currentSession().then((res) => {
    let accessToken = res.getAccessToken();

    localStorage.setItem("access_token", accessToken.jwtToken);

    loadData();
    checkAuth();
  });
};
`}
</Prism>

Update React.useEffect to this:

<Prism withLineNumbers language="jsx" className="not-prose my-3">
{`
React.useEffect(() => {
  //prevents double call
  if (dataFetchedRef.current) return;
  dataFetchedRef.current = true;

  getIdToken();
}, []);
`}
</Prism>

## Final Steps

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.

<Prism withLineNumbers language="python" className="not-prose my-3">
{`
cur.execute(sql, parameters)
`}
</Prism>

Change the order of `localStorage.removeItem` to the first code that’s executed inside the signOut function in `components/ProfileInfo.js`.

<Prism withLineNumbers language="yaml" className="not-prose my-3">
{`
const signOut = async () => {
  try {
    localStorage.removeItem("access_token");
    await Auth.signOut({ global: true });
    window.location.href = "/";
  } catch (error) {
    console.log("error signing out: ", error);
  }
};
`}
</Prism>

I had issues with logout when `localStorage.remove` remove was called after `Auth.signOut`

Finally, run `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.

<Image
  className="rounded shadow mx-auto"
  alt={`working gif`}
  src={`/images/cruddur-google-idp/google-idp.gif`}
  width={880}
  height={467}
/>

#### Reference:

<div className="text-sm">
- [Cognito User Pools with Social Identity Providers](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html)
- [Integrating Social Media to your App with AWS Cognito](https://medium.com/wolox/integrating-social-media-to-your-app-with-aws-cognito-8943329aa89b)
- [The Complete Guide to User Authentication with the Amplify Framework](https://dev.to/dabit3/the-complete-guide-to-user-authentication-with-the-amplify-framework-2inh)
- [Amplify Authentication documentation](https://docs.amplify.aws/lib/auth/start/q/platform/js/)
- [Cognito User Pools App Integration](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-app-integration.html)
- [Using Tokens with User Pools](https://docs.aws.amazon.com/cognito/latest/developerguide/token-endpoint.html)
- [Cognito client is not enabled for OAuth2.0 flows](https://stackoverflow.com/questions/60209402/cognito-client-is-not-enabled-for-oauth2-0-flows)
- [How to Access Tokens on Successful Auth SignIn](https://stackoverflow.com/questions/48777321/aws-amplify-authentication-how-to-access-tokens-on-successful-auth-signin)
</div>

Step-by-step guide on integrating Google IdP with AWS Cognito