'Google SSO login error: "popup_closed_by_user"

After setting up and running with my own client id I go through the login process and select the needed google account in the popup.

Once this has been selected the login fails with the error in the console being:

err = {error: "popup_closed_by_user"}

can anybody help me to solve this

google-signin

Solution 1:^[1]

Try clearing your browser cache.

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

Solution 2:^[2]

If you are testing against localhost with port then we should add port number in google developer console on Authorized JavaScript origins section like below

http://localhost:3000

Hope this resolve the issue.

Solution 3:^[3]

Even I faced same issues when I want to login using angular4-social-login. It is because of cookies and pop-up settings in the browser. It will work in IE without errors. In Chrome settings go to content settings in that change cookies settings and allow pop-ups. Then clear cache and reload. the app.

Solution 4:^[4]

I have a same issue, after add port number to url in google developer console and clear cache for current page, everything working perfect.

Solution 5:^[5]

popup_closed_by_user issue has occurred because of chrome blocks all the third-party cookies by default. You have to allow a third-party cookie from chrome setting.

But we can't ask our customers to allow a third-party cookie for this. The best solution for this maybe you can call google APIs (validate google account) at your backend and this issue will not occur at the backend.

Solution 6:^[6]

For those who are facing this issue in 2022 you should notice that By default, newly created Client IDs are now blocked from using the older Platform Library, existing Client IDs are unaffected. New Client IDs created before July 29th, 2022 can set plugin_name to enable use of the Google Platform Library.

try to use the following library

https://www.npmjs.com/package/@react-oauth/google

and read this page: https://developers.google.com/identity/gsi/web

Google requires new OAuth clients to use the latest library, otherwise old library does not properly initialize, hence leading to this error.

also, you could use a clientID that you created before to use the react-google-login

Solution 7:^[7]

I open the Google OAuth-dialog using a simple login-button and some JavaScript. By default, my application sets the cross-origin-opener-policy to same-origin. This results in a popup_closed_by_user message on the JavaScript console of the browser.

By setting the cross-origin-opener-policy HTTP header at least to same-origin-allow-popups for the response delivering the window containing my login button, I could solve this issue.

Solution 8:^[8]

window.addEventListener("message", ({ data }) => {
  console.log(data)

})

this solved my issue although u need to process the data and make sure its the google auth ur getting

Solution 9:^[9]

A solution that worked for me was to avoid popups altogether, by setting the ux_redirect option to redirect, as documented here:

The UX mode to use for the sign-in flow. By default, it will open the consent flow in a popup. Valid values are popup and redirect.

That is, your gapi.client initialization should look something like this:

gapi.client.init({
   apiKey: API_KEY,
   clientId: CLIENT_ID,
   discoveryDocs: DISCOVERY_DOCS,
   scope: SCOPES,
   ux_mode: 'redirect'
}).then(function () {
    ....
});

Note that ux_mode is not a documented config option for gapi.client.init, only for gapi.auth2.init. This works because the former lazily initialises the latter, forwarding its own config.

Solution 10:^[10]

2022 react update!

I was facing the same issue.. after a lot of workaround I got to know that I was missing gapi initialization!

Here are the steps:

First install gapi-script

npm i gapi-script

import the gapi from gapi-script

import { gapi } from "gapi-script";

then initialize in App()

gapi.load("client:auth2", () => {
  gapi.client.init({
    clientId:
      "*****.apps.googleusercontent.com",
    plugin_name: "chat",
  });
});

after these steps your app should be working fine ^_^

JS update

I am not 100% sure about JS workaround but including this might work on your application

window.gapi.load('client:auth2', () => {
        window.gapi.client.init({
            clientId: '******.apps.googleusercontent.com',
            plugin_name: "chat"
        })
})

Solution 11:^[11]

 import React, { useEffect } from 'react';
import { GoogleLogin, GoogleLogout } from 'react-google-login';
import { gapi } from 'gapi-script';
function AuthPage() {  
useEffect(() => {
 function start() {
 gapi.client.init({
 clientId:"''''''''''''''''''",
 scope: 'email',
   });
    }
   gapi.load('client:auth2', start);
    }, []);

  const onSuccess = response => {
  console.log('SUCCESS', response);
   };
  const onFailure = response => {
    console.log('FAILED', response);
    };
   const onLogoutSuccess = () => {
    console.log('SUCESS LOG OUT');
     };

    return (
    <div>
   <GoogleLogin
   clientId={"________________"}
  onSuccess={onSuccess}
  onFailure={onFailure}
    />
  <GoogleLogout
    clientId={"________________"}

    onLogoutSuccess={onLogoutSuccess}

      />
    </div>
    );

}

export default AuthPage;

##This is the latest solution for this problem##

Solution 12:^[12]

After loading the script ('//apis.google.com/js/platform.js'), in the DOM will also be inserted iframe, e.g.:

<body>
  ...
  <iframe aria-hidden="true" id="ssIFrame_google" sandbox="allow-scripts allow-same-origin" src="https://accounts.google.com/o/oauth2/iframe#origin=http%3A%2F%2Flocalhost%3A4200&amp;rpcToken=902946799.4541115&amp;clearCache=1" style="position: absolute; width: 1px; height: 1px; left: -9999px; display: none;"></iframe>
</body>

At first, I did not understand why Google does this, so I just deleted this element:

const iframeElem = document.getElementById('ssIFrame_google');
if (iframeElem) {
  iframeElem.remove();
}

but when I reached the stage of processing the response about successful authentication, I faced the error described by you: popup_closed_by_user.
When I commented out my code to remove iframe - sign in was successful.

--
I can assume that your browser filters the content and removes this iframe.

Solution 13:^[13]

Change port number and run the app again. To change the port number you need to update port number under package.json file:

"scripts": {
    "start": "set PORT=3006 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
 }

Note: Here port number is changed to 3006.

Now, run application using npm start.

Solution 14:^[14]

Check that your onsuccess method doesn't throw any errors.

In my case, all failures in onsuccess method were falling into onfailure with { error: "popup_closed_by_user" } argument, without any error messages in devtools console.

Solution 15:^[15]

I had the same issue with Firebase auth, but in my case localhost was already present in my config. I needed to specifically add my local IP address (for testing on mobile) to the Authorized Domains list as well.

Solution 16:^[16]

IF you are in development mode and you are using your PC's IP address to access the site on mobile,Make sure you add the IP address to the authorized domain in firebase.

This worked for me

Solution 17:^[17]

I solved this issue by changing the src attribute of the script element from https://apis.google.com/js/platform.js into https://apis.google.com/js/api.js

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	Craicerjack
Solution 2
Solution 3	harsha
Solution 4	Hoang Duong
Solution 5	Pulkit Aggarwal
Solution 6
Solution 7	Sven Bluege
Solution 8	user4920718
Solution 9
Solution 10	Naman Barkiya
Solution 11
Solution 12	ZoomAll
Solution 13	Arkistarvh Kltzuonstev
Solution 14	Kris Ku
Solution 15	Scrimothy
Solution 16	Ambarish
Solution 17	sta

'Google SSO login error: "popup_closed_by_user"

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]