Google Auth API Javascript idpiframe initialization error on Chrome

Question

I use GSuite and I'm coding a very simple web app to use Google Auth API, and I get an exception "idpiframe_initialization_failed".

Now I have the exact HTML as shown in the google Sample: https://developers.google.com/api-client-library/javascript/samples/samples

1) I've created a project on the Google Developer Console

2) I setup the OAUTH authorization screen

3) I've created the client ID, creating restrictions and redirection URL

4) I've also created the API KEY

5) Finally I've enabled the People API, because discovery services was failing when setting the discoveryDocs parameter

With all of these steps, When I call the gapi.client.init, it raises an exception ONLY in chrome, I cannot understand why.

The code for initializing the API is:

    gapi.client.init({
        apiKey: 'MY_API_KEY',
        discoveryDocs: ["https://people.googleapis.com/$discovery/rest?version=v1"],
        clientId: 'MY_CLIENT_ID.apps.googleusercontent.com',
        scope: 'profile'
    }).then(function (response) {
      // Listen for sign-in state changes.
      gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

      // Handle the initial sign-in state.
      updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    },function(reason){
        console.log('onerror');
        console.log(reason);
      // Listen for sign-in state changes.
      gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

      // Handle the initial sign-in state.
      updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());

The code is running the error block, and the message is:

details: "Failed to read the 'localStorage' property from 'Window': Access is denied for this document."
error:"idpiframe_initialization_failed"

Any ideas why I'm coming into this error?

Thanks!

The only workaround found is using the OAUTH 2.0 endpoints as described here: https://developers.google.com/identity/protocols/OAuth2UserAgent — David Pascual, Mar 15 '17 at 12:28

lavleen · Accepted Answer · 2017-03-16T11:33:53.947

33

I encountered the same issue. After investing some time, found the reason. This error is because in chrome settings, you have the Block third-party cookies and site data option enabled.

It can be resolved by disabling this option: "To find the setting, open Chrome settings, type "Content settings" in the search box, click the Content Settings button, and view the fourth item under Cookies." Uncheck the box "Block third-party cookies and site data".

Hopefully this helps you in resolving your issue.

edited Mar 16 '17 at 11:33

answered Mar 15 '17 at 09:50

lavleen

346
3
3

1

Hi, lavleen, You're right. That's the issue. But my concern is I haven't found this problem in other sites using Google Sign In. Does this means that everybody uses the URL redirection method and nobody uses the JS API? – David Pascual Mar 15 '17 at 12:25
1

Hey David, even i am looking into the reason of this. Meanwhile, searching over the exact reason, i found this. This would be helpful to you also. please have a look. https://github.com/google/google-api-javascript-client/issues/260 and https://developers.google.com/identity/sign-in/web/reference#googleauththenoninit-onerror – lavleen Mar 16 '17 at 09:41
Hey, i tested the other app also by checking the third-party cookies and data option. I found that those apps forcefully allows to set cookies. If we disable cookies as shown in image attached above, then google sign in does not work there. Please try this. – lavleen Mar 16 '17 at 11:29
For me, I had to disable adblock – Vic Jul 12 '17 at 15:47
This worked for me, even though I had made an explicit "Allow" for the site. Apparently the "Allow" doesn't override the default block? – jwadsack Sep 06 '18 at 19:05

Commander Coffee · Answer 2 · 2018-11-30T20:16:49.277

The problem is with Google's API console and how it handles creating credentials. It only seems to work when I access it through the following url https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin There is a link that lets you create your app and the OAuth credentials. When I go to the console and create it through that screen it doesn't seem to work. After trying and re-create again and test with a fresh app I found out that the URL you add to the Authorized Javascript Origins doesn't always get added.

If everything is good then the url should be available in the credentials page

mbonnin · Answer 3 · 2018-01-10T13:21:13.177

3

~~In my case, I just had to wait a bit for Google to take the origin into account. I cannot tell exactly how long it took. I waited ~30min. I then went to sleep and it was working the following morning.~~

Edit: Ooops I just realized I was using http:// and not https://. That was the actual problem.

edited Jan 10 '18 at 13:21

answered Jan 10 '18 at 09:48

mbonnin

6,893
3
39
55

score 2 · Answer 4 · edited Nov 28 '18 at 02:19

I had the same problem and I searched for 3 days: Resolve " popup_closed_by_user" Go to your console.google go to your API MANAGE : Credentials:modify your credentials:

Authorized Javascript origin (http://localhost:port); authorized redirect URI(http://localhost:port/auth/google/callback);

Example:|| Authorized Javascript origin (http://localhost:4200); authorized redirect URI (http://localhost:4200/auth/google/callback)

Google Auth API Javascript idpiframe initialization error on Chrome

4 Answers4

Linked