Firebase多因子登录中reCAPTCHA首次验证通过即自动重置的问题排查

你遇到的刚打勾就重置的问题，本质是React的渲染机制和Firebase reCAPTCHA的原生SDK绑定逻辑冲突，两个核心叠加问题直接触发了重置：

• 每次进入多因子校验分支，你都在登录请求的回调链路里临时new RecaptchaVerifier，没有做实例缓存。只要组件因为任何状态更新触发重渲染，旧verifier和DOM的绑定关系就会失效，SDK会检测到容器异常，直接重置组件状态
• reCAPTCHA验证完成的回调里，你直接同步触发了setCaptchad(true)、setIsLoading(false)两个状态更新。这些更新会立刻让组件重渲染，而你用来挂reCAPTCHA的captchaRef.current对应的DOM节点，在重渲染过程中会被重新插入DOM树，Google SDK发现容器DOM变了，就会把刚打勾的状态清空，重新加载验证组件
• 你在多因子分支里连续执行的setResolver、setHints、setPhoneVerifyRequired本身已经触发了多次连续重渲染，只是刚好在你勾选完reCAPTCHA的瞬间，赶上了某一次重渲染，才会出现“刚验证完就重置”的观感。

• 把RecaptchaVerifier从流程内的临时变量，改成组件级的持久化引用，用useRef存储，不要在登录回调里临时新建实例。参考实现：

  // 组件顶层定义，不要放在任何回调函数内部
  const recaptchaVerifierRef = useRef(null);
  const captchaContainerRef = useRef(null);
  
  // 仅初始化一次verifier，避免重复创建
  const getRecaptchaVerifier = () => {
    if (!recaptchaVerifierRef.current && captchaContainerRef.current) {
      recaptchaVerifierRef.current = new firebase.auth.RecaptchaVerifier(
        captchaContainerRef.current,
        {
          size: 'normal',
          callback: (response) => {
            // 把状态更新延后到SDK提交完验证结果之后，避免同步更新打断流程
            setTimeout(handleSolved, 0)
          },
          'expired-callback': () => {
            console.log('captcha expired')
          },
          hl: locale
        },
        firebaseApp
      )
    }
    return recaptchaVerifierRef.current
  }
  

• 给承载reCAPTCHA的DOM容器加固定的key，并且不要在这个div上绑定任何随状态变化的style、className，避免React重渲染时把这个节点当成动态可替换节点销毁：

  <div
    ref={captchaContainerRef}
    key="fixed-recaptcha-container"
  ></div>
  

• 调用verifyPhoneNumber的时候，直接用上面缓存好的verifier实例，不要在调用前临时创建：

  const verifier = getRecaptchaVerifier()
  return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, verifier)
    .then(verificationId => setVerificationId(verificationId))
  

• 加组件卸载的清理逻辑，避免内存泄漏：

  useEffect(() => {
    return () => {
      if (recaptchaVerifierRef.current) {
        recaptchaVerifierRef.current.clear()
        recaptchaVerifierRef.current = null
      }
    }
  }, [])
  

• 不要随便换成第三方React版的reCAPTCHA组件包，因为PhoneAuthProvider只能识别和Firebase Auth SDK绑定的verifier实例，第三方包生成的实例无法被SDK识别，反而会触发更多验证不通过的问题
• 如果开发环境开了React.StrictMode，会出现组件双挂载的情况，第一次挂载时创建的verifier会在模拟卸载时被清空，第二次挂载时如果没重新做DOM绑定，就会出现reCAPTCHA加载异常、验证完就重置的问题，这种情况只要在初始化verifier的时候先判断容器DOM是否存在，不存在就跳过初始化即可
• 不要把reCAPTCHA容器放在条件渲染的节点里，一旦条件变化容器被卸载，再重新挂载时就会出现状态重置

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