how to update the type of session in session callback?

[bhatvikrant]

I am using typescript and my [...next-auth].tsx file looks like this:

import NextAuth, { Awaitable, Session, User } from "next-auth";
// import GithubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";

type ExtendedUserType = User & { username?: string; uid?: string };

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],
  pages: {
    signIn: "/auth/signin", // for custom sign in page
  },
  callbacks: {
    async session({ session, token, user }): Awaitable<Session> {
      (session.user as ExtendedUserType).username = session.user?.name
        ?.split(" ")
        .join("")
        .toLocaleLowerCase();

      (session.user as ExtendedUserType).uid = token.sub;

      return session;
    },
  },
});

when fetching the session using the useSession hook I do not get Typescript autocompletion for the newly added keys - 'username', 'uid'

I am also getting this typescript error for Awaitable<Session> type

[balazsorban44]

https://next-auth.js.org/getting-started/typescript#module-augmentation

[bhatvikrant]

Thankyou! This works! But how can I extend the Session interface? so that I only have to add the new custom properties and not the already existing ones? Thankyou once again!

[deadcoder0904]

Add the following types/**/*.ts in tsconfig.json:

{ 
  .
  .
  .
  "include": ["next-env.d.ts", "types/**/*.ts", "**/*.ts", "**/*.tsx"],
  .
  .
  .
}

Then add the following for session.user.

types/next-auth.d.ts

import NextAuth from "next-auth"

declare module "next-auth" {
  /**
   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user: {
      /** The user's name. */
      name: string
    }
  }
}

[bhatvikrant]

This is how my next-auth.d.ts looks like

import NextAuth from "next-auth";

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

      // Custom fields
      uid: string;
      username: string;
    };
  }
}

but when I am using the useSession hook, I only get the TS competition for the properties that I added

My next-auth version is:

"next-auth": "4.0.0-beta.4"

[balazsorban44]

🤷. Probably adding three extra type fields isn't that bad, and more explicit anyway. Think about the next person coming to look at your code, they wouldn't know where name, email and image would come from.

[bhatvikrant]

Yes 😂. that is what I am currently doing, I just wanted to know if there is any other way. Thankyou though.

[deadcoder0904]

@bhatvikrant weird, works for me with account. by adding only extra 2 properties:

And my Account interface only has oauth_token & oauth_token_secret:

declare module 'next-auth' {
	/**
	 * Usually contains information about the provider being used
	 * and also extends `TokenSet`, which is different tokens returned by OAuth Providers.
	 */
	interface Account {
		oauth_token: string
		oauth_token_secret: string
	}
}

The rest of the properties are built-in.

[deadcoder0904]

And it looks like it should work as expected:

next-auth/types/index.d.ts

Lines 420 to 427 in e8a58a0

	export interface DefaultSession extends Record<string, unknown> {
	user?: {
	name?: string | null
	email?: string | null
	image?: string | null
	}
	expires?: string
	}

And below Session extends DefaultSession:

next-auth/types/index.d.ts

Line 438 in e8a58a0

export interface Session extends Record<string, unknown>, DefaultSession {}

[abhaysharma3021]

Hi, I am also facing an issue. I have created a API and after login its returning id, email, and accessToken but I'm unable to set the accessToken in next-auth session as well as jwt token in next auth

[0xBankai]

I have a similar issue.

the problem is the next one:
Type '({ session }: { session: Session; }) => Promise' has no properties in common with type 'Partial'.
The expected type comes from property 'session' which is declared here on type 'AuthOptions'

[memukherjee]

The session and the signIn functions needs to be nested under callbacks.

const handler = NextAuth({
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID ?? "",
            clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? "",
        }),
    ],
    callbacks: {
        async session({ session }) {
            const sessionUser = await User.findOne({
                email: session?.user?.email,
            });
            session.user.id = sessionUser?._id.toString();
            return session;
        },
        async signIn({ account, profile, user, credentials }) {
            try {
                if(!profile){
                    throw new Error("No profile found");
                }
                console.log(profile);
                
                await connectDB();

                // Check if user exists
                const userExists = await User.findOne({ email: profile.email });

                // If not, create user
                if (!userExists) {
                    await User.create({
                        email: profile.email,
                        username: profile.name?.replace(/\s/g, "").toLowerCase(),
                        image: profile.image,
                    });
                }

                return true;
            } catch (error) {
                console.log(error);
                return false;
            }
        },
    },
});

If you are following the the Javascript Mastery Next JS course then follow this repo:https://github.com/adrianhajdin/project_next_13_ai_prompt_sharing/blob/main/app/api/auth/%5B...nextauth%5D/route.js

[develth]

How did you solved the error regarding Awaitable?

[diego-lipinski-de-castro]

Have you solved?

[MrOxMasTer]

typescirpt 5.5.4 / auth.js v5
all other types disappear

[MrOxMasTer]

it helps if you put this declaration in auth.ts (didn't finish reading the documentation)