Next.js+Firebase登出后onAuthStateChanged仍返回用户问题

• 使用Next.js + Firebase开发Web应用，曾配合NextAuth.js管理会话
• 执行登出操作后，Firebase的onAuthStateChanged()仍返回用户对象；登出后立即检查用户为null，但导航到VerifyEmail页面后用户状态自动恢复
• 原登出逻辑：在NextAuth.js的signOut事件回调中调用firebaseAuth.signOut()

Firebase Auth SDK必须在客户端环境使用，此前错误地在服务端初始化/调用了Firebase Auth，导致会话状态在服务端和客户端不同步，出现登出后状态异常恢复的情况。目前已弃用NextAuth.js，改为完全依赖Firebase客户端SDK处理会话、登录、注册流程。

• 彻底移除NextAuth.js相关依赖与配置，所有会话操作统一使用Firebase客户端SDK
• 确保所有Firebase Auth相关代码（包括状态监听、登录/登出/注册）仅在客户端组件中执行，禁止在服务端组件/服务端函数中操作Firebase Auth实例
• 标准化登出流程，仅保留Firebase客户端的signOut()调用：

import { getAuth, signOut } from "firebase/auth";

const handleSignOut = async () => {
  const auth = getAuth();
  try {
    await signOut(auth);
    // 登出成功后可执行跳转登录页等后续逻辑
  } catch (err) {
    console.error("登出失败：", err);
  }
};

• 在VerifyEmail客户端组件中正确监听用户状态，确保登出后状态同步：

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

const VerifyEmail = () => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    const auth = getAuth();
    // 监听用户状态变化，组件卸载时取消监听
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
      // 若用户为null，可自动跳转到登录页面
      if (!user) {
        window.location.href = "/login";
      }
    });

    return unsubscribe;
  }, []);

  return (
    <div className="verify-email-page">
      {currentUser ? (
        <div>
          <h2>验证你的邮箱</h2>
          <p>我们已发送验证邮件到：{currentUser.email}</p>
        </div>
      ) : (
        <p>你已登出，请重新登录</p>
      )}
    </div>
  );
};

export default VerifyEmail;

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