使用TypeScript实现Firebase双因素认证时遇auth/argument-error错误

问题描述 #

跟着Firebase官方JS文档实现双因素认证时，先修正了文档里auth实例先使用后定义的顺序问题，但又遇到TypeScript类型限制——文档里给RecaptchaVerifier构造函数第二个参数传undefined，TS不允许这种写法。试了多种替代方式后，始终触发FirebaseError: Firebase: Error (auth/argument-error)错误。项目基于Angular+AngularFire，代码写在服务中供登录组件调用。

解决步骤 #

1. 按AngularFire规范获取Auth实例 #

在Angular项目中，不要手动初始化Firebase Auth，直接通过AngularFireAuth注入获取实例，确保实例状态正确就绪。

2. 符合TS类型的RecaptchaVerifier写法 #

Firebase的RecaptchaVerifier构造函数第二个参数是可选的配置对象（类型为RecaptchaVerifierConfig），TS不接受直接传undefined。你可以直接省略该参数，或传空对象{}，也可按需传入合法配置项。

以下是完整的服务代码示例：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { RecaptchaVerifier, signInWithPhoneNumber, ConfirmationResult } from 'firebase/auth';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private afAuth: AngularFireAuth) {}

  async sendVerificationCode(phoneNumber: string): Promise<ConfirmationResult> {
    // 获取已初始化的Auth实例
    const auth = await this.afAuth.authState.toPromise();
    if (!auth) throw new Error('Auth实例未就绪');

    // 初始化RecaptchaVerifier，按需传入配置，或直接省略第三个参数
    const recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
      size: 'invisible', // 可选尺寸：normal/compact/invisible
      callback: (response) => {
        // Recaptcha验证成功回调
      },
      'expired-callback': () => {
        // Recaptcha过期回调
      }
    });

    // 发送手机号验证码
    return signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier);
  }

  // 验证用户输入的验证码
  async verifyCode(confirmationResult: ConfirmationResult, code: string) {
    return confirmationResult.confirm(code);
  }
}

必看注意事项 #

• 确保模板中存在ID为recaptcha-container的DOM元素，Recaptcha会渲染在此处；
• 若无需额外配置，直接写new RecaptchaVerifier(auth, 'recaptcha-container')即可，不用传第三个参数；
• 必须等Auth实例完全初始化后再创建RecaptchaVerifier，避免因实例未就绪触发参数错误。

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