Hvordan håndterer du autentisering i en Next.js App Router-app?

Question

Accepted Answer

Autentisering i App Router spenner over flere lag — sesjoner, middleware, server-side sjekker og beskyttelse av Server Actions. Den moderne tilnærmingen foretrekker **server-side sesjonsverifisering** fremfor client-only sjekker. ## Sesjonsstrategi ```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 portåpning i middleware (rask, men ikke hele historien) ```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 kjører på Edge før hver matchet forespørsel — ideell for billige omdirigeringer. Men den skal bare gjøre en *lett* tilstedeværelseskontroll; ikke stol på den som eneste autorisering (cookie-en kan være ugyldig). ## 2. Verifiser sesjonen der du bruker dataene (den virkelige porten) ```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}

; } ``` Denne server-side verifiseringen (i Server Component) er **autoritativ** kontroll — den validerer faktisk sesjonen og laster brukeren. ## 3. Beskytt også Server Actions og 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 er offentlige endepunkter — **kontroller alltid auth og autorisering innenfor dem**, uavhengig av UI-nivå portåpning. ## Hvorfor lagdelte 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 ``` ## Hvorfor det er viktig Auth i App Router er forsvar på dybden: httpOnly cookies (XSS-sikre sesjoner), middleware for raske omdirigeringer, og — kritisk — **server-side verifisering på hvert data-tilgang og mutasjonspunkt**. Den vanlige, farlige feilen er å behandle en middleware-kontroll eller skjult klient-UI som tilstrekkelig; reell beskyttelse kommer fra å validere sesjonen og autorisering på serveren der sensitiv data leses eller endres.