Next.js App Router ऐप्लिकेशन ਵਿੱਚ ਤੁਸੀਂ ਪ੍ਰਮਾਣੀਕਰਨ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਦੇ ਹੋ?

Question

Accepted Answer

App Router ਵਿੱਚ ਪ੍ਰਮਾਣੀਕਰਨ ਕਈ ਪਰਤਾਂ ਵਿੱਚ ਫੈਲਦਾ ਹੈ — ਸੈਸ਼ਨ, middleware, server-side ਚੈਕ ਅਤੇ Server Actions ਦੀ ਸੁਰੱਖਿਆ। ਆਧੁਨਿਕ ਪਹੁੰਚ **server-side ਸੈਸ਼ਨ ਤਸਦੀਕ** ਨੂੰ client-only ਚੈਕਾਂ ਤੋਂ ਤਰਜੀਹ ਦਿੰਦਾ ਹੈ। ## ਸੈਸ਼ਨ ਰਣਨੀਤੀ ```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 ਉੱਤੇ ਚਲਦਾ ਹੈ — ਸਸਤੇ ਰੀਡਾਇਰੈਕਟ ਲਈ ਆਦਰਸ਼। ਪਰ ਇਹ ਸਿਰਫ ਇੱਕ *ਹਲਕਾ* ਮੌਜੂਦਗੀ ਚੈਕ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ; ਇਸ ਨੂੰ ਇਕਲੌਤੀ ਪ੍ਰਮਾਣਿਕਰਨ ਦੇ ਤੌਰ ਨਾ ਸਮਝੋ (ਕੁਕੀ ਬੇਕਾਰ ਹੋ ਸਕਤੀ ਹੈ)। ## 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-side ਤਸਦੀਕ (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 ਜਨਤਾ ਦੀਆਂ ਅਂਤਬਿੰਦੂਆਂ ਹਨ — **ਹਮੇਸ਼ਾ ਉਨ੍ਹਾਂ ਦੇ ਅੰਦਰ auth ਅਤੇ ਪ੍ਰਮਾਣਿਕਰਨ ਦੀ ਦੁਬਾਰਾ ਜਾਂਚ ਕਰੋ**, 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, ਅਤੇ — ਖਾਸ ਤੌਰ ਤੇ — **ਹਰ ਡੇਟਾ-ਪਹੁੰਚ ਅਤੇ ਪਰਿਵਰਤਨ ਬਿੰਦੂ ਉੱਤੇ server-side ਤਸਦੀਕ**। ਆਮ, ਖਤਰਨਾਕ ਗਲਤੀ middleware ਚੈਕ ਜਾਂ ਲੁਕੀ ਹੋਈ ਕਲਾਇੰਟ UI ਨੂੰ ਸ਼ਾਮਲ ਮੰਨਣਾ ਹੈ; ਅਸਲੀ ਸੁਰੱਖਿਆ server ਉੱਤੇ ਸੈਸ਼ਨ ਅਤੇ ਪ੍ਰਮਾਣਿਕਰਨ ਦੀ ਤਸਦੀਕ ਤੋਂ ਆਉਂਦੀ ਹੈ ਜਿਥੇ ਸੰਵੇਦਨਸ਼ੀਲ ਡੇਟਾ ਪੜ੍ਹਿਆ ਜਾਂ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ।