Hur hanterar du autentisering i en Next.js App Router-app?

Question

Accepted Answer

Autentisering i App Router sträcker sig över flera lager — sessioner, middleware, serverside-kontroller och skydd av Server Actions. Den moderna metoden föredrar **serverside-sessionsverifiering** framför enbart klientkontroller. ## Sessionsstrategi ```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. Grov begränsning i middleware (snabb, men inte hela berättelsen) ```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 körs på Edge innan varje matchad begäran — idealisk för billiga omdirigeringar. Men det bör bara göra en *lätt* närvarokontroll; förlita dig inte på det som enda auktorisering (cookien kan vara ogiltig). ## 2. Verifiera sessionen där du använder den (den verkliga grinden) ```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}

; } ``` Denna serverside-sessionsverifiering (i Server Component) är den **auktoritativa** kontrollen — den validerar faktiskt sessionen och laddar användaren. ## 3. Skydda även Server Actions och 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 är offentliga slutpunkter — **alltid verifiera autentisering och auktorisering inne i dem**, oavsett UI-nivåbegränsning. ## Varför skiktade kontroller ```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 ``` ## Varför det är viktigt Autentisering i App Router är försvar på djupet: httpOnly-cookies (XSS-säkra sessioner), middleware för snabba omdirigeringar, och — avgörande — **serverside-verifiering vid varje dataaccesspunkt och muteringspunkt**. Felet som ofta begås och är farligt är att behandla en middleware-kontroll eller dold klient-UI som tillräcklig; verkligt skydd kommer från att validera sessionen och auktoriseringen på servern överallt där känslig data läses eller ändras.