Google API: Not a valid origin for the client: url has not been whitelisted for client ID "ID"

Question

I need help. I don't found an answer to my question. I tried googling and I tried asking on other sides but I never found an answer.

I'm working with the google API (Youtube data API) and I use the example code from the google side the code it works I'm pretty sure about that. I got an error when i try to start the Script:

details: "Not a valid origin for the client: "MyURL" has not been whitelisted for client ID "MyID". Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."

error: "idpiframe_initialization_failed"

The problem i whitelisted my Website and it's accepted. i don't know what is wrong. What should i do to "whitelist" my Domain (It's whitelisted)

And another question. I did not search for an answer on this question before.

I think it's possible that I can use the code on Localhost, I think I must whitelist my localhost address or something like this. But whitelisting does not work.

• DreamGamer

Turbidimeter

Still facing the same problem. Has anyone any other solution to solve the issue? – Beef

in my case, using http causes the issue. switching to https solves the issue. – Supraliminal

To those who have already added domain in authorized domains, just clear the cache of your site, it will work definitely if all data is set truly. – Horehound

Answer 1

Had the same problem and here's how I solved it:

1. Activate both Analytics and Google Plus APIs on your project
2. Create new OAUTH 2.0 client credentials
   • Add the Authorized Javascript Origins under Restrictions section
3. Use the new client id.

Enjoy.

Company

OMG Thank you so much! It working for me. One of my problem was that i used the client key not the client id. – Turbidimeter

I should clear up that IF you already created an oAuth for a different port; for some reason, you cannot re-edit the port to use a different one. I basically "created another credential" for the new port. Obviously, this will create another token; so just grab it and use that instead. You can keep both tokens in Console. – Transgress

Thanks! It's counter intuitive, but it's the right answer. Pretty crazy that you can't just add the API you need (which also isn't obvious) to your existing key. Recreating the entire config for the key is a pain. – Haemorrhage

You are saying to activate Googe Plus API's. But what is the relation between Youtube API's and Google Plus API's. – Beef

I don't really understand the correlation here but it's the only thing that worked for me (and others, apparently). – Company

Adding Google+ API only (not Analytics) helped here. – Overvalue

@Overvalue Great. Maybe they've updated the requirements. – Company

The way I see it is that token you get after successful authentication is supposed to give you the access to (one or more) specified API scopes. In order to e.g. access user's email - you must access Google+ API, and that seems to be required. – Overvalue

Thank you, Analytics and Google Plus APIs did on production server, Plus is enough for local server. – Deprecate

Google Plus has been shut down so it would be odd if that was required (at least any more). – Evoy

This fix no longer works as this option is no longer present in the webpage "Add the Authorized Javascript Origins under Restrictions section" – Conception

Answer 2

I cleared cache. Started working then.

In Chrome: Settings --> Advanced --> Clear browsing data --> Cached images and files

Entomophilous

This answer did not help me. – Overvalue

There are a lot of requests going on. I think one of them is being cached by the browser and so it doesn't know about the changes you make in the API Console. But I think it's easier to disable the cache entirely while the Browser DevTools are open. Most of the time there's an option (a checkbox) in the "network" tab. After enabling that a refresh of the page is enough to make it work. – Ailin

Interesting, this worked for OAuth. You'd think google could pick up on changes that are important like that. – Trost

Yeah, that did it. – Complementary

This worked for me while using Google sign-in. Thanks for the share! – Olnton

Or try: Shift + CTRL + R – Flavoprotein

Answer 3

For me, it worked without adding any of the additional APIs like google analytics. Just make sure to add the complete clientid and open the app in incognito window to avoid saving the cache. If already have opened the app in regular window, 1- Close all tabs that app is open at. 2- Clear the cache and cookies. In chrome, its in Settings --> Passwords and forms -> Clear Browsing data -> Advanced (tab) -> select a) Cookies and other site data and b) Cached images and files 3- Open a fresh incognito window and test your app.

Incomprehensible

Don't need to close all tags, just open an incognito window is sufficient. – Soerabaja

Answer 4

The documentation says not to overlook two critical steps ("As you go through the instructions, it's important that you not overlook these two critical steps: Enable the Analytics API Here's what worked for me:

1. Enable the Analytics API
2. back to you credentials , delete previous OAuth 2.0
3. now create new OAuth with correct origins

Syngamy

Answer 5

I also followed the instructions in the quickstart example, Had the same problem, tried all the solutions suggested here to no avail, tried everything I could imagine but it didn't help.

Finally saw that I copied the CLIENT_ID with a space at the end.

  var CLIENT_ID = '44********-*****************.apps.googleusercontent.com ';

Once I fixed this (removed the extra space) it worked.

I guess the error message is not very precise in this case. Hope this helps.

Adulteress

Answer 6

Use the below latest way to update the valid origin for the client:

1. Go to https://console.developers.google.com/
2. Click the ENABLE APIS and SERVICES link
3. Add the Google Analytics API and return the homepage.
4. You can able to see the list of API's added in the homepage like below screenshot
5. Click the credential link from the left side menu
6. Click the OAuth client, if it not available create using CREATE CREDENTIAL button
7. Add the authorized javascript origins link like below.
8. Finally click the SAVE button
9. Then, In Chrome: Settings --> Advanced --> Clear browsing data --> Cached images and files (To avoid old cache make cross origin issue).

Hopefully, this will help everyone

Spital

Answer 7

I just made the same mistake: Tried the official quickstart example and received the same error message as you.

It is rather confusing, because that example is a lot more complex than what I personally needed: It uses OAuth for user login, and NOT just the API key. If you are like me, and you don't want to use OAuth, and you only want to retrieve some Youtube data, without any privileged actions (e.g. if you only want to search or list videos, channels or playlists), this example is for you.

The solution is simple, just provide apiKey instead of clientId to gapi.client.init (link: API docs), like so:

const apiKey = '<my API key>';

function gooApiInitClient() {
  // Array of API discovery doc URLs for APIs used by the quickstart
  const discoveryDocs = [
    "https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"
  ];

  return gapi.client.init({
    apiKey,
    discoveryDocs
  });
}

// see: https://developers.google.com/api-client-library/javascript/reference/referencedocs
gapi.load('client', {
  callback: function() {
    // we now have gapi.client! initialize it.
    gooApiInitClient().
      then(() => {
        // we can start using the API here!
        // e.g. gapi.client.youtube.videos.list(...);
      }).then(results => { 
        // use results here....
      });
  }
});

Spat

I suggest simplifying the code snippet to make this answer better. The init call is only 4 lines and that's really the only thing that's changing. The other stuff isn't as helpful. – Dialectician

Cleaned it up a bit :) – Spat

Answer 8

I was having a similar issue trying to get a login for my web app. What I did was just recreate the OAuth Client ID credentials from Cloud Platform. When I did this and used the new Client ID, everything worked fine. Not sure what the issue was before, but it goes through perfectly fine now.

If anyone finds this from Google or whatnot, try that. It might just work. It would explain Ezra Obiwale's answer because that is essentially creating a new Client ID just after adding a couple API's.

If anyone knows an explanation as to why this happens that would be appreciated.

Subspecies

Answer 9

I was also attempting to get the sample working (from ) https://developers.google.com/drive/api/v3/quickstart/js

It continually failed even though the ip address was added to the WebAPI.

But you have to add localhost:8000 (not just 127.0.0.1:8000) to your OAUTH as shown here:

Float over the OAUTH client text and it will become a link. Click that link and you can add a URI including the port. Mine already had 127.0.0.1:8000 but not the locahost:8000.

Here's the interesting / odd thing. When I ping localhost I see:

I think that is IPV6 thing.

Anyways, if I ping 127.0.0.1 I see the expected response (via IPV4)

Maybe that is a red herring but I wasn't sure if the value entered in the OAUTH was affected by it or not.

The reason I even noticed that is because when I started the Python web server as directed in the tutorial I saw the following and thought it was odd:

Only after adding the localhost:8000 URI in the OAUTH did it work, but after adding it did work fine.

Shareeshareholder

Answer 10

As many have indicated here, this is just a browser caching issue. No need to create a new key, or even clear the cache. Just try again on a new browser incognito (anonymous) window and it should work fine.

Biblicist

Answer 11

Create authorization credentials

Any application that uses OAuth 2.0 to access Google APIs must have authorization credentials that identify the application to Google's OAuth 2.0 server. The following steps explain how to create credentials for your project. Your applications can then use the credentials to access APIs that you have enabled for that project.

1. Go to the Credentials page.
2. Click Create credentials > OAuth client ID.
3. Select the Web application application type.
4. Complete the form. Applications that use JavaScript to make authorized Google API requests must specify authorized JavaScript origins. The origins identify the domains from which your application can send requests to the OAuth 2.0 server.

Hospice

Answer 12

the one Tap Google chrome auth doesn't show to all my domains so

I follow this book:

https://developers.google.com/identity/one-tap/web/guides/features

summary for this question it says:

add all your domains and sub domains in: https://console.developers.google.com/apis/credentials Edit or create a:

OAuth 2.0 Client IDs ->

Web client (auto created by Google Service) (Edit this line)

add the domains and subs here:

Authorized JavaScript origins

URIs

after this the one tap login started to be shown with the accounts registered on the chrome browser of the logged user.

Merideth

Answer 13

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

Script must in tag <head></head>

In my case, I put after tag </main>, so It's fail. Then I try write in tag <head>, It work!

=== Correct is

    <!DOCTYPE html>
    <html lang="vi">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    <meta name="google-signin-client_id" content="APP_CODE.apps.googleusercontent.com">
        <script src="https://apis.google.com/js/platform.js" async defer></script>
    </head>
    <body>
    <main>
<div class="g-signin2" data-onsuccess="onSignIn"></div>    
    </main>
    <script>
        function onSignIn(googleUser) {...}
...

Huddleston

Answer 14

I was having this exact same issue - the solution for me was to go into the API Manager and enable the Analytics API. Not sure what the issue was, but this seems to have fixed it!

Argosy

I enabled the Analytics API but nothing changed. :C – Turbidimeter

Answer 15

I believe this has to do with caching, try to Go to your browser and clear the cache, try: in chrome, > setting > advanced > clear browsing data :>: cached images and files.

Suppositious

Answer 16

One of the reasons why it could not work is exceeded number (100) of logins on certain client ID.

You can visit google API console page and create new Oauth2 client credentials (remember to add your applications URL under Authorized Javascript Origins) and then use it.

Warder

Answer 17

I was having the same issues as well until I realized when I copied the client_ID, there was white space in my file, so I removed the white space from the string and everything is working great now.

Schatz

Answer 18

I faced the same issue while working with google sign-in using react-social-login on my localhost. In the whitelist origin we will have to provide http://localhost:3000 to make it work.

Kriemhild

Answer 19

The following worked for me

1. Add your origin to your OAuth 2.0 Client ID
2. Copy and navigate to the failed HTTP request that you see in devtools, e.g. https://accounts.google.com/o/oauth2/iframerpc?action=checkOrigin...
3. Clear cookies and localstorage for that domain (EditThisCookie & localStorage.clear())
4. Wait around 30 minutes
5. That URL should return { "valid": true }

Nuclei

Answer 20

For my case: in the Google Cloud API & Services > Credentials > OAuth 2.0 Client IDs manager

I added http://localhost:3000 to

Authorized Javascript origins

and

Authorized redirect URIs

in addition to http://localhost

Syndactyl

Answer 21

My case : disabled ad blocker AdGuard

Unaccomplished