Module Augmentation not adding properties as expected

[yijiuntay]

In Next.js App router and NextAuth v5

As per https://authjs.dev/getting-started/typescript#module-augmentation, I am trying to add some properties to my session.user, so that I can access them with auth() later. e.g. session.user.role = 'admin'.

import NextAuth, { type DefaultSession } from "next-auth";
import Credentials from "next-auth/providers/credentials";
import { authAdmin, authUser } from "@/app/actions";
import { ZodError } from "zod";
import { signInSchema } from "./lib/zod";

declare module "next-auth" {
  /**
   * Returned by `auth`, `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user: {
      /** Add fields. */
      id: string
      email: string
      created: string;
      updated: string;
      avatar: number;
      token: string;
      role: string;
      /**
       * By default, TypeScript merges new interface properties and overwrites existing ones.
       * In this case, the default session user properties will be overwritten,
       * with the new ones defined above. To keep the default session user properties,
       * you need to add them back into the newly declared interface.
       */
    } & DefaultSession["user"];
  }
}

export const { auth, handlers, signIn, signOut } = NextAuth({
  providers: [
    Credentials({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "string" },
        password: { label: "Password", type: "password" },
      },
      authorize: async (credentials) => {
        try {
          let user = null;

          // verify credentials with zod
          const { email, password } = await signInSchema.parseAsync(
            credentials
          );

          {/* auth logic */}

          if (!user) {
            // No user found, so this is their first attempt to login
            throw new Error("User not found.");
          }
          
          return user;
        } catch (error) {
          if (error instanceof ZodError) {
            // Return `null` to indicate that the credentials are invalid
            return null;
          }
          // For any other error, return null explicitly to prevent returning undefined
          return null;
        }
      },
    }),
  ],
  session: {
    strategy: "jwt",
  },
  callbacks: {
    session({ session, token, user }) {

      return {
        ...session,
        user: {
          ...session.user,
          id: session.user.id,
          created: user.created,
          updated: user.updated,
          avatar: user.avatar,
          token: user.token,
          role: user.role,
          email: user.email,
        },
      };
    },
  },
});

however, I'm not able to get the desired properties, (id: string email: string created: string; updated: string; avatar: number; token: string; role: string;) with auth().

I console logged the 'session', 'token', and 'user' in

callbacks: {
    session({ session, token, user }) {

      return {
        ...session,
        user: {
          ...session.user,
          id: session.user.id,
          created: user.created,
          updated: user.updated,
          avatar: user.avatar,
          token: user.token,
          role: user.role,
          email: user.email,
        },
      };
    },
  },

,and it turns out they don't contain the properties I added.

I'm looking for help or guidance on the correct way to do this, as I've followed the docs, checked on several similar issues https://github.com/nextauthjs/next-auth/issues/9122, https://github.com/nextauthjs/next-auth/issues/9329, https://github.com/nextauthjs/next-auth/issues/9097, I still can't make it work.