Session Callback Not Populating User ID from JWT Token

[adam-mushnick]

Question 💬

I'm using NextAuth with the Credentials Provider for authentication in my Next.js app. I've set up the JWT and session callbacks in my nextauth.js configuration. The JWT callback correctly populates the token object with the user's id and username. However, the session callback doesn't seem to translate that into the session's user object as expected.

Issue:
When I log in, the JWT callback logs a populated token object, but the user object is undefined. Subsequent calls to the JWT callback show the token object with the correct id and username fields. However, the session's user object only has name, email, and image fields, all of which are undefined.

I've tried various solutions, including explicitly setting user fields in the session callback, checking for overwrites, and ensuring the correct structure in the authorize callback, but the issue persists.

Any guidance or suggestions would be greatly appreciated!

How to reproduce ☕️

JWT Callback:

async jwt({ token, user }) { console.log('JWT callback received:', token, user); if (user) { return { ...token, id: user.id, username: user.username, }; } else { console.error('User is undefined:', user); } return token; }

Session Callback:

async session({ session, token }) { if (session && token) { session.user = { id: token.id, username: token.username, }; } else { console.error('Session or token is undefined:', session, token); } return session; }

Logs:

JWT callback received: { sub: '64b74dbc3e53473ebe02f410', id: '64b74dbc3e53473ebe02f410', username: '321', iat: 1693316359, exp: 1693402759, jti: '913eb411-c0cc-4fcc-98f6-ea3b194f2029' } undefined User is undefined: undefined

Session Object:

{ user: { name: undefined, email: undefined, image: undefined }, expires: '2023-09-28T13:39:40.800Z' }

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[adam-mushnick]

Bump

[kxxoling]

Also think this would be helpful.

I just tried it in a new local dev environ which uses CredentialsProvider as the docs says:

CredentialsProvider({
      name: "Sign in with Email and Password",
      credentials: {
        email: {
          label: "Email",
          type: "email",
          placeholder: "test@example.com",
          required: true,
        },
        password: { label: "Password", type: "password", required: true },
      },
      async authorize(credentials, req) {
        const user = await prisma.user.findFirst({
          where: {
            email: credentials?.email,
            // password: !!credentials?.password, // TODO: password field and hash verify
          },
        });

        if (user) {
          // Any object returned will be saved in `user` property of the JWT
          return user; // which is `{ id: 'xxxxx', name: 'Kane Blueriver', email: 'kxxoling@example.com', emailVerified: null, image: 'https://avatars.githubusercontent.com/u/1227139?v=4' }` 
        } else {
          // If you return null then an error will be displayed advising the user to check their details.
          return null;
          // You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter
        }
      },
    }),

It says Any object returned will be saved in user property of the JWT, but what I got is in callbacks.session is:

  callbacks: {
    session: (params) => {
      console.log(params);
      return params,
      };
    },
  },

logs:

// should have `user` key here.
{
  session: {
    user: {
      name: 'Kane Blueriver',
      email: 'kxxoling@example.com',
      image: 'https://avatars.githubusercontent.com/u/1227139?v=4'
    },
    expires: '2023-12-26T16:27:54.911Z'
  },
  token: {
    name: 'Kane Blueriver',
    email: 'kxxoling@example.com',
    picture: 'https://avatars.githubusercontent.com/u/1227139?v=4',
    sub: 'xxxxxxxx',
    iat: 1701015579,
    exp: 1703607579,
    jti: '136e1xxx-55b4-4262-9ecd-xxx02d491d21'
  }
}

[kxxoling]

I added 2 callbacks to fix this issue:

  callbacks: {
    jwt({ token, user }) {
      if (user) {
        return { ...token, id: user.id }; // Save id to token as docs says: https://next-auth.js.org/configuration/callbacks
      }
      return token;
    },
    session: ({ session, token, user }) => {
      return {
        ...session,
        user: {
          ...session.user,
          // id: user.id, // This is copied from official docs which find user is undefined
          id: token.id, // Get id from token instead
        },
      };
    },
  },

This also adds id field in /api/auth/session API.

But I don't think it's a good solution, because it leaves a lot types to be fixed.

[pseudo-tensor]

These bindings worked for me in case anyone needs the types for this

import { User, Session } from 'next-auth';
import { AdapterUser } from 'next-auth/adapters';
import { JWT } from 'next-auth/jwt';

...
callbacks: {
    jwt({ token, user }: {token: JWT, user: User | AdapterUser }) {
      if (user) {
        return { ...token, id: user.id }; // Save id to token as docs says: https://next-auth.js.org/configuration/callbacks
      }
      return token;
    },
    session: ({ session, token, user }: {session: Session, token: JWT, user: User | AdapterUser }) => {
      return {
        ...session,
        user: {
          ...session.user,
          // id: user.id, // This is copied from official docs which find user is undefined
          id: token.id, // Get id from token instead
        },
      };
    },
  },
...