Cum gestionezi autentificarea într-o aplicație Next.js App Router?

Question

Accepted Answer

Autentificarea în App Router se extinde pe mai multe straturi — sesiuni, middleware, verificări pe partea serverului și protejarea Server Actions. Abordarea modernă preferă **verificarea sesiunilor pe partea serverului** în loc de verificări doar pe client. ## Strategie de sesiune ```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. Poartă grosieră în middleware (rapid, dar nu e toată poveste) ```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 se execută pe Edge înainte de fiecare cerere potrivită — ideal pentru redirecționări ieftine. Dar ar trebui să facă doar o verificare a prezenței *ușoară*; nu te baza pe ea ca singura autorizare (cookie-ul ar putea fi nevalid). ## 2. Verifică sesiunea unde folosești datele (poarta reală) ```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}

; } ``` Această verificare pe partea serverului (în Server Component) este verificarea **autoritară** — ea validează efectiv sesiunea și încarcă utilizatorul. ## 3. Protejează și Server Actions și 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 sunt puncte de lucru publice — **verifică întotdeauna auth și autorizarea în interiorul lor**, indiferent de gating la nivel de UI. ## De ce verificări stratificate ```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 ``` ## De ce acest lucru este important Auth în App Router este apărare în profunzime: cookie-uri httpOnly (sesiuni sigure de XSS), middleware pentru redirecționări rapide și — în mod critic — **verificare pe partea serverului la fiecare punct de acces și mutare de date**. Greșeala comună și periculoasă este tratarea unei verificări middleware sau a unui UI ascuns de client ca fiind suficientă; protecția reală provine din validarea sesiunii și autorizării pe server oriunde sunt citite sau modificate date sensibile.