Bagaimana anda mengendalikan autentikasi dalam aplikasi Next.js App Router?

Question

Accepted Answer

Autentikasi dalam App Router mencakup beberapa lapisan — sesi, middleware, pemeriksaan sisi server, dan perlindungan Server Actions. Pendekatan modern lebih menyukai **verifikasi sesi sisi server** dibandingkan pemeriksaan hanya klien. ## Mengapa penting Strategi sesi ```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. Gating kasar dalam middleware (cepat, tetapi bukan seluruh cerita) ```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 berjalan di Edge sebelum setiap permintaan yang sesuai — ideal untuk pengalihan yang murah. Tetapi hanya harus melakukan pemeriksaan kehadiran *ringan*; jangan mengandalkannya sebagai satu-satunya otorisasi (cookie bisa tidak valid). ## 2. Verifikasi sesi di mana Anda menggunakan 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 sisi server ini (dalam Server Component) adalah pemeriksaan **otoritatif** — itu benar-benar memvalidasi sesi dan memuat pengguna. ## 3. Lindungi Server Actions dan Route Handlers juga ```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 adalah endpoint publik — **selalu periksa kembali autentikasi dan otorisasi di dalamnya**, terlepas dari gating tingkat UI. ## Mengapa pemeriksaan berlapis ```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 ``` ## Mengapa penting Autentikasi dalam App Router adalah pertahanan berlapis: cookie httpOnly (sesi aman dari XSS), middleware untuk pengalihan cepat, dan — yang paling penting — **verifikasi sisi server di setiap titik akses data dan mutasi**. Kesalahan umum dan berbahaya adalah memperlakukan pemeriksaan middleware atau UI klien tersembunyi sebagai cukup; perlindungan nyata datang dari memvalidasi sesi dan otorisasi di server di mana pun data sensitif dibaca atau diubah.