如何在nextauth中访问session.user.id？

Question

我正在使用next-auth版本4.19.2。

我有一个简单的组件，只显示他们登录的身份：

import { useSession, signIn, signOut } from "next-auth/react"

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

  if(session) {
    return <>
    
      Signed in as 
        userID: {session.user.id} <br/>
        name:  {session.user.name} <br/>
        email:  {session.user.email} <br/>
        
      <button onClick={() => signOut()}>Sign out</button>
    </>
  }
  return <>
    Not signed in <br/>
    <button onClick={() => signIn()}>Sign in</button>
  </>
}

我的 [...nextauth.js] 只是返回一些虚拟数据：

      async authorize(credentials) {

        console.log("authorize script running...");

        const user = { id: 22, name: 'J Smith', email: '[email protected]' }
        return user;
      }

由于某种原因，我的输出仅显示姓名和电子邮件，但没有 ID。

以用户 ID 登录：
姓名：J·史密斯
电子邮件：[电子邮件受保护]

我从事一个项目，组织中的多个人可以共享相同的电子邮件地址（不是我的想法），因此电子邮件对我来说不是唯一的标识符。 我需要 ID 或用户名作为唯一标识符，但我不确定如何获取它。

我还尝试传递其他数据，但我唯一能显示的是姓名和电子邮件。

const user = { id: 22, userName: 'jSmith' name: 'J Smith', email: '[email protected]' }

但是，我的组件除了姓名和电子邮件之外没有获得任何值。

我的问题是：如何修改我的代码以显示用户名？

Answer 1

你应该使用callbacks，类似这样的东西：

    callbacks: {
        async jwt({token, user}) {
      
           if (user?.id) {
               token.id = user.id
           }
           if (user?.userName) {
               token.userName = user.userName;
           }
           return token
        },
        async session({session, token}) {
            session.id = token.id;
            session.userName = token.userName;
            return session;
        }
      }

Answer 2

要在 NextAuth.js 中访问

session.user.id

，您需要扩展会话和用户类型以包含

id

属性。操作方法如下：

如果使用应用程序路由器，请在应用程序的根目录（应用程序文件夹之外）创建一个

next-auth.d.ts

文件：

import NextAuth from "next-auth";

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

  interface User {
    id: string;
  }
}

更新

authOptions

中的会话回调：

import GoogleProvider from "next-auth/providers/google";
import { PrismaAdapter } from "@auth/prisma-adapter";
import prisma from "@/prisma/client";
import { NextAuthOptions } from "next-auth";

const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  session: {
    strategy: "jwt",
  },
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
    async session({ session, token }) {
      if (session.user) {
        session.user.id = token.id as string;
      }
      return session;
    }
  }
  
};

export default authOptions;

在您的应用程序中访问用户 ID：

import { getServerSession } from "next-auth";
import { authOptions } from "./path-to-auth-options";

const session = await getServerSession(authOptions);
if (session) {
  const userId = session.user.id;
  console.log("User ID:", userId);
}