Efficient Route Protection in Next.js with Auth0 Middleware: Excluding Specific Routes

When using Auth0 with Next.js, securing all routes except for specific ones, such as the homepage or login page, can be achieved without the need to add extra logic for each route in the middleware. This can be accomplished by using a simple yet powerful regular expression (regex).

From Next.js official docs

It suggests in matcher we can write a regex /((?!api|_next/static|_next/image|favicon.ico).*). This matcher will match all request paths except for the ones starting with

• api (API routes)
• _next/static (static files)
• _next/image (image optimization files)
• favicon.ico (favicon file)

When we add this matcher with Auth0 middleware, the homepage(/) has been also included automatically by the Auth0 guard. It means we have to sign in to visit the root path (/) or homepage! And, this is not desired.

So, we can modify the given regex to achieve our goal.

Case 0: We want to exclude homepage(/) under the guard of Auth0

src/middleware.ts

import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - about (about page)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - $ (homepage)
     */                                           👇🏻
    '/((?!api|_next/static|_next/image|favicon.ico|$).*)',
  ],
};
export default withMiddlewareAuthRequired();

Outcome: Now homepage can be visited without sign in/up, but every other routes in the app are secured by Auth0.

Case 1: We want to exclude about(/about) page under the guard of Auth0

src/middleware.ts

import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - about (about page)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - $ (homepage)
     * - about (about page)
     */        👇🏻
    '/((?!api|about|_next/static|_next/image|favicon.ico|$).*)',
  ],
};
export default withMiddlewareAuthRequired();

Outcome: Now homepage, about page can be visited without sign in/up, but every other routes in the app are secured by Auth0.

Case 2: We want to exclude any(/any) page under the guard of Auth0

src/middleware.ts

import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - about (about page)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - $ (homepage)
     * - about (about page)
     * - any (anypage)
     */           👇🏻
  '/((?!api|about|any|_next/static|_next/image|favicon.ico|$).*)',
  ],
};
export default withMiddlewareAuthRequired();

Outcome: Now homepage, about page as well as any page can be visited without sign in/up, but every other routes in the app are secured by Auth0.

So, this is very useful if your app is required a tight security on every routes but a very few routes need to public then this method will be very helpful as well as time-saving. Otherwise, you have to implement middleware logic or in component logic for every routes you want to be secured!

Follow me on X@sabbirsobhani
Follow me on GitHub@iamsabbirsobhani