loading...
Play Button Pause Button
AWS

Adding Google Sign In to your Web App with AWS Amplify

dabit3 profile image Nader Dabit ・1 min read

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.

AWS

Articles written by current and past AWS Developer Advocates to help people interested in building on AWS. Opinions are each author's own.

Discussion

pic
Editor guide
 

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!

 

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

 

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

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

 

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

 

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

 

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.