How to implement Role Based Authorization in T3?

Hey community,

I am new to the T3 stack and would like to implement role based authorization in my project. To ensure that only authorized users with the admin role can execute certain queries, I have created a new

adminProcedure

adminProcedure

adminProcedure

adminProcedure:

/**
 * Admin procedure
 *
 * Only executes, when the user is authenticated and has the admin role.
 */
export const adminProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.session || !ctx.session.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  // Split up for debugging purposes
  if (ctx.session.user.role != "ADMIN") {
    throw new TRPCError({
      code: "UNAUTHORIZED",
      message: `No Admin access. Current Role: ${ctx.session.user.role}`,
    });
  }

  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user },
    },
  });
});

/**
 * Admin procedure
 *
 * Only executes, when the user is authenticated and has the admin role.
 */
export const adminProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.session || !ctx.session.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  // Split up for debugging purposes
  if (ctx.session.user.role != "ADMIN") {
    throw new TRPCError({
      code: "UNAUTHORIZED",
      message: `No Admin access. Current Role: ${ctx.session.user.role}`,
    });
  }

  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user },
    },
  });
});

/**
 * Admin procedure
 *
 * Only executes, when the user is authenticated and has the admin role.
 */
export const adminProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.session || !ctx.session.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  // Split up for debugging purposes
  if (ctx.session.user.role != "ADMIN") {
    throw new TRPCError({
      code: "UNAUTHORIZED",
      message: `No Admin access. Current Role: ${ctx.session.user.role}`,
    });
  }

  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user },
    },
  });
});

/**
 * Admin procedure
 *
 * Only executes, when the user is authenticated and has the admin role.
 */
export const adminProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.session || !ctx.session.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  // Split up for debugging purposes
  if (ctx.session.user.role != "ADMIN") {
    throw new TRPCError({
      code: "UNAUTHORIZED",
      message: `No Admin access. Current Role: ${ctx.session.user.role}`,
    });
  }

  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user },
    },
  });
});

This works in theory, but somehow the roles of the users are not taken over correctly. My sessionCallback looks like this:

export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        role: session.user.role,
        id: user.id,
      },
    }),
  },
// ...
}

export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        role: session.user.role,
        id: user.id,
      },
    }),
  },
// ...
}

export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        role: session.user.role,
        id: user.id,
      },
    }),
  },
// ...
}

export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        role: session.user.role,
        id: user.id,
      },
    }),
  },
// ...
}

In my admin procedure, however, the role value always remains undefined. Does anyone have any idea what I am doing wrong or what I am missing? Thanks in advance!

Swiichy•1/27/24, 2:11 PM

export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        id: user.id,
        role: user.role,
      },
    }),

    redirect: ({ baseUrl }) => {
      return Promise.resolve(`${baseUrl}/shop`);
    },
  },

export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        id: user.id,
        role: user.role,
      },
    }),

    redirect: ({ baseUrl }) => {
      return Promise.resolve(`${baseUrl}/shop`);
    },
  },

Swiichy•1/27/24, 2:12 PM

role: session.user.role, => role: user.role,

chrisOP•1/27/24, 11:45 PM

thx for the response, didn't work for me. implemented a fix by making a db request before asigning the role, which works just fine

JulieCezar•1/28/24, 3:24 PM

I had a similar problem... Although I cant give you a concrete answer, you have to define all the callbacks and pass the user multiple times, or sometimes it doesn't reach the client side like you would expect

JulieCezar•1/28/24, 3:25 PM

try going through the docs, writing the code for all callbacks, and console log all parameters so that you can better understand what goes where

Swiichy•1/28/24, 3:27 PM

You use oauth provider ?

JulieCezar•1/28/24, 3:53 PM

I had like Credentials, Google, Discord and 1 custom one

JulieCezar•1/28/24, 3:53 PM

but not oAuth

How to implement Role Based Authorization in T3?

Similar Threads

Similar Threads

Similar Threads