Implementing numeric user id with next-auth is a straightforward process that involves setting up

Question

Implementing numeric user id with next-auth is a straightforward process that involves setting up

Recently, I came across create-t3-app and decided to try it out for my NextJS projects. It handles a lot of the initial setup work for TypeScript, trpc, prisma, and next-auth, which would save me a significant amount of time. While this is beneficial, it doesn't seem to be at the root of the issue I'm facing. The problem arises from using a MySQL database with auto-incrementing user IDs. The types defined in the next-auth package specify user IDs as strings (DefaultUser in next-auth/core/types.d.ts and AdapterUser in next-auth/adapters.d.ts both indicate the ID type as string despite comments mentioning UUIDs). To try and accommodate numeric user IDs, I attempted to extend the existing types by adding the following code snippet to next-auth.d.ts:

import { DefaultSession, DefaultUser } from 'next-auth'

declare module 'next-auth' {
  interface User extends DefaultUser {
    id: number;
  }
  interface Session {
    user?: {
      id: number;
    } & DefaultSession['user'];
  }
}

This modification seemed to work in most cases except in [...nextauth].ts where an error occurred:

Type 'string | number' is not assignable to type 'number'. Type 'string' is not assignable to type 'number'.ts(2322)

The error specifically points to the line session.user.id = user.id within this part of the code:

export const authOptions: NextAuthOptions = {
  // Include user.id on session
  callbacks: {
    session({ session, user }) {
      if (session.user) {
        session.user.id = user.id
      }
      return session
    }
  },
  adapter: PrismaAdapter(prisma),
  providers: []
}

export default NextAuth(authOptions)

I managed to resolve the TypeScript error by removing the id: string; line from the AdapterUser section in next-auth/adapters.d.ts, returning it to id: number; as specified in the modified User interface:

export interface AdapterUser extends User {
    id: string; // <-- I removed this
    email: string;
    emailVerified: Date | null;
}

Although I believe that adjusting the library's types to facilitate numeric user IDs should not be necessary, I have exhausted all other solutions and have not found relevant information online. Should I reconsider using numeric IDs even though they align with my database structure? For context, here are the versions of the technologies I am currently utilizing:

next 12.3.1
next-auth 4.12.3
react 18.2.0
react-dom 18.2.0
superjson 1.9.1
zod 3.18.0
eslint 8.22.0
postcss 8.4.14
prettier 2.7.1
prisma 4.4.0
tailwindcss 3.1.6
typescrypt 4.8.0

typescript next.js next-auth

Answer 1

Answer №1

Regrettably, it appears that altering or modifying the types within the library is not possible - even attempting to adjust NextAuthOptions proves futile as subsequent property definitions must maintain the same type. For now, you will need to resort to a runtime check/coercion or casting:

export const authOptions: NextAuthOptions = {
  // Include user.id on session
  callbacks: {
    session({ session, user }) {
      if (session.user) {
        if (typeof user.id !== "number") throw new Error("id should be a number");
        session.user.id = user.id // OK
        // session.user.id = +user.id // riskier but still functional
        // session.user.id = user.id as number // also risky
      }
      return session
    }
  },
  adapter: PrismaAdapter(prisma),
  providers: []
}

Answer 2

Regrettably, it appears that altering or modifying the types within the library is not possible - even attempting to adjust NextAuthOptions proves futile as subsequent property definitions must maintain the same type. For now, you will need to resort to a runtime check/coercion or casting:

export const authOptions: NextAuthOptions = {
  // Include user.id on session
  callbacks: {
    session({ session, user }) {
      if (session.user) {
        if (typeof user.id !== "number") throw new Error("id should be a number");
        session.user.id = user.id // OK
        // session.user.id = +user.id // riskier but still functional
        // session.user.id = user.id as number // also risky
      }
      return session
    }
  },
  adapter: PrismaAdapter(prisma),
  providers: []
}

Answer 3

Answer №2

Building upon the previous solution mentioned, I decided to enhance my workflow by implementing runtime typeguards.

In my specific scenario, my Prisma user model contained additional attributes:

model User {
  id                  Int                 @id @default(autoincrement())
  uuid                String              @unique @default(cuid())
  name                String?
  email               String?             @unique
  emailVerified       DateTime?
  image               String?
  accounts            Account[]
  categories          Category[]
  sessions            Session[]
  records             Record[]
  permissionsGranted  SharePermission[]     @relation("permissions_granted")
  permissionsReceived SharePermission[]     @relation("permissions_received")
  @@unique([id, uuid])
  @@index(fields: [id, uuid], name: "user_by_id_idx")
}

To handle these extra attributes, I proceeded to define the following typeguards:

import { User as AdapUser } from '@prisma/client';
import { Session, User } from 'next-auth';

export interface AuthenticatedSession extends Session {
    id: number;
    user: AdapUser;
}

export const isNextAuthUser = (value: unknown): value is User => {
    const { id, name, email, image } = (value ?? {}) as User;
    const idIsValid = typeof id === 'number';
    const nameIsValid = typeof name === 'string' || !name;
    const emailIsValid = typeof email === 'string' || !email;
    const imageIsValid = typeof image === 'string' || !image;
    return idIsValid && nameIsValid && emailIsValid && imageIsValid;
};

export const isAdapUser = (value: unknown): value is AdapUser => {
    const { uuid, emailVerified } = (value ?? {}) as AdapUser;
    const uuidIsValid = typeof uuid === 'string';
    const emailVerifiedIsEmail = emailVerified instanceof Date || !emailVerified;
    return isNextAuthUser(value) && uuidIsValid && emailVerifiedIsEmail;
};

export const isSession = (value: unknown): value is Session => {
    const { user, expires } = (value ?? {}) as Session;
    const userIsValid = isAdapUser(user) || isNextAuthUser(user) || !user;
    const expiresIsValid = typeof expires === 'string';
    return expiresIsValid && userIsValid;
};

export const isAuthenticatedSession = (value: unknown): value is AuthenticatedSession => {
    const session = (value ?? {}) as AuthenticatedSession;
    const sessionIsValid = isSession(session);
    const sessionUserIsValid = isAdapUser(session.user);
    return sessionIsValid && sessionUserIsValid;
};

Subsequently, within the session callback function, I applied one of the typeguards in this manner:

session: async ({ session, user }) => {
  if (!isAdapUser(user)) {
    return session;
  }
  const authenticatedSession: AuthenticatedSession = {
    ...session,
    user,
    id: user.id,
  };
  return authenticatedSession;
}

This adjustment results in the callback signature being Session | AuthenticatedSession, which I handled accordingly in subsequent sections.

export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
    const session = await getSession({ req });
    if (!isAuthenticatedSession(session)) {
        return {
            props: {
                records: [],
            },
        };
    }
    const records = await prisma.record.findMany({
        where: {
            reporter: {
                id: session.id,
            },
        },
        orderBy: {
            date: 'asc',
        },
        include: {
            category: {
                select: {
                    title: true,
                },
            },
        },
    });
    return {
        props: { records },
    };
};

Answer 4

Building upon the previous solution mentioned, I decided to enhance my workflow by implementing runtime typeguards.

In my specific scenario, my Prisma user model contained additional attributes:

model User {
  id                  Int                 @id @default(autoincrement())
  uuid                String              @unique @default(cuid())
  name                String?
  email               String?             @unique
  emailVerified       DateTime?
  image               String?
  accounts            Account[]
  categories          Category[]
  sessions            Session[]
  records             Record[]
  permissionsGranted  SharePermission[]     @relation("permissions_granted")
  permissionsReceived SharePermission[]     @relation("permissions_received")
  @@unique([id, uuid])
  @@index(fields: [id, uuid], name: "user_by_id_idx")
}

To handle these extra attributes, I proceeded to define the following typeguards:

import { User as AdapUser } from '@prisma/client';
import { Session, User } from 'next-auth';

export interface AuthenticatedSession extends Session {
    id: number;
    user: AdapUser;
}

export const isNextAuthUser = (value: unknown): value is User => {
    const { id, name, email, image } = (value ?? {}) as User;
    const idIsValid = typeof id === 'number';
    const nameIsValid = typeof name === 'string' || !name;
    const emailIsValid = typeof email === 'string' || !email;
    const imageIsValid = typeof image === 'string' || !image;
    return idIsValid && nameIsValid && emailIsValid && imageIsValid;
};

export const isAdapUser = (value: unknown): value is AdapUser => {
    const { uuid, emailVerified } = (value ?? {}) as AdapUser;
    const uuidIsValid = typeof uuid === 'string';
    const emailVerifiedIsEmail = emailVerified instanceof Date || !emailVerified;
    return isNextAuthUser(value) && uuidIsValid && emailVerifiedIsEmail;
};

export const isSession = (value: unknown): value is Session => {
    const { user, expires } = (value ?? {}) as Session;
    const userIsValid = isAdapUser(user) || isNextAuthUser(user) || !user;
    const expiresIsValid = typeof expires === 'string';
    return expiresIsValid && userIsValid;
};

export const isAuthenticatedSession = (value: unknown): value is AuthenticatedSession => {
    const session = (value ?? {}) as AuthenticatedSession;
    const sessionIsValid = isSession(session);
    const sessionUserIsValid = isAdapUser(session.user);
    return sessionIsValid && sessionUserIsValid;
};

Subsequently, within the session callback function, I applied one of the typeguards in this manner:

session: async ({ session, user }) => {
  if (!isAdapUser(user)) {
    return session;
  }
  const authenticatedSession: AuthenticatedSession = {
    ...session,
    user,
    id: user.id,
  };
  return authenticatedSession;
}

This adjustment results in the callback signature being Session | AuthenticatedSession, which I handled accordingly in subsequent sections.

export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
    const session = await getSession({ req });
    if (!isAuthenticatedSession(session)) {
        return {
            props: {
                records: [],
            },
        };
    }
    const records = await prisma.record.findMany({
        where: {
            reporter: {
                id: session.id,
            },
        },
        orderBy: {
            date: 'asc',
        },
        include: {
            category: {
                select: {
                    title: true,
                },
            },
        },
    });
    return {
        props: { records },
    };
};

Implementing numeric user id with next-auth is a straightforward process that involves setting up

Answer №1

Answer №2

Similar questions

Render JSON value as an input in an Angular component using @Input()

"Experiencing sluggish performance with VSCode while using TypeScript and Styled Components

The constant issue persists as the test continues to fail despite the component being unmounted from the

Utilizing next/image as a backgroundImage in a div container

Exploring Angular 6: Step-by-step guide to nesting objects within objects

The error message "TypeError: (0 , N.createContext) is not a function" indicates that

The ID Token is required for local storage authentication. Please ensure you authenticate properly by signing in using the authenticator form

Utilize Firebase for Playwright to efficiently implement 'State Reuse' and 'Authentication Reuse'

Upon initialization, Angular's BehaviorSubject is encountered as undefined

Styling text with bold formatting can be done conditionally within JSX

Having trouble with using a .node addon in NextJS 14 (with Electron) - receiving a "module not found" error

Angular - The 'options' property is not found in the 'HTMLOptionElement' type

What is the best way to dynamically load application components based on incoming data?

Having trouble locating an Ionic module with your Ionic Web Builder?

Guide on how to include jquery-ui css file in Vue3

UnknownReferenceError: jwreload has not been declared (Exploring dynamic routing in next.js)

Hide react component by clicking it

Discovering the World of React with Typescript: Implementing Flexible Routes with BrowserRouter

IDE flags an error with TypeScript type declarations

An issue has been detected in the jsoneditor component of the ang-jsoneditor module at line 13, character 9