How to get userId on api Endpoints while using next-auth

[youngnishant]

Please refer to the documentation, the example project and existing issues before creating a new issue.

Your question
How to get userID on api Endpoints while using next-auth ?
What are you trying to do
A description of what you are trying to do.
While fetching data from mongodb atlas i want to use populate which requires UserID.

Documentation feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• Found the documentation helpful
• Found documentation but was incomplete
• Found the example project helpful
• Could not find relevant documentation
• Did not find the example project helpful

[jcheese1]

const session = await getSession({ req });

session.id // userId

Is this it?

[ZendeAditya]

Not working

[nyedidikeke]

May be related to #535.

[ghost]

oh yeah. thats what I did as well, forgot that part.
tldr:

in [...nextauth].js:

callbacks: {
   session: async (session, user) => {
      session.id = user.id
      return Promise.resolve(session)
}
}

[halp1]

For modern nextauth, use this instead:

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

[youngnishant]

@yuyaoiwa-houzz -- still getting error

[next-auth][error][SESSION_ERROR] [
TypeError: Cannot read property 'id' of undefined
at Object.session (webpack-internal:///./pages/api/auth/[...nextauth].js:32:25)

[youngnishant]

@nyedidikeke I'm getting user as undefined

[ndom91]

@youngnishant can you please post the relevant code?

[youngnishant]

callbacks: {
session: async (session, user) => {
console.log(user)
return Promise.resolve(session)
}
}

@ndom91

[jcheese1]

Maybe your DB isnt configured correctly?

[youngnishant]

@yuyao17 actually I'm using mongodb and checked it, it's working properly

[mcunningham]

@youngnishant are you using JWT? I had a similar issue using mongodb and followed the docs at https://next-auth.js.org/configuration/callbacks which states...

If you want to pass data such as an Access Token or User ID to the browser when using JSON Web Tokens, you can persist the data in the token when the jwt callback is called, then pass the data through to the browser in the session callback.

I did so accordingly and was able to get a user id into my session object by using the below 2 callbacks:

1. I used the jwt callback to extract the user id (which is the mongodb _id from the users collection) and passed it to the token using token.uid

jwt: async (token, user, account, profile, isNewUser) => {
      if (user) {
        token.uid = user.id;
      }
      return Promise.resolve(token);
    }

2. I then grabbed the token property I just set and passed the data through to the browser in the session callback

 session: async (session, user) => {
      session.user.uid = user.uid;
      return Promise.resolve(session);
    }

I am then able to access session.user.uid when using the useSession() hook.

[asibilia]

So when I do the same thing I only get the user argument from the jwt(token, user) callback on the first time it's called (sign in). After that, every time session() is called user is undefined in jwt(token, user) which means it'll be undefined in the session() callback as well.

[abdullahtariq1171]

Hi @asibilia, I'm seeing same behaviour. Receiving user only for first call inside jwt() and nothing afterwards. Wondering how did you solve it.

[youngnishant]

@shufflemattdev actually I'm not using JWT ?

[youngnishant]

I'm glad that you tried to help 😊😄

[benoror]

Hey @youngnishant I am facing the exact same issue, can't fin the _id anywhere. Did you end up fixing it?

[benoror]

Note: If I disable jwt it does indeed include the id in the session (by injecting it in the callback)

[youngnishant]

@benoror I've implemented my own jwt authentication by taking proper security measures ✌️

[philippetedajo]

Try this:

// pages/api/auth/[...nextauth].js

callbacks: {
session: async (session, user) => {
session.userId = user.id;
return Promise.resolve(session);
}
}
Then you can retrieve the userId from the session object using the getSession helper function:

const session = await getSession({ req });
const { userId } = session;

[goleary]

If you're using TypeScript then you'll also want to augment the default next-auth types by adding a file types/next-auth.d.ts that looks something like this:

import { DefaultUser } from "next-auth";

declare module "next-auth" {
  /**
   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user: DefaultUser & {
      id: string;
    };
  }
}

[noynek]

Much appreciated. I was getting lost on how to augment the TypeScript and this is exactly what I needed.

[ruohola]

Importing NextAuth was not needed actually.

[goleary]

@ruohola valid - removed that from the code block above.

Thanks!

[sayinmehmet47]

@goleary I added that file like you mentioned.

I still can not take userId in data from useSession.

I am using typescript in nextauth

[ruohola]

@sayinmehmet47 See my comment, it should make this clear.

[ruohola]

I'm using next-auth 4.0.5. Here's how I solved it (mostly combining advice from this thread):

[EDIT] See my updated, simplified solution: #536 (reply in thread)

src/pages/api/auth/[...nextAuth].ts:

export default NextAuth({
  ...
  callbacks: {
    session: async ({ session, token }) => {
      if (session?.user) {
        session.user.id = token.uid;
      }
      return session;
    },
    jwt: async ({ user, token }) => {
      if (user) {
        token.uid = user.id;
      }
      return token;
    },
  },
  session: {
    strategy: 'jwt',
  },
  ...
});

types.d.ts (file in project root):

import type { DefaultUser } from 'next-auth';

declare module 'next-auth' {
  interface Session {
    user?: DefaultUser & {
      id: string;
    };
  }
}

declare module 'next-auth/jwt/types' {
  interface JWT {
    uid: string;
  }
}

[KirschX]

Thank you so much, You saved my time.

[reevebarreto]

Thanks a lot! I can breathe a lot better now

[dawkaka]

Put the types.d.ts file in the pages directory to advantage of Next.js's built-in TypeScript configuration and avoid extra configuration steps.

[mengxi-ream]

For people who need to use jwt, type declare should be module next-auth/jwt not next-auth/jwt/type

declare module "next-auth/jwt" {
  interface JWT {
    uid: string;
  }
}

I make the uid as provider-id, e.g. google-126786142869245, github-12512345135. I did it this way because I don't know if two OAuth providers has the same user id or not. And also I treat users with the same email but different providers as different users

so my code is like

    async session({ session, token }) {
      if (session?.user) {
        session.user.uid = token.uid;
      }
      return session;
    },
    async jwt({ token, account, user, profile }) {
      if (user) {
        token.uid = `${account?.provider}${account === undefined ? "" : "-"}${
          user.id
        }`;
      }
      return token;
    },
  },
  session: {
    strategy: "jwt",
  },

and in type.d.ts

import type { DefaultUser } from "next-auth";

declare module "next-auth/jwt" {
interface JWT {
  uid: string;
}
}

declare module "next-auth" {
interface Session {
  user?: DefaultUser & {
    uid: string;
  };
}
}

[mengxi-ream]

note if you want to use custom id in the session, don't use getServerSession in Layout. #536 (reply in thread)

[bperunx]

You are my hero, @ruohola. THX a lot!!! Your solution was working for me.
Also thanks to all other guys from that thread to figure out the solution.

[markmendozadev]

Hi

i'm trying out CredentialsProvider and when i'm trying to return the id it doesn't show up.

the only things show up is (name,email,image) is it possible to get the _id from mongo db?

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { verifyPassword } from "../../../lib/auth";
import { connectDb } from "../../../lib/db";

export default NextAuth({
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        const { email, password } = credentials;
        const client = await connectDb();
        const db = client.db();

        const user = await db.collection("users").findOne({ email: email });
        if (!user) {
          client.close();
          throw new Error("Email already exists");
        }

        const isValid = await verifyPassword(password, user.password);
        if (!isValid) {
          client.close();
          throw new Error("Could Not Log you in");
        }
        return user;
      },
    }),
  ],
  callbacks: {
    session: async ({ session, token }) => {
      if (session?.user) {
        session.user.id = token.sub;
        console.log(token);
      }
      return session;
    },
  },

  session: {
    strategy: "jwt",
  },
});

[shadoath]

Did this work?

[nickretallack]

Why isn't this in the example app? Auth is pretty useless if you don't remember the user id of the person who logged in, right?

Do you have a solution for non-JWT sessions? Is that not something the database adapters (e.g. prisma) handle automatically?

[youngnishant]

I used JWT lib for both authentication and authorisation, in next js app

[youngnishant]

Not maintained sessions

[youngnishant]

Use cookies, bestest solution for next

[nickretallack]

Here's what I came up with for those who don't want to use JWT.

// pages/api/auth/[...nextauth].ts
import NextAuth from "next-auth"
import TwitterProvider from "next-auth/providers/twitter"
import prisma from "@/lib/prisma"
import { PrismaAdapter } from "@next-auth/prisma-adapter"

export default NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    TwitterProvider({
      clientId: process.env.TWITTER_ID,
      clientSecret: process.env.TWITTER_SECRET,
      version: "2.0",
    }),
  ],
  session: {strategy: "database"},
})

// pages/api/test.ts
import prisma from "@/lib/prisma"
import { getCookie } from 'cookies-next';

export default async function handler(req, res) {
  const token = getCookie('next-auth.session-token', {req, res}) as string
  const session = await prisma.session.findUnique({where: {sessionToken: token}})
  res.status(200).json(session)
}

// lib/prisma.ts
import { PrismaClient } from "@prisma/client"
const prisma = new PrismaClient()
export default prisma

This uses the cookies-next library. next-auth already uses the cookie library, so if you'd prefer to have less dependencies you could do this:

// pages/api/test.ts
import prisma from "@/lib/prisma"
import cookie from 'cookie';

export default async function handler(req, res) {
  const cookies = cookie.parse(req.headers.cookie || '')
  const token = cookies['next-auth.session-token']
  const session = await prisma.session.findUnique({where: {sessionToken: token}})
  res.status(200).json(session)
}

[youngnishant]

Awesome ⭐

[beaumontyun]

Exactly what I am looking for. Thank you.

[mcgrealife]

Superb! Many thanks @nickretallack

[mcgrealife]

Note: In HTTPS production environments, next-auth will use a secure cookie by default, which has a slightly different cookie key:

process.env.NODE_ENV == 'development'
    ? cookies['next-auth.session-token']
    : cookies['__Secure-next-auth.session-token']

[felipeotarola]

best!
this worked for me also.

const session = await prisma.user.findFirst();
console.log(session?.id);

[leephan2k1]

This code worked for me, now I'm on next-auth version ^4.6.1. Then the object user is completely undefined in the jwt callback and session. I logged the check and the user id exists again inside the token's sub. Totally fine with me!

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

[arvl130]

UPDATE: I think I had a misunderstanding while debugging this. The marked solution in this thread—which is a variation of the solution above—actually solves it for me.

This is what works for me as well. Though, I'd just like to add that the user object, does show up on the jwt callback. Strangely, the callback just happens to run twice, and on the second run, the user object is no longer there, only the generated token is left. You can observe it here:

[...nextauth].ts

import NextAuth, { type NextAuthOptions } from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"

export const authOptions: NextAuthOptions = {
  callbacks: {
    jwt(jwtProps) {
      console.log("jwtProps", jwtProps)
      return jwtProps.token
    },
    session(sessionProps) {
      console.log("sessionProps", sessionProps)
      return sessionProps.session
    },
  },
  session: {
    strategy: "jwt",
  },
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        if (
          credentials?.username === "admin" &&
          credentials?.password === "admin"
        )
          return {
            id: "1234",
            name: "J Smith",
            email: "jsmith@example.com",
            some: "a",
            custom: "b",
            properties: "c",
          }

        return null
      },
    }),
  ],
}

export default NextAuth(authOptions)

Output after running signIn():

jwtProps {
  token: {
    name: 'J Smith',
    email: 'jsmith@example.com',
    picture: undefined,
    sub: '1234'
  },
  user: {
    id: '1234',
    name: 'J Smith',
    email: 'jsmith@example.com',
    some: 'a',
    custom: 'b',
    properties: 'c'
  },
  account: {
    providerAccountId: '1234',
    type: 'credentials',
    provider: 'credentials'
  },
  isNewUser: false
}
jwtProps {
  token: {
    name: 'J Smith',
    email: 'jsmith@example.com',
    sub: '1234',
    iat: 1672392394,
    exp: 1674984394,
    jti: '89f57295-0db0-44c4-9de7-0f538d162ac1'
  }
}
sessionProps {
  session: {
    user: { name: 'J Smith', email: 'jsmith@example.com', image: undefined },
    expires: '2023-01-29T09:26:34.834Z'
  },
  token: {
    name: 'J Smith',
    email: 'jsmith@example.com',
    sub: '1234',
    iat: 1672392394,
    exp: 1674984394,
    jti: '89f57295-0db0-44c4-9de7-0f538d162ac1'
  }
}

I'm not sure how we can pass the user object along with the generated token, so I've taken a similar approach.

[kristianeboe]

@balazsorban44 @nickretallack @leephan2k1

I wanted not just the userId, but also the additional fields I had added to my user model and ended up with, what seems to me at least, an even simpler solution:

export default NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET!,
  callbacks: {
    session: async ({ session, user }) => {
      return {
        ...session,
        user: user,
      };
    },
  },
});

[beaumontyun]

@kristianeboe Your solution was extraordinary at how simple and elegant it was. Seeing the "id" field at the console right out of useSession on a Monday morning made the week for me. Thank you.

[cobbvanth]

This is the proper solution, especially if you're not using JWTs

[cobbvanth]

any idea how to fix the typeerror? the NextAuthOptions doesn't like returning a user there

[AndrewRayCode]

If you use this solution, keep in mind this will return the entire user object to your client. If you add additional fields to the user model in your database that are sensitive, like a hashed password, it will be available in to any client call with useSession().

It might be safer to pick the specific keys you want. Here's the solution I have now, including the proper typescript bindings (I use this solution to get the user id in the session)

import NextAuth, { User, Session } from 'next-auth';

....

  callbacks: {
    session: async ({ session, user }: { session: Session; user: User }) => ({
      ...session,
      user: {
        id: user.id,
        name: user.name,
        email: user.email,
        image: user.image
      },
    }),
  },

[eyadaldaoud]

@balazsorban44 @nickretallack @leephan2k1

I wanted not just the userId, but also the additional fields I had added to my user model and ended up with, what seems to me at least, an even simpler solution:

export default NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET!,
  callbacks: {
    session: async ({ session, user }) => {
      return {
        ...session,
        user: user,
      };
    },
  },
});

Thank you so much , this worked for me and its pretty simple

[mattmcegg]

If anyone is wondering how to do this on Next.js 13 using NextAuth 4.22.1 using TypeScript, where I am returning data from the database about the user, including ID and roles, here ya go:

First, you have to make some custom types inside your types folder (you may need to edit your tsconfig.ts if you're not defining typeRoots by adding):

"typeRoots": ["./node_modules/@types", "./src/app/types"],"

then, create a file called /next-auth.d.ts mines inside '/src/app/types' (or whatever folder your types are in):

import { Session as NextAuthSession, User as NextAuthUser } from "next-auth";

declare module "next-auth" {
  export interface User extends NextAuthUser {
    id: string;
    roles: string[];
  }

  export interface Session extends NextAuthSession {
    user: User;
  }
}

Then you need this inside [...nextauth].js:

interface ExtendedUser extends NextAuthUser {
  id: string;
  roles: string[];
}

then, fire away on the session callback:

async session({ session, token }) {
      const user = await prisma.user.findUnique({
        where: {
          id: token.sub,
        },
        select: {
          id: true,
          roles: true, // Include roles in the user query
        },
      });

      session.user = {
        ...session.user,
        id: token.sub || (user?.id as any),
        roles: user?.roles as any, // Add roles to the session.user object
      } as ExtendedUser; // Cast the session.user object to ExtendedUser

      return {
        ...session,
      };
    },

[simonasbuj]

wow, finally an answer that works, thank you! For me it worked in even simpler way.
To have full user data (username, image etc.) in useSession() I did this:

In root folder create a file 'next-auth.d.ts with this content:
( TO BE HONEST, I dont even know if this one is needed, works without it too)

import NextAuth from 'next-auth';

declare module 'next-auth' {
  interface Session {
    user: {
      id: string
    } & DefaultSession['user']
  }
}

in [...nextauth]/route.ts add callbacks section:

callbacks : {
        session: async ({ session, token }) => {
            const fullData = await prisma.user.findUnique({
                where: {
                    id: token.sub
                }
            })
            if (session?.user) {
              session.user.id = token.sub
              session.user.fullData = fullData
            }

            return session;
          },
          jwt: async ({ user, token }) => {
            if (user) {
              token.sub = user.id;
            }
            return token;
          },
    },

Now I can get any user data in components like this:

const session = useSession()
...
 <p>logged in user username: <span className="font-bold">{session.data?.user?.fullData.username}</span></p>

[karmalia]

Fix: Convert your server side session to client and don't pass session to SessionProvider. Somehow your custom session is overwriting by this session object. If there is a good solution I also would like to know.

PS: I tried types trick. It only solved type checking.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="tr">
      <body>
        <SessionProvider>
          <div className="flex">
            <Sidebar />
            <main className="relative max-h-[100vh] flex-1 overflow-y-auto">
              <Header />
              <div className="content">{children}</div>
            </main>
          </div>
          <ToastContainer />
        </SessionProvider>
      </body>
    </html>
  );
}

[mengxi-ream]

You are write, we should not use getServerSession in Layout and pass it to Provider, otherwise it will overwrite our custom id in session.

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

const SessionProviderWrap = ({ children }: { children: React.ReactNode }) => {
  return <SessionProvider>{children}</SessionProvider>;
};

export default SessionProviderWrap;

import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import Navbar from "@/components/nav/Navbar";
import SessionProviderWrap from "./SessionProviderWrap";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} min-h-screen flex flex-col`}>
        <SessionProviderWrap>
          <Navbar />
          <main className="-mt-32 flex-grow flex">
            <div className="mx-auto max-w-7xl px-4 pb-12 sm:px-6 lg:px-8 flex-grow">
              <div className="rounded-lg bg-white px-5 py-6 shadow sm:px-6 min-h-full">
                {children}
              </div>
            </div>
          </main>
        </SessionProviderWrap>
      </body>
    </html>
  );
}

[vyperrrr]

I have the same problem (sort of). I am able to get userId using useSession() hook, but getServerSession() doesn't include userId.