Authorized Javascript Origins on my OAuth Client IDs are not working when using Google Sign In

[Tejester]

So I've been developing a react app and want to implement google sign in so that my further api calls to my Cloud Run image are authenticated (the url for the Cloud Run backend is in the api component). So after working it out the google sign in button renders properly but upon clicking it the modal shows nothing. In the console I get an error saying: "[GSI_LOGGER]: The given origin is not allowed for the given client ID." I've checked that I'm using the right client ID a million times at this point and that the Authorized JavaScript origins for that Client ID  is set to the firebase emulator I'm testing this on. I've also tried clearing my browser cache and cookies, and restarting my browser, but still get the same error. At this point, I've run out of ideas, so any help is appreciated. I put the component I'm logging in with below: 

import React, { useEffect } from 'react';

import { useNavigate } from 'react-router-dom';

//will be using useNavigate later 😛

import API from '../API';

import './Home.css';

const Login = () => {

const navigate = useNavigate();

useEffect(() => {

const loadGoogleSignInScript = () => {

const script = document.createElement('script');

script.src = 'https://accounts.google.com/gsi/client';

script.async = true;

script.defer = true;

script.onload = () => initializeGoogleSignIn();

document.body.appendChild(script);

};

const initializeGoogleSignIn = () => {

if (!window.google) {

console.error('Google Sign-In library not loaded');

return;

}

window.onSignInSuccess = (response) => {

console.log('Signed in successfully:', response);

const idToken = response.getAuthResponse().id_token;

API.defaults.headers.common['Authorization'] = `Bearer ${idToken}`;

};

window.onSignInFailure = (error) => {

console.error('Error signing in:', error);

};

window.google.accounts.id.initialize({

client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,

callback: {

on_success: window.onSignInSuccess,

on_failure: window.onSignInFailure,

},

});

window.google.accounts.id.renderButton(

document.getElementById("signInDiv"),

{ theme: "outline", size: "large" }

);

};

loadGoogleSignInScript();

}, []);

return (

<div className="login-container">

<img id="sdn" src={`${process.env.PUBLIC_URL}/SDNAIRGROUP.png`} alt="SDN Air Group" />

<div id="signInDiv"></div>

</div>

);

};

export default Login;

[Marramirez]

Hi @Tejester ,

Welcome to the Google Cloud Community!

This error message usually occurs when you are trying to use Google OAuth client ID with an origin that is not authorized in the Google Cloud Console. 

You have to add the URL of origin in the Google Cloud Console.

You must add both "http://localhost" and "http://localhost:<port_number>" to the Authorized JavaScript origins box for local tests or development.

Read the documentation here.

You can also check these cases as you might have the same problem.

Case 1, Case 2

let me know if it helped, thanks!

[doaafarouk]

Hello @Marramirez ,

I encounter the same issue, i already added the host domain in the Google Cloud Console as in image below.

Please note in my case the host is an AWS loadbalancer:

http://k8s-default-awsingre-23c3bc0850-121321573.us-east-2.elb.amazonaws.com/

[Xuinger2323]

Same problem!! I also hosted my frontend on hosting, and even after adding it's domain in all possible configurations to the both "Authorized redirect urls" and "Authorized JS origins", I still see this error in the console. I even checked "origin" query param in the popup menu, and excluding coded slashes and colon it's the same as the one I added in the console. It looks like my changes in the console wasn't applied, and I have to wait for it, but I'm trying to solve it for couple of days now, and this is clearly not the case 

[manideepk]

Facing the same issue. As suggested by the documentation: https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#get_your_google_api_client_id I have added 

Referrer-Policy: no-referrer-when-downgrade and it still doesn't work. My observation is that any http javascript origin is not working other than 'localhost'.

• I have tried adding both the URL and URL with port (http://app.example.com and http://app.example.com:8080) and no luck.
• I also tried doing it without a subdomain http://example.com but still no luck. 
• I tried with http://localhost and http://localhost:8080 and it works.

[doaafarouk]

@manideepk .... @Xuinger2323 

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...