Next.js页面刷新后如何调用Firebase User的getIdToken方法

核心思路 #

Firebase Auth会自动在浏览器中持久化用户会话，但页面刷新后需要通过监听认证状态变化重新获取User实例——直接序列化存储User对象不可行，因为它包含不可序列化的方法与内部状态。

具体解决方案 #

1. 用onAuthStateChanged监听用户状态 #

这是最可靠的方式，Firebase会在页面加载完成后自动恢复会话，通过监听回调就能拿到最新的User实例。在Next.js客户端组件中可这样实现：

import { useEffect, useState } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

export default function UserProfile() {
  const [user, setUser] = useState(null);
  const auth = getAuth();

  useEffect(() => {
    // 监听认证状态变更
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      if (currentUser) {
        setUser(currentUser);
        // 获取令牌并存入localStorage供全局使用
        currentUser.getIdToken().then(token => {
          localStorage.setItem('idToken', token);
        });
      } else {
        setUser(null);
        localStorage.removeItem('idToken');
      }
    });

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

  if (!user) return <div>登录中...</div>;

  return <div>欢迎回来，{user.phoneNumber}</div>;
}

2. 提前存储令牌并处理过期 #

若需刷新后快速获取令牌，可在首次登录成功时将getIdToken()结果存入localStorage，同时处理令牌过期（Firebase令牌默认有效期1小时）：

登录成功时的处理：

// 手机号验证成功后拿到User实例
const user = await signInWithPhoneNumber(auth, phoneNumber, appVerifier);
// 获取令牌并存入localStorage
const idToken = await user.getIdToken();
localStorage.setItem('idToken', idToken);

刷新后使用令牌时，可通过User实例强制刷新（即使未过期也能返回有效令牌）：

const auth = getAuth();
const currentUser = auth.currentUser;
if (currentUser) {
  const freshToken = await currentUser.getIdToken(true);
  localStorage.setItem('idToken', freshToken);
}

3. 封装自定义Hook简化状态管理 #

可以封装全局Hook统一管理用户状态，避免重复代码：

import { useState, useEffect } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

export function useAuth() {
  const [user, setUser] = useState(null);
  const auth = getAuth();

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return unsubscribe;
  }, [auth]);

  return { user };
}

在任意客户端组件中直接使用：

import { useAuth } from '../hooks/useAuth';

export default function Dashboard() {
  const { user } = useAuth();

  if (!user) return <div>请登录</div>;

  const handleGetToken = async () => {
    const token = await user.getIdToken();
    console.log('当前令牌:', token);
  };

  return (
    <div>
      <h1>控制台</h1>
      <button onClick={handleGetToken}>获取令牌</button>
    </div>
  );
}

关键注意事项 #

• 不要序列化存储Firebase User实例：它包含内部方法和状态，序列化后会丢失核心功能，无法调用getIdToken()等方法。
• 确保Firebase初始化正确：在Next.js中要保证Firebase仅在客户端初始化，避免服务端渲染时出现异常。
• 令牌过期处理：若令牌过期，可调用getIdToken(true)强制刷新，或依赖onAuthStateChanged监听自动获取最新User实例来刷新令牌。

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