如何在react(+reactfire)中使用firebase持久化用户身份验证

Question

我正在用firebase(+reactfire)构建我的第一个react应用程序。

当我登录时，我做以下操作：

const signIn = async (email: string, password: string) => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
      await navigate('/');
    } catch (error: any) {
      setServerError(error.message);
      console.log(error);
    }
  };

我被重定向到仪表板，在那里打印用户：

export const Dashboard = () => {
  const auth = useAuth();
  console.log(auth.currentUser);
  return (
    <div>
      <h1>Dashboard</h1>
    </div>
  );
};

我的用户被正确地显示了。但是如果我点击F5，我的console.log显示为null。

在我的index.tsx中，我有以下内容：

root.render(
  <React.StrictMode>
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </FirebaseAppProvider>
  </React.StrictMode>
);

在我的App.tsx里，我有这样一个：

function App() {
  const firebaseApp = useFirebaseApp();
  const firestoreInstance = getFirestore(firebaseApp);
  const auth = getAuth(firebaseApp);
  auth.setPersistence(browserLocalPersistence); // <<-------- I taught this would for the persistence?
  return (
    <FirestoreProvider sdk={firestoreInstance}>
      <AuthProvider sdk={auth}>
        <Routes>
          <Route path="/" element={<AuthenticatedLayout></AuthenticatedLayout>}>
            <Route path="/" element={<Dashboard />} />
            <Route path="/queue" element={<Queue />} />
            <Route path="/tickets" element={<Tickets />} />
          </Route>
          <Route path="/login" element={<Login></Login>}></Route>
          <Route path="/register" element={<Register></Register>}></Route>
        </Routes>
      </AuthProvider>
    </FirestoreProvider>
  );
}

知道我错过了什么吗？

Answer 1

嗯，5分钟后我找到了答案：

显然，useAuth().currentUser没有被更新，但是如果我在同一个地方做以下操作：

  const { status, data: user } = useUser();
  console.log(status, user);

我的用户在刷新时仍然保持不变。