currentUser 返回 null

Question

我有一个使用 firebase auth 进行身份验证的 React 应用程序。

一个人登录后，它将他们重定向到一个图书页面。这是 submitLogin 处理程序

import { auth, firebase } from "./firebase";
async function googleLogin() {
    const provider = new firebase.auth.GoogleAuthProvider();
    await auth.signInWithPopup(provider).then(
      async (result) => {
        const token = await auth?.currentUser?.getIdToken(true);
        if (token) {
          localStorage.setItem("@token", token);
          navigate("/book-list");
        }
      },
      function (error) {
        console.log(error);
      }
    );
}

然后在书籍页面中，我尝试获取 currentUser 以便我可以调用 getIdToken()，但是 currentUser 返回 null。

import { auth } from "./firebase";
const currentUser = auth.currentUser

这是 firebase.js 文件：

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {...};

firebase.initializeApp(firebaseConfig);

const auth = firebase.auth();
export { auth, firebase };

如何在用户登录后从另一个文件调用 currentUser？

Answer 1

这是预期的行为。由于图书页面是一个新页面，Firebase SDK 需要从本地存储中恢复身份验证状态，并自动保存在本地存储中。这需要它调用服务器，例如检查帐户是否已被禁用。由于我们无法阻止页面加载，您的主要代码继续执行并看到 currentUser 为空。

您要做的是监听用户的身份验证状态，如 getting the current user 文档中的第一个片段所示：

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

此回调将在用户会话恢复时自动触发，或者当会话失败时，或者当从来没有登录用户开始时，或者每当身份验证状态发生变化时，因此是完美的地方更新您的应用程序以获得最新的身份验证状态。

currentUser 返回 null

currentUser is returning null

authentication

firebase

reactjs

firebase-authentication