Theo's Typesafe Cult•5mo ago

NextAuth and role based access control

Can someone explain to me how to modify the the auth.ts file in the server folder when you set up a boilerplate t3 app with next auth in order to enable role based access control? I have been using a profile() callback (https://authjs.dev/guides/basics/role-based-access-control) with a GitHubProvider but I get an error with my prisma schema.

   GitHubProvider({
      profile(profile) {
        return {
          ...profile,
          role: profile.role ?? "user",
          id: profile.id.toString(),
          image: profile.avatar_url,
        }
      },
      clientId: process.env.GITHUB_ID as string,
      clientSecret: process.env.GITHUB_SECRET as string,
    }),

   GitHubProvider({
      profile(profile) {
        return {
          ...profile,
          role: profile.role ?? "user",
          id: profile.id.toString(),
          image: profile.avatar_url,
        }
      },
      clientId: process.env.GITHUB_ID as string,
      clientSecret: process.env.GITHUB_SECRET as string,
    }),

I added this in my User model role String @default("user") but no luck. Would really appreciate some insight on how to do this.

Role-based access control | Auth.js

There are two ways to add role-based access control (RBAC) to your application, based on the session strategy you choose. Let's see an example for each of these.

2 Replies

Michael•5mo ago

I think I figured this out. The User interface needs to be in the next-auth module that's declared. I also was spreading in the profile object from the GitHubProvider which I think was not compatible with the prisma User Schema. Instead, I just grabbed the values I wanted.

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: {
      id: string;
      name: string;
      login: string;
      // ...other properties
      role: string;
    } & DefaultSession["user"];
  }

  //Must include this interface to allow sesssion access to user.role and user.name
  interface User {
    role: string;
    name: string;
  }
}

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: {
      id: string;
      name: string;
      login: string;
      // ...other properties
      role: string;
    } & DefaultSession["user"];
  }

  //Must include this interface to allow sesssion access to user.role and user.name
  interface User {
    role: string;
    name: string;
  }
}

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(db),
  providers: [
    GitHubProvider({
      profile(profile: GithubProfile) {
        return {
          //this will populate the user schema based on information pulled from the auth provider
          name: profile.login,
          email: profile.email,
          role: profile.role ?? "user",
          id: profile.id.toString(),
          image: profile.avatar_url,
        }
      },
      clientId: process.env.GITHUB_ID as string,
      clientSecret: process.env.GITHUB_SECRET as string,
    }),
  ],
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        id: user.id,
        name: user.name,
        role: user.role,
        email: user.email
      },
    }),
    async redirect({url, baseUrl}) {
      return baseUrl
    }
  },

};

/**
 * Wrapper for `getServerSession` so that you don't need to import the `authOptions` in every file.
 *
 * @see https://next-auth.js.org/configuration/nextjs
 */
export const getServerAuthSession = () => getServerSession(authOptions);

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(db),
  providers: [
    GitHubProvider({
      profile(profile: GithubProfile) {
        return {
          //this will populate the user schema based on information pulled from the auth provider
          name: profile.login,
          email: profile.email,
          role: profile.role ?? "user",
          id: profile.id.toString(),
          image: profile.avatar_url,
        }
      },
      clientId: process.env.GITHUB_ID as string,
      clientSecret: process.env.GITHUB_SECRET as string,
    }),
  ],
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        id: user.id,
        name: user.name,
        role: user.role,
        email: user.email
      },
    }),
    async redirect({url, baseUrl}) {
      return baseUrl
    }
  },

};

/**
 * Wrapper for `getServerSession` so that you don't need to import the `authOptions` in every file.
 *
 * @see https://next-auth.js.org/configuration/nextjs
 */
export const getServerAuthSession = () => getServerSession(authOptions);

Michael•5mo ago

Here is my full repo if anyone else is struggling to figure this out: https://github.com/DocMDC/RoleBasedAccessControlT3NextAuth

GitHub

GitHub - DocMDC/RoleBasedAccessControlT3NextAuth

Contribute to DocMDC/RoleBasedAccessControlT3NextAuth development by creating an account on GitHub.

Gaming

Programming

NextAuth and role based access control