Paano mo ina-handle ang authentication sa Next.js App Router app?

Question

Accepted Answer

Autentikasi ing App Router naglalaman ing sawetahe layer — session, middleware, server-side check, lan protection ing Server Actions. Cara modern niku sumusuporta **server-side session verification** tinimbang client-only check. ## Kapan penting Sesi strategi ```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. Coarse gating ing middleware (cepet, tapi ora kabeh crita) ```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 kudu lari ing Edge sadurunge kabeh matched request — ideal kanggo murah redirect. Nanging kudu apa-apa *enteng* presence check; ora percaya ing ikhlas maneh (cookie bisa invalid). ## 2. Verifikasi sesi ing ngendi kowe nggunakake data (gerbang nyata) ```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}

; } ``` Verifikasi server-side iki (ing Server Component) iku **authoritative** check — iku bener-bener validate sesi lan nglodha user. ## 3. Lindungi Server Actions lan Route Handlers uga ```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 iku public endpoint — **tansah re-check auth lan authorization ing jero-jero**, ajeg UI-level gating. ## Kapan layered check ```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 ``` ## Kapan penting Auth ing App Router iku defense-in-depth: httpOnly cookie (XSS-safe session), middleware kanggo cepet redirect, lan — nggamblang — **server-side verification ing saben data-access lan mutation point**. Kesalahan umum lan bahaya iku nganggep middleware check utawa hidden client UI minangka cukup; perlindungan nyata teka saka validasi sesi lan authorization ing server mandi sensitive data dibaca utawa diowah.