⚡Authentication

Clerk Auth einrichten

Auth in 5 Minuten statt 5 Stunden — April 2026

Authentication selbst bauen ist ein Sicherheitsrisiko und Zeitfresser. Clerk gibt dir Login, Registrierung, Profilverwaltung und Session-Management als fertige Komponenten. Du droppst sie ein und es funktioniert.

Pro-Tip — Der schnelle Weg

Clerk hat fertige UI-Komponenten für SignIn, SignUp und UserProfile — du musst null eigenes UI bauen.

Seite 1

Clerk installieren und Keys setzen

Erstelle ein Clerk-Projekt und füge die API-Keys in deine Umgebungsvariablen ein.

npm install @clerk/nextjs

# .env.local
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

ClerkProvider und Middleware einrichten

Wrappe deine App mit dem ClerkProvider und schütze Routen per Middleware.

// app/layout.tsx
import { ClerkProvider } from "@clerk/nextjs";

export default function RootLayout({ children }) {
return (
<ClerkProvider>
<html><body>{children}</body></html>
</ClerkProvider>
);
}

// middleware.ts
import { clerkMiddleware } from "@clerk/nextjs/server";
export default clerkMiddleware();
export const config = { matcher: ["/((?!.*\\..*|_next).*)"] };

Login-Seite und geschützte Bereiche

Erstelle eine Sign-In Seite mit der fertigen Clerk-Komponente.

// app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from "@clerk/nextjs";

export default function SignInPage() {
return <SignIn />;
}

// Geschuetzter Bereich:
import { auth } from "@clerk/nextjs/server";

export default async function Dashboard() {
const { userId } = await auth();
if (!userId) redirect("/sign-in");
return <div>Willkommen, {userId}</div>;
}

Seite 2

Warum das funktioniert

Fertige UI-Komponenten: SignIn, SignUp, UserProfile — zero eigener Code
Middleware schützt automatisch alle Routen die du definierst
Session-Management out of the box — kein JWT-Handling nötig
Social Login, MFA und Passkeys ohne eine Zeile eigenen Code

Tipps

Clerk Free Tier: 10.000 MAUs kostenlos — mehr als genug für den Start
Social Login (Google, GitHub) mit einem Klick im Dashboard aktivieren
UserButton-Komponente gibt dir ein fertiges Profil-Dropdown mit Avatar
Clerk speichert User-Metadata — perfekt für Rollen und Berechtigungen
Webhooks nutzen um User-Daten mit deiner eigenen Datenbank zu synchronisieren

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