How to integrate gmail configured Backend APIs into frontend

If you are new and don't know how to integrate gmail with cognito, then follow this tutorial.
Now you can use cognito and created APIs on your frontend side.

To start implementing it into code, check the flow from the diagram:

• First make the url which will be used in Sign In with gmail button.

    <domain_url>/oauth2/authorize?identity_provider=Google&redirect_uri=<frontend_redirect_url>&response_type=CODE&client_id=<cognito_client_id>&scope=email openid profile aws.cognito.signin.user.admin

• Change curly bracket variables value like following
  • domain_url: https://learning-auth-auth-stack-dev.auth.us-west-2.amazoncognito.com
  • frontend_redirect_url: Remember this url is very important. It is used in cognito side as UserPoolClientCallBackUrlDevAndProd. If this url not match then you will get redirect mismatch error. Here my redirect url is http://localhost:4200/dashboard/
  • cognito_client_id: Just check nested stack output from aws console and variable name is NestedCognitoUserPoolClientId. Here my client id is 7vfokrcbq7tc7s3u35qhj2054h

    Example: https://learning-auth-auth-stack-dev.auth.us-west-2.amazoncognito.com/oauth2/authorize?identity_provider=Google&redirect_uri=http://localhost:4200/dashboard/&response_type=CODE&client_id=7vfokrcbq7tc7s3u35qhj2054h&scope=email openid profile aws.cognito.signin.user.admin

• Then this url will take you to google sign in page. Here you have to give your sign in email and password. If google verifies that credentials are right then it will redirect your to your application with a code.

    Example: http://localhost:4200/dashboard?code=09266419-d8b9-4005-8830-3bc57255c802

• After that you have to call internally another url with following information to get tokens information.

  • This will be a post method. Parameters need to pass along with the url are:
    • Method: POST
    • URL: /oauth2/token
    • Example: https://learning-auth-auth-stack-dev.auth.us-west-2.amazoncognito.com/oauth2/token
    • Parameters: {
      • grant_type: "authorization_code",
      • client_id: "Here you have to pass cognito_client_id what you have given into first step",
      • code: "Code you have got into the last step",
      • redirect_uri: "Here you have to give redirected url what you have given into first step" }
    • Example: {
      • grant_type: "authorization_code",
      • client_id: "7vfokrcbq7tc7s3u35qhj2054h",
      • code: "09266419-d8b9-4005-8830-3bc57255c802",
      • redirect_uri: "http://localhost:4200/dashboard/" }

• Then you can get social sign in related data by calling following API

  • Method: POST
  • URL: https://
  • Example: https://joc4u21r8e.execute-api.us-west-2.amazonaws.com/dev/auth/authentication/social-signin
    • API base url: https://joc4u21r8e.execute-api.us-west-2.amazonaws.com/dev
    • Path: /auth/authentication/social-signin
    • Parameter: { "id_token": "", "access_token": "", "refresh_token": "", "expires_in": "", "token_type": "" }

  {
    "id_token": "",
    "access_token": "",
    "refresh_token": "",
    "expires_in": "",
    "token_type": ""
  }

• If you want to log-out, then you have to call logout API

  • Method: POST
  • URL: <base_url><path>
  • Example: https://joc4u21r8e.execute-api.us-west-2.amazonaws.com/dev/auth/authentication/social-signin
  • API base url: https://joc4u21r8e.execute-api.us-west-2.amazonaws.com/dev
  • Path: /auth/authentication/global-logout
  • Parameter: {"access_token": ""}

  {
   "access_token":"Here you have to pass access token "
  }