Next-Auth signOut后弹窗未按5秒显示，提前跳转首页求助

问题根源 #

调用signOut()后弹窗无法停留5秒的核心原因有两个：

1. signOut()默认会在登出完成后自动触发跳转，直接覆盖了你手动设置的延迟逻辑
2. session状态变为unauthenticated时，代码中的router.push("/")会立即执行，打断弹窗的显示流程

修复代码 #

调整signOut的调用方式，阻止自动跳转，同时手动控制延迟跳转时机，并优化session状态判断逻辑：

import { signOut, useSession } from "next-auth/react";
import { useState } from "react";
import { useRouter } from "next/router";

const YourComponent = () => {
  const { data: session, status } = useSession();
  const [showSignOutAlert, setShowSignOutAlert] = useState(false);
  const router = useRouter();

  const handleSignOut = async () => {
    // 阻止signOut自动跳转，仅执行登出逻辑
    await signOut({ redirect: false });
    setShowSignOutAlert(true);
    
    // 5秒后隐藏弹窗并手动跳转首页
    setTimeout(() => {
      setShowSignOutAlert(false);
      router.push("/");
    }, 5000);
  };

  // 仅在未显示弹窗且未认证时跳转，避免打断弹窗流程
  if (status === "unauthenticated" && !showSignOutAlert) {
    router.push("/");
  }

  return (
    <>
      {/* 你的其他组件内容 */}
      <button onClick={handleSignOut}>登出</button>
      
      {/* 登出弹窗 */}
      {showSignOutAlert && (
        <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-70">
          <div className="bg-white p-8 rounded-md">
            <p className="text-xl font-bold mb-4">Successfully Signed Out</p>
            <p>You will be redirected to the home screen shortly...</p>
          </div>
        </div>
      )}
    </>
  );
};

export default YourComponent;

更优实现建议 #

1. 清理定时器避免内存泄漏：添加组件卸载时的定时器清理逻辑

import { useEffect, useRef } from "react";

// 在组件内添加
const timerRef = useRef<NodeJS.Timeout | null>(null);

useEffect(() => {
  return () => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }
  };
}, []);

// 修改handleSignOut中的定时器
timerRef.current = setTimeout(() => {
  setShowSignOutAlert(false);
  router.push("/");
}, 5000);

2. 全局状态管理解耦逻辑：大型项目中可将登出状态放到Zustand、Redux等全局状态管理工具中，让弹窗显示和跳转逻辑解耦
3. NextAuth回调配合客户端状态：在auth.ts中配置signOut回调，结合客户端状态控制跳转流程，适合复杂的登出后业务场景

内容的提问来源于stack exchange，提问作者the symphonic pirate