NextAuth exposing next-auth.session-token to token.user object

[agoyal1999]

After trying multiple ways and going through numerous articles and videos, I am still not able to solve a trivial issue. I have used nextAuth in my fullstack next app. I am using NextAuth v4 and nextJS v14. I tried to implement a the credential provider for my app, while the whole authentication works smoothly, I want to be able to set the accessToken in my returned session object so that I can use it to make API calls from my frontend to my server due to the token auth mechanism I have set for my APIs. Right now, I manually copy paste the token from my browser cookies and then make calls to my APIs. This works, but I want to be able to extract it from the useSession() on client side and use it to make API calls.

this is my api/auth/[...nextauth]/route.ts:

import { authOptions } from "@/lib/authOptions";
import NextAuth from "next-auth/next";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

this is my authOptions.ts:

import { AuthOptions } from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import bcrypt from 'bcrypt';
import { connectToDatabase } from './mongodb/mongodb';
import { IUser, UserModel } from '@/models/user.model';

export const authOptions: AuthOptions = {
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {},

      //@ts-ignore
      async authorize(credentials: { email: string; password: string }) {
        try {
          await connectToDatabase();
          const user = await UserModel.findOne({
            email: credentials.email,
          });

          if (user) {
            const isPasswordCorrect = await bcrypt.compare(
              credentials.password,
              user.password,
            );

            if (isPasswordCorrect) {
              let currentUser = {
                id: user.id,
                name: user.name,
                email: user.email,
                role: user.role,
                isSuperAdmin: user.isSuperAdmin,
              };

              return Promise.resolve(currentUser);
            }
          }
          return Promise.resolve(null);
        } catch (error) {
          console.error('Error during authentication:', error);
          // Return null in case of an error
          return Promise.resolve(null);
        }
      },
    }),
  ],
  callbacks: {
    session({ session, token, user }) {
      if (token.user !== undefined) {
        session.user = token.user as IUser;
      }
      return session;
    },
    async redirect({ baseUrl }) {
      return baseUrl + '/dashboard';
    },
    //@ts-ignore
    jwt({ token, user, account }) {
      console.log(token);

      if (account?.provider === 'credentials' && user !== undefined) {
        token.user = user;
      }
      return token;
    },
  },
  jwt: {
    maxAge: 60 * 60 * 24 * 30,
  },
  pages: {
    signIn: '/login',
  },
};

This is my user.interface.ts:

export interface IUser {
  name: string;
  email: string;
  password: string;
  role: 'chef' | 'waiter' ;
  isSuperAdmin: boolean;
  accessToken?: string;
  resetToken?: string;
  tokenExpiry?: Date;
}

this is my next-auth.d.ts file:

// next-auth.d.ts
import NextAuth from 'next-auth';
import { IUser } from '@/models/user.model'; // Adjust the path accordingly

declare module 'next-auth' {
  interface Session {
    user: IUser; // Add your custom user model
    token: {
      role: 'chef' | 'waiter'; // Add properties from your token
    };
  }
}

I am using mongoDB, mongoose.

I can see my session-token in cookies upon successful login:

currently I see this for my session on client side, I want to be able to see a field for accessToken in my response below which allows me to extract this value and use it to make API calls from client side.

{
    "user": {
        "id": "jgdgd78789dhdujhkd",
        "name": "Sam Rodrigaz",
        "email": "sam@gmail.com",
        "role": "chef",
        "isSuperAdmin": false
    },
    "expires": "2024-03-08T04:11:30.477Z"
}

Please let me know if any more info required.

[yokohailemariam]

inside your auth.ts add this

declare module "next-auth" {
  interface Session {
    user: IUser & DefaultSession["user"];
  }
}

also inside your IUser interface add id:string and emailVerified: Date;

export interface IUser {
  id: string;
  name: string;
  email: string;
  password: string;
  role: 'chef' | 'waiter' ;
  isSuperAdmin: boolean;
  accessToken?: string;
  resetToken?: string;
  tokenExpiry?: Date;
  emailVerified: Date;
}

and make your callback something like this

callbacks: {
  async session({ session, token }) {
    if (token.user) {
      session.user = token.user as IUser;
    }

    return session;
  },
  async jwt({ token, user, account }) {
    if (!token.sub) return token;
    if (account?.provider === "credentials" && user !== undefined) {
      token.user = user;
    }
    return token;
  },
},