Google Sign-in not working in Next.js with Firebase due to Cross-Origin-Opener-Policy error
P粉020085599
2023-08-25 20:30:33
<p>I'm developing a web application using Next.js and Firebase. I have successfully implemented Google Sign-in in my application, but I'm running into an issue that prevents the sign-in process from completing as expected. </p>
<p>When I try to log in, a popup appears as expected. However, in the console I see the following error: </p>
<pre class="brush:php;toolbar:false;">Cross-Origin-Opener-Policy policy would block the window.closed call.</pre>
<p>Due to this error, the login process cannot be completed and the user cannot log in correctly. </p>
<p>Some further context: I'm testing this functionality in a development environment on localhost. <strong>This issue exists on Chrome but not Firefox. </strong></p>
<p>Is this error caused by a misconfiguration of Cross-Origin-Opener-Policy? If so, how do I properly configure this policy in my Next.js application for Google Sign-in with Firebase? </p>
Yes, this may have something to do with the COOP configuration of your pages, login pages, and how they interact. When two pages do not have the same COOP, they end up in separate browsing context groups, which may prevent certain interactions, such as the window.close method.
It's hard to give an exact solution without seeing your code and implementation, but you can try modifying your COOP so that it matches the COOP of the login page. This can be
same-origin
orsame-origin-allow-popups
.These headers can be set in the NextJS configuration: https ://nextjs.org/docs/pages/api-reference/next-config-js/headers
In your case:
This seems to be a problem that has not been solved for a long time. However, please try the following
You can also refer to the Cross-Origin Isolation Guide- https://web.dev /cross-origin-isolation-guide/ and MDN Documentation to learn more about Cross-Origin- More information on Opener-Policy
If you are using the Google API, make sure to also add the URI with the port, such as
localhost:3000
. You can check out my live website - https://radheshyamdas.com/ I am using firebase auth .js built with Next