The way around this is to use Google as an OpenID authentication provider for your user pool in Cognito.
First, configure Google as a federated Identity provider for AWS.
Most tutorials for adding Google as a federated identity provider will take you through the initial steps. You can refer to this medium article or this AWS blog post to set up Google as a federated identity provider in AWS. This youtube video explains the steps for that as well.
The most important thing is that you get the app client Id and secret from the google console.
Next you need to configure Google as an OpenID connect provider in the AWS IAM service.
- In AWS service, Go to the IAM console.
- Choose "Identity providers" from the navigation menu.
- Click the "Create provider" button.
- Choose "OpenID Connect" as the provider type.
- In the provider URL write
https://accounts.google.com
- In the "audience", enter the
client ID obtained from Google developer console for your app.
Finally set up google as an openID authentication provider for your user pool.
- In the AWS console, search for cognito service.
- Choose "Federated Identities" from the navigation menu.
- Choose the identity you want to configure or create a new one.
- Click "edit Identity pool"
- Under Authentication providers, choose
OpenId
- Enable Google as an identity provider.
- After configuring save your changes.
I am using react for my project. Make sure to add the identity_pool_id of your user pool in your AWS configuration object on the front end.
Here is the code written in react for your sign in page. You can customize the UI to your liking. Refer to google identity documentation on how to configure the UI and authentication flow.
import { Auth } from "aws-amplify";
import jwt from "jsonwebtoken";
import {useEffect} from "react";
const SignInPage = ()=> {
useEffect(()=>{
//TODO: You can check using Auth.currentAuthenticatedUser() to navigate to another page if a user is already logged in
if (!window.google) createGoogleScript();
},[]);
return (
<>
<form>
{/* google will render its sign-in button in this div below */}
<div id="buttonDiv"> google div</div>
{ /*you can have a form here for signing in the user with email and password */}
</form>
</>
)
}
const decodeJWTResponse = (jwtToken) => {
return jwt.decode(jwtToken);
};
const getAWSCredentials = async (googleResponse) => {
const googleUser = decodeJWTResponse(googleResponse.credential);
let user = {
email: googleUser.email,
name: googleUser.name,
};
try {
const credentials = await Auth.federatedSignIn("google", { token: googleResponse.credential, expires_at: googleUser.exp }, user);
console.log("credentials from federated sign in ", JSON.stringify(credentials));
//TODO: You can navigate away if you want to, user object will now be available on Auth library
} catch (err) {
alert(err);
}
};
const createGoogleScript = () => {
// load the Google SDK
const script = document.createElement("script");
script.src = "https://accounts.google.com/gsi/client";
script.async = true;
script.onload = function () {
window.google.accounts.id.initialize({
client_id: YOUR_APP_CLIENT_ID_IN_GOOGLE_CONSOLE,
callback: (result) => {
getAWSCredentials(result);
},
});
window.google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
window.google.accounts.id.prompt();
};
document.body.appendChild(script);
};
Please note that the User object returned from cognito library with this setup is slightly different from the one you get through the regular sign-in methods so you may have to re-write some of the logic to extract the user information and tokens.
