Adding Google Sign In to your Web App with AWS Amplify

In this 8 minute video, you'll learn how to create a new Google app ID, create an authentication service with AWS Amplify, and enable sign in with Google in a web application.

Whether you're using React, Vue, or Angular, this guide will get you up and running in just a few minutes.

Comments

[Philip Damra]

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();
}

[sMesle]

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!

[jimingeorge]

HI @smesle , I too am facing the exact problem. Where you able to find a fix to this?

[sMesle]

You need to add a listen event, it's a bit tricky but i follow the docs here : docs.amplify.aws/lib/auth/social/q...
I think it should fix your issue

[jimingeorge]

thanks a bunch @smesle . It worked all of a sudden today.. :D

[Praneet Nadkar]

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

[Nader Dabit]

Yes, everything in this video will work the exact same way with Angular or Vue as well.

[hoocem]

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

[rajugurung]

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?

[Rori Stumpf]

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