AngularFireAuth验证密码重置码返回auth/invalid-action-code问题

问题场景 #

使用Angular 13项目对接Firebase实现密码重置，读取邮件跳转链接中的查询参数oobCode后调用verifyPasswordResetCode验证时，始终返回auth/invalid-action-code错误，已排查：

• 已正确获取完整的oobCode
• 代码未过期（刚收到邮件就点击验证）
• 代码为首次使用，无重复使用情况

相关代码 #

组件初始化代码：

var routeSnap = this.activatedRoute.snapshot;

if(!routeSnap.queryParams) {
    this.router.navigate(['']);
}

this.mode = String(routeSnap.queryParams['mode']);
this.actionCode = String(routeSnap.queryParams['oobcode']);
    
this.authService.VerifyPasswordResetCode(this.actionCode)
    .then(() => {
        this.actionCodeChecked = true;
    })
    .catch(e => {
        // Invalid or expired action code. Ask user to try to
        // reset the password again.
        alert(e);
        this.router.navigate(['']);
    });

AuthService方法：

VerifyPasswordResetCode(code: string) {
    return this.afAuth.verifyPasswordResetCode(code)
}

可能的故障原因及解决办法 #

1. 查询参数大小写不匹配 #

Firebase跳转链接中的参数是oobCode（首字母大写C），但代码中读取的是routeSnap.queryParams['oobcode']（全小写），部分环境会严格区分查询参数的大小写，导致获取的参数无效。
解决办法：统一参数名的大小写，修改代码为：

this.actionCode = String(routeSnap.queryParams['oobCode']);

2. URL编码/解码异常 #

邮件中的链接可能经过URL编码，特殊字符（如+、/、=）在传递过程中若未正确解码，会导致代码变形失效。
解决办法：对获取到的actionCode进行URL解码：

this.actionCode = decodeURIComponent(String(routeSnap.queryParams['oobCode']));

3. Firebase项目配置不一致 #

验证代码的Firebase项目，和发送密码重置邮件的项目不是同一个（如测试/生产环境混淆），导致代码无法被识别。
解决办法：检查environment.ts中的Firebase配置，确保apiKey、authDomain等核心参数和发送邮件的项目完全一致。

4. 路由跳转导致参数丢失 #

页面初始化时若存在额外路由守卫、重定向逻辑，可能导致查询参数在传递过程中丢失或被修改。
解决办法：改用queryParams订阅获取参数（而非仅依赖snapshot的初始值），同时检查路由逻辑确保参数保留：

this.activatedRoute.queryParams.subscribe(params => {
  if (!params) {
    this.router.navigate(['']);
    return;
  }
  this.mode = params['mode'];
  this.actionCode = decodeURIComponent(params['oobCode']);
  
  this.authService.VerifyPasswordResetCode(this.actionCode)
    .then(() => {
      this.actionCodeChecked = true;
    })
    .catch(e => {
      alert(e);
      this.router.navigate(['']);
    });
});

5. 依赖版本兼容性问题 #

@angular/fire与firebase JS SDK版本不兼容，导致验证方法行为异常。
解决办法：检查package.json中的依赖版本，确保两者版本匹配，重新安装依赖：

npm install @angular/fire@latest firebase@latest

内容的提问来源于stack exchange，提问作者J. Ruffell