使用Firebase手机号登录重发OTP时的reCAPTCHA问题求助

问题1：重复渲染reCAPTCHA报错 #

原因：每次调用setUpRecaptha都会创建新的RecaptchaVerifier实例并渲染到同一DOM元素，而reCAPTCHA不允许同一容器重复渲染组件。
解决：只创建一次RecaptchaVerifier实例，后续复用该实例并重置reCAPTCHA状态，而非重复创建。

问题2：reset()方法不存在报错 #

原因：Firebase JS SDK的RecaptchaVerifier类并未提供reset()方法，你混淆了reCAPTCHA原生API与Firebase封装的方法。
解决：使用reCAPTCHA原生API的grecaptcha.reset(widgetId)重置组件，其中widgetId是渲染时获取的组件ID。

问题3：重发OTP时触发auth/internal-error #

原因：复用旧的RecaptchaVerifier实例但未正确重置reCAPTCHA状态，导致验证器处于无效状态，调用signInWithPhoneNumber时触发内部错误。
解决：每次重发OTP前先重置reCAPTCHA组件状态，再调用signInWithPhoneNumber；若实例不存在则创建新实例。

修改后的完整代码 #

let recaptchaVerifier;
let recaptchaWidgetId; // 单独存储组件ID，用于重置操作

// 初始化或重置reCAPTCHA验证器
function initRecaptcha() {
  // 已有实例时，直接重置原生reCAPTCHA组件
  if (recaptchaVerifier && recaptchaWidgetId) {
    grecaptcha.reset(recaptchaWidgetId);
    return;
  }

  // 无实例则创建新的验证器
  recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha-container",
    { size: 'invisible' },
    auth
  );

  // 渲染组件并保存ID
  recaptchaVerifier.render().then((widgetId) => {
    recaptchaWidgetId = widgetId;
  });
}

const getOtp = async (e) => {
  e.preventDefault();
  setError("");
  if (!number) return setError("Please enter a valid phone number!");
  
  try {
    initRecaptcha(); // 初始化/重置reCAPTCHA
    const response = await signInWithPhoneNumber(auth, number, recaptchaVerifier);
    setResult(response);
    setFlag(true);
  } catch (err) {
    setError(err.message);
  }
};

const resendOtp = async (e) => {
  e.preventDefault();
  setError("");
  if (!number) return setError("Please enter a valid phone number!");
  
  try {
    initRecaptcha(); // 重置reCAPTCHA状态
    const response = await signInWithPhoneNumber(auth, number, recaptchaVerifier);
    setResult(response);
    setFlag(true);
  } catch (err) {
    setError(err.message);
  }
};

关键优化点 #

• 用initRecaptcha统一管理验证器的创建与重置，避免重复渲染问题
• 存储recaptchaWidgetId，通过原生API完成组件重置
• 移除冗余的setUpRecaptha和setUpRecapthaNew函数，简化逻辑
• 确保每次请求OTP（含重发）前重置reCAPTCHA，保证验证器处于有效状态

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