onNonOAuthError returning "Popup window closed" on production after React 18 update

[db-qc]

I have an issue I'm hoping someone might be able to shed light on.

  const googleLogin = useGoogleLogin({
    flow: 'auth-code',
    onSuccess: async (codeResponse) => {
      try {
        const tokens: any = await axios.post(
          `/google?code=${codeResponse.code}`,
          {}
        );
        setToken(tokens.data);
        console.log('codeResponse', codeResponse);
        console.log('tokens', tokens);
      } catch (err) {
        console.log('err', err);
      }
    },
    onError: (errorResponse) => console.log('onError: ', errorResponse),
    onNonOAuthError: (errorResponse) =>
      console.log('onNonOAuthError: ', errorResponse)
  });

This is the flow and hook that I'm using. This function (googleLogin()) is called when the user clicks on a simple button component with an onClick event.

    <GoogleButton
      onClick={() =>googleLogin()}
    />

This works wonderfully locally, however, when I push it to our staging environment, I get an error returned immediately after clicking the button, but the modal doesn't close visually:

{
  "message": "Popup window closed",
  "stack": "<snipped out>",
  "type": "popup_closed"
}

I read some pointers in other issues, and I noticed that it could be due to incorrect configuration. However, this is not the case as I'll explain.

Recently I made some big package updates, one of them being an update from React 16 -> React 18. I tried deploying the old app that was running React 16, and everything worked fine both locally and in staging which implies to me that the configuration inside Google Cloud Console is correct.

I thought it might be due to some double rendering shenanigans from React 18, but the issue is on a production build which shouldn't be affected, and it does work locally where it should have been an issue.

[sqrrrl]

Possible that this has more to do with the response headers for your app. If your production instance is setting Cross-Origin-Opener-Poiicy: same-origin, you may need to change that to same-origin-allow-popups.

See https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#cross_origin_opener_policy

[db-qc]

Thanks, I will take a look into that however I'm a little skeptical that it'll work as when I push the "pre-updated" version of our app to staging, it works.

Our "pre-updated" app used React 16 and CRA with webpack <- This worked on the same environment Our "updated" app uses React 18 and Vite. <- This one stopped working.

[MomenSherif]

@db-qc it should be working with React 18

Give it a try with a new vite project & tell me if there's an issue with that

[hatembarakat98]

@MomenSherif @db-qc Hello there I'm facing the same issue and I'm using react 18.2.0 did you get to any solution please tell me

[accacin]

@MomenSherif Hi, I'm on my personal account but I've made a small vite project to demo the issue I'm having:

https://github.com/accacin/react-oauth-repro

I've added a Dockerfile as it mirrors how our app runs in production, and displays the same error that I'm having:

1. Add clientId to "App.jsx"
2. Run docker build -t repro .
3. Run docker run -d --rm -p 3000:3000 --name repro repro
4. Navigate to localhost:3000
5. Open developer console, click on the "Sign in with Google" button
6. Should be able to see the onNonOAuthError in the console

[agentx3]

Same issue here

EDIT: Update, I was able to generate an auth code bypassing the popup by doing the following:

  const login = useGoogleLogin({
    overrideScope: true,
    scope: 'profile email',
    flow: 'auth-code',
    state: '<state>',
    redirect_uri: '<url>',
    ux_mode: 'redirect'
  })
  return <button onClick={login}>Sign in with Google 🚀 </button>

This won't trigger the onSuccess/onError callbacks, but it'll at least send you to the redirect_uri with state and code that you can retrieve from the search params.

[db-qc]

@agentx3 Yeah I did the same, I just used the redirect mode and it works fine.

I'm very surprised that more people are not hitting this issue, as it's very easy to reproduce. I'm guessing a lot of people are using this library for local projects and never deploying to production maybe.

[Vizoni]

2025 and I'm still facing the same thing. Any news?