Si të trajtoni autentifikimin në një aplikacion Next.js App Router?

Question

Accepted Answer

Autentifikimi në App Router përfshin disa shtresa — seanca, middleware, verifikime anësor serverit dhe mbrojtja e Server Actions. Qasja moderne favorizon **verifikimin e seancës anësor serverit** mbi kontrollet vetëm të klientit. ## Strategjia e seancës ```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. Mbyllja e gjerë në middleware (e shpejtë, por jo e gjithë historia) ```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 xhiron në Edge para çdo kërkese të përputhur — ideal për ridrejtime të lira. Por duhet të bëjë vetëm një kontroll *i lehtë* i pranisë; mos mbështetuni në të si autorizimi i vetëm (cookies mund të jetë i pavlefshëm). ## 2. Verifikoni seancën ku e përdorni (porta e vërtetë) ```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}

; } ``` Ky verifikim seance anësor serverit (në Server Component) është kontrolli **autoritar** — në fakt validizon seancën dhe ngarkon përdoruesin. ## 3. Mbrojini edhe Server Actions dhe 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 janë përfundime publike — **gjithmonë ri-kontrolloni autentifikimin dhe autorizimin brenda tyre**, pavarësisht nga mbyllja e nivelit të ndërfaqes. ## Pse kontrolle të shtresuar ```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 ``` ## Pse është e rëndësishme Autentifikimi në App Router është mbrojtje në thellësi: cookies httpOnly (seanca të sigurta nga XSS), middleware për ridrejtim të shpejtë, dhe — në mënyrë vendimtare — **verifikim seance anësor serverit në çdo pikë qasjeje dhe ndryshimi të të dhënave**. Gabimet e zakonshme dhe të rrezikshme është trajtimi i një kontrolli middleware ose gjendje të fshehur të klientit si i mjaftueshëm; mbrojtja e vërtetë vjen nga validimi i seancës dhe autorizimi në server kudo që lexohen ose ndryshohen të dhëna të ndjeshme.