⚡Auth

JWT Authentication verstehen

Token-basierte Auth ohne Session-Datenbank

JSON Web Tokens sind der Standard fuer stateless Authentication. Der Server erstellt ein signiertes Token, der Client schickt es bei jedem Request mit. Kein Session-Store noetig, perfekt fuer APIs und Microservices.

Pro-Tip — Der schnelle Weg

Speichere JWTs nie im localStorage, das ist anfaellig fuer XSS-Angriffe. Nutze httpOnly Cookies die JavaScript nicht lesen kann. Das ist die sicherste Variante.

Seite 1

JWT erstellen

Installiere jose fuer Edge-kompatible JWT-Operationen. Erstelle ein Token mit User-Daten und einer Ablaufzeit.

npm install jose

// lib/jwt.ts
import { SignJWT, jwtVerify } from 'jose';

const secret = new TextEncoder().encode(process.env.JWT_SECRET!);

export async function createToken(userId: string) {
return new SignJWT({ userId })
.setProtectedHeader({ alg: 'HS256' })
.setExpirationTime('7d')
.setIssuedAt()
.sign(secret);
}

Token verifizieren

Bei jedem geschuetzten Request verifizierst du das Token. Wenn die Signatur ungueltig ist oder das Token abgelaufen, wird ein Fehler geworfen.

export async function verifyToken(token: string) {
try {
const { payload } = await jwtVerify(token, secret);
return payload as { userId: string };
} catch {
return null;
}
}

Login Route mit Cookie

Nach erfolgreichem Login erstellst du das Token und setzt es als httpOnly Cookie. Der Browser schickt es automatisch bei jedem Request mit.

// app/api/auth/login/route.ts
import { cookies } from 'next/headers';
import { createToken } from '@/lib/jwt';

export async function POST(request: Request) {
const { email, password } = await request.json();
const user = await authenticateUser(email, password);
if (!user) return Response.json({ error: 'Invalid credentials' }, { status: 401 });

const token = await createToken(user.id);
(await cookies()).set('token', token, {
httpOnly: true,
secure: true,
sameSite: 'lax',
maxAge: 60 * 60 * 24 * 7, // 7 Tage
});
return Response.json({ success: true });
}

Geschuetzte Route absichern

In geschuetzten API Routes liest du das Cookie aus und verifizierst das Token. Bei Fehler gibst du 401 zurueck.

// app/api/protected/route.ts
import { cookies } from 'next/headers';
import { verifyToken } from '@/lib/jwt';

export async function GET() {
const token = (await cookies()).get('token')?.value;
if (!token) return Response.json({ error: 'Unauthorized' }, { status: 401 });

const payload = await verifyToken(token);
if (!payload) return Response.json({ error: 'Invalid token' }, { status: 401 });

const user = await db.user.findUnique({ where: { id: payload.userId } });
return Response.json({ user });
}

Seite 2

Warum das funktioniert

Stateless bedeutet kein Session-Store, der Server prueft nur die Signatur
httpOnly Cookies sind vor XSS-Angriffen geschuetzt
JWTs funktionieren ueber mehrere Server und Microservices hinweg
Edge-kompatibel mit jose fuer Middleware-Checks weltweit

Tipps

JWTs koennen nicht widerrufen werden, halte die Ablaufzeit kurz oder nutze eine Blacklist
Packe keine sensitiven Daten ins Token, der Payload ist nur Base64-kodiert und lesbar
Nutze Refresh Tokens fuer laenger laufende Sessions ohne das Haupttoken ewig gueltig zu machen
jose funktioniert auf der Edge Runtime, jsonwebtoken nicht

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen