Next.js(v14.1.3)+next-auth(v4.24.7)「记住我」自动登出问题求助

需求目标 #

• 未勾选「记住我」登录：新开标签页时会话自动结束，仅当前标签页保持登录状态
• 勾选「记住我」登录：会话跨标签页共享，且浏览器重启后仍保留登录状态

当前实现的问题 #

采用sessionStorage存储非记住会话、localStorage存储记住会话，结合useEffect调用signOut的方案出现以下不一致行为：

• 多标签页登出状态不同步，有时全登出有时仅单个标签页登出
• 会话看似关闭，但刷新后自动恢复登录
• 部分场景下出现认证/未认证状态无限循环
• 配合Next.js中间件做路由保护时问题加剧

现有核心代码：

const logoutUser = useCallback(async () => {
  localStorage.removeItem('rememberme');
  sessionStorage.removeItem('rememberme');
  await signOut({ redirect: false });
  router.replace('/login');
}, [router])

useEffect(() => {
  const rememberMeSession = sessionStorage.getItem('rememberme');
  if (rememberMeSession !== 'false') {
    logoutUser();
  }
}, [session?.user, user, logoutUser])

可靠实现方案 #

1. 利用NextAuth原生Session策略配置 #

NextAuth本身支持通过session.strategy和token.exp控制会话持久化，无需手动操作sessionStorage/localStorage存储状态：

• 未勾选「记住我」：设置token无有效期（浏览器关闭即失效）
• 勾选「记住我」：设置token较长有效期（比如7天）

修改[...nextauth].js配置：

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        // 替换为你的实际认证逻辑，返回用户信息
        const user = await yourAuthValidation(credentials);
        return user;
      },
    }),
  ],
  session: {
    strategy: "jwt",
  },
  callbacks: {
    async jwt({ token, user, account }) {
      // 登录时接收rememberMe参数，动态设置token有效期
      if (user) {
        if (account?.rememberMe) {
          // 记住我：设置7天有效期
          token.exp = Math.floor(Date.now() / 1000) + 7 * 24 * 60 * 60;
        } else {
          // 不记住我：移除有效期，浏览器关闭即失效
          delete token.exp;
        }
        token.user = user;
      }
      return token;
    },
    async session({ session, token }) {
      // 将token状态同步到session
      session.user = token.user;
      if (token.exp) {
        session.expires = new Date(token.exp * 1000).toISOString();
      } else {
        // 不记住我时，标记会话为临时会话
        session.isTemporary = true;
      }
      return session;
    },
  },
});

2. 登录时传递rememberMe参数 #

在登录组件中，将勾选状态传递给signIn方法：

import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useState } from "react";

export default function Login() {
  const router = useRouter();
  const [rememberMe, setRememberMe] = useState(false);

  const handleLogin = async (e) => {
    e.preventDefault();
    const result = await signIn("credentials", {
      email: e.target.email.value,
      password: e.target.password.value,
      rememberMe,
      redirect: false,
    });

    if (result.ok) {
      router.push("/dashboard");
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="email" name="email" placeholder="邮箱" required />
      <input type="password" name="password" placeholder="密码" required />
      <label>
        <input
          type="checkbox"
          checked={rememberMe}
          onChange={(e) => setRememberMe(e.target.checked)}
        />
        记住我
      </label>
      <button type="submit">登录</button>
    </form>
  );
}

3. 多标签页状态同步处理 #

监听浏览器storage事件，同步各标签页的会话状态：
在根布局或_app.js中添加监听：

import { useSession } from "next-auth/react";
import { useEffect } from "react";

export default function RootLayout({ children }) {
  const { data: session } = useSession();

  useEffect(() => {
    const handleStorageChange = (e) => {
      // 监听NextAuth会话token变化，触发页面刷新同步状态
      if (e.key === "next-auth.session-token") {
        window.location.reload();
      }
    };

    window.addEventListener("storage", handleStorageChange);
    return () => window.removeEventListener("storage", handleStorageChange);
  }, []);

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

4. 中间件适配路由保护 #

修改middleware.js，根据会话类型拦截未授权访问：

import { withAuth } from "next-auth/middleware";

export default withAuth({
  callbacks: {
    authorized({ req, token }) {
      // 未登录直接拦截
      if (!token) return false;

      // 处理临时会话（未勾选记住我）：仅当前标签页有效
      if (!token.exp) {
        const sessionToken = req.cookies.get("next-auth.session-token");
        // 无会话token则拦截
        if (!sessionToken) return false;
      }

      return true;
    },
  },
});

export const config = {
  matcher: ["/dashboard/:path*", "/profile/:path*"], // 需要保护的路由
};

5. 移除自定义登出触发逻辑 #

删掉之前手动操作存储、通过useEffect调用signOut的代码，完全依赖NextAuth原生的会话管理：

• 由NextAuth自动根据token有效期处理会话失效
• 登出直接调用signOut()即可，无需手动清除存储

关键说明 #

• 利用NextAuth的jwt策略和token.exp字段精准控制会话生命周期，避免自定义存储的状态不一致
• 多标签页通过storage事件同步会话，确保所有标签页状态统一
• 中间件根据token类型区分临时/持久会话，适配不同的路由权限
• 移除自定义状态触发逻辑，避免与NextAuth原生机制冲突导致的无限循环

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