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

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

I cleared cache. Started working then.

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

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.

Clearing the cache did the trick for me

Try Clearing cache it could be issue with cache/localstorage.

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.

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

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.

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

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.

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.

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

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.

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.

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.

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

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!

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.

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.

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.

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.

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 }