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:

auth_implementation_flow

  • 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

      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: <domain_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

    {
      "id_token": "",
      "access_token": "",
      "refresh_token": "",
      "expires_in": "",
      "token_type": ""
    }
    {
     "access_token":"Here you have to pass access token "
    }