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