Theo's Typesafe Cult•2y ago

Role bases authentication with Github Provider using next auth

I want to implement a role based authentication like admin, author and reader using next auth and providers like github, so far I've found doing the same using credentials, is it possible with providers like github etc?

12 Replies

barry•2y ago

Yes it's possible If you went through the code of a default t3-app you'd see roles already implemented, you'd just have to uncomment some lines.

aditya•2y ago

Will check that out, thanks!

[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:///(api)/./src/pages/api/auth/[...nextauth].ts:23:40)\n' +
    '    at Object.session (F:\\Projects\\Web\\next-blog\\node_modules\\.pnpm\\[email protected]_ld2jel3hspngo3u5lti2kgl2sq\\node_modules\\next-auth\\core\\routes\\session.js:56:42)\n' +
    '    at async AuthHandler (F:\\Projects\\Web\\next-blog\\node_modules\\.pnpm\\next-
}

[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:///(api)/./src/pages/api/auth/[...nextauth].ts:23:40)\n' +
    '    at Object.session (F:\\Projects\\Web\\next-blog\\node_modules\\.pnpm\\[email protected]_ld2jel3hspngo3u5lti2kgl2sq\\node_modules\\next-auth\\core\\routes\\session.js:56:42)\n' +
    '    at async AuthHandler (F:\\Projects\\Web\\next-blog\\node_modules\\.pnpm\\next-
}

I'm getting this error while trying to sign in

barry•2y ago

So first of all I don't recommend using JWT's... just don't, leave that be, use sessions when you're beginning

aditya•2y ago

so what should I do?

barry•2y ago

Idk

aditya•2y ago

I just uncommented the code and this happened

barry•2y ago

🤷

aditya•2y ago

okay so its working now, how can I add roles tho??

BabaYaga•2y ago

To add Roles, You first need to modify the User Model (considering you're using Prisma), you can do that by adding a role String @default("USER") to User Mode. and then modify the Next Auth Options like this:

export const authOptions: NextAuthOptions = {
  secret: env.NEXTAUTH_SECRET,
  adapter: PrismaAdapter(prisma),
  providers: [
    CredentialsProvider({
      name: "Credentials",
      type: "credentials",
      credentials: {},
      async authorize(credentials) {
        // SOME LOGIC TO IDENTIFY THE USER IN THE DATABASE
      },
    }),
  ],
  pages: {
    signIn: "/auth/login",
  },
  session: {
    strategy: "jwt",
  },
  callbacks: {
    session({ session, token }) {
      if (session.user && token.sub) {
        session.user.id = token.sub;
        session.user.role = token.role;
      }
      return session;
    },
    jwt({ token, user }) {
      if (user) {
        token = {
          ...token,
          role: user.role,
        };
      }
      return token;
    },
  },
};

export const authOptions: NextAuthOptions = {
  secret: env.NEXTAUTH_SECRET,
  adapter: PrismaAdapter(prisma),
  providers: [
    CredentialsProvider({
      name: "Credentials",
      type: "credentials",
      credentials: {},
      async authorize(credentials) {
        // SOME LOGIC TO IDENTIFY THE USER IN THE DATABASE
      },
    }),
  ],
  pages: {
    signIn: "/auth/login",
  },
  session: {
    strategy: "jwt",
  },
  callbacks: {
    session({ session, token }) {
      if (session.user && token.sub) {
        session.user.id = token.sub;
        session.user.role = token.role;
      }
      return session;
    },
    jwt({ token, user }) {
      if (user) {
        token = {
          ...token,
          role: user.role,
        };
      }
      return token;
    },
  },
};

I'm using Credential Provider, but you might have to change it to Github and remove the pages section and the jwt callback as well, cuz you might (in my opinion, you should) use database session strategy. The only thing you have to figure out here is, how are you going to modify the role of a user

aditya•2y ago

thanks for the reply! I also came up with similar solution

vitor markis 🎈•2y ago

the user that comes from the callback methods, they comes directely from the database?

aditya•2y ago

I believe so, because I inserted some values in database and the session values were same

Gaming

Programming

Role bases authentication with Github Provider using next auth