NextAuth v4.19.2中如何获取并显示用户ID/用户名？

NextAuth默认只会在session中返回name、email、image这些预设字段，你在authorize方法里返回的id和userName需要手动配置才能传递到session中，具体修改步骤如下：

1. 修改NextAuth配置文件（[...nextauth].js/ts） #

在你的认证配置文件中，添加jwt和session两个回调函数，把自定义字段从authorize的返回值传递到最终的session里：

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

export default NextAuth({
  providers: [
    CredentialsProvider({
      // 你的账号密码验证配置
      async authorize(credentials, req) {
        // 这里是你的用户验证逻辑，返回包含id、userName等字段的用户对象
        const user = await yourAuthValidationLogic(credentials);
        return user; // 假设user包含id, userName, name, email
      },
    }),
  ],
  session: {
    strategy: "jwt", // 显式声明session策略为jwt（默认也是该策略）
  },
  callbacks: {
    // 将自定义字段写入JWT token
    async jwt({ token, user }) {
      // user仅在首次登录时存在，需做判断
      if (user) {
        token.id = user.id;
        token.userName = user.userName;
      }
      return token;
    },
    // 将token中的自定义字段同步到session对象
    async session({ session, token }) {
      if (session.user) {
        session.user.id = token.id;
        session.user.userName = token.userName;
      }
      return session;
    },
  },
});

2. 在组件中获取自定义字段 #

修改完配置后，直接通过useSession就能拿到id和userName字段：

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

function UserInfo() {
  const { data: session } = useSession();

  if (!session) {
    return <div>未登录</div>;
  }

  return (
    <div>
      <p>用户名：{session.user.userName}</p>
      <p>用户ID：{session.user.id}</p>
      <p>邮箱：{session.user.email}</p>
    </div>
  );
}

export default UserInfo;

3. TypeScript项目额外配置（可选） #

如果你的项目使用TypeScript，需要扩展NextAuth的类型定义，避免编辑器报错：

在项目根目录创建types/next-auth.d.ts文件，添加以下内容：

import NextAuth from "next-auth";

declare module "next-auth" {
  interface Session {
    user: {
      id: string;
      userName: string;
      name?: string | null;
      email?: string | null;
      image?: string | null;
    };
  }

  interface JWT {
    id: string;
    userName: string;
  }
}

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