Next.js 13 App目录下服务端获取NextAuth用户ID的方法

问题原因 #

在Next.js 13的app目录中，getServerSession不会自动读取[...nextauth].js中的配置项，必须显式传入authOptions才能触发session回调，进而将你添加的扩展字段（如userID、userName）注入到返回的session对象中。

解决方案步骤 #

1. 确保[...nextauth].js导出authOptions #

在你的[...nextauth].js文件中，将配置对象单独导出，方便服务端组件引用：

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

// 导出authOptions
export const authOptions = {
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        // 你的授权逻辑，返回包含扩展字段的用户对象
        return {
          id: '123456',
          userName: 'myUserName',
          email: 'abc@myserver.com',
          fullname: 'John Smith Jr',
          name: 'John Smith Jr'
        };
      }
    })
  ],
  callbacks: {
    async jwt({token, user}) {
      if (user?.id) token.id = user.id;
      if (user?.userName) token.userName = user.userName;
      if (user?.fullname) token.fullname = user.fullname;
      return token;
    },
    async session({session, token}) {
      // 统一将扩展字段加到session.user下，结构更规范
      session.user.id = token.id;
      session.user.userName = token.userName;
      session.user.fullname = token.fullname;
      return session;
    }
  }
};

export default NextAuth(authOptions);

2. 在服务端组件中传入authOptions调用getServerSession #

修改你的服务端组件代码，导入authOptions并传入getServerSession：

import { getServerSession } from "next-auth/next";
import { authOptions } from "../path/to/[...nextauth]"; // 替换为你的[...nextauth].js实际路径

export default async function EditUsernamePasswordPage(props) {
    const session = await getServerSession(authOptions);
    console.log(session);

    // 此时session.user会包含id、userName、fullname等扩展字段
    return <pre>{JSON.stringify(session, null, 2)}</pre>;    
}

验证结果 #

服务端返回的session数据将包含所有扩展字段，示例如下：

{
  "user": {
    "name": "John Smith Jr",
    "email": "abc@myserver.com",
    "image": undefined,
    "id": "123456",
    "userName": "myUserName",
    "fullname": "John Smith Jr"
  }
}

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