Issue with Google Sign-In in React App deployed to AWS ALB load balancer

[doaafarouk]

I've a React app, using react-oauth/google, deployed to AWS EC2 ALB Load balancer. The sign-in with google feature was working perfectly well on dev localhost:3000

Now when deployed to AWS EC2, it shows this error message, and the sign-in popup is blank: [GSI_LOGGER]: The given origin is not allowed for the given client ID.

In the Google API Console, i registered the OAuth client ID for the EC2 instance as follows:

• Create Credentials - OAuth Client ID - Web applications
• In Authorized Javascript Origins, i added the url for the EC2 lb instance: http://k8s-default-awsingre-xxxx-xxxx.us-east-2.elb.amazonaws.com
• I also added above url in the Authorized Redirect URIs as well

Are the above configurations correct for OAuth Client ID ? Should i provide the url in https ?

-- React Sign-In component:

<div className='login-form'>
          <h6 className='login-header'>Login to the App</h6>
          <GoogleLogin 
          clientId="413301367752-xxxx.apps.googleusercontent.com"
          onSuccess={responseMessage} onError={errorMessage} cookiePolicy={'single_host_origin'} 
          isSignedIn={true}/>
          <p className='login-error'>{error}</p>
         </div>

[boundy99]

Hi, I have the same issue. I deployed the React app with AWS and nginx. It is https.

Did you figure anything out by any chance? 

[doaafarouk · Accepted solution]

@boundy99 .. I resolved this issue by using custom login button, as in this link:

https://www.npmjs.com/package/@react-oauth/google#custom-login-button-implicit--authorization-code-f...