Efficient Route Protection in Next.js with Auth0 Middleware: Excluding Specific Routes
Tags: auth0, webdev, javascript, nextjs
Published: 2023-11-07 17:20:22

When using [Auth0](https://auth0.com/) 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](https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher) official docs

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl2bzortbbwh8c1g86mm.png)

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`](https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher) to achieve our goal. 

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

`src/middleware.ts`
```tsx
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`
```tsx
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`
```tsx
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](https://twitter.com/sabbirsobhani)
Follow me on [GitHub@iamsabbirsobhani](https://github.com/iamsabbirsobhani)