⚡Auth

Rollen & Berechtigungen bauen

Wer darf was in deiner App

Nicht jeder User sollte alles koennen. Admins verwalten, Editoren bearbeiten, Nutzer lesen. Ein sauberes Rollen-System schuetzt deine App und gibt dir volle Kontrolle ueber Zugriffe.

Pro-Tip — Der schnelle Weg
Starte mit drei Rollen: admin, editor, user. Mehr brauchst du am Anfang nicht. Fuege neue Rollen nur hinzu wenn ein konkreter Use Case es erfordert, nicht praventiv.
Seite 1
1

Rollen-Schema definieren

Definiere die Rollen in deiner Datenbank. Jeder User hat eine Rolle die seine Berechtigungen bestimmt.

// Supabase SQL
create type user_role as enum ('admin', 'editor', 'user');


alter table profiles add column role user_role default 'user';


// TypeScript
type Role = 'admin' | 'editor' | 'user';
2

Berechtigungs-Map erstellen

Definiere welche Rolle was darf in einer zentralen Map. Das ist leichter zu warten als verteilte if-Checks ueberall im Code.

// lib/permissions.ts
const permissions = {
 admin: ['read', 'write', 'delete', 'manage_users', 'view_analytics'],
 editor: ['read', 'write'],
 user: ['read'],
} as const;


type Permission = (typeof permissions)[keyof typeof permissions][number];


export function hasPermission(role: Role, permission: Permission): boolean {
 return (permissions[role] as readonly string[]).includes(permission);
}
3

API Routes schuetzen

Erstelle eine Middleware-Funktion die den Rollen-Check vor jedem geschuetzten Endpunkt ausfuehrt.

// lib/auth-guard.ts
export async function requireRole(request: Request, ...roles: Role[]) {
 const user = await getCurrentUser(request);
 if (!user) throw new Error('Unauthorized');
 if (!roles.includes(user.role)) throw new Error('Forbidden');
 return user;
}


// In Route Handler
export async function DELETE(request: Request) {
 const user = await requireRole(request, 'admin');
 // Nur Admins kommen hierher
}
4

UI nach Rolle anpassen

Zeige Buttons und Menues nur wenn der User die noetige Berechtigung hat. Das ist UX, nicht Security, der API-Check ist trotzdem noetig.

import { hasPermission } from '@/lib/permissions';


export function AdminPanel({ userRole }: { userRole: Role }) {
 return (
 <div>
 <h1>Dashboard</h1>
 {hasPermission(userRole, 'manage_users') && (
 <button>Benutzer verwalten</button>
 )}
 {hasPermission(userRole, 'view_analytics') && (
 <AnalyticsChart />
 )}
 </div>
 );
}
Seite 2
Warum das funktioniert
  • Zentrale Berechtigungs-Map macht Aenderungen zum Einzeiler
  • Server-seitige Checks schuetzen selbst wenn das Frontend manipuliert wird
  • Enum-Rollen in der Datenbank verhindern ungueltige Werte
  • UI-Anpassungen nach Rolle verbessern die Nutzererfahrung ohne Security-Risiko
Tipps
  • Pruefe Berechtigungen IMMER serverseitig, Client-Checks sind nur UX-Zucker
  • Logge Zugriffsverweigerungen fuer Security-Audits
  • Fuer komplexere Systeme nutze ABAC (Attribute-Based Access Control) statt RBAC
  • Supabase Row Level Security kann Rollen-Checks direkt in der Datenbank erzwingen
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