Next.js App Router अनुप्रयोगमा तपाईले प्रमाणीकरणलाई कसरी सम्हाल्नुहुन्छ?

Question

Accepted Answer

App Router मा प्रमाणीकरण धेरै तहमा विस्तृत हुन्छ — सत्र, middleware, सर्भर-साइड जाँच र Server Actions को सुरक्षा। आधुनिक दृष्टिकोणले ग्राहक-एकमात्र जाँचमा **सर्भर-साइड सत्र सत्यापन** लाई प्राथमिकता दिन्छ। ## सत्र रणनीति ```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 ``` ## १. Middleware मा मोटा गेटिङ (छिटो, तर पूरो कहानी होइन) ```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 प्रत्येक मिलेको अनुरोधको पहिले Edge मा चल्छ — सस्तो रिडिरेक्टका लागि आदर्श। तर यसले केवल *हल्का* उपस्थिति जाँच गर्नुपर्छ; यसलाई एकमात्र प्राधिकरणको रूपमा आश्रय गर्नुहोस् (कुकी अमान्य हुन सक्छ)। ## २. जहाँ तपाई डेटा प्रयोग गर्नुहुन्छ त्यहाँ सत्र सत्यापन गर्नुहोस् (वास्तविक गेट) ```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 Component मा) **आधिकारिक** जाँच हो — यो वास्तवमा सत्रलाई सत्यापन गर्छ र प्रयोगकर्ता लोड गर्छ। ## ३. 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 सार्वजनिक endpoint हरू हुन् — **UI-स्तरीय गेटिङको बिना पनि सधैं तिनको भित्रमा प्रमाणीकरण र प्राधिकरण पुनः जाँच गर्नुहोस्**। ## किन तहबद्ध जाँच ```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 गहिराइ-मा रक्षा हो: httpOnly कुकीज (XSS-सुरक्षित सत्र), द्रुत रिडिरेक्टको लागि middleware, र — महत्त्वपूर्णको रूपमा — **संवेदनशील डेटा पढिने र परिवर्तन गरिने हरेक बिन्दुमा सर्भर-साइड सत्यापन**। सामान्य, खतरनाक गल्ती middleware जाँच वा लुकेको ग्राहक UI लाई पर्याप्त मान्नु हो; वास्तविक सुरक्षा सत्र र प्राधिकरणलाई सर्भरमा सत्यापन गरेर आउँछ जहाँ संवेदनशील डेटा पढिन्छ वा परिवर्तन हुन्छ।