Why Authentication in middleware in NextJS? - Purpose & Use Cases

The Big Idea

Discover how one simple middleware function can save you hours of repetitive security checks!

The Scenario

Imagine you have a website where users must log in to see their profile. You check their login status on every page by adding code inside each page component.

The Problem

Manually adding login checks on every page is tiring and easy to forget. If you miss one, unauthorized users might see private info. It also makes your code messy and hard to update.

The Solution

Authentication in middleware lets you check user login once before any page loads. This keeps your code clean and secure by handling access in one place automatically.

Before vs After

✗ Before

if (!user) { redirect('/login') } // repeated in every page

✓ After

import { NextResponse } from 'next/server';

export function middleware(req) {
  const token = req.cookies.get('token');
  if (!token) {
    return NextResponse.redirect(new URL('/login', req.url));
  }
}

What It Enables

You can protect your whole site easily and keep your code simple by centralizing login checks.

Real Life Example

A social media app uses middleware to block guests from accessing user feeds, so only logged-in users see their personalized content.

Key Takeaways

Manual login checks on every page are repetitive and risky.

Middleware centralizes authentication before pages load.

This improves security and keeps code clean and maintainable.