Next.js Discord

Discord Forum

Next Auth additional properties to session

Unanswered
SharpieMaster posted this in #help-forum
Open in Discord
SharpieMasterOP
declare module "next-auth" {
    interface Session extends DefaultSession {
        user: DefaultSession["user"] & {
            id: string;
        };
    }
}

55 Replies

SharpieMasterOP
const newRecipe = async () => {
    "use server";

    const session = await getServerSession();

    console.log(session); // no id property
    // ...
}
riský
try something like: https://github.com/shadcn-ui/taxonomy/blob/main/types/next-auth.d.ts (and make sure in a .d.ts file)
SharpieMasterOP
{
  user: {
    name: 'test',
    email: 'test@test.com',
    image: 'test'
  }
}
@SharpieMaster json { user: { name: 'test', email: 'test@test.com', image: 'test' } }
riský
are you even adding the id prop to the session in config?
SharpieMasterOP
import NextAuth, { DefaultSession } from "next-auth";
import GithubProvider from "next-auth/providers/github";
import DiscordProvider from "next-auth/providers/discord";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { prisma } from "@/server/db/client";

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

const adapter = NextAuth({
    adapter: PrismaAdapter(prisma),
    secret: process.env.NEXTAUTH_SECRET,
    session: {
        strategy: "jwt",
    },
    providers: [
        GithubProvider({
            clientId: process.env.GITHUB_ID ?? "",
            clientSecret: process.env.GITHUB_SECRET ?? "",
        }),
        DiscordProvider({
            clientId: process.env.DISCORD_ID ?? "",
            clientSecret: process.env.DISCORD_SECRET ?? "",
        }),
    ],
});

export { adapter as GET, adapter as POST };
SharpieMasterOP
this is the src/app/api/auth/[...nextauth]/route.ts
I am using prisma and I do have the id property,
also I am new to this and I dont know how to use the code you provided in my own
riský
like add this to your config (or some variation of):
  callbacks: {
    async session({ token, session }) {
      if (token) {
        session.user.id = token.id
        session.user.name = token.name
        session.user.email = token.email
        session.user.image = token.image
      }

      return session
    },
SharpieMasterOP
where would that config be?
riský
ye
SharpieMasterOP
riský
now make a next-auth.d.ts file somewhere (idearly in a types folder), and add:
import { User } from "next-auth"

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


declare module "next-auth" {
  interface Session {
    user: User & {
      id: string
    }
  }
}
and maybe token.image is actually token.picture...
SharpieMasterOP
I cant try that right now, I will respond later
riský
ahh ok
SharpieMasterOP
still nothing
{
  user: {
    name: 'SharpieGod',
    email: 'sabodarko09@gmail.com',
    image: 'https://avatars.githubusercontent.com/u/96390356?v=4'
  }
}
@riský ahh ok
SharpieMasterOP
^
SharpieMasterOP
so I added this into api/auth/[...nextuath]/route.ts:
import NextAuth, { DefaultSession } from "next-auth";
import GithubProvider from "next-auth/providers/github";
import DiscordProvider from "next-auth/providers/discord";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { prisma } from "@/server/db/client";

const adapter = NextAuth({
    adapter: PrismaAdapter(prisma),
    callbacks: {
        session: ({ session, user }) => {
            if (session.user) {
                session.user.id = user.id;
            }

            return session;
        },
    },
    session: {
        strategy: "jwt",
    },
    providers: [
        GithubProvider({
            clientId: process.env.GITHUB_ID ?? "",
            clientSecret: process.env.GITHUB_SECRET ?? "",
        }),
        DiscordProvider({
            clientId: process.env.DISCORD_ID ?? "",
            clientSecret: process.env.DISCORD_SECRET ?? "",
        }),
    ],
});

export { adapter as GET, adapter as POST };
and the types into next-auth.d.ts:
import { User } from "next-auth";

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

declare module "next-auth" {
    interface Session {
        user: User & {
            id: string;
        };
    }
}
[next-auth][error][JWT_SESSION_ERROR] 
https://next-auth.js.org/errors#jwt_session_error Cannot read properties of undefined (reading 'id') {
  message: "Cannot read properties of undefined (reading 'id')",
  stack: "TypeError: Cannot read properties of undefined (reading 'id')\n" +     
    '    at Object.session (webpack-internal:///(rsc)/./src/app/api/auth/[...nextauth]/route.ts:22:40)\n' +
    '    at Object.session (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/routes/session.js:38:52)\n' +
    '    at async AuthHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/core/index.js:161:37)\n' +
    '    at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:50:30)\n' +
    '    at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/.pnpm/next-auth@4.23.1_next@13.5.2_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/next/index.js:84:24)\n' +
    '    at async C:\\Users\\SaboD\\OneDrive\\Desktop\\Spotify Clone\\food-diary-next\\node_modules\\.pnpm\\next@13.5.2_react-dom@18.2.0_react@18.2.0\\node_modules\\next\\dist\\compiled\\next-server\\app-route.runtime.dev.js:1:66877',
  name: 'TypeError'
}
SharpieMasterOP
ok
token doesnt have the id property
riský
try just putting the it property and see if it works
also the if is should check for token and not session
SharpieMasterOP
typescript is gonna yell at me
this is the token:
{
  name: 'SharpieGod',
  email: 'sabodarko09@gmail.com',
  picture: 'https://avatars.githubusercontent.com/u/96390356?v=4',
  sub: 'clmsnq2ub0000u7bkyf5z7wlo',
  iat: 1695696270,
  exp: 1698288270,
  jti: '179f01f7-96ea-45db-8d79-00ab53ce403a'
}
also I added the type 
declare module "next-auth/jwt" {
    interface JWT {
        id: string;
    }
}
riský
im not sure why it isn't there tho... then again in the example: https://github.com/shadcn-ui/taxonomy/blob/main/lib/auth.ts#L83, they added the id to the token inside a jwt...
why is this so hard to just get id for next auth 😭
SharpieMasterOP
ikr
i tried to copy the create t3-app auth options
but that didnt work
riský
well i copyed this guys code and it worked for me...
SharpieMasterOP
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { type GetServerSidePropsContext } from "next";
import {
  getServerSession,
  type DefaultSession,
  type NextAuthOptions,
} from "next-auth";
import DiscordProvider from "next-auth/providers/discord";

import { env } from "~/env.mjs";
import { db } from "~/server/db";

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

export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        id: user.id,
      },
    }),
  },
  adapter: PrismaAdapter(db),
  providers: [
    DiscordProvider({
      clientId: env.DISCORD_CLIENT_ID,
      clientSecret: env.DISCORD_CLIENT_SECRET,
    }),
  ],
};

export const getServerAuthSession = (ctx: {
  req: GetServerSidePropsContext["req"];
  res: GetServerSidePropsContext["res"];
}) => {
  return getServerSession(ctx.req, ctx.res, authOptions);
};
riský
you are using app dir? that getServerAuthSession won't work as its for pages dir...
SharpieMasterOP
yep
it is
but im not using the getserverauthsession
i dont care about that
riský
just do https://github.com/shadcn-ui/taxonomy/blob/main/lib/session.ts if you want it
import { getServerSession } from "next-auth/next"

import { authOptions } from "@/lib/auth" // just where ever it is

export async function getCurrentUser() {
  return getServerSession(authOptions)
}
SharpieMasterOP
stupid a$$ library
ig imma have to switch to t3
riský
t3 uses nextauth?
and also pages dir.... not app
SharpieMasterOP
eh
riský
Yeah so idk how to help you... I have gotten what shadcn did to work...
@riský now make a `next-auth.d.ts` file somewhere (idearly in a types folder), and add: ts import { User } from "next-auth" declare module "next-auth/jwt" { interface JWT { id: string } } declare module "next-auth" { interface Session { user: User & { id: string } } }
Aleutian Tern
In next-auth@5 this is deprecated in favor of @auth/core modules
interface Role {
  isAdmin: boolean
}

declare module "@auth/core/types" {
  interface Session {
    user: DefaultSession["user"] & Role
  }
}

declare module "@auth/core/jwt" {
  interface JWT extends Role {}
}

But when using pnpm, this does not seem to work since pnpm hardlinks @auth/core into node_modules/.pnpm
Any idea how to work around this and make this work when using pnpm?
riský
Isn't that still in beta anyway?
Aleutian Tern
It is, just wondering if there is a workaround