'idpiframe_initialization_failed in Google Sign In from Localhost

I'm trying to create a Google Sign In button by following this link. So far the account choose dialogue box is coming but after that I don't see any result in the console. Instead I'm getting this error at page load,

"idpiframe_initialization_failed", details: "Not a valid origin for the client: http://localhos…itelist this origin for your project's client ID."
details: "Not a valid origin for the client: http://localhost has not been whitelisted for client ID 386404527657-q4ss06np5g27dllq5ds7aif42udkh7e5.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."

I've set Javascript Origins http://localhost & http://192.168.0.100:3000
I've set Redirect URI http://localhost:8080/Callback & http://localhost:8080

Here are the codes,

<html lang="en">
  <head>
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"</div>
    <script>
      function onSignIn(googleUser) {
        // Useful data for your client-side scripts:
        var profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // Don't send this directly to your server!
        console.log('Full Name: ' + profile.getName());
        console.log('Given Name: ' + profile.getGivenName());
        console.log('Family Name: ' + profile.getFamilyName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());

        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;
        console.log("ID Token: " + id_token);
      };
    </script>
  </body>
</html>

How can I get the results in my console?

Solution 1:^[1]

I was having this exact issue and this solution worked for me.

In short: clear your browser cache.

In Chrome: Settings ? Advanced ? Clear browsing data ? Cached images and files

Solution 2:^[2]

Just clear your cache or open your URL in incognito mode. that it :). your issue will get resolved.

Solution 3:^[3]

The solution which worked for me was to whitelist the origin in the google developer console api for that application.

Solution 4:^[4]

For me it was Settings > Site Settings > Cookies > "Blocked thrid-party cookies" must have been unchecked.

Solution 5:^[5]

The documentation says not to overlook two critical steps ("As you go through the instructions, it's important that you not overlook these two critical steps: Enable the Analytics API Here's what worked for me:

Enable the Analytics API
back to you credentials , delete previous OAuth 2.0
now create new OAuth with correct origins

Solution 6:^[6]

I experienced this error on several sites that offer Google Sign in. I had to "allow" accounts.google.com cookie in the "show cookies and other site data" for the site to make it work (after reloading the page). Probably blocking 3rd party cookies in the browser was the root cause for first place,

Solution 7:^[7]

My solution wass to add http://localhost:yourPort and https://localhost:yourPort. Then just delete cache and browser data

Solution 8:^[8]

What worked for me is that I've accidentally been typing out the address in field called "Authorized redirect URIs" instead of "Authorized JavaScript origins". Replace those two fields and try again.

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	Rahul More
Solution 3	Cliff Coulter
Solution 4	Aidin
Solution 5	Aravind Siruvuru
Solution 6	gergelykocse
Solution 7	Imanol
Solution 8	JustCaused

'idpiframe_initialization_failed in Google Sign In from Localhost

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]