Hogyan kezeli a hitelesítést a Next.js App Router alkalmazásban?

Question

Accepted Answer

A hitelesítés az App Router-ben több rétegre oszlik — munkamenetek, middleware, szerver oldali ellenőrzések és Server Actions védelme. A modern megközelítés a **szerver oldali munkamenet-ellenőrzést** preferálja a csak kliensoldali ellenőrzésekkel szemben. ## Munkamenet stratégia ```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. Durva kapukezelés a middleware-ben (gyors, de nem az egész történet) ```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(); } ``` A middleware az Edge-en fut minden egyeztetett kérés előtt — ideális az olcsó átirányításokhoz. De csak egy *könnyű* jelenlét-ellenőrzést végezzen; ne bízzon rá egyedüli engedélyezésként (a cookie érvénytelen lehet). ## 2. Ellenőrizze a munkamenetet ahol az adatokat használja (a valódi kapu) ```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}

; } ``` Ez a szerver oldali ellenőrzés (a Server Component-ben) az **érvényes** ellenőrzés — ténylegesen érvényesíti a munkamenetet és betölti a felhasználót. ## 3. Védje a Server Actions és Route Handlers-t is ```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 } }); } ``` A Server Actions nyilvános végpontok — **mindig ellenőrizze újra az auth és az engedélyezést bennük**, függetlenül a UI szintű kapukezeléstől. ## Miért rétegzett ellenőrzések ```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 ``` ## Miért fontos A hitelesítés az App Router-ben mélységes védelmet jelent: httpOnly cookie-k (XSS-biztos munkamenetek), middleware gyors átirányításokhoz, és — döntően — **szerver oldali ellenőrzés az adatok hozzáféréséhez és módosításához tartozó minden ponton**. A gyakori, veszélyes hiba a middleware ellenőrzést vagy rejtett kliens UI-t szükségesnek tekinteni; az igazi védelem a munkamenet és engedélyezés szerver oldali érvényesítéséből származik, ahol az érzékeny adatokat olvassák vagy módosítják.