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

Question

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.

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

Answer 1

I added origin without port to fix this issue.

Key Point: Add both http://localhost and http://localhost:<port_number> to the Authorized JavaScript origins box for local tests or development.

Source: https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid

Answer 2

This can also happen if your server has Referrer-Policy set to no-referrer. Google requires this HTTP header or else requests to https://accounts.google.com/gsi/button and https://accounts.google.com/gsi/iframe/select will respond with 400 and produce that error

If using helmet - the following config will fix the request

referrerPolicy: {
  policy: 'strict-origin-when-cross-origin'
}

MDN article for Referrer-Policy