Firebase设置setPersistence后刷新页面自动登出问题求助

排查步骤与解决方案 #

1. 确保Auth实例全局单例初始化 #

不要在组件内部每次渲染时调用getAuth()，应在项目初始化文件（如firebase.config.js）中全局创建一次Auth实例，后续所有组件复用该实例：

// firebase.config.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  // 你的Firebase配置信息
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app); // 全局单例Auth实例

组件中直接导入这个auth实例，而非重复调用getAuth()。

2. 应用初始化时监听Auth状态 #

在根组件（如App.jsx）中添加认证状态监听，确保页面刷新后自动恢复用户会话：

import { onAuthStateChanged } from "firebase/auth";
import { auth } from "./firebase.config";
import { useEffect } from "react";

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    if (user) {
      // 用户已登录，更新应用内状态
    } else {
      // 用户未登录
    }
  });

  return () => unsubscribe(); // 组件卸载时取消监听
}, []);

该监听会在页面刷新后自动触发，Firebase会从本地存储恢复用户会话。

3. 检查浏览器第三方Cookie设置 #

Google弹窗登录依赖第三方Cookie，若浏览器禁用该设置，持久化会话会失效：

• Chrome：设置 > 隐私和安全 > Cookie和其他网站数据 > 开启"允许所有Cookie"
• Firefox：设置 > 隐私与安全 > Cookie和网站数据 > 取消勾选"增强型跟踪保护"，或添加Firebase域名到例外列表

4. 验证持久化设置是否生效 #

在登录成功后打印用户持久化状态，确认是否设置为LOCAL：

const signIn = async () => {
  await setPersistence(auth, browserLocalPersistence);
  const result = await signInWithPopup(auth, provider);
  console.log("用户持久化配置：", result.user.auth.currentUser.persistence);
  navigate("/Account");
};

若输出不是LOCAL，说明持久化设置未生效，需检查Firebase版本兼容性。

5. 升级Firebase到最新稳定版 #

部分旧版本Firebase Auth存在持久化相关bug，执行以下命令升级：

npm install firebase@latest

6. 确认导航时机 #

确保navigate在登录成功后执行，避免异步时序问题导致状态未持久化就跳转。

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