Next.js App Router uygulamasında kimlik doğrulamayı nasıl işlersiniz?

Question

Accepted Answer

App Router'daki kimlik doğrulama birkaç katmanı kapsar — oturumlar, middleware, sunucu tarafı kontroller ve Server Actions koruması. Modern yaklaşım, **sunucu tarafı oturum doğrulaması**na yalnızca istemci tarafı kontrollerin ön plana koyar. ## Oturum stratejisi ```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. Middleware'de kaba geçit denetimi (hızlı, ama tam hikaye değil) ```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, her eşleşen istekten önce Edge'de çalışır — ucuz yönlendirmeler için ideal. Ancak yalnızca *hafif* bir varlık kontrolü yapmalıdır; bunu tek yetkilendirme olarak kullanmayın (çerez geçersiz olabilir). ## 2. Veriyi kullandığınız yerde oturumu doğrulayın (gerçek kapı) ```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}

; } ``` Bu sunucu tarafı oturum doğrulaması (Server Component'te) **yetkilendirici** bir kontrol — aslında oturumu doğrular ve kullanıcıyı yükler. ## 3. Server Actions ve Route Handlers'ı da koruyun ```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 herkese açık uç noktaları — **her zaman bunların içinde kimlik doğrulama ve yetkilendirmeyi yeniden kontrol edin**, UI düzeyinde geçit denetiminden bağımsız olarak. ## Neden katmanlı kontroller ```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 ``` ## Neden önemli App Router'daki kimlik doğrulama derinlemesine savunmadır: httpOnly çerezler (XSS-güvenli oturumlar), hızlı yönlendirmeler için middleware ve — en önemlisi — **her veri erişimi ve mutasyon noktasında sunucu tarafı doğrulama**. Yaygın ve tehlikeli hata, middleware kontrolünü veya gizli istemci UI'ını yeterli olarak değerlendirmek; gerçek koruma, oturumu doğrulamak ve sunucuda her yerde yetkilendirmek gelir — hassas veriler okunduğu veya değiştirildiği her yer.