Firebase谷歌登录部署后遇COOP错误，弹窗无法打开

你的问题核心是部署后的网站设置了严格的Cross-Origin-Opener-Policy（COOP）HTTP头，导致谷歌登录弹窗无法与主页面共享浏览器上下文，进而触发错误。下面是两种可行的解决办法：

方法一：调整部署平台的COOP头配置 #

大多数现代部署平台（如Vercel、Netlify、Firebase Hosting）会默认启用COOP/COEP头来提升安全性，但这会阻断跨源弹窗的正常交互。你需要将COOP头设置为unsafe-none（允许与任何跨源文档共享上下文），或者根据平台规则配置允许谷歌登录域名的例外：

• 如果你用Firebase Hosting，在firebase.json的headers字段中添加配置：

{
  "hosting": {
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Cross-Origin-Opener-Policy",
            "value": "unsafe-none"
          }
        ]
      }
    ]
  }
}

• 其他平台可在对应配置文件（如Vercel的vercel.json）或项目后台的HTTP头设置中添加相同规则。

方法二：改用重定向登录替代弹窗 #

如果调整HTTP头受限，可将signInWithPopup替换为signInWithRedirect，重定向方式不受COOP规则限制：
修改你的登录逻辑：

import { signInWithRedirect, getRedirectResult } from 'firebase/auth';

// 触发谷歌登录的函数
const handleSignWithGoogle = async () => {
  try {
    await signInWithRedirect(auth, provider);
  } catch (error) {
    console.error('Error signing in with Google:', error);
  }
};

// 在应用入口或登录页面的初始化逻辑中获取重定向结果
useEffect(() => {
  const fetchLoginResult = async () => {
    try {
      const result = await getRedirectResult(auth);
      if (result) {
        console.log(result);
        setUser({
          name: result.user.displayName,
          email: result.user.email,
        });
        setToken(result.user.accessToken);
      }
    } catch (error) {
      console.error('Error fetching login result:', error);
    }
  };

  fetchLoginResult();
}, [auth]);

注意：重定向方式会让用户跳转到谷歌登录页，完成后再返回应用，体验上和弹窗略有不同，但能彻底规避COOP相关限制。

内容的提问来源于stack exchange，提问作者comder singh