跨源隔离(Cross-Origin-Isolated)模式下如何正常使用Firebase Auth？

冲突根因为Cross-Origin-Opener-Policy: same-origin会阻断跨源弹窗和父页面的上下文通信，而firebaseui默认采用弹出式OAuth登录流，依赖该通信能力，所以开启跨源隔离头后会出现登录失败的问题。以下是两种可落地的解决方法：

方案一：切换为重定向登录流（改动成本最低） #

firebaseui原生支持重定向模式的登录流程，该模式不需要依赖跨源弹窗通信，完全不受COOP规则限制，且不需要修改你已配置的跨源隔离响应头。
修改firebaseui初始化配置即可生效，示例代码如下：

const ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', {
  // 其余原有配置保持不变
  signInFlow: 'redirect',
  signInSuccessUrl: '/login-success', // 替换为你项目的登录成功回调路径
  signInOptions: [
    // 保留你原有的登录提供商配置即可
  ]
});

额外需要在登录成功跳转的目标页面增加结果处理逻辑：

firebase.auth().getRedirectResult()
  .then((result) => {
    if (result.user) {
      // 执行登录成功后的业务逻辑
    }
  })
  .catch((error) => {
    // 处理登录异常
  });

方案二：调整COOP响应头取值（保留弹窗登录流） #

如果业务必须保留弹窗式的登录流程，可以将你的Cross-Origin-Opener-Policy响应头取值从same-origin改为same-origin-allow-popups，同时保持Cross-Origin-Embedder-Policy: require-corp不变。
该配置依然满足跨源隔离的触发条件，可以正常使用SharedArrayBuffer执行多线程WASM计算，同时允许你打开的跨源登录弹窗和父页面正常通信，适配firebaseui的默认弹窗登录流。

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