तुम Next.js App Router अॅपमध्ये ऑथेंटिकेशन कसे हॅंडल करता?

Question

Accepted Answer

App Router मध्ये ऑथेंटिकेशन अनेक स्तरांवर विस्तारलेले आहे — सेशन, मिडलवेअर, सर्व्हर-साइड चेक आणि 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 ``` ## 1. मिडलवेअरमध्ये मोठे गेटिंग (वेगवान, परंतु संपूर्ण कथा नाही) ```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(); } ``` मिडलवेअर प्रत्येक मिळणार्‍या विनंतीपूर्वी Edge वर चालते — स्वस्त रीडायरेक्टसाठी आदर्श. परंतु तो केवळ *हल्का* उपस्थिती चेक करावा; केवळ ऑथराइজेशन म्हणून त्यावर विश्वास ठेवू नका (कुकी अवैध असू शकते). ## 2. जेथे तुम्ही डेटा वापरता तेथे सेशन व्हेरिफाय करा (खरा गेट) ```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 मध्ये) **अधिकृत** चेक आहे — हे वास्तविकपणे सेशन व्हेरिफाय करते आणि वापरकर्ता लोड करते. ## 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 हे सार्वजनिक एंडपॉइंट्स आहेत — 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 मध्ये ऑथ हा गहन-संरक्षण आहे: httpOnly कुकीज (XSS-सुरक्षित सेशन), वेगवान रीडायरेक्ट्सच्या लिए मिडलवेअर, आणि — महत्त्वाचे — **संवेदनशील डेटा वाचला किंवा बदला जाते तेथे प्रत्येक बिंदूवर सर्व्हर-साइड व्हेरिफिकेशन**. सामान्य आणि धोकादायक चूक म्हणजे मिडलवेअर चेक किंवा लपलेले क्लायंट UI पुरेसे मानणे; खरा संरक्षण सर्व्हरवर सेशन आणि ऑथराइजेशन व्हेरिफाय करण्यावरून येतो जेथे संवेदनशील डेटा वाचला किंवा बदला जातो.