NextAuth页面刷新后session中user.id与customUser数据丢失求助

问题原因 #

当前的session回调逻辑仅在首次创建customUser时，才会将user.id和customUser附加到session对象中。当页面刷新时，existingUser已经存在，这部分赋值逻辑不会执行，导致session中缺失这两个字段，最终前端无法获取到数据。

解决方案 #

修改session回调，确保无论用户是否已存在于customUser集合中，都将必要的信息注入到session里：

1. 始终将user.id赋值给session.user.id（原生NextAuth的session.user默认没有id字段）
2. 无论是否创建新用户，都将对应的customUser数据（已有或新创建的）附加到session中

修改后的完整代码：

import YandexProvider from "next-auth/providers/yandex";
import { MongoDBAdapter } from "@next-auth/mongodb-adapter";
import clientPromise from "@/lib/mongodb";

export const authOptions = {
  providers: [
    YandexProvider({
      clientId: process.env.YANDEX_CLIENT_ID,
      clientSecret: process.env.YANDEX_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async session({ session, token, user }) {
      const client = await clientPromise;
      const db = client.db();
      const customUsersCollection = db.collection("customUser");

      let customUser = await customUsersCollection.findOne({ userId: user.id });

      // 如果不存在则创建新用户
      if (!customUser) {
        customUser = {
          userId: user.id,
          name: user.name,
          email: user.email,
          image: user.image,
          banner: "",
          balance: 0,
          role: "user",
          pro: 0,
        };
        await customUsersCollection.insertOne(customUser);
      }

      // 始终注入user.id和customUser到session
      if (session?.user) {
        session.user.id = user.id;
        session.customUser = customUser;
      }

      return session;
    },
  },
  adapter: MongoDBAdapter(clientPromise),
};

export default NextAuth(authOptions);

关键修改说明 #

• 将existingUser重命名为customUser，统一后续赋值逻辑
• 移除了仅在创建新用户时才注入数据的限制，改为无论用户是否存在，都会将customUser数据附加到session
• 确保session.user.id在每次session回调执行时都会被赋值，避免刷新后丢失

额外验证点 #

1. 确认你的_app.js或根组件中正确包裹了SessionProvider：

import { SessionProvider } from "next-auth/react";

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

2. 前端获取会话时，使用useSession的data字段获取完整会话数据：

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

function MyComponent() {
  const { data: session } = useSession();
  
  if (session) {
    console.log(session.user.id); // 刷新后仍能获取
    console.log(session.customUser); // 刷新后仍能获取
  }
  
  // ...组件逻辑
}

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