DEV Community

farzana-juthi for AWS Community Builders

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  {
    "id_token": "",
    "access_token": "",
    "refresh_token": "",
    "expires_in": "",
    "token_type": ""
  }

Enter fullscreen mode Exit fullscreen mode
  {
   "access_token":"Here you have to pass access token "
  }

Enter fullscreen mode Exit fullscreen mode

Top comments (0)