The given origin is not allowed for the given client ID (GSI)

user_3758264 0
Viewed 20097

I was refactoring my "Sign in with Google" by replacing gapi with gsi on http://localhost:8080.

How can gapi work without problems while gsi claims that The given origin is not allowed for the given client ID.

enter image description here

gapi

<script src="https://apis.google.com/js/api:client.js" async defer></script>

window.gapi.load('auth2', () => {
  const auth2 = window.gapi.auth2.init({ client_id })
  auth2.signIn().then(console.log)
})

gsi

<script src="https://accounts.google.com/gsi/client" async defer></script>

<div id="g_id_onload"
     :data-client_id="client_id"
     data-login_uri="http://localhost:8080"
     data-auto_prompt="false">
</div>
<div class="g_id_signin"
     data-type="standard"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>

Errors out with: The given origin is not allowed for the given client ID

google-signin javascript
5 Answers
user_37582640
user_4237340

Found a solution while testing this as I was encountering the following error messages related to this one despite adding the site domain to the Authorised JavaScript origins:

Failed to load resource: the server responded with a status of 403 ()

[GSI_LOGGER]: The given origin is not allowed for the given client ID.

If you're using a domain name that is not localhost, make sure that you are accessing your site via https (using a self-signed certificate if a certificate is not yet available / if testing in your non-prod environment).

user_111640950

I got faced with same issue. For some reason, none of the solutions discussed here did it for me. I got it solved by adding these to the Authorized Origins in the Google cloud console

  • http://localhost
  • http://localhost:<port_number>
user_31809530

A comment from @Behzad that deserves it's own answer:

For some reason, 127.0.0.1 will not work, even if you register it in your Google Dashboard.

But as soon as you use localhost instead, it starts working.

I was using Live Server for VSCode, and had to look up how to change the host it was serving on.

Go to Code > Preferences > Settings > Live Server Config > Host and change it to local host. enter image description here

Then make sure localhost is registered in your Google Dashboard: enter image description here

user_12967460
Related