NextAuth 闲置用户登出问题：客户端与服务端状态不同步

1. 阻止Session Cookie自动续期 #

默认情况下，NextAuth每次调用会话接口（包括refetch）都会刷新session cookie的过期时间，导致maxAge设置失效。要解决这个，需在NextAuth配置中固定JWT的过期时间，不随请求续期：

// pages/api/auth/[...nextauth].js
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        // 这里替换为你的用户验证逻辑
        const user = { id: "1", name: "Test User", email: "test@example.com" };
        return user;
      },
    }),
  ],
  session: {
    strategy: "jwt",
    maxAge: 60, // 会话有效期1分钟
    updateAge: 0, // 禁用自动续期，核心配置
  },
  jwt: {
    maxAge: 60, // JWT有效期与session maxAge保持一致
    async jwt({ token, user }) {
      if (user) {
        // 仅在登录时设置初始过期时间
        token.expires = Math.floor(Date.now() / 1000) + 60;
      }
      // 后续请求不更新expires，保持初始有效期
      return token;
    },
  },
  cookies: {
    sessionToken: {
      name: `__Secure-next-auth.session-token`,
      options: {
        httpOnly: true,
        secure: process.env.NODE_ENV === "production",
        sameSite: "lax",
        path: "/",
        maxAge: 60, // cookie有效期与session一致
      },
    },
  },
});

2. 客户端闲置检测与主动登出 #

仅依赖服务端maxAge无法及时同步UI状态，需在客户端监听用户活动，闲置达设定时间时主动触发登出：

创建自定义Hook处理闲置逻辑：

// hooks/useIdleLogout.js
import { useEffect, useState } from "react";
import { signOut, useSession } from "next-auth/react";

export default function useIdleLogout(idleTime = 60000) { // 1分钟闲置阈值
  const { data: session } = useSession();
  const [idleTimer, setIdleTimer] = useState(null);

  const resetTimer = () => {
    if (idleTimer) clearTimeout(idleTimer);
    const timer = setTimeout(() => {
      if (session) {
        signOut({ redirect: false }).then(() => {
          window.location.reload();
        });
      }
    }, idleTime);
    setIdleTimer(timer);
  };

  useEffect(() => {
    if (!session) return;

    // 监听用户交互事件
    const events = ["mousemove", "keydown", "scroll", "touchstart"];
    events.forEach(event => window.addEventListener(event, resetTimer));

    resetTimer();

    return () => {
      events.forEach(event => window.removeEventListener(event, resetTimer));
      if (idleTimer) clearTimeout(idleTimer);
    };
  }, [session, idleTimer]);
}

在_app.js中配置SessionProvider并启用闲置检测：

// pages/_app.js
import { SessionProvider } from "next-auth/react";
import useIdleLogout from "../hooks/useIdleLogout";

export default function App({ Component, pageProps: { session, ...pageProps } }) {
  useIdleLogout(60000);

  return (
    <SessionProvider 
      session={session} 
      refetchInterval={20} // 每20秒检查会话状态
      refetchOnWindowFocus={true} // 窗口聚焦时立即重新获取会话
    >
      <Component {...pageProps} />
    </SessionProvider>
  );
}

3. 强化会话状态同步 #

通过以下方式避免客户端状态滞后：

• 开启refetchOnWindowFocus，确保用户切换回标签页时立即校验会话。
• 在页面组件中监听会话状态变化，失效时及时处理：

// 示例页面组件
import { useSession } from "next-auth/react";

export default function Dashboard() {
  const { data: session, status } = useSession({
    required: true,
    onUnauthenticated() {
      // 会话失效时跳转登录页
      window.location.href = "/auth/login";
    },
  });

  if (status === "loading") return <div>加载中...</div>;

  return (
    <div>
      <h1>欢迎 {session.user.name}</h1>
    </div>
  );
}

关键说明 #

• updateAge: 0 是阻止cookie自动续期的核心，它让NextAuth不再每次请求都刷新cookie有效期。
• 客户端闲置检测能主动触发登出，避免用户闲置后UI仍显示登录状态。
• refetchInterval 和 refetchOnWindowFocus 配合，确保客户端及时同步服务端会话状态。

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