loading...
AWS profile image AWS

Adding Google Sign In to your Web App with AWS Amplify

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 (4)
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: aws.amazon.com/developer/community/evangelists.
markdown 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!

 

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.

Classic DEV Post from Apr 30 '19

Who's looking for open source contributors? (April 30th edition)

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