Not a valid origin for the client from Google API Oauth
Asked Answered
T

14

75

I'm receiving this error from Google API Oauth:

idpiframe_initialization_failed", details: "Not a valid origin for the client: http://127.0.0.…itelist this origin for your project's client ID

I'm trying to send a request from this local path:

http://127.0.0.1:8887/

And I already added this URL to the Authorized JavaScript origins section: enter image description here

This is my code:

<!-- The top of file index.html -->
<html itemscope itemtype="http://schema.org/Article">
<head>
  <!-- BEGIN Pre-requisites -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
  </script>
  <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer>
  </script>
  <!-- END Pre-requisites -->

<!-- Continuing the <head> section -->
  <script>
    function start() {
      gapi.load('auth2', function() {
        auth2 = gapi.auth2.init({
          client_id: 'MY CLIENT ID.apps.googleusercontent.com',
          // Scopes to request in addition to 'profile' and 'email'
          //scope: 'https://www.google.com/m8/feeds/'
        });
      });
    }
  </script>




</head>
<body>


<button id="signinButton">Sign in with Google</button>
<script>
  $('#signinButton').click(function() {
    // signInCallback defined in step 6.
    auth2.grantOfflineAccess().then(signInCallback);
  });
</script>



<!-- Last part of BODY element in file index.html -->
<script>
function signInCallback(authResult) {
  if (authResult['code']) {

    // Hide the sign-in button now that the user is authorized, for example:
    $('#signinButton').attr('style', 'display: none');

    // Send the code to the server
    $.ajax({
      type: 'POST',
      url: 'http://example.com/storeauthcode',
      // Always include an `X-Requested-With` header in every AJAX request,
      // to protect against CSRF attacks.
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      },
      contentType: 'application/octet-stream; charset=utf-8',
      success: function(result) {
        // Handle or verify the server response.
      },
      processData: false,
      data: authResult['code']
    });
  } else {
    // There was an error.
  }
}
</script>
  <!-- ... -->
</body>
</html>

How can I fix this?

Truong answered 19/5, 2017 at 11:17 Comment(5)
Possible duplicate of Google API authentication: Not valid origin for the clientAnnettannetta
I'm expecting the same issue right now.Shirtmaker
Was you able to fix it?Shirtmaker
I just created new client id and it worked.Shirtmaker
How do you get to that "Authorized JavaScript origins section" as shown in the screenshot?Lotson
T
21

If it's all the same to you, try adding http://localhost:8887 to your authorized JavaScript origins instead. Had that error myself at some point and this fixed it. Know that you will have to use this URL for your request as well event though it translates to http://127.0.0.1:8887/.

Trod answered 28/5, 2017 at 1:48 Comment(2)
How do you do that?Cinchona
I tried before at localhost:3000 and it didn't work, but localhost:8887 worked, I couldn't imagine that was so simple! thanks!Skeie
D
172

Reseting Chrome cached solved it for me. Long press on Reload button, then Empty Cache and Hard Reload.

Note: Make sure your Chrome Dev tools panel is open otherwise long press wont work.

enter image description here

Disestablish answered 1/3, 2019 at 5:55 Comment(7)
A kind of solution is to check in incognito mode. Sometimes hard reload doesn't fit in.Robbery
I was already checking console logs for error and I just checked the "disable cache" option in Network tab in dev console, and voila the error was gone.Hydrogen
I'm so glad I scrolled past the other answers to see this. It worked and was so simple and quick.Tupungato
Apart from the accepted answer this is a must try answer. I had done everything that was specified in the accepted answer followed by this answer.Meade
In Firefox you can achieve the same by opening the dev tools and enabling the "Disable Cache (when toolbox is open)" option. This solved it for me.Merlinmerlina
This was very heplful. Thank You ManDaladier
Note especially helpful. Didn't know this menu existed hahaJewbaiting
W
125

I had a very similar issue to yours. I tried to add multiple whitelisted ports from localhost and nothing was working. Ended up deleting the credentials and setting them up again. Must have been a bug on googles end for my setup.

Wallasey answered 11/6, 2017 at 19:50 Comment(18)
LOL this worked... this has been the solution to so many google api issues in the past... definitely need to remember this one. (wtf google???)Jennette
Yup, only thing that works for me too. This has been an issue for at least a year. What's going on?Kenji
LOL.... This is one of the funniest things I've encountered in 20 years of writing software. Worked indeed.Terti
This is not funny. This is sad.Calypso
What's sad is that I have gotten so many upvotes (and continue to get them) for this answer since nothing seems to have changedWallasey
This answer reminds me of my Windows tech support days. "Have you tried rebooting?" Fixed 95% of issues. Have an upvote!Interlanguage
Yep, 2019 here, still not fixedConsternation
Continues to be an issue. Fixed as described here. Crazy.Hemimorphite
2019 ending and still the issue persists.. Thanks for the solution!Katharina
September 2019 - I encountered the same problem. This solution worked for me as well.Transparent
I had the same problem, and yes, it fixed only when I created new credentials, editing existing doesn't work at all.Sorn
Mar 2020, confimred it is still not fixed.Coverdale
October 2020, still the only solution that worked for me.Harp
Oct 2021, worked for me.Fritzie
Which credentials are we talking about here?Marquez
I actually have gotten it to work updating the Authorized Origin/URIs but it does take a long time. And I can see why it's faster to re-create it than just waiting for it to work. I'm pretty sure this probably has to do with a cache/propagation within their system and somehow a create is faster than an update.Centeno
Dec 2021 developer signing in to state that this was the only thing for worked for me too, how frustrating!Powder
Deleting and recreating credentials worked for me just now, 12-29-21Ozonolysis
T
21

If it's all the same to you, try adding http://localhost:8887 to your authorized JavaScript origins instead. Had that error myself at some point and this fixed it. Know that you will have to use this URL for your request as well event though it translates to http://127.0.0.1:8887/.

Trod answered 28/5, 2017 at 1:48 Comment(2)
How do you do that?Cinchona
I tried before at localhost:3000 and it didn't work, but localhost:8887 worked, I couldn't imagine that was so simple! thanks!Skeie
A
11

I read on several places on the web people use to redo the creation of the credentials to get it to work.
So I did, I created a new credential for the same project and used my new user-id and it worked perfectly... Looks like the edition of the whitelist is a bit flacky...

Nb: I also used localhost instead of 127.0.0.1, IPs are not valid.

Actinoid answered 16/10, 2017 at 7:25 Comment(0)
T
7

I fiddled around for about 10 minutes and then it finally worked when I tried http://localhost/ in the browser (instead of 127.0.0.1)

Added the url at every place you can do white-lists at: https://console.developers.google.com/apis/credentials/

Twostep answered 13/6, 2018 at 10:59 Comment(0)
C
6

I had this same issue; but this is what worked for me:

  1. Open console.developers
  2. Open the project name
  3. Click on the credentials
  4. Under the "name", click on the "web client 1"
  5. Under the "URLs", add "http://localhost:3000"
Cyma answered 8/4, 2020 at 19:32 Comment(0)
C
3

I just went through all of these solutions before realizing I was putting in

https://localhost:3000

and my dev server was serving up

http://localhost:3000

Stupid, I know, but someone else will probably make the same mistake and perhaps this comment will help them :)

Capitalization answered 8/9, 2019 at 13:4 Comment(0)
G
3

I solved via adding both http://localhost and http://localhost:8083.

Geerts answered 6/4, 2021 at 15:38 Comment(0)
S
3

just my 2 cents.. was able to get it working after deleting and recreating the credentials. Just as suggested above.

Sarmatia answered 21/5, 2021 at 12:19 Comment(0)
P
3

In case anyone missed this, next to the save button it does say:

Note: It may take 5 minutes to a few hours for settings to take effect

Waiting fixed this issue for me.

Pygmy answered 26/1, 2022 at 11:38 Comment(1)
How much did you have to wait? Its been over an hour and still this issue exists for me.Headband
D
2

"Not a valid origin for the client" seems to be over-used by Google's API, i.e. it's misleadingly used for authentication errors too.

For people seeing the error, check that the credentials are correct.

(This might explain why it works for some people after re-creating credentials - in some cases, the original credentials might not have been correct).

Dartmoor answered 3/8, 2018 at 9:28 Comment(3)
ID doesn't have to end with ".apps.google.com". Error does occur when you add a new whitelisted URL in an existing client. Creating a new client fixes the issue.Mozell
Thanks, I updated it. Some of Google's docs do use "<client-id>.apps.google.com" in the examples so Google themseves seem to be propagating that apparent myth.Dartmoor
Change the Client ID without ".apps.google.com" works for meAlvy
S
2

Okay so this is super embarrasing, but for me I was following the docs for the Google Sign-in Web package for a Flutter app, and where it says:

On your web/index.html file, add the following meta tag, somewhere in the head of the document: <meta name="google-signin-client_id" content="YOUR_GOOGLE_SIGN_IN_OAUTH_CLIENT_ID.apps.googleusercontent.com">

I had copied what was listed as my Client ID and pasted it at the beginning and had therefor duplicated the apps.googleusercontent.com portion of the content label in the meta tag. So it might help to make sure you haven't duplicated that!

Sobersided answered 28/4, 2022 at 22:2 Comment(0)
P
0

What worked for us was adding a non-localhost domain to the authorized origins. My colleague had his localhost-domains working after adding a non-existing local domain, e.g. http://test-my-app.local.

Photoactive answered 26/11, 2019 at 10:27 Comment(1)
Are you saying you (or your colleague) used http://test-my-app.local in Authorized JavaScript origins, like the picture from the OP? I used that exact origin and it didn't work. It acts like it works until you press "Sav" and then you see an error message: The request failed because one of the field of the resource is invalid. That happens to me for any non regular TLD, such as .local or .test.Apologia
M
0

It might be in case, while you are using same email id for creating client id and for sign-in through webpage

Mischief answered 9/10, 2020 at 11:0 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.