Cross-Origin-Opener-Policy policy would block the window.postMessage call

[venkatkumar-tpp]

I am facing this issue in my react app, when I click Google Sign In Button,

Cross-Origin-Opener-Policy policy would block the window.postMessage call. Uncaught TypeError: onSuccessRef.current is not a function at Io.callback (application-d9613a1c64bca6942ad163e9b69cace32f737c4397c93f14052aefa831b9049b.js:52877:24) at Pp.ia (client:259:421) at Io.ia (client:269:45) at Rp.c.port1.onmessage (client:258:72)

Can someone help, how to solve this error ?

[sid25298]

We are facing the same issue. Please check ASAP.

[Zdraff]

Same issue.

[mthli]

We are facing the same issue when set the ux_mode='popup'

But I found that the onSuccess() method still works, just the Google Sign In Button UI not updated (when I refresh the page then everything looks fine).

So the workaround is use the window.location.reload() in onSuccess() as follow:

<GoogleLogin
  ux_mode='popup'
  onSuccess={response => {
    // We have to refresh again after success, because of
    // https://github.com/MomenSherif/react-oauth/issues/289
    window.location.reload()

    // DO SOMETHING...
  }}
/>

[sinha2773]

I am also getting the below issue when using Oauth if I commented it then the project run perfectly

<GoogleOAuthProvider clientId=REACT_APP_GOOGLE_CLIENT_ID>
                            <GoogleLogin
                            width="300"
                            onSuccess={handleGoogle}
                            />
                            </GoogleOAuthProvider>

can anyone please help me

ERROR A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information. at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:79564:23) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:79610:35) at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:96283:13) at unstable_runWithPriority (http://localhost:3000/static/js/bundle.js:110595:16) at runWithPriority$1 (http://localhost:3000/static/js/bundle.js:85847:14) at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:96179:18) at http://localhost:3000/static/js/bundle.js:96077:15 at workLoop (http://localhost:3000/static/js/bundle.js:110555:38) at flushWork (http://localhost:3000/static/js/bundle.js:110533:18) at MessagePort.performWorkUntilDeadline (http://localhost:3000/static/js/bundle.js:110331:31)

[bxljoy]

I'm facing the same issue when I use Google Sign In Button in my React project, and only the popup window causes this issue. I can capture this error in the chrome console, but the Google Sign In Button still works well. And I still want to fix this issue, could you guys help me?

[bxljoy]

I'm facing the same issue when I use Google Sign In Button in my React project, and only the popup window causes this issue. I can capture this error in the chrome console, but the Google Sign In Button still works well. And I still want to fix this issue, could you guys help me?

My issue detail as follows: client:272 Cross-Origin-Opener-Policy policy would block the window.closed call.

Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute. Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery. Resolve this issue by updating the attributes of the cookie: Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use. Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests.

[MomenSherif]

For any CSP issues you will need to specify them for google to work fine added guide for that in the README https://github.com/MomenSherif/react-oauth#content-security-policy-if-needed