Production Authentication & Role-Based Access Control (RBAC) in Next.js App Router

Authentication security is foundational. Storing JWT tokens in localStorage exposes applications to Cross-Site Scripting (XSS) attacks. Modern Next.js applications must utilize encrypted HttpOnly session cookies validated at the edge middleware.

Edge Middleware Route Protection (middleware.ts)

import { NextResponse, type NextRequest } from "next/server";
import { createServerClient } from "@supabase/ssr";

export async function middleware(request: NextRequest) {
  let response = NextResponse.next({ request: { headers: request.headers } });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() { return request.cookies.getAll(); },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            response.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();

  // Protect Admin Dashboard
  if (request.nextUrl.pathname.startsWith("/admin") && !user) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  return response;
}

Strict middleware guards prevent unauthenticated data leaks before any page components render.