50
votes

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?

12
I'm expecting the same issue right now. - Praytic
Was you able to fix it? - Praytic
I just created new client id and it worked. - Praytic
How do you get to that "Authorized JavaScript origins section" as shown in the screenshot? - stevepowell2000

12 Answers

13
votes

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

130
votes

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

98
votes

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.

9
votes

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.

5
votes

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/

1
votes

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

0
votes

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

0
votes

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.

0
votes

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"
0
votes

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

0
votes

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

0
votes

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