Google Identity Service Oauth2 detect if consent pop-up is closed

user_10456639 0
Viewed 521

I am using Google Identity Services, and facing some problems. Have a look at the function below to loginUser and get the access_token:

const client = (window as any).google.accounts.oauth2.initTokenClient({
  client_id: process.env.GOOGLE_CLIENT_ID,
  scope: `profile email`,
  callback: '' // defined at request time
});

const loginUser = async () => {
  const tokenResponse = await new Promise<TokenResponse>((resolve, reject) => {
    try {
      // Settle this promise in the response callback for requestAccessToken()
      client.callback = (resp) => {
        if (resp.error !== undefined) {
          reject(resp);
        }
        resolve(resp);
      };
      // requesting access token
      client.requestAccessToken({ prompt: 'consent' });
    } catch (err) {
      console.log(err)
    }
  });
  return tokenResponse;
}

Invoking loginUser() causes a new pop-up.

  • If the user selects an account, I get the tokenResponse (which contains access_token). Works great.
  • But if the user closes the pop-up, the Promise never resolves, since we are waiting for the callback to fire, which never happens.

Is there a way we could detect if the user has closed the pop-up?

react-google-login google-identity google-signin google-oauth javascript
2 Answers

Here are the two solutions which you can consider if you're facing this issue.

Solution 1

Go back to the old gapi based login. (Not recommended, as it will be deprecated soon). For more details, on deprecation, refer to this blog by Google.

Solution 2

We add a javascript focus event listener just after opening the popup. So, whenever the user closes the popup and returns to the parent window, we shall consider it as client_focused_back_to_window / pop_up_closed event.

The only edge case is when the user doesn't close the popup and directly returns to the window; the focus event listener will be fired. But I think that's okay because if the user again clicks on Sign In with Google button again, the same pop-up window gets reused (thanks to _blank parameter used by Google Identity services while creating the popUp window).

const client = (window as any).google.accounts.oauth2.initTokenClient({
  client_id: process.env.GOOGLE_CLIENT_ID,
  scope: `profile email`,
  callback: '' // defined at request time
});

/**
 * Function to login the user and return the tokenResponse
 * 
 * It throws error if the login fails or the user cancels the login process
 */
const loginUser = async () => {
  const tokenResponse = await new Promise<google.accounts.oauth2.TokenResponse>(
    (resolve, reject) => {
      const focusEventHandler = () => {
        reject({
          error: 'client_focused_back_to_window',
        });
        window.removeEventListener('focus', focusEventHandler); // removing the event listener to avoid memory leaks
      };
      // adding an event listener to detect if user is back to the webpage
      // if the user "focus" back to window then we shall close the current auth session
      window.addEventListener('focus', focusEventHandler);

      // Settle this promise in the response callback for requestAccessToken()
      client.callback = (resp) => {
        if (resp.error) {
          reject(resp);
        }
        resolve(resp);
      };
      // requesting access token
      client.requestAccessToken({ prompt: 'consent' });
    },
  );
  return tokenResponse;
}

PS: We've been using this solution in production, and so far, thousands, if not millions, of users have tried to log in via Google. Everything is working fine so far.

user_104566390

It appears that this is not working for the current version of GSI.

It did work for the old gapi version and if the popup were to be closed you would get a response with the error: {error: "popup_closed_by_user"}. As referenced in this answer: Google SSO login error: "popup_closed_by_user"

Hopefully adding the #google-oauth tag will allow someone at Google to see this and hopefully update this script.

Please see other referenced question: Google Oauth popup cancellation callback

This is referring to the documentation on https://developers.google.com/identity/oauth2/web/guides/use-code-model#trigger_oauth_20_code_flow and https://developers.google.com/identity/oauth2/web/guides/use-token-model#initialize_a_token_client

In fact the documentation states: Users may close the account chooser or sign-in windows, in which case your callback function will not be invoked..

Question for Google - how can we detect this?!

user_48753960
Related