Cannot implement user roles in next-auth, 'user' does not have identical modifiers

Question

I am trying to implement user roles in next-auth. On my DB, I have a prisma enum UserRole set to 'ADMINandUSER`. In my auth.ts file I added role to the session object and I am receiving the following error:

All declarations of 'user' must have identical modifiers.ts(2687)
⚠ Error(TS2687)  |  

All declarations of user must have identical modifiers.
(property) Session.user?: {
    id: string;
    role: UserRole;
    email?: string | null | undefined;
    image?: string | null | undefined;
    name?: string | null | undefined;
} & {
    id: string;
    role: UserRole;
    email?: string | null | undefined;
    image?: string | null | undefined;
    name?: string | null | undefined;
}

When I log out my session on the front end the session with user role comes through as expected. I tried to make a next-auth.d.ts file with the following based on another post I found on SO:

import type { UserRole } from "@prisma/client";
import type { DefaultUser } from "next-auth";
declare module "next-auth" {
  interface Session {
    user?: DefaultUser & {
      id: string;
      role: UserRole;
      name?: string | null | undefined;
      email?: string | null | undefined;
      image?: string | null | undefined;
    };
  }

  interface User extends DefaultUser {
    id: string;
    role: UserRole;
    name?: string | null | undefined;
    email?: string | null | undefined;
    image?: string | null | undefined;
  }
}

and here is my auth.ts file where the error is occuring:

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: {
      id: string;
      // ...other properties
      role: UserRole;
      email?: string | null | undefined;
      image?: string | null | undefined;
      name?: string | null | undefined;
    } & DefaultSession["user"];
  }

 export const authOptions: NextAuthOptions = {
  callbacks: {
    session({ session, user }) {
      if (session?.user) {
        session.user.id = user.id;

        session.user.role = user.role;
        session.user.email = user.email;
        session.user.image = user.image;
        session.user.name = user.name;
      }

      return session;
    },
  },
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    }),

I am not sure what I am missing here to get the error to go away. If the code I posted isn't sufficient to see what is going on, I have the project here: https://github.com/sjohnston82/quarter-master2

Thank you for your time and knowledge.

Answer 1

In Typescript the following modifiers are known:

• public
• protected
• private
• readonly

Read more here: https://www.tutorialsteacher.com/typescript/data-modifiers

The error message warns you that you have several declarations of user and they contradict each-other in their access modifier. A rule of thumb about access modifiers is that they are what you specify and, if you do not specify an access modifier for a resource, then everything in a class is public by default and everything in a module is private by default, except you are using the export keyword for it.

In order to fix your issue, you will need to keep the above in mind and revisit all the declarations of user in place and make sure they are compatible in terms of their access modifier.