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

Clearing the cache did the trick for me

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

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 }