How to integrate gmail with cognito as social authentication (using SAM, python)
Published: 2023-03-14 06:48:14

In this application, we will learn how to configure google app into AWS cognito. 

### Installation
- First, you have to install aws sam cli into your machine. 
- Then configure aws cli.

**If you don't have CLI installed and configured into your local machine please follow prerequisite steps from this** [link](https://medium.com/@farzanajuthi08/how-to-make-an-application-using-serverless-application-model-sam-and-python-937415d38a44)

### Local Development

- After installation is done, you have to pull the code from git repository [(HTTPS link)](https://github.com/farzana-juthi/authentication.git)
- Then go to the project directory by using the following command:
  ```
    cd <your folder name>
    example: cd authentication
  ```
- Then open **template.yaml** file and change following **(15-20) lines** with appropriate data:
  - In line 15 (variable **CallBackUrlUserPoolClient**), you have to provide the url where google will be redirected after verifying user credential into google side. You can add multiple urls by comma separation. 
  - In line 16 (variable **LogOutUrlUserPoolClient**), you have to provide the url where cognito will be redirected after logout. You can add multiple url by comma separation.
  - In line 17 (variable **FIDGoogleClientId**), you have to give client id of google app. See [How to configure google app](https://medium.com/@farzanajuthi08/how-to-set-up-google-app-and-configure-amazon-cognito-for-social-sign-in-6844bc9bf605)
  - In line 18 (variable **FIDGoogleClientSecret**), you have to give secret client id of google app.
  ```
  Example:
    "CallBackUrlUserPoolClient": "http://localhost:4200/dashboard/" 
    "LogOutUrlUserPoolClient": "http://localhost:4200/login/" 
    "FIDGoogleClientId": "816187719480-26d52o4pnfe789ivkjqdm0jqakk19m38.apps.googleusercontent.com" 
    "FIDGoogleClientSecret": "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" 
  ```
- Then give a project name into line 27. Here you have to set the value of the **ProjectName** parameter. Remember this data will be used to make domain name and domain name need to be unique.
  **You must change this value**

- Then open terminal in root folder of this project and run following command:
  ```
    sam build
  ```
- If you deploy first time, then you have to run following command:
  ```
    sam deploy --guided --capabilities CAPABILITY_IAM CAPABILITY_AUTO_EXPAND
  ```
  If you want to run this command with your predefined profile then command will be 
  ```
    sam deploy --guided --profile <your_profile_name_without_this_bracket> --capabilities CAPABILITY_IAM CAPABILITY_AUTO_EXPAND
  ```
- After running the previous command, you will see that you have to set a stack name. Please give a unique stack name.

  <img width="549" alt="step-1" src="https://user-images.githubusercontent.com/63281366/191643954-a022339c-cf22-4559-ac5b-3b24e87a671e.png">
  
  For example: I am giving stack name as **auth-app**.
  
  <img width="553" alt="step-2" src="https://user-images.githubusercontent.com/63281366/191644054-6166326d-dc32-42e6-88e8-6d9c2c40607d.png">


- Then click enter one after another until **SAM configuration environment** variable set to default value.
  
  <img width="766" alt="enter-untill-this" src="https://user-images.githubusercontent.com/63281366/191644374-499f5dd4-b120-46bd-8e3f-5183c37bb43b.png">

  
- Then wait for the successful creation of cloudformation stack. 
- If you want to deploy after changes, then you need to build it first and run only deploy command like following:
  <img width="797" alt="output" src="https://user-images.githubusercontent.com/63281366/191654084-49cf256a-cb47-45ab-ace3-79b68ba31853.png">
 ```
    sam build
    sam deploy
  ```
- After successful deployment you will get some output. Save those for further implementation:
  
  <img width="737" alt="output" src="https://user-images.githubusercontent.com/63281366/191655785-6eb81fd5-0d4d-4fbb-9dc0-46669c4ba12d.png">

  >
  >  **DomainURL**: It's value will be used as **domain_url** in frontend side
  >  **CognitoAppClientID**: It's value will be used as **cognito_client_id** in frontend side
  >  **RootAPI**: It's value will be used as **base_url** in frontend side
  
**Update Google APP** - Authorized JavaScript origins and Authorized redirect URIs
- You must have to follow step 11 of this [link](https://medium.com/@farzanajuthi08/how-to-set-up-google-app-and-configure-amazon-cognito-for-social-sign-in-6844bc9bf605)