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
– Jack, Commented Jul 21, 2021 at 4:49
On similar lines, it fails in normal mode but works fine in Incognito mode. — Leo Bastin
– Leo Bastin, Commented Mar 10, 2022 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
– Joshua Dance, Commented Sep 19, 2022 at 17:06

Crow · Accepted Answer · 2021-07-21 12:15:34Z

506

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, 2021 at 12:15

Crow

7,7333 gold badges17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Crow Over a year ago

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

Mikhail Zvagelsky Over a year ago

@Venus713 I have the same problem in Chrome browser - both localhost and 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.

Behzad Over a year ago

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.

zreptil Over a year ago

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

Rickyras Over a year ago

Thanks for sharing this useful tip for setting up local environment testing.

|

cloakedninjas · Accepted Answer · 2022-01-17 09:56:21Z

51

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, 2022 at 9:56

cloakedninjas

4,2642 gold badges33 silver badges46 bronze badges

11 Comments

Martin Wedvich Over a year ago

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!

maxandron Over a year ago

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

Lefty Over a year ago

How do I set this in Laravel ?

Miguel Ormita Over a year ago

I'd like to try it, but I don't know how to use it for Javascript/Reactjs.

Sanjay Nishad Over a year ago

upvoted, it helps, 400 issue solved, but now getting (blocked:CoepFrameResourceNeedsCoepHeader)

|

osifo · Accepted Answer · 2022-09-08 09:00:21Z

42

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 8, 2022 at 9:00

osifo

8508 silver badges11 bronze badges

3 Comments

user3413723 Over a year ago

So weird, I had to add http://localhost even though I was on port 3000 too! Great catch! Saved me a lot of time.

Vlad Dekhanov Over a year ago

Oh, man. Thanks. It's really weird but it works! If not you, I believe I would stuck here for days...

osifo Over a year ago

I'm glad it worked for you!

Joshua Dance · Accepted Answer · 2022-09-19 17:40:02Z

29

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, 2022 at 17:40

Joshua Dance

10.8k4 gold badges81 silver badges85 bronze badges

2 Comments

rosebud Over a year ago

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

Frank Ayra Over a year ago

I don't know how Google doesn't have this explained clearly in their Docs. HERO Joshua

Kaizer · Accepted Answer · 2021-12-06 05:58:56Z

13

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

answered Dec 6, 2021 at 5:58

Kaizer

1311 silver badge3 bronze badges

1 Comment

Nickname0222022022 Over a year ago

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!

Marvin · Accepted Answer · 2023-06-22 02:49:15Z

11

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, 2023 at 2:49

answered Dec 28, 2022 at 12:54

Marvin

7768 silver badges17 bronze badges

Comments

Tarun Kantiwal · Accepted Answer · 2024-05-24 04:09:17Z

5

The solution which worked for me is add local host without port as well in Authorised Javascript origin and in redirect URL and after that change please do hard refresh Ctrl+Shift+R

answered May 24, 2024 at 4:09

Tarun Kantiwal

3113 silver badges2 bronze badges

Comments

N. Raj · Accepted Answer · 2024-10-16 23:18:29Z

5

It should look like this. Both localhost and localhost:3000 should be present. Just edit your credential to add both.

answered Oct 16, 2024 at 23:18

N. Raj

5279 silver badges16 bronze badges

Comments

Philip Sopher · Accepted Answer · 2022-12-02 17:08:48Z

3

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

answered Dec 2, 2022 at 17:08

Philip Sopher

8012 gold badges10 silver badges23 bronze badges

Comments

Ruby · Accepted Answer · 2023-10-29 12:08:18Z

2

I had this same issue with Django 4.2.x, updating the SECURE_CROSS_ORIGIN_OPENER_POLICY attribute of django.conf.settings to unsafe-none and SECURE_REFERRER_POLICY to strict-origin-when-cross-origin solved the issue for me.

# my_project/settings.py
SECURE_REFERRER_POLICY = "strict-origin-when-cross-origin"
SECURE_CROSS_ORIGIN_OPENER_POLICY = "same-origin-allow-popups"

answered Oct 29, 2023 at 12:08

Ruby

1401 gold badge2 silver badges12 bronze badges

Comments

iSteven Zion · Accepted Answer · 2024-01-22 13:18:13Z

1

Head to your Google OAuth 2.0 Client IDs in the credential dashboard and click the edit button, in the Authorized JavaScript origins add http://localhost and note it doesn't have the port.

answered Jan 22, 2024 at 13:18

iSteven Zion

1531 silver badge4 bronze badges

Comments

jack chyna · Accepted Answer · 2023-10-29 17:45:05Z

0

i hope this helps someone *if you are on django * add this to your settings.py

SECURE_CROSS_ORIGIN_OPENER_POLICY='same-origin-allow-popups'

answered Oct 29, 2023 at 17:45

jack chyna

1034 bronze badges

Comments

hugsbrugs · Accepted Answer · 2024-05-30 15:55:27Z

0

You can have in your HTML head section :

<meta name="referrer" content="no-referrer">

which overrides the referrerpolicy script value

<script src="https://accounts.google.com/gsi/client" referrerpolicy="strict-origin-when-cross-origin" async></script>

and also overrides your .htaccess or virtualhost configuration (in case you're under apache)

<IfModule mod_headers.c>
    Header always set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>

so there is no other choice than setting

<meta name="referrer" content="strict-origin-when-cross-origin">

answered May 30, 2024 at 15:55

hugsbrugs

3,6712 gold badges32 silver badges36 bronze badges

Comments

Koby Douek · Accepted Answer · 2025-04-03 12:56:14Z

0

For this which are using the LiveServer extention in VSCode, I resloved this be going to this extention's settings and changing the server from 127.0.0.1 to localhost.

answered Apr 3, 2025 at 12:56

Koby Douek

16.7k21 gold badges79 silver badges110 bronze badges

Collectives™ on Stack Overflow

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

gapi

gsi

14 Answers 14

9 Comments

11 Comments

3 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

gapi

gsi

14 Answers 14

9 Comments

11 Comments

3 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related