Angular Fire中signInWithRedirect方法登录回调跳转异常求助

针对你遇到的Chrome 117环境下本地/预览渠道登录跳转异常问题，可尝试以下几种解决思路：

1. 调整Chrome第三方Cookie存储设置 #

Chrome 117对第三方上下文的存储策略做了收紧，本地开发环境、Firebase预览渠道可能被判定为非第一方站点，导致Firebase Auth的会话数据无法正常持久化：

• 打开Chrome设置，搜索"第三方Cookie"，选择"允许所有网站保存和读取Cookie数据"（仅测试用，后续可针对性配置站点例外）
• 本地开发时优先使用localhost而非IP地址，避免跨域存储限制触发

2. 优化Angular Fire回调处理逻辑 #

确保应用初始化阶段就处理跳转回调，避免页面切换后回调丢失或重复触发：

import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Router } from '@angular/router';

constructor(private afAuth: AngularFireAuth, private router: Router) {}

ngOnInit() {
  // 在根组件初始化时处理跳转结果，而非仅在登录页
  this.afAuth.getRedirectResult().then(result => {
    if (result.user) {
      this.router.navigate(['/home']); // 登录成功直接跳转到主页
    }
  }).catch(error => {
    console.error('跳转登录失败:', error);
    // 重置登录状态，避免残留异常会话
    this.afAuth.signOut();
  });
}

3. 清除本地缓存与Service Worker #

Chrome的缓存或旧Service Worker脚本可能导致会话冲突：

• 打开Chrome DevTools → Application面板
• 清除Storage下的所有数据（包括Local Storage、Session Storage）
• 在Service Workers选项中点击"Unregister"注销旧的服务 worker

4. 显式设置Auth会话持久化 #

强制指定会话持久化类型，规避Chrome默认存储策略的影响：

import { AngularFireAuth } from '@angular/fire/compat/auth';
import { auth } from 'firebase/app';

constructor(private afAuth: AngularFireAuth) {}

loginWithGoogle() {
  // 显式设置持久化为本地存储
  this.afAuth.setPersistence(auth.Auth.Persistence.LOCAL)
    .then(() => {
      return this.afAuth.signInWithRedirect(new auth.GoogleAuthProvider());
    })
    .catch(error => {
      console.error('持久化设置失败:', error);
    });
}

5. 避免重复触发跳转请求 #

添加状态锁防止用户多次点击导致重复跳转，引发会话冲突：

isLoggingIn = false;

login() {
  if (this.isLoggingIn) return;
  this.isLoggingIn = true;
  
  this.afAuth.signInWithRedirect(new auth.GoogleAuthProvider())
    .finally(() => {
      this.isLoggingIn = false;
    });
}

6. 升级SDK版本 #

Chrome 117的更新可能暴露了旧版Angular Fire/Firebase SDK的兼容性问题，尝试升级到最新版本的@angular/fire和firebase依赖包，官方可能已修复相关跳转回调问题。

内容的提问来源于stack exchange，提问作者Uday Kumar A B