🔐 Protecting Your Next.js App: Redirecting Unauthorized Users to the Login Page with Middleware

Introduction

When building an app with Next.js, ensuring that only authenticated users access certain pages is crucial for protecting sensitive data. One effective way to do this is by implementing a global authentication check with middleware. This approach lets you automatically redirect unauthorized users to the login page without needing to repeat checks across multiple pages. In this article, I’ll walk you through setting up a global authentication check using Next.js middleware and share some useful client-side tricks for extra protection.

Why Use Middleware for Authentication in Next.js?

Next.js middleware is a powerful tool that can intercept and process requests before they reach the route handlers. By implementing middleware, you can:

• Centralize Authentication Logic: No need to handle authentication on each page.
• Protect Multiple Pages Efficiently: Easily redirect unauthorized users across many routes.
• Improve Code Readability and Maintenance: Keeping authentication in one place reduces clutter on your pages.

Step 1: Setting Up Middleware to Check for Authentication

Start by creating a middleware.ts file in your Next.js project’s root directory. This file will hold the logic that checks whether a user is authenticated and redirects them to the login page if they aren’t.

Here’s the code to create your authentication middleware:

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // Check if the request includes an authentication token
  const token = request.cookies.get('access-token');
  // If no token is found, redirect to the login page
  if (!token) {
    const loginUrl = request.nextUrl.clone();
    loginUrl.pathname = '/login';
    return NextResponse.redirect(loginUrl);
  }
  // Allow access if token exists
  return NextResponse.next();
}
// Define the routes that should trigger this middleware
export const config = {
  matcher: '/((?!api|_next/static|_next/image|favicon.ico|login).*)',
};

Here’s how this works:

• The middleware reads the access-token cookie from the request to check if the user is authenticated.
• If the access-token cookie is missing, it redirects the user to the /login page.
• The matcher configuration ensures that the middleware applies to all pages except the API routes, static assets, and the /login page itself.

Step 2: Adding Client-Side Protection (Optional)

While middleware handles authentication checks at the server level, it can be useful to add a client-side check as well. For example, if a user loses their session while navigating, a client-side check can help catch this and redirect them.

Below is an example of adding a client-side check in a component that requires authentication. This can act as a backup to ensure the user is redirected if they are not logged in.

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function ProtectedPage() {
  const router = useRouter();
  useEffect(() => {
    const accessToken = document.cookie.includes('access-token');
    // Redirect to login if no access token is found
    if (!accessToken) {
      router.push('/login');
    }
  }, [router]);
  return (
    <div>
      <h1>Welcome to the Protected Page!</h1>
      {/* Protected content goes here */}
    </div>
  );
}

Step 3: Testing Your Authentication Middleware

To ensure everything is working, try accessing a protected route without being logged in. You should be redirected to the login page as expected. Once you log in and obtain an access-token cookie, try accessing the protected routes again—you should now be allowed access!

Step 4: Additional Server-Side Check with getServerSideProps (Optional)

If you’re using server-side rendering on a particular page and need to verify user authentication, you can add a getServerSideProps function that checks for the token on the server side and redirects if necessary.

Here’s how this might look in a protected page with getServerSideProps:

import { GetServerSideProps } from 'next';

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { req } = context;
  // Check if access-token exists in cookies
  const token = req.cookies['access-token'];
  if (!token) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }
  return {
    props: {}, // Pass any necessary props to the page component
  };
};
export default function ProtectedPage() {
  return <div>Protected content for authenticated users</div>;
}

This server-side check is a useful fallback, especially for pages that need to retrieve server-rendered data.

Wrapping Up

By setting up middleware in Next.js, you can streamline your authentication checks and protect all your app’s pages efficiently. This approach keeps your code clean and ensures that users are always redirected to the login page if they aren’t authorized.

With these steps, you’re now set to keep your Next.js app secure and your code organized! 🎉