Skip to content
AWS profile image AWS

Adding Google Sign In to your Web App with AWS Amplify

dabit3 profile image Nader Dabit twitter logo github logo ・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.

twitter logo DISCUSS (10)
Are you a developer, architect, or community member interested in the cloud? The AWS Developer Relations team loves teaching about AWS and programming for customers of any background:
markdown guide

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 :
I think it should fix your issue

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


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/,",. 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:

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
  awsmobile.oauth.redirectSignOut = awsmobile.oauth.redirectSignOut

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.

Classic DEV Post from Aug 4 '19

You're not worth hiring unless...

AWS profile image
The AWS Developer Relations team helps customers on AWS.