如何在Firebase Auth中设置自定义会话持久化及自动登出时间？

首先得明确：Firebase Auth 的 browserSessionPersistence 本身就是会话级持久化，关闭标签页就会失效；而且 Firebase 的 ID Token 默认有效期是 1 小时，这个是服务器端硬限制，没法直接修改。但我们可以通过客户端逻辑实现自定义登出时长，同时解决多标签页同步会话的问题。

核心实现思路 #

• 用客户端定时器控制自定义登出时间，同时监听用户活动重置定时器
• 通过 localStorage 监听存储事件，实现多标签页的登出状态同步
• 结合 Firebase Auth 的 ID Token 刷新机制，避免因 Token 过期导致意外登出

具体代码实现 #

1. 基础配置与工具函数 #

const auth = getAuth();
// 自定义登出时长（毫秒），比如30分钟=1800000ms
const AUTO_LOGOUT_DURATION = 30 * 60 * 1000;
let logoutTimer;

// 重置登出定时器
function resetLogoutTimer() {
  if (logoutTimer) clearTimeout(logoutTimer);
  logoutTimer = setTimeout(() => {
    auth.signOut().then(() => {
      // 登出成功后的操作，比如跳转到登录页
      window.location.href = '/login';
      // 通知其他标签页登出
      localStorage.setItem('firebase-auth-logout', Date.now().toString());
    });
  }, AUTO_LOGOUT_DURATION);
}

// 监听用户活动（鼠标移动、点击、键盘输入）
function setupUserActivityListener() {
  const events = ['mousemove', 'click', 'keydown', 'scroll'];
  events.forEach(event => {
    window.addEventListener(event, resetLogoutTimer);
  });
}

2. 多标签页同步登出 #

// 监听localStorage变化，同步登出状态
window.addEventListener('storage', (e) => {
  if (e.key === 'firebase-auth-logout') {
    // 其他标签页触发了登出，当前页也执行登出
    auth.signOut().then(() => {
      window.location.href = '/login';
    });
  }
});

3. 结合Firebase Auth状态监听 #

// 监听Auth状态变化
onAuthStateChanged(auth, (user) => {
  if (user) {
    // 用户已登录，启动定时器和活动监听
    resetLogoutTimer();
    setupUserActivityListener();
    
    // 监听ID Token刷新，刷新后重置定时器
    user.getIdToken(true).then(() => {
      resetLogoutTimer();
    });
  } else {
    // 用户已登出，清除定时器和监听
    if (logoutTimer) clearTimeout(logoutTimer);
    const events = ['mousemove', 'click', 'keydown', 'scroll'];
    events.forEach(event => {
      window.removeEventListener(event, resetLogoutTimer);
    });
  }
});

4. 初始化持久化（保留原有逻辑） #

setPersistence(auth, browserSessionPersistence)
  .then(() => {
    // 持久化设置完成，后续Auth操作会沿用这个配置
  })
  .catch((error) => {
    console.error('设置持久化失败:', error);
  });

注意事项 #

• 客户端定时器只是辅助，最终的会话有效性还是由 Firebase 的 ID Token 和 Refresh Token 控制，所以如果用户长时间无操作，即使客户端定时器没触发，Token 过期后 API 请求也会失败，这时候可以结合 Token 刷新逻辑处理
• 多标签页同步依赖 localStorage，如果浏览器禁用了 localStorage，这个同步逻辑会失效
• 自定义时长不要设置得过长，避免安全风险

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