In Next.js 14, middleware is essential for controlling access to different parts of your website. Middleware allows you to protect sensitive areas, such as user dashboards, while keeping public pages accessible to everyone. I'm going to walk you through an overview of setting up and using middleware for route protection in your Next.js 14 project.

Setting Up Middleware

1. Create a Middleware File: Create a middleware.ts or middleware.js file in your project's root directory. This file will contain the logic for checking user authentication and authorizing access to protected routes.
2. Authorize User Access: Inside the middleware file, you will include logic to check for authentication tokens and authorize user access. This ensures that only authenticated users can access protected routes.

Defining Protected Routes

Not all routes require authorization. Use the matcher option in your middleware to specify routes that do and do not require authorization checks. This allows you to protect specific routes while keeping others publicly accessible.

Middleware Logic

The middleware logic will involve verifying if a user is authenticated by checking for a valid authentication token. You can also check user roles or permissions for more granular control over access to different routes.

Handling Unauthorized Access

If a user is not authenticated or does not have the necessary permissions, you can redirect them to a login or error page. This ensures that unauthorized users cannot access protected areas of your website.

Example Middleware File

Here's an example of how you can set up a middleware file in Next.js 14:

1. Create the Middleware File: In your project's root directory, create middleware.js or middleware.ts.
2. Write Middleware Logic: Use the getToken function from next-auth/jwt to verify if a user is authenticated. If not, redirect them to the login page. If authenticated, allow them to proceed.
3. Define the Protected Routes: Use the matcher property to specify the routes that need protection. In the example below, the root (/) and /sales paths are protected.
4. Handle Unauthorized Access: Redirect users without a valid token to the login page.

Tip: Setting up process.env.NEXTAUTH_SECRET

When implementing authentication, you need to set the NEXTAUTH_SECRET environment variable to securely handle JWT tokens. On Windows, you can use PowerShell to generate a random string. Here are five different PowerShell commands to generate a secure random string:

1. -join ((48..57) + (65..90) + (97..122) | Get-Random -Count 32 | % {[char]$_})

2. [Convert]::ToBase64String([Guid]::NewGuid().ToByteArray())

3. [guid]::NewGuid().ToString("N").Substring(0, 32)

4. -join (1..32 | ForEach-Object { [char](Get-Random -Minimum 33 -Maximum 126) })

5. openssl rand -base64 32 // on Mac

Example for Setting Up Middleware in Next.js 14

import { getToken } from 'next-auth/jwt';
import { NextResponse } from 'next/server';

export async function middleware(req) {
  const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET });

  if (!token) {
    const signInUrl = new URL('/auth', req.url);
    return NextResponse.redirect(signInUrl);
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/', '/sales/:path*'], // protected routes
};

Protecting Specific Routes

To protect specific routes, use the matcher configuration to define which routes are protected. For example:

export const config = {
  matcher: ['/dashboard/:path*', '/transactions/:path*'], // specific protected routes
};

Conditional Navigation

After successful authentication, you can manage user navigation based on their roles. For instance, you might want to redirect an admin user to the admin dashboard and a regular user to their respective page.

Example for Role-Based Redirection

An example of middleware that handles role-based redirection:

export function middleware(request) {
  const currentUser = request.cookies.get('currentUser')?.value;

  if (currentUser && !request.nextUrl.pathname.startsWith('/dashboard')) {
    return Response.redirect(new URL('/dashboard', request.url));
  }

  if (!currentUser && !request.nextUrl.pathname.startsWith('/login')) {
    return Response.redirect(new URL('/login', request.url));
  }
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
};

Conclusion

Implementing middleware in Next.js 14 ensures secure access to protected routes and provides a seamless user experience by managing redirections and role-based access control.