Firebase多因素认证报错：Missing required parameters: sitekey

问题根源 #

你的RecaptchaVerifier初始化时未显式传入sitekey参数，尽管Firebase配置文件中已填写密钥，但RecaptchaVerifier构造函数需要单独指定sitekey；同时verifyPhoneNumber的参数格式也存在错误。

修复步骤 #

1. 修正RecaptchaVerifier初始化逻辑 #

在onCaptchaVerify函数中，给RecaptchaVerifier的配置对象添加sitekey字段，值为你从Firebase控制台获取的reCAPTCHA网站密钥：

function onCaptchaVerify(callback) {
  if (!window.RecaptchaVerifier) {
    window.recaptchaVerifier = new RecaptchaVerifier(
      recaptchRef,
      {
        size: "invisible",
        sitekey: "你的reCAPTCHA网站密钥", // 新增sitekey参数
        callback: (response) => {
          callback && callback();
        },
        "expired-callback": () => {},
      },
      auth
    );
    // 等待验证码渲染完成后执行回调
    window.recaptchaVerifier.render().then(() => {
      callback && callback();
    });
  } else {
    // 已初始化时直接执行回调
    callback && callback();
  }
}

2. 修正verifyPhoneNumber调用格式 #

verifyPhoneNumber的第二个参数需直接传入recaptchaVerifier实例，而非包裹在对象中：

const handleSubmit = (e) => {
  setLoading(false);
  const { email, password } = e.target.elements;

  firebaseConfig
    .auth()
    .signInWithEmailAndPassword(email.value, password.value)
    .then((userCredential) => {
      setRedirectToError(false);
      console.log(email.value);
    })
    .catch((error) => {
      if (error.code === "auth/multi-factor-auth-required") {
        const _resolver = getMultiFactorResolver(auth, error);
        console.log("set resolver", _resolver);
        setResolver(_resolver);

        const phoneInfoOptions = {
          multiFactorHint: _resolver.hints[0],
          session: _resolver.session,
        };
            
        const phoneAuthProvider = new PhoneAuthProvider(auth);
        // 确保验证码加载完成后再请求短信验证码
        onCaptchaVerify(() => {
          console.log("Recaptcha callback");
          phoneAuthProvider
            .verifyPhoneNumber(phoneInfoOptions, window.recaptchaVerifier) // 修正参数格式
            .then(function (verificationId) {
              console.log("verificationID", verificationId);
              setVerificationId(verificationId);
            });
        });
      } else if (error.code === "auth/wrong-password") {
        console.error(error);
        setRedirectToError(true);
        setError(error.message);
      }
    });
};

3. 额外检查项 #

• 确认sitekey是reCAPTCHA网站密钥（而非密钥），可在Firebase控制台「认证」->「登录方法」->「电话号码」页面查看。
• 确保recaptchRef对应的DOM元素在页面中存在，且初始化RecaptchaVerifier时该元素已完成挂载（比如React中用useEffect确保DOM加载完成）。
• 不要混用reCAPTCHA v2和v3，Firebase MFA推荐使用v2的invisible模式。

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