如何解决 Firebase Auth Uncaught TypeError：无法读取未定义的属性（读取“appVerificationDisabledForTesting”）

Question

我当前无法实例化新的 RecaptchaVerifier。我正在连接到 Firebase 模拟器套件的 Vite 开发服务器上运行父登录页面。 package.json 中当前的 firebase 版本是 10.8.0。

// firebaseModular.js

const mainConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
  measurementId: import.meta.env.VITE_MEASUREMENT_ID,
};

export const firebaseApp = initializeApp(mainConfig, "modular");
export const auth = getAuth(firebaseApp);
getAuth(firebaseApp).settings.appVerificationDisabledForTesting = true;
// auth.settings.appVerificationDisabledForTesting = true;

//SignInForm.js

import { auth } from "../../constants/firebaseModular";
import { signInWithEmailAndPassword, RecaptchaVerifier } from "firebase/auth";

const SignInForm = () => {
  ...
  console.log("auth settings in SignInForm", auth.settings);

  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha-container",
    auth

补充说明：

• 我已经看过关于参数顺序的讨论。如果 auth 实例位于最终位置，我会收到上述错误。如果它位于第一个位置，正如许多人建议的那样，我得到

  Uncaught FirebaseError: Firebase: Error (auth/argument-error).

• 上面的 console.log 在运行时记录对象

  {appVerificationDisabledForTesting: true}

  。
• 在 firebaseModular.js 中将值设置为 true 的活动方法和注释方法都会产生相同的日志和错误。

更新 尝试@Rainy sidewalks解决方案从firebaseModular.js中删除所有相关代码并更新SignInForm.jsx，如下所示：

import { auth, firebaseApp } from "../../constants/firebaseModular";
import { getAuth } from "firebase/auth";

const SignInForm = () => {
 ...

  console.log("auth settings in SignInForm before", auth.settings);
  getAuth(firebaseApp).settings.appVerificationDisabledForTesting = true;
  console.log("auth settings in SignInForm after", auth.settings);
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha-container",
    getAuth(firebaseApp)
  );

Answer 1

如果您查看phone-auth#integration-testing 在这里您看到您应该直接通过 getAuth 函数传递 firebase auth 实例的设置。

所以试试这个

import { auth, getAuth } from "../../constants/firebaseModular";
import { signInWithEmailAndPassword, RecaptchaVerifier } from "firebase/auth";

const SignInForm = () => {
//sign flow as
  console.log("auth settings in SignInForm", getAuth().settings);

  getAuth().settings.appVerificationDisabledForTesting = true; //<-- set it here 

  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha-container",
    getAuth()
  );

};