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.

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

Answer 3

For me problem was solved by disabling AdBlocker

Answer 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

Answer 5

This is the problem i faced, after trying many things this is what worked for me:

• Step 1: use gapi-script in the react project for that

npm i gapi-script

• Step 2: import it in the project
  

import { gapi } from "gapi-script"

• Step 3: write a useEffect function
  

useEffect(() => {
    const clientId =
      "enter your client id here";
    function start() {
      gapi.client.init({
        clientId: clientId,
        scope: "",
      });
    }
    gapi.load("client:auth2", start);
  });