middleware | custom redirect

[KoesterJannik]

/I want the user to get redirect to their dashboard(/dashboard) Instead of getting them redirectet to the login form, if they try to access the premiumarea. Is that possible somehow?

`import { withAuth } from "next-auth/middleware";

// More on how NextAuth.js middleware works: https://next-auth.js.org/configuration/nextjs#middleware
export default withAuth({
callbacks: {
authorized: ({ req, token }) => {
if (req.nextUrl.pathname === "/admin") {
if (token?.admin == true) {
return true;
}
return false;
} else if (req.nextUrl.pathname === "/premiumarea") {
console.log("PREMIUM");
if (token?.role == "premium") {
return true;
}
// I want the user to get redirect to their dashboard(/dashboard) Instead of getting them redirectet to the login form.
return false;
}
if (token) return true;

  return false;
},

},
});

export const config = { matcher: ["/admin", "/me", "/premiumarea"] };`

[ThangHuuVu]

Unfortunately, this isn't possible atm. In middleware, we only allow redirecting to the sign-in page. See:

next-auth/packages/next-auth/src/next/middleware.ts

Line 140 in 8853000

const signInUrl = new URL(signInPage, req.nextUrl.origin)

[KoesterJannik]

Thanks. For now i got rid of the middlewar.js and implemented my own wrapper for that kind of stuff(using the useSession Hook).

[sangosteve]

Thanks. For now i got rid of the middlewar.js and implemented my own wrapper for that kind of stuff(using the useSession Hook).

Please guide on how you did that.

[claritise]

This could be done using HoC, but you would lose the benefits of edge middleware.

[MattJLeach]

Hi @KoesterJannik,

I've been trying to do similar but redirecting them to the homepage instead of login and seemed to have achieved this with the following middleware.ts file

import { getToken } from "next-auth/jwt";
import { NextRequest, NextResponse } from "next/server";

export { default } from "next-auth/middleware";

export const config = { matcher: ["/admin/:path*"] };

export async function middleware(request: NextRequest) {
	const token = await getToken({ req: request });
	if (!token && process.env.NEXTAUTH_URL) {
		return NextResponse.redirect(process.env.NEXTAUTH_URL);
	}
}

This is working great on my local environment although haven't tested in production yet. Wanted to add this comment though for anyone else trying to achieve similar

[Nirajn2311]

Actually this can be done while keeping NextAuth login page redirect. Instead of trying to reroute the user in the authorized callback, we reroute them with the help of wrapped middleware. Here's an example:

import { withAuth } from 'next-auth/middleware';
import { NextResponse } from 'next/server';

export default withAuth(req => {
  if ( req.nextUrl.pathname.startsWith('/admin') ) {
    if (req.nextauth.token.userRole !== 'Admin') {
      return NextResponse.redirect(new URL('/dashboard', req.url));
    }
  }
  if ( req.nextUrl.pathname.startsWith('/premium') ) {
    if (req.nextauth.token.userRole !== 'Premium') {
      return NextResponse.redirect(new URL('/dashboard', req.url));
    }
  }
});

export const config = {
  matcher: ['/admin/:path*', '/premium/:path*']
};

This is the flow you can expect for users:

1. Unauthenticated user opens /admin
2. NextAuth middleware doesn't find token so it routes them to the signin page
3. User signs in and NextAuth routes them back to the callback url which is usually the original URL you tried opening unauthenticated. In this case it will be back to /admin
4. NextAuth middleware is a success as it finds token
5. Next the wrapped middleware is run wherein you check if the user has required roles or not
6. If user has Admin role then they continue to the /admin page and if not then they get redirected to /dashboard

[TheCodeRevolution]

But for me the NextResponse.redirect doesnt work.

I didnt got a redirect to the /dashboard page when I call the /dashboard/users/settings route with the rank developer. but the rank is recognised correctly from the token. and the console.log("nto valid") got called.

import { withAuth } from "next-auth/middleware";
import { NextResponse } from 'next/server';

export default withAuth({
  callbacks: {
    authorized: ({ req, token }) => {
      const path = req.nextUrl.pathname;

      console.log(token?.rank);

      if (path.startsWith("/dashboard/users/settings")) {
            if(token.rank !== "admin" || token.rank !== "owner") {
                console.log("not valid");
                return NextResponse.redirect(new URL('/dashboard', req.url));
            }
      }  
      return !!token;
    },
  },
});

export const config = {
    matcher: [
      '/dashboard/:path*'
    ]
  }

[Nirajn2311]

You need to set the custom redirect within the withAuth handler and not as the authorized callback.

So your code above becomes

import { withAuth } from "next-auth/middleware";
import { NextResponse } from 'next/server';

export default withAuth(req => {
	  const token = req.nextauth.token;
      const path = req.nextUrl.pathname;

      console.log(token?.rank);

      if (path.startsWith("/dashboard/users/settings")) {
            if(token.rank !== "admin" || token.rank !== "owner") {
                console.log("not valid");
                return NextResponse.redirect(new URL('/dashboard', req.url));
            }
      }  
});

export const config = {
    matcher: [
      '/dashboard/:path*'
    ]
  }

[bhubavenski]

You need to set the custom redirect within the withAuth handler and not as the authorized callback.

So your code above becomes

import { withAuth } from "next-auth/middleware";
import { NextResponse } from 'next/server';

export default withAuth(req => {
	  const token = req.nextauth.token;
      const path = req.nextUrl.pathname;

      console.log(token?.rank);

      if (path.startsWith("/dashboard/users/settings")) {
            if(token.rank !== "admin" || token.rank !== "owner") {
                console.log("not valid");
                return NextResponse.redirect(new URL('/dashboard', req.url));
            }
      }  
});

export const config = {
    matcher: [
      '/dashboard/:path*'
    ]
  }

When I try this method I am getting in infinite callback loop

[guilhermeSDB]

In case anyone is seeing this comment in 2025 this was my way:

import { getToken } from "next-auth/jwt";
import { NextRequest, NextResponse } from "next/server";

export { default } from "next-auth/middleware";

export const config = {
  matcher: ["/auth/:path*", "/dashboard/:path*"],
};

const SIGNIN_ROUTE= "/signin"
const SIGNUP_ROUTE= "/signup"
const AUTH_ROUTES = [SIGNIN_ROUTE, SIGNUP_ROUTE]
const DASHBOARD_ROUTE = "/dashboard"

export async function middleware(request: NextRequest) {
  const urlPath = request.nextUrl.pathname;
  const token = await getToken({ req: request });

  if (DASHBOARD_ROUTE.includes(urlPath) && !token) {
    return NextResponse.redirect(new URL(SIGNIN_ROUTE, request.url));
  }

  if (AUTH_ROUTES.includes(urlPath) && token) {
    return NextResponse.redirect(new URL(DASHBOARD_ROUTE, request.url));
  }

  return NextResponse.next();
}