Firebase双因素认证手机号更新验证问题：执行时需重新登录

核心问题1：错误套用MFA会话流程 #

你在验证新手机号时调用了multiFactor(user).getSession()，这是专门用于多因素认证（MFA）场景的方法（比如添加MFA验证设备），但更新用户手机号属于基础账户信息修改，完全不需要走MFA会话流程。这个多余的操作会触发Firebase的安全校验机制，直接导致系统要求用户重新登录。

核心问题2：缺失updatePhoneNumber方法导入 #

代码里直接调用了updatePhoneNumber函数，但没有从firebase/auth库中导入它，运行时会触发错误，间接引发登录状态异常。

潜在问题3：Recaptcha可能未完全就绪 #

useRecaptcha中初始化RecaptchaVerifier后立刻更新状态，但Recaptcha的初始化是异步过程，可能导致点击验证按钮时recaptcha还是null，验证失败后触发登录要求。

修复后的代码示例 #

1. 修正verifyPhoneNumber函数，移除MFA会话逻辑 #

async function verifyPhoneNumber(user, phoneNumber, recaptchaVerifier) {
  const phoneAuthProvider = new PhoneAuthProvider(fbAuth);
  try {
    // 直接验证手机号，无需MFA session
    return await phoneAuthProvider.verifyPhoneNumber(phoneNumber, recaptchaVerifier)
  } catch (e) {
    throw new Error(e.message);
  }
}

2. 补充updatePhoneNumber方法导入 #

在HomePage的导入段添加：

import { PhoneAuthProvider, updatePhoneNumber } from "firebase/auth";

3. 增加Recaptcha就绪判断（可选） #

在点击验证按钮时先检查Recaptcha状态，避免空值调用：

<Button
  onClick={async () => {
    setIsLoading(true);
    try {
      if (!recaptcha) {
        alert("验证组件未就绪，请稍后重试");
        return;
      }
      const result = await verifyPhoneNumber(user, phoneNumber, recaptcha);
      setVerificationId(result);
    } catch (error) {
      alert(error.message)
    }
    setIsLoading(false);
  }}>验证新手机号</Button>

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