49

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?

DaImTo
  • 72,534
  • 21
  • 122
  • 346
Filipe Ferminiano
  • 6,874
  • 20
  • 89
  • 155

12 Answers12

122

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

Kirill Kovalevskiy
  • 1,433
  • 2
  • 8
  • 6
  • 7
    A kind of solution is **to check in incognito mode**. Sometimes hard reload doesn't fit in. – Black Mamba Mar 31 '19 at 06:24
  • 1
    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. – Nishant Desai May 06 '19 at 21:21
  • I'm so glad I scrolled past the other answers to see this. It worked and was so simple and quick. – Bob Horn May 31 '20 at 15:33
  • 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. – utkarsh-k May 14 '21 at 20:15
96

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.

Andrew McOlash
  • 1,232
  • 8
  • 8
11

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

user7191932
  • 148
  • 1
  • 6
9

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.

VincentTellier
  • 519
  • 5
  • 13
5

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/

user5886944
  • 144
  • 1
  • 6
1

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

mahemoff
  • 38,430
  • 30
  • 133
  • 196
  • 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. – Dipen Bhikadya Aug 07 '18 at 11:51
  • 1
    Thanks, I updated it. Some of Google's docs do use ".apps.google.com" in the examples so Google themseves seem to be propagating that apparent myth. – mahemoff Aug 07 '18 at 15:44
0

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

TomHinkle
  • 61
  • 4
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.

Rex
  • 611
  • 9
  • 19
  • 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`. – Tyler Collier Nov 02 '20 at 21:17
0

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"
CertainPerformance
  • 260,466
  • 31
  • 181
  • 209
0

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

0

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

user1867537
  • 51
  • 1
  • 4
0

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