Role-based access control in middleware using Auth.js v5

[ElliotBerthold]

Hello, I am trying to use the middleware to have role-based access control, the users role should determine if the user can access the pages or not. There are two roles, one role can only access the pages for that type of user.

In the NextAuth i have used the callback function "async jwt({token})" to edit the token so that the users role is added.

`
async jwt({ token, user }) {
if (!token.sub) return token;

		const existingUser = await getUserById(token.sub);

		if (!existingUser) return token;

		const existingAccount = await getAccountByUserId(existingUser.id);

		token.isOAuth = !!existingAccount;
		token.name = existingUser.name;
		token.email = existingUser.email;
		token.role = existingUser.role;
		token.isTwoFactorEnabled = existingUser.isTwoFactorEnabled;
		// console.log("token", token);
		return token;
	},

`

But in the middleware when i use the NextAuthRequest "req" i can find the user at req.auth?.user but the role is not added here? I can not seem to get the role to the middleware to properly limit access.

`const { auth } = NextAuth(authConfig);

export default auth((req) => {
console.log(req.auth?.user);
}`

The only thing shown in the user is "name", "email" and "image". Not the added role. I searched on the documentation and it said that you could use the middleware and JWT token to preform role based control but it uses NextAuth v4.

[DigitalGenius-ui]

I got same error

[microprefix-onur]

same here

[Kuzmich100kM]

The same.
Temporary solution - I securing the pages with a redirect

// app/admin/layout.tsx

export default async function AdminLayout({ children }) {
  const session = await auth()
 
  if (session?.user.role !== "ADMIN") redirect("/")
  return (
    <div>
      {children}
    </div>
  )
}

But I would like to know the correct solution through an middleware

[Kuzmich100kM]

A little while later...
I was able to make the user role available in the middleware.
This work.

// package.json

"dependencies": {
    "next": "^14.1.0",
    "next-auth": "^5.0.0-beta.3",
    "npm": "^10.2.5",
    "react": "^18",
    "react-dom": "^18"
  },

// src/types/next-auth.d.ts

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: {
      uid: string
      email: string
      roles: string[]
      status: string
    }
}

// src/app/api/auth/auth.ts

export const {
  handlers: { GET, POST },
  auth,
  signIn,
  signOut,
} = NextAuth({
  ...authConfig,
  providers: [
    CredentialsProvider({
      async authorize(credentials: ILogin) {
        try {
          const user = await fetchLogin(credentials)
          return user
        } catch (e) {
          return null
        }
      },
    }),
  ],
})

I receive public data about the roles (array), status, etc. from a accessToken that is sent when logging in.

// src/app/api/auth/auth.config.ts

import { NextAuthConfig } from "next-auth"

export const authConfig = {
  pages: { signIn: "/login" },
  providers: [],
  callbacks: {
    async jwt({ token, user, trigger, session, account, profile }) {

      if (user) {
        const payload = JSON.parse(
          Buffer.from(user?.accessToken.split(".")[1], "base64").toString()
        )

        token.uid = payload.uid
        token.email = payload.email
        token.roles = payload.roles
        token.status = payload.status
        
        return token
      }
      return token
    },

    async session({ session, token, user, trigger, newSession }) {
      session.user.uid = token?.uid
      session.user.status = token?.status
      session.user.roles = token?.roles

      return session
    },
  },
} satisfies NextAuthConfig

// src/middleware.ts

import NextAuth from "next-auth"
import { NextResponse } from "next/server"
import { authConfig } from "./app/api/auth/auth.config"

const { auth } = NextAuth(authConfig)

export default auth((req) => {
  const { nextUrl, auth } = req

  const user = auth?.user
  console.log("\n user in middleware:>> ", user)

// Print User in console
//  email: 'mysupermail@gmail.com',
//  uid: '6408f7838db2ba8030d72e18',
//  status: 'ACTIVE',
//  roles: [ 'ADMIN', 'USER' ]

  const isAdminPage = nextUrl?.pathname.startsWith("/admin")

  // Redirect if not ADMIN
  if (isAdminPage && !user?.roles.includes("ADMIN")) {
    return Response.redirect(new URL("/", nextUrl))
  }

// Other protected pages ...

  return null
})

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
}

Print in console

[saiful7778]

I didn't understand how you do this! It won't work in my setup

[miguelxmarquez]

Works

[suiscode]

i only get name, email, image from req.auth even though i have role in my session

[ChrisV07]

me too!

[SebastianNarvaez11]

same problem here 😔

[akshayinv]

Has anyone got a solution?

I have tried by adding user role properties inside next-auth.d.td , but still same issue .
only getting { email: 'abcd@test.com', image: null }

[saiful7778]

I also have same problem

[schndra]

#9836 this has all the answers :D

[manuelatdev]

same problem, any solution?

[AndreaBarghigiani]

My solution for this has been the use of the getToken function. As I already replied here #9691 (reply in thread) I am working with Drizzle ORM, so db queries from middleware.ts are out.

In my case I had to populate the session token via jwt and session callback on a separate config and then I can decode all the information stored in the token via:

const secret = process.env.AUTH_SECRET as string;
const token = await getToken({
  req,
  secret,
  salt: 'authjs.session-token',
});

[sirActon]

Same. I've successfully added it to the token and the session but only name, email, and image will populate in the middleware.

[LuchoTurtle]

Me too. I've scoured far and wide for the solution and using a built-in provider never seems to work.
I've inclusively augmented the types just to make sure. I just want to add roles 😭

Here's how my auth.ts file looks like.

import { } from 'next-auth/adapters';
import GitHub from "next-auth/providers/github";
import NextAuth, { type DefaultSession } from "next-auth";
import { } from "next-auth/jwt";

// We need to add the role to the JWT inside `NextAuth` below, so the `middleware.ts` can have access to it.
// The problem is that it wasn't added this `role` custom field, even if we defined it in `auth.ts`.
// Apparently, the problem is with the types of `next-auth`, which we need to redefine.
// See https://stackoverflow.com/questions/74425533/property-role-does-not-exist-on-type-user-adapteruser-in-nextauth
// and see https://authjs.dev/getting-started/typescript#module-augmentation.

declare module "next-auth" {
  interface Session extends DefaultSession {
    /**
     * By default, TypeScript merges new interface properties and overwrites existing ones.
     * In this case, the default session user properties will be overwritten,
     * with the new ones defined above. To keep the default session user properties,
     * we need to add them back into the newly declared interface.
     */
    user: DefaultSession["user"] & {
      role?: string;
    };
  }

  interface User {
    // Additional properties here:
    role?: string;
  }
}

declare module "next-auth/adapters" {
  interface AdapterUser {
    // Additional properties here:
    role?: string;
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    role?: string;
  }
}

// ----------

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    GitHub({
      profile(profile) {
        return {
          id: profile.id.toString(),
          name: profile.name ?? profile.login,
          email: profile.email,
          image: profile.avatar_url,
          role: "user",
        };
      },
    }),
  ],
  callbacks: {
    jwt({ token, user, account, profile }) {
      // Normally, it would be like this
      if(user) return {...token, role: token.role}

	 // but `user` always returns as undefined.

      // But because Github's provider is not passing the role
      // (it should, according to https://authjs.dev/guides/role-based-access-control#with-jwt -
      // maybe it's because v5 is still in beta), we're just gonna append it every time
      return token
    },
    session({ session, token }) {
      session.user.role = token.role;
      return session;
    },
  },
});

It doesn't make sense why the jwt callback has the user as undefined every single time.
It even says in the source files that the user is returned from the provider.

next-auth/packages/core/src/index.ts

Lines 439 to 447 in c860025

	/**
	* Either the result of the {@link OAuthConfig.profile} or the {@link CredentialsConfig.authorize} callback.
	* @note available when `trigger` is `"signIn"` or `"signUp"`.
	*
	* Resources:
	* - [Credentials Provider](https://authjs.dev/getting-started/authentication/credentials)
	* - [User database model](https://authjs.dev/guides/creating-a-database-adapter#user-management)
	*/
	user: User | AdapterUser

Frustrating stuff :(