તમે 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 ``` ## 1. 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 પર ચલાય છે — સસ્તા રીડાયરેક્ટ્સ માટે આદર્શ. પણ તેણે ફક્ત *હળવી* હાજરી તપાસ કરવી જોઈએ; તેના પર એકમાત્ર authorization તરીકે આધાર રાખશો નહીં (કૂકી અમાન્ય હોઈ શકે છે). ## 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 જાહેર endpoints છે — **હંમેશા તેમની અંદર auth અને authorization ફરી ચકાસો**, 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 ને પર્યાપ્ત તરીકે ગણવી છે; વાસ્તવિક સુરક્ષા સર્વર પર સેશન અને authorization ચકાસવાથી આવે છે જ્યાં સંવેદનશીલ ડેટા વાંચવામાં અથવા બદલવામાં આવે છે.