如何在反应中使用 firebase auth object？

Question

我在理解我们编写代码时到底发生了什么时遇到了一些问题：

const auth = getAuth();

我正在使用最新版本的 React。 我是否必须在需要使用它的每个文件中初始化它？ 可以将此身份验证作为参数传递给异步 function 吗？ 这会被认为是一种好的做法吗？

我想我正在努力更深入地了解如何使用身份验证。 如果用户未能登录并提供了不正确的详细信息，那么所有文件中使用的身份验证现在是否意味着没有当前用户（如果以前有用户）？ 预先感谢您的任何帮助。

Answer 1

getAuth()返回默认 Firebase 应用程序的Auth实例。

我是否必须在需要使用它的每个文件中初始化它？

我通常建议在单个文件（ firebase.js/ts ）中初始化任何 Firebase 服务，然后从中导入实例。 这确保了 Firebase SDK 已被初始化。 例如：

// firebase.js

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

const firebaseConfig = { ... };

// Firebase Default App initialized before using any service
const app = initializeApp(firebaseConfig); 

export const auth = getAuth();
export const db = getFirestore();

您可以在需要的地方导入这些：

import { auth, db } from "../path/to/firebase.js"

如果您在每个文件中都使用getAuth() ，则可能存在尚未调用initializeApp()的情况，然后调用像getAuth()这样的任何服务可能会引发这样的错误，除非您确保在代码运行的 rest 之前调用它例如，当像 Quasar 这样的框架时使用引导文件：

Firebase: 否 Firebase 应用程序“[DEFAULT]”已创建 - 调用 Firebase App.initializeApp() (app/no-app)。

---

getAuth()在上面的代码中没有参数，因为我们这里只有一个 Firebase 项目/实例。 如果您使用多个 Firebase 项目，则必须在 function 中传递 Firebase 应用程序实例来指定项目。 当您需要在单个文件中执行此操作时，可能会更容易。 结帐您应该将 firebase 应用程序传递给 getAuth() 还是将 arguments 留空？ 了解更多信息。

如果用户未能登录并提供了不正确的详细信息，那么所有文件中使用的身份验证现在是否意味着没有当前用户（如果以前有用户）？

getAuth()每次都返回相同的实例（ default情况下没有参数），并且 state 在所有页面/组件中都将相同。 如果用户使用 Account1 登录，则在您的 web 应用程序中将是相同的。