NextAuth页面刷新后会话丢失问题求助

使用MongoDB作为数据库、NextAuth做身份认证时，遇到登录后不刷新页面会话正常，但刷新页面会话就丢失的问题，已查阅GitHub相关讨论线程未找到合适方案，以下是相关代码及排查解决方向：

相关代码 #

[...nextauth].js #

import User from "@/models/user";
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";
import { connectMongoDB } from "@/lib/mongodb";

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: "credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        const { email, password } = credentials;

        try {
          await connectMongoDB();
          const user = await User.findOne({ email });
          if (!user) {
            return null;
          }
          const passwordsMatch = await bcrypt.compare(password, user.password);
          if (!passwordsMatch) {
            return null;
          }
          return { id: user._id.toString(), email: user.email }; // Omitting 'name' field
        } catch (error) {
          console.error("Error during authorization: ", error);
          return null;
        }
      },
    }),
  ],
  session: {
    strategy: "jwt",
    maxAge: 30 * 24 * 60 * 60, // 30 days
    updateAge: 24 * 60 * 60, // 24 hours
  },
  jwt: {
    secret: process.env.NEXTAUTH_SECRET,
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id;
        token.email = user.email;
      }
      console.log("JWT callback - token:", token);
      return token;
    },
    async session({ session, token }) {
      session.user = {
        id: token.id,
        email: token.email,
      };
      console.log("Session callback - session:", session);
      return session;
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: "/my-account",
  },
});

app.js #

import Layout from "../components/Layout";
import "@/styles/globals.css";
import { Fragment } from "react";
import { DefaultSeo } from "next-seo";
import { SessionProvider } from "next-auth/react";

export default function App({ Component, pageProps }) {
  return (
    <SessionProvider session={pageProps.session}>
      <Fragment>
        // SEO
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </Fragment>
    </SessionProvider>
  );
}

dashboard.js #

import React from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import Link from "next/link";
import MyAccountNav from "@/components/MyAccountNav";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect } from "react";
const dashboard = () => {

     const { data: session } = useSession();
     const router = useRouter();

     useEffect(() => {
       if (!session) {
         // If no session, redirect to the sign-in page
         router.push("/my-account/");
       }
     }, [session, router]);
    return (
        <>
            <MyAccountNav />
        </>
    );
};

export default dashboard;

排查与解决方向 #

• 确认NEXTAUTH_SECRET配置
  确保NEXTAUTH_SECRET环境变量在开发、生产环境都一致且正确配置，JWT的签名与验证完全依赖这个密钥，密钥不匹配会导致刷新后无法解析会话。
• 优化SessionProvider配置
  给SessionProvider添加refetchInterval属性，比如refetchInterval: 60，定期同步会话状态；同时检查页面组件是否通过getServerSideProps或getStaticProps（按需使用）在服务端获取会话并传递给pageProps.session，确保初始渲染时会话数据正确。
• 调整useSession参数
  在dashboard.js的useSession中添加{ required: true }选项，强制触发会话校验：

  const { data: session } = useSession({ required: true });
  

  这样会话不存在时会自动重定向到登录页，同时确保会话状态的正确获取。
• 完善回调逻辑
  JWT回调中确保返回完整token，不要遗漏原有字段；Session回调里可以补充name字段（即使为空），避免NextAuth默认逻辑因字段缺失出现异常：

  // JWT回调调整
  async jwt({ token, user }) {
    if (user) {
      token.id = user.id;
      token.email = user.email;
    }
    return token;
  }
  // Session回调调整
  async session({ session, token }) {
    session.user = {
      id: token.id,
      email: token.email,
      name: ""
    };
    return session;
  }
  

• 检查Cookie配置
  在[...nextauth].js中显式配置Cookie参数，确保不同环境下Cookie能正确存储读取：

  cookies: {
    sessionToken: {
      name: `__Secure-next-auth.session-token`,
      options: {
        httpOnly: true,
        sameSite: "lax",
        path: "/",
        secure: process.env.NODE_ENV === "production"
      }
    }
  }
  

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