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

[suiscode]

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

[cevillarreal]

me too!

[real-marty]

Actualy the solution is easy, just move the callbacks: {} to the auth.config.ts. Then do what he already said, like extend the session and jwt token.

[LimDragonIron]

Actualy the solution is easy, just move the callbacks: {} to the auth.config.ts. Then do what he already said, like extend the session and jwt token.

Could you please explain why?

[SebastianRabei]

Explanation for Why Moving callbacks to auth.config.ts Matters in Auth.js v5

If you're using Auth.js v5 and relying on middleware with NextAuth, it's important to know where you define your callbacks.

By default, if you place callbacks: {} inside your auth.ts file (where you initialize auth), the order of execution is: middleware -> jwt -> session

However, if you move the callbacks to auth.config.ts, the execution order becomes:

jwt -> session -> middleware

This change is crucial when you're using middleware to access session data, because it ensures the session is already populated before your middleware runs.

So, to fix issues with accessing req.auth in middleware or extending the session/JWT properly, just move your callbacks into auth.config.ts, and continue extending the session and token as needed.

Hope that makes sense. 😄

[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 :(

[miguelxmarquez]

Hello, Ok.. In the file auth.ts

You are creating a JWT Token, so you need to add the information to the token before access it on the middleware:

async jwt({ token, user, account, profile }) {
	if (user) {
	// GETTING USER ROLES OR ANYTHING ELSE
             const roles = await getRoles(user.id)
		token.roles = roles
	}
	return token
}

[Kuzmich100kM]

When you log in, you are returned a user with accessToken and refreshToken. Insert any non-critical information into the payload of tokens, for example: role, email, user id. And then get the information (role etc) from the payload.

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

declare module 'next-auth' {
  interface User extends User {
    accessToken: string
    refreshToken: string
  }
}

declare module '@auth/core/jwt' {
  interface JWT extends DefaultJWT {
    uid: string
    email: string
    roles: string[]
    status: string
    accessToken: string
    refreshToken: string
    accessTokenExp: number
  }
}


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

export const authConfig = {
  trustHost: true,
  pages: { signIn: '/login' },
  providers: [],
  callbacks: {
    async jwt({ token, user, trigger, session, account, profile }) {
      if (user) {
  //  ---------------------------------------------------------------------------------------
  //  Get the information here!!!
        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
        token.accessToken = user.accessToken
        token.refreshToken = user.refreshToken
        token.accessTokenExp = payload.exp

        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

      const tokens = {
        accessToken: token?.accessToken,
        refreshToken: token?.refreshToken,
        accessTokenExp: token?.accessTokenExp,
      }

      return { ...session, tokens }
    },
  },
} satisfies NextAuthConfig

[Kuzmich100kM]

Ок. The sequence is like this:

1. You enter your email and password in the form => loginAction.ts is called => signIn() function is launched

https://github.com/Kuzmich100kM/auth5-middleware-01/blob/main/src/action/authAction.tsx

// loginAction.ts

"use server"
import { signIn, signOut } from "../app/api/auth/auth"

export const loginAction = async (_: undefined, formData: FormData) => {
  const { email, password } = Object.fromEntries(formData)

  try {
    await signIn("credentials", { email, password, redirect: true })
  } catch (e) {
    if (e instanceof Error) {
      if (e.message.includes("NEXT_REDIRECT")) {
        throw e
      } else if (e.message.includes("CredentialsSignin")) {
        return { error: "Wrong authorization" }
      } else {
        return { error: e.message }
      }
    }
    throw e
  }
}

2. In the file auth.ts function authorize() intercepts authorization and calls fetchLogin(credentials)
   https://github.com/Kuzmich100kM/auth5-middleware-01/blob/main/src/app/api/auth/auth.ts

// auth.ts

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"
import { ILogin } from "types/next-auth"
import { fetchLogin } from "../../../lib/authAPI"
import { authConfig } from "./auth.config"

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

3. In the authAPI.ts file you make API request to backend. On the backend you validate the credentials data and create BACKEND TOKENS with PUBLIC information: roles, status, avatar, etc.
   https://github.com/Kuzmich100kM/auth5-middleware-01/blob/main/src/lib/authAPI.ts

// authAPI.ts

"use server"
import { ILogin } from "types/next-auth"
const BASE = process.env.API_BASE

export async function fetchLogin(data: ILogin) {
  try {
    const url = `${BASE}/api/auth/login`

    const res = await fetch(url, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      cache: "no-store",
      body: JSON.stringify(data),
    })
    const json = await res.json()
 
   // json {
   //  accessToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InN1cGVybWFpbDEyMzQ1NjdAZ2dnbWFpbC5jb20iLCJ1aWQiOiI2NWJlODJjNDU5NDA3ZGIwZTViZTJlMjkiLCJzdGF0dXMiOiJQRU5ESU5HIiwicm9sZXMiOlsiQURNSU4iLCJVU0VSIl0sImlhdCI6MTcwNjk4NDcwMSwiZXhwIjoxNzA2OTg0NzIxfQ.2UktwPD81CkILa_YGabM4CH4CpgergRYXTV9cSSeWdg",
   //  refreshToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InN1cGVybWFpbDEyMzQ1NjdAZ2dnbWFpbC5jb20iLCJ1aWQiOiI2NWJlODJjNDU5NDA3ZGIwZTViZTJlMjkiLCJzdGF0dXMiOiJQRU5ESU5HIiwicm9sZXMiOlsiQURNSU4iLCJVU0VSIl0sImlhdCI6MTcwNjk4NDcwMSwiZXhwIjoxNzEwNDQwNzAxfQ.akuGUIKX5Fb3XlRx89VK6Ud19S710RuUh9ToUSR1-P4",
   //  }

  // and response tokens with open data
    if (res.ok) return json
    throw new Error()
  } catch (e) {
    throw e
  }    
}

4. In authConfig.ts this data comes as a user. You get data from BACKEND TOKEN and add everything you need to the AUTH TOKEN and session on the frontend.

https://github.com/Kuzmich100kM/auth5-middleware-01/blob/main/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
        token.accessToken = user.accessToken
        token.refreshToken = user.refreshToken
        token.accessTokenExp = payload.exp

        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

      const tokens = {
        accessToken: token?.accessToken,
        refreshToken: token?.refreshToken,
        accessTokenExp: token?.accessTokenExp,
      }

      return { ...session, tokens }
    },
  },
} satisfies NextAuthConfig