Firebase OAuth结合onAuthStateChanged在Safari浏览器中无法正常工作

我之前也碰到过Safari和Firebase OAuth配合时的奇怪问题，尤其是重定向登录这块，Safari的隐私策略确实会给这类跨域/重定向的认证流程添不少麻烦。结合你的代码和描述，给你几个可以尝试的方向：

• 检查Safari的隐私设置：Safari默认的“阻止跨站跟踪”选项会影响Firebase的认证Cookie，导致重定向后无法保留会话。你可以先临时关闭这个选项（设置->隐私与安全性->阻止跨站跟踪）测试是否能正常登录。如果有效，那需要在你的认证流程里适配这个情况，比如提示用户调整设置，或者改用signInWithPopup（不过弹窗也可能被Safari拦截，需要引导用户允许弹窗）。

• 手动处理重定向后的会话恢复：有时候Safari在重定向后不会自动触发onAuthStateChanged，你可以手动调用getRedirectResult()在组件挂载时尝试获取认证结果。修改你的useEffect代码如下：

  useEffect(() => {
    const checkRedirectResult = async () => {
      try {
        const result = await getRedirectResult(auth);
        if (result) {
          console.log("重定向认证结果:", result.user);
        }
      } catch (error) {
        console.error("获取重定向结果出错:", error);
      }
    };
    checkRedirectResult();
  
    const unsubscribe = auth.onAuthStateChanged(user => {
      console.log('auth状态变更', user);
      setUser(user);
    });
  
    return unsubscribe;
  }, []);
  

  这样可以主动获取重定向后的认证信息，避免完全依赖onAuthStateChanged的自动触发。

• 调整持久化策略：Safari对localStorage的跨域访问限制比较严格，Firebase Auth默认的持久化方式可能会受影响。你可以尝试改用会话级持久化：

  import { setPersistence, browserSessionPersistence } from 'firebase/auth';
  
  // 在初始化auth后添加这段代码
  setPersistence(auth, browserSessionPersistence)
    .then(() => {
      // 后续的认证操作会使用会话级持久化
    })
    .catch((error) => {
      console.error("设置持久化出错:", error);
    });
  

• 排查模拟器的Websocket连接问题：你提到的Websocket错误可能间接影响状态同步，尝试把模拟器的地址从localhost改成127.0.0.1，比如：

  connectAuthEmulator(auth, 'http://127.0.0.1:9099');
  connectFirestoreEmulator(db, '127.0.0.1', 8080);
  

  Safari对本地域名的跨域策略可能和IP地址不同，这样调整或许能解决Websocket连接失败的问题。

另外，还要确保你的Firebase项目中已经把测试域名（比如localhost）添加到授权的OAuth重定向域名列表里，这是基础配置，别漏掉了。

备注：内容来源于stack exchange，提问作者SubsH