Supabase Auth mit Claude Code:
Authentication komplett 2026
Email, OAuth, Magic Links, RLS, JWT Session-Management — Claude Code implementiert vollständige Supabase Auth in Next.js. Dieser Guide zeigt dir jeden Schritt: von der Grundkonfiguration bis zu produktionsreifen Auth-Flows.
Inhalt dieses Guides
Email & OAuth
Google, GitHub, Magic Link out-of-the-box
Row Level Security
Datenzugriff auf DB-Ebene absichern
JWT Sessions
Token-Refresh automatisch in Next.js
Secure Storage
Buckets mit Auth-Policies schützen
1. Supabase Auth Setup & Grundkonfiguration
Claude Code erledigt das komplette Supabase-Setup in Minuten. Starte mit einem klaren Prompt und lass den Agenten die Konfiguration automatisch aufbauen.
Claude Code Prompt — Projekt initialisieren
- Supabase-Client mit Next.js 15 App Router einrichten
- Server- und Client-seitige Supabase-Instanzen trennen
- Environment Variables korrekt setzen
- @supabase/ssr Package für SSR-kompatibles Cookie-Handling
Terminal — Pakete installieren
npm install @supabase/supabase-js @supabase/ssr
.env.local
NEXT_PUBLIC_SUPABASE_URL=https://xyzabc.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5... # nur server-side!
lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr'
export function createClient() {
return createBrowserClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
}
lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
export async function createClient() {
const cookieStore = await cookies()
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{ cookies: {
getAll() { return cookieStore.getAll() },
setAll(cookiesToSet) {
cookiesToSet.forEach(({ name, value, options }) =>
cookieStore.set(name, value, options))
}
}
}
)
}
2. Email/Password & OAuth (Google, GitHub)
Claude Code generiert komplette Auth-Flows inklusive Formularen, Error-Handling und Redirect-Logik. OAuth-Provider werden in wenigen Zeilen aktiviert.
1Email/Password Signup
app/auth/signup/actions.ts
'use server'
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'
import { createClient } from '@/lib/supabase/server'
export async function signup(formData: FormData) {
const supabase = await createClient()
const { error } = await supabase.auth.signUp({
email: formData.get('email') as string,
password: formData.get('password') as string,
options: { emailRedirectTo: 'https://agentic-movers.com/auth/callback' }
})
if (error) redirect('/auth/error?msg=' + error.message)
revalidatePath('/', 'layout')
redirect('/auth/verify-email')
}
2OAuth mit Google & GitHub
app/auth/oauth/actions.ts
'use server'
import { redirect } from 'next/navigation'
import { createClient } from '@/lib/supabase/server'
export async function signInWithGoogle() {
const supabase = await createClient()
const { data } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
redirectTo: `https://agentic-movers.com/auth/callback`,
scopes: 'email profile'
}
})
if (data.url) redirect(data.url)
}
export async function signInWithGitHub() {
const supabase = await createClient()
const { data } = await supabase.auth.signInWithOAuth({
provider: 'github',
options: { redirectTo: `https://agentic-movers.com/auth/callback` }
})
if (data.url) redirect(data.url)
}
💡
Claude Code Tipp: Füge im Supabase Dashboard unter Authentication → Providers die OAuth-Credentials ein. Claude Code generiert dir den kompletten Setup-Guide als Kommentar direkt im Code.
3. Magic Links und OTP
Magic Links sind der einfachste Weg für passwortfreie Authentication. Claude Code implementiert den kompletten Flow inklusive OTP-Verification.
Magic Link Flow
- User gibt nur Email ein — kein Passwort notwendig
- Supabase sendet Link mit eingebettetem Token
- Callback-Route tauscht Token gegen Session
- OTP als 6-stelliger Code alternativ nutzbar
app/auth/magic/actions.ts
export async function sendMagicLink(email: string) {
const supabase = await createClient()
const { error } = await supabase.auth.signInWithOtp({
email,
options: {
emailRedirectTo: 'https://agentic-movers.com/auth/callback',
shouldCreateUser: true
}
})
return { error: error?.message }
}
// OTP Verification (6-stelliger Code)
export async function verifyOtp(email: string, token: string) {
const supabase = await createClient()
const { error } = await supabase.auth.verifyOtp({
email, token, type: 'email'
})
if (!error) redirect('/dashboard')
}
4. Row Level Security (RLS)
RLS ist das Herzstück von Supabase Security. Jeder Datenbankzugriff wird auf Row-Ebene durch Policies kontrolliert. Claude Code schreibt die SQL-Policies und erklärt jeden Schritt.
RLS — Was Claude Code automatisch generiert
- RLS aktivieren für alle User-Tabellen
- SELECT/INSERT/UPDATE/DELETE Policies separat
- auth.uid() für User-spezifischen Datenzugriff
- Service-Role für Admin-Bypass korrekt trennen
SQL — RLS für profiles-Tabelle
-- RLS aktivieren
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
-- User sieht NUR sein eigenes Profil
CREATE POLICY "Users can view own profile"
ON profiles FOR SELECT
USING (auth.uid() = user_id);
-- User kann nur eigenes Profil updaten
CREATE POLICY "Users can update own profile"
ON profiles FOR UPDATE
USING (auth.uid() = user_id)
WITH CHECK (auth.uid() = user_id);
-- Auto-Profil bei Signup erstellen
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS trigger AS $$
BEGIN
INSERT INTO public.profiles (user_id, email)
VALUES (new.id, new.email);
RETURN new;
END;
$$ language plpgsql security definer;
⚠️
Wichtig: Ohne RLS kann jeder authentifizierte User alle Rows lesen — egal wem sie gehören. RLS immer als erstes aktivieren, bevor du Daten einträgst.
Team-basierte RLS Policies
SQL — Team/Organization RLS
-- User sieht Daten seines Teams
CREATE POLICY "Team members can view team data"
ON documents FOR SELECT
USING (
team_id IN (
SELECT team_id FROM team_members
WHERE user_id = auth.uid()
)
);
5. JWT Tokens & Session-Management in Next.js
Supabase Auth basiert auf JWT Tokens. Das @supabase/ssr Package übernimmt das Session-Management automatisch — Claude Code verbindet beide nahtlos.
JWT Session-Lifecycle
- Access Token: 1 Stunde gültig (konfigurierbar)
- Refresh Token: Automatisch via Middleware erneuert
- Cookies: httpOnly, Secure, SameSite=Lax
- Server Components lesen Session direkt aus Cookies
app/auth/callback/route.ts
import { NextResponse } from 'next/server'
import { createClient } from '@/lib/supabase/server'
export async function GET(request: Request) {
const { searchParams, origin } = new URL(request.url)
const code = searchParams.get('code')
const next = searchParams.get('next') ?? '/dashboard'
if (code) {
const supabase = await createClient()
const { error } = await supabase.auth.exchangeCodeForSession(code)
if (!error) return NextResponse.redirect(`${origin}${next}`)
}
return NextResponse.redirect(`${origin}/auth/error`)
}
6. Supabase Storage mit Auth-geschützten Buckets
Supabase Storage bietet S3-kompatibles File-Hosting mit direkter Auth-Integration. Buckets lassen sich per RLS-ähnliche Policies absichern.
Storage Bucket Setup
- Public Buckets für öffentliche Assets (Avatare, Logos)
- Private Buckets für User-Uploads (Dokumente, Bilder)
- Signed URLs für temporären Zugriff auf private Files
- File-Size-Limits und MIME-Type-Filter konfigurierbar
SQL — Storage Bucket Policy
-- User darf nur eigene Files hochladen
CREATE POLICY "Users upload own files"
ON storage.objects FOR INSERT
WITH CHECK (
bucket_id = 'user-uploads'
AND (storage.foldername(name))[1] = auth.uid()::text
);
-- User liest nur seine eigenen Files
CREATE POLICY "Users read own files"
ON storage.objects FOR SELECT
USING (
bucket_id = 'user-uploads'
AND (storage.foldername(name))[1] = auth.uid()::text
);
lib/storage.ts — File Upload mit Auth
export async function uploadUserFile(file: File, userId: string) {
const supabase = createClient() // client-side
const path = `${userId}/${Date.now()}-${file.name}`
const { data, error } = await supabase.storage
.from('user-uploads')
.upload(path, file, { upsert: false })
if (error) throw new Error(error.message)
return data.path
}
export async function getSignedUrl(path: string) {
const supabase = createClient()
const { data } = await supabase.storage
.from('user-uploads')
.createSignedUrl(path, 3600) // 1 Stunde gültig
return data?.signedUrl
}
7. Auth-Middleware im Next.js App Router
Die Middleware ist der Schlüssel zu funktionierendem Session-Management im App Router. Sie erneuert Tokens automatisch und schützt alle geschützten Routen.
middleware.ts (Root-Level)
import { NextResponse, type NextRequest } from 'next/server'
import { createServerClient } from '@supabase/ssr'
export async function middleware(request: NextRequest) {
let supabaseResponse = NextResponse.next({ request })
const supabase = createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{ cookies: {
getAll() { return request.cookies.getAll() },
setAll(cookiesToSet) {
cookiesToSet.forEach(({name, value, options}) =>
request.cookies.set(name, value))
supabaseResponse = NextResponse.next({ request })
cookiesToSet.forEach(({name, value, options}) =>
supabaseResponse.cookies.set(name, value, options))
}
}}
)
const { data: { user } } = await supabase.auth.getUser()
const path = request.nextUrl.pathname
const isProtected = path.startsWith('/dashboard')
if (isProtected && !user) {
const url = request.nextUrl.clone()
url.pathname = '/auth/login'
return NextResponse.redirect(url)
}
return supabaseResponse
}
export const config = {
matcher: ['/((?!_next/static|_next/image|favicon.ico).*)' ]
}
🚀
Claude Code Workflow: Gib Claude Code dein komplettes Schema (Tabellen, Relations, User-Rollen) und lass den Agenten alle RLS-Policies, Middleware und Auth-Flows in einem Durchgang generieren. Das spart Stunden manueller Arbeit.
Vollständiger Auth-Stack — Was Claude Code liefert
- Email/Password Signup + Login + Logout Server Actions
- OAuth (Google, GitHub) mit korrekten Callback-Routes
- Magic Link und OTP Flow komplett implementiert
- RLS-Policies für alle User-Tabellen und Storage
- Middleware mit automatischem Token-Refresh
- Protected Routes und Auth-Guard Components
- TypeScript-Typen aus Supabase Schema generiert