Firebase多因素认证web端auth/code-expired错误排查求助

问题场景 #

已通过Google Provider登录的用户，实现Firebase SMS多因素认证时，所有函数控制台输出正常，但使用真实号码时，在提交reCAPTCHA后2秒内输入收到的OTP会触发「firebase:auth/code-expired」错误；仅使用Firebase测试号码时无此问题。

核心排查方向与代码修改建议 #

1. 过早清除RecaptchaVerifier会话 #

真实号码的短信发送流程存在运营商延迟，而测试号码为模拟即时生成。代码中在拿到verificationId后立即清除reCAPTCHA会话，可能导致Firebase后端尚未完成验证码生成流程，会话提前失效。

修改方案：将recaptchaVerifier.clear()移到OTP验证完成后执行：

// 修改setUpRecaptcha，返回verificationId和recaptchaVerifier
const setUpRecaptcha = async (phoneNumber) => {
  const recaptchaContainer = document.getElementById("recaptcha-container");
  if (recaptchaContainer) {
    try {
      const recaptchaVerifier = new RecaptchaVerifier(
        auth,
        recaptchaContainer,
        {
          size: "normal",
          callback: function () {},
          "expired-callback": function () {},
        },
      );

      await recaptchaVerifier.render(); // 等待reCAPTCHA渲染完成
      const response = await verifyPhoneNumber({
        phoneNumber,
        recaptchaVerifier,
      });

      if (response) {
        return { verificationId: response, recaptchaVerifier };
      } else {
        return null;
      }
    } catch (e) {
      console.log("got the err", e);
    }
  } else {
    return null;
  }
};

// 修改GetOtp，保存recaptchaVerifier引用
export const GetOtp = async (
  phoneNumber,
  setPhoneNumber,
  setVerificationId,
  setRecaptchaVerifier // 新增状态保存verifier
) => {
  try {
    console.log("processing..");
    const result = await setUpRecaptcha(phoneNumber);
    if (result) {
      setVerificationId(result.verificationId);
      setRecaptchaVerifier(result.recaptchaVerifier);
    }
    setPhoneNumber("");
  } catch (error) {
    setPhoneNumber("");
  }
};

// 修改VerifyOtp，验证完成后清除reCAPTCHA
export const VerifyOtp = async (verificationId, otp, setPhoneVerified, setOtp, toast, recaptchaVerifier) => {
    try {
      const response = await enrollUser( verificationId, otp );
      if (response) {
        setPhoneVerified(true);
        setOtp("");
        toast.success("Phone is Authenticated");
      }
    } catch (err) {
      console.log("can't submit otp", err);
    } finally {
      if (recaptchaVerifier) {
        recaptchaVerifier.clear();
      }
    }
};

2. 未等待reCAPTCHA渲染完成就发起验证 #

原代码中recaptchaVerifier.render()是异步操作，但未等待其完成就调用verifyPhoneNumber，真实号码场景下可能导致会话初始化不完整。

修改点：在setUpRecaptcha中添加await等待渲染完成（已包含在上述代码中）。

3. Firebase真实号码的验证码同步延迟 #

测试号码的验证码为即时生成，而真实号码的验证码需要通过运营商发送，存在后端处理+网络延迟。即使你2秒内输入OTP，实际验证码可能是在reCAPTCHA验证完成后才生成，导致verificationId与验证码不匹配触发过期错误。

排查步骤：

• 记录verificationId生成时间与收到短信的时间差，确认延迟时长
• 尝试等待5秒后再输入OTP，验证是否还会触发错误

4. 检查Firebase后台日志 #

登录Firebase控制台，进入Authentication > 日志，查看是否存在与短信发送、验证码验证相关的错误，比如：

• SMS sending failed
• Rate limit exceeded
• 验证码生成超时记录

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