Angular应用Firebase集成Line登录在iPhone Safari报错求助

核心原因 #

这个问题本质是Safari的智能跟踪预防（ITP）机制限制了跨域sessionStorage访问，结合Firebase Auth与Line OIDC集成的特定流程所导致：

• Firebase Auth处理第三方登录时，会用sessionStorage存储授权流程的state参数，用于验证回调合法性；
• Safari的ITP会严格限制跨域页面对sessionStorage的读写，Line的OIDC回调流程在Safari下无法正确读取或写入该state，最终触发报错；
• Google登录和手机号认证不受影响，是因为Google的OIDC流程与Firebase Auth适配更完善，且手机号认证不涉及跨域第三方跳转。

至于是Firebase还是Line的问题：更偏向两者的适配兼容性问题，Safari的隐私政策放大了这个矛盾——单独一方的流程在其他浏览器正常，但组合后在Safari触发了限制。

可行解决方案 #

1. 强制Firebase Auth使用localStorage替代sessionStorage #

Firebase Auth默认用sessionStorage存储临时状态，你可以在登录操作前强制指定使用localStorage，它在Safari下的跨域限制更宽松：

import { getAuth, setPersistence, Auth } from "firebase/auth";

const auth = getAuth();
// 登录前设置持久化方式
await setPersistence(auth, Auth.Persistence.LOCAL);

设置后调用signInWithPopup，Firebase会将state存在localStorage中，避免sessionStorage被Safari限制导致丢失。

2. 严格校验Line回调URL配置 #

确保Line开发者后台配置的回调URL，与Firebase控制台中Line身份提供商的回调URL完全一致（包括协议、域名、路径，无多余字符）：

• Firebase生成的回调URL通常为https://<your-project-id>.firebaseapp.com/__/auth/handler，必须一字不差填入Line的回调地址；
• Safari对跨域回调的校验比Chrome严格，微小差异都可能导致状态无法正常传递。

3. 升级Firebase SDK到最新版本 #

Firebase团队会持续修复浏览器兼容性问题，尤其是Safari的ITP相关适配。直接更新@angular/fire和firebase依赖到最新稳定版，可能已解决Line登录的Safari兼容问题。

4. 临时切换到redirect模式（备选） #

如果popup模式始终无法解决，可以尝试改用signInWithRedirect，Firebase对该模式的Safari优化更成熟：

import { getAuth, signInWithRedirect, getRedirectResult, LineAuthProvider } from "firebase/auth";

const auth = getAuth();
const provider = new LineAuthProvider();

// 触发登录跳转
signInWithRedirect(auth, provider);

// 应用初始化时处理回调
getRedirectResult(auth)
  .then((result) => {
    // 处理登录结果
  })
  .catch((error) => {
    // 处理错误
  });

总结 #

优先尝试修改存储持久化方式和升级SDK，这两个步骤成本最低且能保留原有的popup登录体验。如果仍然无效，再检查回调URL配置或切换到redirect模式，比使用signInWithCustomToken更适合保留多平台集成的便利性。

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