'How to solve "idpiframe_initialization_failed" for localhost?

Here's my initialization code:

            function HandleGoogleApiLibrary() {
                // Load "client" & "auth2" libraries
                gapi.load('client:auth2', {
                    callback: function () {
                        // Initialize client & auth libraries
                        gapi.client.init({
                            apiKey: 'My API Key',
                            clientId: 'My Client ID',
                            scope: 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/plus.me'
                        }).then(
                            function (success) {
                                console.log("Yaaay");
                            },
                            function (error) {
                                console.log("Nope");
                                console.log(error);
                            }
                        );
                    },
                    onerror: function () {
                        // Failed to load libraries
                    }
                });
            }

Which gives me the following error message:

details: "Not a valid origin for the client: http://127.0.0.1 has not been whitelisted for client ID 388774754090-o7o913o81ldb2jcfu939cfu36kh9h0q6.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."
error: "idpiframe_initialization_failed"

My app is not in production yet, so for development I'm using localhost. Thing is, on every stack overflow / reference I've found they've specified that on Authorised JavaScript origins and Authorised redirect URIs I must use http://localhost instead of http://127.0.0.1. If I do this, I get that error and a Permission denied to generate login hint for target domain. if I try to login.

If I use http://127.0.0.1 on both, I get no idpiframe_initialization_failed on initialization, but get the same permission denied when I try to login.

It makes no sense, there's no other way to specify the localhost, and I just can't use the API.

Solution 1:^[1]

In my case it was two-side problem.

Need to add origin to google console.

How does origin look like? http://localhost
Clear cache.

This sometimes does not work and you may start thinking that this is not a cache problem. Details below.

1. How to add your origin to google console?

Go here: https://console.cloud.google.com/apis/credentials
Select a Project you need at the top.
Find OAuth 2.0 client IDs and in this section select (or create) a client ID.
In the opened window find the section Restrictions -> Authorized JavaScript origins and add either http://localhost or http://localhost:8000 (specifying the port you need).

2. Clear cache.

If the step #1 did not solve the problem, you need to clear cache.

If you want to remove just localhost cache, in Chrome you can do it in the next way:

Open Settings -> More tools -> Developer tools;
Right click on Reload button -> Empty Cache and Hard Reload.

Sometimes cache clearing does not work. Just to be sure, that it is still a cache problem, open a browser using Incognito mode and check your site again.

Solution 2:^[2]

Just to save future readers, I've managed to authenticate from the localhost by typing exactly http://www.localhost on "Authorized Javascript Origins" in the Client ID creation (Credentials / Developer Console). Totally not obvious and anti-user, but neither http://localhost or http://127.0.0.1 worked.

Solution 3:^[3]

For me problem was solved by disabling AdBlocker

Solution 4:^[4]

I had this issue on Version 100.0.4896.127 (Official Build) snap (64-bit) on Ubuntu 20.04 LTS. Allowing third-party cookies under Settings -> Privacy and Security -> Cookies and other site data solved it. The moment I disabled the third party cookies, the issue was back. So, for my case at least, it seems the issue is third party cookies not enabled. Note that I had the URL of the application as http://localhost:some-port

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Ericson Willians
Solution 3	Stefan Nedelcu
Solution 4	b.sodhi

'How to solve "idpiframe_initialization_failed" for localhost?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]