Nawa ka kula da Authentication a cikin Next.js App Router app?

Question

Accepted Answer

Authentication a cikin App Router ta ɓace da gajerun matakai — jerin nasara, middleware, bincike na gefen server, da kare Server Actions. Sabuwar hanya ta fi dacewa da **binciken nasara na gefen server** akan bincike na gefen client ne kawai. ## Dabarar nasara ```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. Buɗewa baki a cikin middleware (sauri, amma ba gida na labarin ba) ```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 yana aiki akan Edge kafin kowane buƙatun da ya dace — kyau don daɗe masu ƙanƙanta. Amma yakamata ya yi **mai laushi** kayyade kawai; kar ka dogara da shi a matsayin gida kawai na izini (cookey na iya yin bai da kyau). ## 2. Tabbatar da nasara inda ka kula da bayani (ainihin buɗewa) ```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}

; } ``` Innin kayyade na gefen server (a cikin Server Component) shine **adilci** kayyade — shi da gaske yana tabbatar da nasara kuma yana uta mai aiki. ## 3. Kare Server Actions da Route Handlers ma ```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 su ne buɗaccen abokan buɗi — **koyaushe sake kayyade auth da izini a ciki**, ko da kyau kayyade UI-level. ## Me yasa layered kayyade ```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 ``` ## Me ya sa Ya muhimta Auth a cikin App Router shine tsangwamma-jiya: httpOnly cookies (masu kare na XSS nasara), middleware don sauri daɗe, kuma — tabbas — **kayyade na gefen server a kowane wuri na buɗewa-bayani da canja**. Kaida mai damɗamiya da haɗari ita ce dauki middleware kayyade ko fakitacciyar UI ne isasshe; ainihin kare yana zo daga tabbatar da nasara da izini akan server inda aka karanta ko canja bayani masu bukatar.