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

Have the same issue. What is interesting is that I turned off any ad-blocker and suddenly the error disappeared and the POST request appeared at my end point as expected. Can you confirm this behavior? I have ABP, uBlock Origin, uBlock, and Ad-Blocker. I noticed there were several failed resources in my console and perhaps this may be a serious issue underlying the GSI framework or perhaps my adblocking. — Jack, Jul 21 '21 at 04:49
On similar lines, it fails in normal mode but works fine in Incognito mode. — Leo Bastin, Mar 10 '22 at 10:15
@Jack I have this issue, I turned off all my ad-blockers (ublock origin, and AdBlock) and still have the issue. — Joshua Dance, Sep 19 '22 at 17:06

score 281 · Accepted Answer · answered Jul 21 '21 at 12:15

281

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

answered Jul 21 '21 at 12:15

Crow

4,635
3
14
21

Hi @Crow, I added the both things, but it does work for me. Would you give me a suggestion? Currently I have a urgent problem with that. – Venus713 Aug 19 '21 at 21:45
2

@Venus713 Check if your development URL is exactly the same. You might be using https, so it might be something like `https://localhost:8080` and `https://localhost`. You should also check if you are using correct Client ID. – Crow Aug 20 '21 at 08:38
7

@Venus713 I have the same problem in Chrome browser - both http://localhost and http://localhost:8080 are added to Authorized JavaScript origins, and Client ID is correct, but still the same error. However, the same code works in incognito mode. – Mikhail Zvagelsky Dec 05 '21 at 20:38
5

A quick tip for those who may try everything else with no chance: It's good to keep in mind that for some reason, 127.0.0.1 doesn't work and would keep showing this error, even if you register it in your Google Dashboard. But as soon as you use localhost instead, it starts working. – Behzad Jul 06 '22 at 14:11
1

Thank you for this tip. I was getting crazy over this issue, since everything was set up as explaine. But additional adding localhost without the port was something i never would have considered. Thanks so much for this :) – zreptil Dec 14 '22 at 06:38
1

Thanks for sharing this useful tip for setting up local environment testing. – Rickyras Dec 28 '22 at 00:06

score 37 · Answer 2 · answered Jan 17 '22 at 09:56

37

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

answered Jan 17 '22 at 09:56

cloakedninjas

4,007
2
31
45

1

You're my hero! I have a Gatsby website hosted on Netlify, and the default `Referrer-Policy` header there is `same-origin`. Setting that to `strict-origin-when-cross-origin` solved it - this saved me a lot of headache! – Martin Wedvich Feb 16 '22 at 18:09
7

Wow... can't believe this was not mentioned anywhere else. Solved my problem In Django it means setting `SECURE_REFERRER_POLICY = "strict-origin-when-cross-origin"` in settings – maxandron Mar 10 '22 at 14:50
How do I set this in Laravel ? – Lefty Jun 06 '22 at 06:10
I'd like to try it, but I don't know how to use it for Javascript/Reactjs. – Miguel Ormita Aug 14 '22 at 23:43
upvoted, it helps, 400 issue solved, but now getting (blocked:CoepFrameResourceNeedsCoepHeader) – Sanjay Nishad Aug 23 '22 at 05:23
`crossOriginEmbedderPolicy: false` setting this to helmet fixed the issue – Sanjay Nishad Aug 23 '22 at 05:42
@MartinWedvich can you kindly explain how and where you set Referrer Policy? I have the same issue on Gatsby + Gatsby Cloud. – Harsha N Hegde Oct 19 '22 at 09:31
Unfortunately I don't know how you'd do it for Gatsby Cloud, but this is where I set it for Netlify in my `gatsby-config.js`: ```js { resolve: 'gatsby-plugin-netlify', options: { headers: { '/*': ['Referrer-Policy: strict-origin-when-cross-origin'], }, mergeLinkHeaders: false, }, }, ``` – Martin Wedvich Oct 24 '22 at 12:25
When using `localhost` for development, the GSI docs say to set `Referrer-Policy` to `no-referrer-when-downgrade`; this was the final missing piece for me. – Douglas Manley Dec 03 '22 at 04:52
Setting `SECURE_REFERRER_POLICY = "strict-origin-when-cross-origin"` in django's `settings.py` solved it for me – Vahid Amiri Apr 10 '23 at 19:36
A way to set this header is to do so on the index.html Head: `````` – adutra Aug 14 '23 at 08:18

score 21 · Answer 3 · answered Sep 08 '22 at 09:00

21

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>

answered Sep 08 '22 at 09:00

osifo

620
6
11

4

So weird, I had to add `http://localhost` even though I was on port 3000 too! Great catch! Saved me a lot of time. – user3413723 Oct 05 '22 at 06:59
1

Oh, man. Thanks. It's really weird but it works! If not you, I believe I would stuck here for days... – Vlad Dekhanov Dec 14 '22 at 17:59
I'm glad it worked for you! – osifo Dec 16 '22 at 06:00

score 12 · Answer 4 · answered Sep 19 '22 at 17:40

12

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.

Then make sure localhost is registered in your Google Dashboard:

answered Sep 19 '22 at 17:40

Joshua Dance

8,847
4
67
72

1

Hero. I had to make these origin changes and also change my Flask app run code to: `if __name__ == "__main__": app.run(debug=debug, host="localhost")` – rosebud Apr 12 '23 at 15:26

score 10 · Answer 5 · answered Dec 06 '21 at 05:58

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

This was this! Thank you. I've used 127.0.0.1 and added both localhost and 127.0.0.1 but it wasnt working. When entered via localhost. It's fine! — Nickname0222022022, Aug 07 '22 at 09:06

Marvin · Answer 6 · 2023-06-22T02:49:15.960

8

Based on their documentation it says;

When you perform local tests or development, you must add both http://localhost and http://localhost:<port_number> to the Authorized JavaScript origins box. The Referrer-Policy header must also be set to no-referrer-when-downgrade when using http and localhost.

on your case, it seems like you need to add no-referrer-when-downgrade directives of rendered button

edited Jun 22 '23 at 02:49

answered Dec 28 '22 at 12:54

Marvin

647
7
15

score 2 · Answer 7 · answered Dec 02 '22 at 17:08

2

For my live app I needed both https://example.com and https://www.example.com to be set as origins

answered Dec 02 '22 at 17:08

Philip Sopher

627
2
8
19

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

gapi

gsi

7 Answers7

Linked