آپ Next.js App Router ایپلیکیشن میں authentication کو کیسے سنبھالتے ہیں؟

Question

Accepted Answer

App Router میں authentication کے متعدد layers ہیں — sessions، middleware، server-side checks، اور Server Actions کی حفاظت۔ جدید طریقہ **server-side session verification** کو client-only checks سے بہتر سمجھتا ہے۔ ## Session strategy ```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 میں Coarse gating (تیز، لیکن مکمل نہیں) ```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 ہر matched request سے پہلے Edge پر چلتا ہے — سستے redirects کے لیے بہترین۔ لیکن یہ صرف *lightweight* presence check کریں؛ اسے اکلوتی authorization کے طور پر استعمال نہ کریں (cookie غلط ہو سکتا ہے)۔ ## 2. اس جگہ پر session کی تصدیق کریں جہاں آپ ڈیٹا استعمال کریں (اصل gate) ```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}

; } ``` یہ server-side verification (Server Component میں) **authoritative** check ہے — یہ واقعی session کی تصدیق کرتا ہے اور user کو لوڈ کرتا ہے۔ ## 3. Server Actions اور 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 عوامی endpoints ہیں — **ہمیشہ ان کے اندر auth اور authorization کو دوبارہ چیک کریں**، قطع نظر UI-level gating کے۔ ## Layered checks کیوں ```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 ``` ## یہ کیوں اہم ہے App Router میں Auth defense-in-depth ہے: httpOnly cookies (XSS-safe sessions)، middleware تیز redirects کے لیے، اور — اہم بات — **ہر data-access اور mutation point پر server-side verification**۔ عام، خطرناک غلطی یہ ہے کہ middleware check یا hidden client UI کو کافی سمجھا جائے؛ حقیقی حفاظت server پر session اور authorization کی تصدیق سے آتی ہے جہاں حساس ڈیٹا پڑھا یا تبدیل کیا جاتا ہے۔