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: <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
Method: POST
URL: https://<base_url>
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 "
}