How do you handle authentication in a Next.js App Router app?

Question

Accepted Answer

Authentication in the App Router spans several layers — sessions, middleware, server-side checks, and protecting Server Actions. The modern approach favors **server-side session verification** over client-only checks. ## Session strategy ```text Cookie-based sessions (httpOnly cookie): ✓ Store a signed session id or encrypted JWT in an httpOnly, secure cookie ✓ httpOnly = not readable by JavaScript → protects against XSS token theft ✓ Use a library: Auth.js (NextAuth), Clerk, Lucia, or a custom solution ``` ## 1. Coarse gating in middleware (fast, but not the whole story) ```ts // middleware.ts — quick check: does a session cookie exist? export function middleware(req: NextRequest) { const session = req.cookies.get("session")?.value; if (req.nextUrl.pathname.startsWith("/dashboard") && !session) { return NextResponse.redirect(new URL("/login", req.url)); } return NextResponse.next(); } ``` Middleware runs on the Edge before every matched request — ideal for cheap redirects. But it should only do a *lightweight* presence check; don't rely on it as the sole authorization (the cookie could be invalid). ## 2. Verify the session where you use the data (the real gate) ```tsx // app/dashboard/page.tsx — verify on the server, in the page itself import { redirect } from "next/navigation"; export default async function Dashboard() { const user = await getCurrentUser(); // validates the session cookie server-side if (!user) redirect("/login"); // authoritative check return

Welcome {user.name}

; } ``` This server-side verification (in the Server Component) is the **authoritative** check — it actually validates the session and loads the user. ## 3. Protect Server Actions and Route Handlers too ```tsx "use server"; export async function deletePost(id: string) { const user = await getCurrentUser(); if (!user) throw new Error("Unauthorized"); // never trust the caller if (post.authorId !== user.id) throw new Error("Forbidden"); // authorization await db.post.delete({ where: { id } }); } ``` Server Actions are public endpoints — **always re-check auth and authorization inside them**, regardless of UI-level gating. ## Why layered checks ```text Middleware → fast redirect for the common case (better UX, not security-critical) Server Component/Action → real verification (security boundary) Never rely on hiding UI in the client as a security measure ``` ## Why it matters Auth in the App Router is defense-in-depth: httpOnly cookies (XSS-safe sessions), middleware for quick redirects, and — crucially — **server-side verification at every data-access and mutation point**. The common, dangerous mistake is treating a middleware check or hidden client UI as sufficient; real protection comes from validating the session and authorization on the server wherever sensitive data is read or changed.