Firebase 身份验证错误：TypeError：authInstance._getRecaptchaConfig不是函数

问：

当我提交表格时，我收到上述类型错误。我正在提供动态验证，也使用react路由器。你能帮我解决这个问题吗？最初，我使用 useContext 来获取最新的有效状态，并使用最新的身份验证状态对组件进行条件渲染。所以我使用了 auth-context。但是我删除了它并使用 React 路由器、Firebase 身份验证和本地存储管理页面更改。

import React, {
  useState,
  useEffect,
  useReducer,
//   useContext,
  useRef,
  Fragment,
} from "react";

import Card from "../components/UI/Card/Card";
import Button from "../components/UI/Button/Button";
// import AuthContext from "../store/auth-context";
import Input from "../components/UI/Input/Input";
import classes from "./Signup.module.css";
import { createUserWithEmailAndPassword } from "firebase/auth";
import auth from "../config/firebase";
import { useNavigate } from "react-router";
import { Link } from "react-router-dom";
import MainHeader from "../components/MainHeader/MainHeader";

const emailReducer = (state, action) => {
  if (action.type === "USER_INPUT") {
    return { value: action.val, isValid: action.val.includes("@" && ".com") };
  }
  if (action.type === "INPUT_BLUR") {
    return { value: state.value, isValid: state.value.includes("@" && ".com") };
  }
  return { value: "", isValid: false };
};

const passwordReducer = (state, action) => {
  if (action.type === "USER_INPUT") {
    return { value: action.val, isValid: action.val.trim().length > 6 };
  }
  if (action.type === "INPUT_BLUR") {
    return { value: state.value, isValid: state.value.trim().length > 6 };
  }
  return { value: "", isValid: false };
};

const Signup = (props) => {
  // const [enteredEmail, setEnteredEmail] = useState('');
  // const [emailIsValid, setEmailIsValid] = useState();
  // const [enteredPassword, setEnteredPassword] = useState('');
  // const [passwordIsValid, setPasswordIsValid] = useState();
  const [formIsValid, setFormIsValid] = useState(false);

  const navigate = useNavigate();

  const [emailState, dispatchEmail] = useReducer(emailReducer, {
    value: "",
    isValid: null,
  });
  const [passwordState, dispatchPassword] = useReducer(passwordReducer, {
    value: "",
    isValid: null,
  });

  //   const authCtx = useContext(AuthContext);

  const emailInputRef = useRef();
  const passwordInputRef = useRef();

  useEffect(() => {
    console.log("EFFECT RUNNING");

    return () => {
      console.log("EFFECT CLEANUP");
    };
  }, []);

  const { isValid: emailIsValid } = emailState;
  const { isValid: passwordIsValid } = passwordState;
  const { value: email } = emailState;
  const { value: password } = passwordState;

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("Checking form validity!");
      setFormIsValid(emailIsValid && passwordIsValid);
    }, 500);

    return () => {
      console.log("CLEANUP");
      clearTimeout(identifier);
    };
  }, [emailIsValid, passwordIsValid]);

  const emailChangeHandler = (event) => {
    dispatchEmail({ type: "USER_INPUT", val: event.target.value });

    // setFormIsValid(
    //   event.target.value.includes('@') && passwordState.isValid
    // );
  };

  const passwordChangeHandler = (event) => {
    dispatchPassword({ type: "USER_INPUT", val: event.target.value });

    // setFormIsValid(emailState.isValid && event.target.value.trim().length > 6);
  };

  const validateEmailHandler = () => {
    dispatchEmail({ type: "INPUT_BLUR" });
  };

  const validatePasswordHandler = () => {
    dispatchPassword({ type: "INPUT_BLUR" });
  };

  const submitHandler = async (event) => {
    event.preventDefault();
    if (formIsValid) {
      //   authCtx.onLogin(emailState.value, passwordState.value);
      try {
        const userCredential = await createUserWithEmailAndPassword(
          auth,
          email,
          password
        );
        console.log(userCredential);
        const user = userCredential.user;
        localStorage.setItem("token", user.accessToken);
        localStorage.setItem("user", JSON.stringify(user));
      } catch (error) {
        console.error(error);
      }
      navigate('/Login')
    } else if (!emailIsValid) {
      emailInputRef.current.focus();
    } else {
      passwordInputRef.current.focus();
    }
  };

  return (
    <Fragment>
      <MainHeader pageinfo={"User Signup Page"} />
      <main>
        <Card className={classes.login}>
          <form onSubmit={submitHandler}>
            <Input
              ref={emailInputRef}
              id="email"
              label="E-Mail"
              type="email"
              isValid={emailIsValid}
              value={emailState.value}
              onChange={emailChangeHandler}
              onBlur={validateEmailHandler}
            />
            <Input
              ref={passwordInputRef}
              id="password"
              label="Password"
              type="password"
              isValid={passwordIsValid}
              value={passwordState.value}
              onChange={passwordChangeHandler}
              onBlur={validatePasswordHandler}
            />
            <div className={classes.actions}>
              <Button
                type="submit"
                className={classes.btn}
              >
                Signup
              </Button>
            </div>
          </form>
          {
            <p>
              Already a User ? <Link to="/Login">Login</Link>
            </p>
          }
        </Card>
      </main>
    </Fragment>
  );
};

export default Signup;

Login.js:121 TypeError: authInstance._getRecaptchaConfig is not a function
    at handleRecaptchaFlow (recaptcha_enterprise_verifier.ts:191:1)
    at EmailAuthCredential._getIdTokenResponse (email.ts:127:1)
    at _processCredentialSavingMfaContextIfNecessary (mfa_error.ts:71:1)
    at _signInWithCredential (credential.ts:37:1)
    at signInWithCredential (credential.ts:69:1)
    at signInWithEmailAndPassword (email_and_password.ts:322:1)
    at submitHandler (Login.js:114:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)