Jak řešíte autentizaci v aplikaci Next.js App Router?

Question

Accepted Answer

Autentizace v App Router zahrnuje několik vrstev — relace, middleware, kontroly na straně serveru a ochranu Server Actions. Moderní přístup preferuje **ověřování relace na straně serveru** před kontrolami pouze na straně klienta. ## Strategie relace ```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. Hrubá kontrola v middleware (rychlá, ale ne jediná část příběhu) ```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 běží na Edge před každým zvoleným requestem — ideální pro levné přesměrování. Mělo by však provádět pouze *lehkou* kontrolu přítomnosti; neměli byste se na něj spoléhat jako na jedinou autorizaci (cookie by mohlo být neplatné). ## 2. Ověřte relaci tam, kde data používáte (skutečná brána) ```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}

; } ``` Toto ověření na straně serveru (v Server Component) je **autoritativní** kontrola — skutečně ověří relaci a načte uživatele. ## 3. Chraňte také Server Actions a Route Handlers ```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 jsou veřejné endpointy — **vždy znovu zkontrolujte autentizaci a autorizaci uvnitř nich**, bez ohledu na gating na úrovni UI. ## Proč vrstvené kontroly ```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 ``` ## Proč to má smysl Autentizace v App Router je obrana v hloubce: httpOnly cookies (XSS-bezpečné relace), middleware pro rychlé přesměrování a — důležitě — **ověření na straně serveru v každém bodě přístupu k datům a mutaci**. Častou a nebezpečnou chybou je považovat kontrolu middleware nebo skryté klientské UI za dostatečné; skutečná ochrana přichází z ověření relace a autorizace na serveru kdekoli jsou čtena nebo měněna citlivá data.