Kako se bavite provjeridbom autentičnosti u Next.js App Router aplikaciji?

Question

Accepted Answer

Provjera autentičnosti u App Router-u obuhvaća nekoliko slojeva — sesije, middleware, provjere na strani servera i zaštitu Server Actions. Moderni pristup favorizira **provjeru sesije na strani servera** umjesto samo provjera na strani klijenta. ## Strategija sesije ```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. Gruba kontrola pristupa u middleware-u (brzo, ali nije cijela priča) ```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 izvršava na Edge prije svakog odgovarajućeg zahtjeva — idealno za jeftine preusmjeravanja. Ali trebao bi obaviti samo *laku* provjeru prisutnosti; nemojte se oslanjati na njega kao jedinu autorizaciju (kolačić bi mogao biti nevažeći). ## 2. Provjerite sesiju gdje koristite podatke (pravi pristup) ```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}

; } ``` Ova provjera na strani servera (u Server Component) je **mjerodavna** provjera — zapravo validira sesiju i učitava korisnika. ## 3. Zaštitite 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 su javne krajnje točke — **uvijek ponovno provjerite auth i autorizaciju unutar njih**, bez obzira na kontrolu pristupa na razini UI. ## Zašto slojevite provjere ```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 ``` ## Zašto je to važno Auth u App Router-u je dubinska obrana: httpOnly kolačići (XSS-sigurne sesije), middleware za brza preusmjeravanja, i — ključno — **provjera na strani servera na svakoj točki pristupa podacima i promjene**. Česta, opasna greška je tretirati middleware provjeru ili skriveni klijentski UI kao dovoljan; prava zaštita dolazi od validacije sesije i autorizacije na serveru gdje god se osjetljivi podaci čitaju ili mijenjaju.