How to solve "idpiframe_initialization_failed" for localhost?

Question

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.

Answer 1

In my case it was two-side problem.

1. Need to add origin to google console.

   How does origin look like? http://localhost

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