search

MomenSherif / react-oauth

Google OAuth2 using the new Google Identity Services SDK for React 🚀
https://www.npmjs.com/package/@react-oauth/google
MIT License
1.08k stars 136 forks source link

Cross-Origin-Opener-Policy policy would block the window.closed call. #326

Open Lenur29 opened 8 months ago

Lenur29 commented 8 months ago

Hello @MomenSherif and everybody.

Please help me if you can. When I try to register with my google account and open the registration popup I see this error in the console "Cross-Origin-Opener-Policy policy would block the window.closed call." Dispite of this error it works, but I do not like that it is present in the console. I read about Content Security Policy(MomenSherif attached the link [https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#content_security_policy], but to be honest I do not understand what exactly I need to add to make it work without errors. Has anybody implemented something to solve this error? The same error you can see on this demo [https://react-oauth.vercel.app/] when you try "Authorization"

devmahmud commented 8 months ago

Have you found any solution @Lenur29?

Lenur29 commented 8 months ago

@devmahmud unfortunately no( And you? I hope @MomenSherif will help us...

Super515 commented 6 months ago

First, create "CRACO.CONFIG.JS" file //craco.config.js module.exports = { devServer: { headers: {'Cross-Origin-Embedder-Policy': 'require-corp', 'Cross-Origin-Opener-Policy': 'same-origin', }, }, };

Second, install node module. npm install @craco/craco

Third, change "package .json" file

"scripts": { "start": "craco start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }

I hope it would be helpful for you.

nicmart-dev commented 4 months ago

I was able to make the error go away by passing prop use_fedcm_for_prompt mentioned in https://www.npmjs.com/package/@react-oauth/google?activeTab=readme

What hinted me to do that is the mention below in https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#content_security_policy

When FedCM is enabled the browser directly renders popups and no changes are necessary.

EDIT: still troubleshooting though as it then does not log in as login pop up closes after reading "One moment please".

pkelly1088 commented 1 month ago

I am having a similar issue. I don't receive the error messages when I'm using the GoogleLogin component, but I do get it when I'm using the useGoogleLogin hook with the 'auth-code' flow. I get the same results when using the different auth flows in [https://react-oauth.vercel.app/]. It looks like the GoogleLogin component is popping up a different google auth window than useGoogleLogin. I tried setting the CSP and COOP as directed by @MomenSherif in the READ.ME from google, but it didn't fix the issue. @MomenSherif any recommendation or is it possible to change the useGoogleLogin to use the same pop up google auth as GoogleLogin?

ankit-vtt commented 4 weeks ago

I am having a similar issue. I don't receive the error messages when I'm using the GoogleLogin component, but I do get it when I'm using the useGoogleLogin hook with the 'auth-code' flow. I get the same results when using the different auth flows in [https://react-oauth.vercel.app/]. It looks like the GoogleLogin component is popping up a different google auth window than useGoogleLogin. I tried setting the CSP and COOP as directed by @MomenSherif in the READ.ME from google, but it didn't fix the issue. @MomenSherif any recommendation or is it possible to change the useGoogleLogin to use the same pop up google auth as GoogleLogin?

same problem