Adding Google Sign In to your Web App with AWS Amplify

Hi Nader, thanks for the concise instructions. This is exactly the use case I had for a side project I made a few weeks ago. I had a problem, though, after I used amplify hosting add and deployed the app to CloudFront. I got my URL from CloudFront, and added it to the Google OAuth config alright, when I added the additional sign in and sign out URLs, the CLI added them to my aws-exports like this:
"redirectSignIn": "http://localhost:3000/,https://myurl.example.com/",. Then, after publishing, Cognito would send a redirectURI that consisted of that exact string (both URLs, separated by a comma), so it wouldn't work because it didn't match my actual URL. I was able to overcome this by making a config.js module that imports aws-exports, checks the URL for the current page and exports the config object with only that host in redirectSignIn/redirectSignOut, but I just wanted to mention it. I opened this issue on github about it: github.com/aws-amplify/amplify-cli...

This is the relevant code in the config.js that I'm using to solve:

const { host } = window.location;

if (awsmobile.oauth.redirectSignIn.includes(',')) {
  const filterHost = url => new URL(url).host === host;
  awsmobile.oauth.redirectSignIn = awsmobile.oauth.redirectSignIn
    .split(',')
    .filter(filterHost)
    .shift();
  awsmobile.oauth.redirectSignOut = awsmobile.oauth.redirectSignOut
    .split(',')
    .filter(filterHost)
    .shift();
}

Hi Nader, thanks for this tutorial it works great!

However when you log in with Google when you come back to your main page (localhost:3000) you can't retrieve user information unless you click the button "Check User". It's an issue because when you log in you may want automatically retrieve user information without clicking on a button.

Thanks in advance for your answer!

Would it work for angular as well? I could not find out much for angular in this regard.

Hi there, is it possibele to add google sign in to a react native app with aws amplify or awsmobile?

the point in the configuration where you enter google id and secret, i don't get that prompt at all. After I select "Google" the configuration completes. What could cause this?

Amazing how you did in 8 mins what hours and hours of reading AWS Documentation cannot do. Very nice.