React+ReactFire中Firebase用户身份认证持久化问题排查

问题描述 #

我正在使用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);
    }
  };

登录后跳转的Dashboard组件代码：

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

登录后能正常打印用户信息，但按下F5刷新页面后，console.log(auth.currentUser)输出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); // <<-------- 我以为这个能实现持久化？
  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>
  );
}

请问我遗漏了什么配置导致认证无法持久化？

问题原因与修复方案 #

核心问题 #

1. setPersistence调用时机错误：该方法是异步操作，你在App组件同步调用时，AuthProvider可能已经初始化完成，持久化设置并未生效；同时组件每次渲染都会重复调用该方法，导致不必要的重复操作。
2. 未等待Auth状态初始化：页面刷新后，Firebase需要从本地存储加载用户信息，这个过程是异步的，直接读取auth.currentUser会因为初始化未完成拿到null。

修复步骤 #

1. 正确配置Auth持久化

将持久化配置改为异步初始化，确保在AuthProvider挂载前完成设置：

import { useState, useEffect } from 'react';
import { getAuth, browserLocalPersistence, Auth } from 'firebase/auth';
// 其他导入...

function App() {
  const firebaseApp = useFirebaseApp();
  const firestoreInstance = getFirestore(firebaseApp);
  const [auth, setAuth] = useState<Auth | null>(null);

  useEffect(() => {
    const initAuth = async () => {
      const authInstance = getAuth(firebaseApp);
      // 异步设置持久化
      await authInstance.setPersistence(browserLocalPersistence);
      setAuth(authInstance);
    };
    initAuth();
  }, [firebaseApp]);

  // 等待Auth初始化完成再渲染后续组件
  if (!auth) return <div>加载中...</div>;

  return (
    <FirestoreProvider sdk={firestoreInstance}>
      <AuthProvider sdk={auth}>
        <Routes>
          <Route path="/" element={<AuthenticatedLayout />}>
            <Route path="/" element={<Dashboard />} />
            <Route path="/queue" element={<Queue />} />
            <Route path="/tickets" element={<Tickets />} />
          </Route>
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
        </Routes>
      </AuthProvider>
    </FirestoreProvider>
  );
}

2. 使用ReactFire的useUser监听Auth状态

不要直接读取auth.currentUser，改用useUser钩子自动监听Auth状态变化，包括刷新后的加载过程：

import { useUser } from 'reactfire';

export const Dashboard = () => {
  const { data: user, status } = useUser();

  // 处理加载状态
  if (status === 'loading') return <div>加载中...</div>;

  console.log(user); // 刷新后也能正确获取用户信息
  return (
    <div>
      <h1>Dashboard</h1>
      {user && <p>欢迎回来，{user.email}</p>}
    </div>
  );
};

3. 额外检查项

• 确认Firebase控制台已启用邮箱/密码登录方式。
• 检查浏览器本地存储（Application -> Local Storage），登录后应有firebase:authUser:...开头的键值对，刷新后该键值对需保留。

内容的提问来源于stack exchange，提问作者J4N