Firebase OTP配置报错：无法读取'appVerificationDisabledForTesting'属性

问题描述 #

使用最新版Firebase配置OTP功能时，提交reCAPTCHA出现如下错误：

react-dom.development.js:4312 Uncaught TypeError: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting')

首次配置OTP功能，尝试多种方案未解决，相关代码如下：

// firebase.config.js
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app)

// Otp组件
import React, { useState } from 'react';
import OTPInput from 'react-otp-input';
import { useParams } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { auth } from '../firebase.config';

import {  RecaptchaVerifier } from "firebase/auth";
import toast, { Toaster } from 'react-hot-toast';
const Otp = () => {
  const [otp, setOtp] = useState('');
  const [user, setUser] = useState(null);
  const [showOTP, setShowOTP] = useState(false);
  const handleOtpChange = (otp) => {
    setOtp(otp);
  };

  const renderInput = (inputProps) => (
    <input {...inputProps} style={{ width: '3rem', height: '3rem' }} />
  );
  const { phoneNumber } = useParams();
  const submittedData = useLocation().state.submittedData;

  console.log(submittedData)

  function onCaptchaVerify() {
    if (!window.recaptchaVerifier) {
      window.recaptchaVerifier = new RecaptchaVerifier(
        "recaptcha-container",
        {
          size: "invisible",
          callback: (response) => {
            onSignup();
          },
          "expired-callback": () => {},
        },
        auth
      );
    }
  }
  function onSignUp(){
    onCaptchaVerify()
    const appVerifier = window.recaptchaVerifier
    signInWithPhoneNumber(auth, phoneNumber, appVerifier)
    .then((confirmationResult) => {
      window.confirmationResult = confirmationResult;
      setShowOTP(true);
      toast.success("OTP sent sucessfully!")
    }).catch((error) => {
      console.log(error)
    });
  }
  return (
    <div>
      <Toaster toastOptions={{duration:4000}} />
      <h1>OTP VALIDATION</h1>
      <div id="recaptcha-container"></div>
      <p>Phone Number: {phoneNumber}</p>
      <OTPInput
        value={otp}
        onChange={handleOtpChange}
        numInputs={6}
        separator={<span>-</span>}
        renderInput={renderInput}
        shouldAutoFocus
      />
      <button onClick={onSignUp}>Validate</button>
    </div>
  );
};

export default Otp;

解决方案 #

• 补全缺失的导入：

  1. firebase.config.js中缺少initializeApp的导入，添加后才能正确初始化Firebase应用：

     import { initializeApp } from "firebase/app";
     import { getAuth } from "firebase/auth";
     

  2. Otp组件中调用了signInWithPhoneNumber但未导入，需要更新导入语句：

     import { RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
     

• 修正函数名拼写错误：onCaptchaVerify里的回调调用了onSignup()，但实际登录函数是onSignUp()（大小写不一致），修改为：

  callback: (response) => {
    onSignUp();
  },
  

• 优化reCAPTCHA初始化时机：建议在组件挂载时初始化reCAPTCHA，避免重复创建实例，同时确保DOM元素已存在：

  1. 导入useEffect：

     import React, { useState, useEffect } from 'react';
     

  2. 添加初始化逻辑：

     useEffect(() => {
       if (!window.recaptchaVerifier) {
         window.recaptchaVerifier = new RecaptchaVerifier(
           "recaptcha-container",
           {
             size: "invisible",
             callback: () => {
               onSignUp();
             },
             "expired-callback": () => {},
           },
           auth
         );
       }
     }, []);
     

     之后onSignUp函数中可以去掉onCaptchaVerify()调用。

• 验证手机号格式：确保phoneNumber符合E.164标准（如+8613800138000），格式错误会导致验证流程异常。

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