Zum Hauptinhalt springen

Documentation Index

Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Warum Clerk?

What Is Clerk Pn Clerk übernimmt Authentifizierung und Benutzerverwaltung, sodass du das nicht von Grund auf selbst bauen musst. Mit nur wenigen Eingabeaufforderungen und Konfigurationsschritten erhältst du:
  • Sichere Anmeldung & Registrierung (soziale Logins, Passwort, MFA)
  • Vorgefertigte UI-Komponenten: Benutzerprofile, Organisationsverwaltung, Impersonation
  • Unterstützung für B2B-Apps (Teams, Rollen, Einladungen)
  • Integration mit Supabase, Stripe (kommt bald) und mehr
  • Wartelistenmodus zur Verwaltung von Early Access
  • Großzügiger Free-Tarif: 10.000 MAUs

​
Schritt-für-Schritt-Anleitung zur Integration

Hier findest du eine Schritt-für-Schritt-Anleitung:
1

Clerk-App einrichten

1

Schritt 1

Erstelle ein Clerk-Konto → Clerk.com
2

Schritt 2

Erstelle im Clerk-Dashboard eine neue App
1

Schritt 1

Melde dich bei Clerk an und erstelle eine neue AppCreate Clerk Application Pn
2

Schritt 2

Aktiviere die gewünschten Authentifizierungsanbieter (z. B. Google, GitHub)
3

Schritt 3

Aktiviere „Waitlist“ unter Configure > RestrictionsClerk Waitlist Pn
4

Schritt 4

Kopiere deinen Public API-SchlüsselClerk Api Key Pn
3

Schritt 3

Clerk zu deiner Lovable-App hinzufügen
1

Schritt 1

Füge in Lovable Clerk als deinen Authentifizierungsanbieter hinzu.Verwende in Lovable folgende Eingabeaufforderung:
Lass uns eine schöne Projekt- und Aufgabenverwaltungs-App im Stil von Asana erstellen. Nutzer sollten sich mit Clerk für Authentifizierung und Benutzerverwaltung anmelden und registrieren können. Lass uns damit beginnen, eine ansprechende Startseite zu bauen und die Waitlist-Komponente von Clerk zu verwenden, damit Nutzer sich eintragen können, während wir den Rest der App erstellen.
Asana Clone Lovable Pn
2

Schritt 2

Füge deinen Public API-Schlüssel ein, wenn du dazu aufgefordert wirst
3

Schritt 3

Lovable erstellt automatisch die Login- und RegistrierungsseitenWaitlist Component Clerk Pn
4

Schritt 4

Stelle bereit und teste – du verwendest jetzt die Clerk-Authentifizierung
2

Wartelistenmodus aktivieren (optional)

Warum eine Warteliste verwenden? – Sammle schon vor dem Start deiner App erste Nutzer!
Verwende die in Clerk integrierte Warteliste, um Nutzer bereits vor dem Start zu sammeln.
1

Step 1

Im Clerk-Dashboard: Configure > Restrictions > Waitlist
2

Step 2

Neue Registrierungen werden als pending angezeigt
3

Step 3

  • Nutzer, die sich registrieren, haben nun den Status pending approval
  • Admins können Nutzer direkt im Clerk-Dashboard freigeben Clerk Waitlist Pending Pn
4

Step 4 (Bonus)

Passe Wartelisten-E-Mails an (Branding, Inhalte)Clerk Email Templates PnSms Code Verification Pn
3

Verwaltung von Benutzern und Teams in Clerk

Richte teambasierten Zugriff in deiner App ein.
1

Step 1

Im Clerk-Dashboard: Organizations aktivierenOrganization Management Clerk Pn
2

Step 2

Rollen definieren (Admin, Member, Viewer usw.)
3

Step 3

Benutzer per E-Mail zu deiner Organisation einladen
4

Step 4

Rollen und Berechtigungen über das Dashboard zuweisen
5

Step 5

Gib Lovable folgende Eingabeaufforderung:
Benutzer nach der Registrierung bitten, eine Organisation zu erstellen oder einer beizutreten
Clerk Organization Create Pn
Verwendung der User Profile-Komponente von Clerk
  • Bietet ein vorgefertigtes Dashboard für Benutzerverwaltung
  • Unterstützt Anmeldungen über soziale Netzwerke & Passwort-Authentifizierung
  • Benutzer können ihre eigenen Konten & 2FA verwalten Clerk Organization Members Pn
4

Impersonation-Modus (für Administratoren)

Was ist der Impersonation-Modus?Admins können sich als beliebiger Benutzer einloggen, um Probleme zu beheben.
Behebe Probleme in deiner App, als wärst du ein bestimmter Benutzer.
1

Step 1

Klicke im Clerk-Dashboard > Users auf einen Benutzer
2

Step 2

Klicke auf Impersonate
3

Step 3

Sieh dir deine App aus der Perspektive dieses Benutzers an
4

Step 4

Sicherheit: Nutzer im Impersonation-Modus können keine sensiblen Aktionen ausführen (z. B. das Passwort ändern)
5

Supabase-Integration (Erweitert)

Kombiniere Clerk Auth mit einem Supabase-Backend.Supabase Clerk Pn
Warum mit Supabase integrieren?
  • Benutzerdaten in einer Datenbank speichern
  • Sichere Authentifizierung mit JWT-Token
  • Authentifizierung mit App-Funktionen verbinden
So gehst du bei der Integration vor:
1

Schritt 1

Gehe in Supabase zu Settings > API > JWT Secret (Dokumentation)Supabase Clerk Integrationsdokument PnSQL-Editor Supabase Pn
2

Schritt 2

In Clerk: JWT Templates > Add Supabase, füge das JWT-Secret einSupabase API-Schlüssel Clerk PnJWT-Vorlage Clerk PnJWT-Vorlagenkonfiguration Clerk Pn
3

Schritt 3

Aktiviere Clerk als AuthentifizierungsanbieterAktualisiere die RLS-Policies, um auth.uid() von Clerk zu verwendenGib Lovable folgende Eingabeaufforderung:
Lass uns Supabase so einrichten, dass es mit Clerk zusammenarbeitet. Clerk wurde bereits mit einem Supabase-Secret konfiguriert. Hier ist ein Beispiel dafür, wie du den Supabase-Client mit Clerk implementierst. Nutze dies als Referenz.[Import der Supabase-Clientkonfiguration]
4

Schritt 4

Überprüfe, ob von Clerk ausgestellte Token von Supabase akzeptiert werdenSupabase-Aufgabentabelle Pn
6

Benutzerdefinierte Domain hinzufügen (optional)

Warum eine benutzerdefinierte Domain verwenden?Steigert Markenbekanntheit und VertrauenMehr Informationen findest du hier.
1

Schritt 1

In Lovable: Projekt > Einstellungen > benutzerdefinierte Domain
2

Schritt 2

Gib deine erworbene Domain ein (z. B. app.yourcompany.com)
3

Schritt 3

Lovable konfiguriert DNS automatisch (du musst Lovable nicht verlassen)
4

Schritt 4

Stelle bereit und teste deine App mit der neuen Domain.
5

Schritt 5

Fertig ✅ — deine App ist jetzt als White-Label eingerichtet
7

Fazit & Nächste Schritte

Deine App hat jetzt:
  • Sichere Authentifizierung mit Clerk
  • Eine Warteliste, um frühe Nutzer zu sammeln
  • Funktionen für Benutzer- und Teamverwaltung
  • Supabase-Datenbankintegration
  • Eine professionelle benutzerdefinierte Domain

​
Bonus: Baue B2B-Features in wenigen Minuten

Clerk unterstützt:
  • Rollenbasierte Zugriffssteuerung für Organisationen
  • Einladungsflows (E-Mail-basiert, vorgefertigte UI)
  • Anpassung von Organisationsprofilen (Logo, Name)
  • Wechsel zwischen mehreren Organisationen (z. B. wie in Slack)
Bitte Lovable, Folgendes zu tun:
Füge eine UI für den Organisationswechsel hinzu
Lass Nutzer:innen Teammitglieder einladen

​
Tipps & Fehlerbehebung

  • Verwendest du bereits Supabase Auth? Du kannst zu Clerk wechseln, ohne die Logik deiner App umzuschreiben. Konfiguriere einfach JWT korrekt und wechsle den Auth-Anbieter.
  • E-Mail-Anpassung: Clerk ermöglicht dir, alle transaktionalen E-Mail-Vorlagen zu bearbeiten (Warteliste, Einladungen, Freigaben).
  • Mobiler Login: Clerk unterstützt Passkeys, OTP und SMS – im Dev-Modus ist keine zusätzliche Konfiguration erforderlich.
  • Compliance: Clerk ist SOC 2-, HIPAA- und DSGVO-konform.

​
Häufig gestellte Fragen (FAQ)

Ja. Clerk und Supabase funktionieren gut zusammen. Du musst nur:
  • Clerk so einrichten, dass JWTs ausgegeben werden
  • Das JWT-Secret von Supabase in Clerk hinzufügen
  • Die RLS-Richtlinien in Supabase aktualisieren, um Clerks auth.uid() zu verwenden
So kannst du Clerk mit minimalen Änderungen in eine bestehende, auf Supabase basierende App einbinden.
Nur für die Produktionsumgebung. Im Entwicklungsmodus stellt Clerk geteilte Testzugangsdaten bereit. Für die Produktion gilt:
  • Richte eigene Google-/GitHub-/etc.-Zugangsdaten ein
  • Füge sie in Clerk unter OAuth-Einstellungen hinzu
  • Users: Einzelpersonen, die sich bei deiner App anmelden können
  • Organizations: Gruppen von Nutzern (Teams, Unternehmen)
Verwende Organizations, wenn du Folgendes brauchst:
  • Rollenbasierten Zugriff (Admin, Member, etc.)
  • Nutzer sollen Teammitglieder einladen können
  • B2B-SaaS-typische Abläufe
Er ermöglicht Admins, sich als beliebiger Nutzer anzumelden – super hilfreich für:
  • Fehleranalyse bei Nutzerproblemen
  • Ein besseres Verständnis ihrer Nutzererfahrung
  • Direkten Live-Support
Clerk beschränkt, was Impersonators tun können (z. B. keine Passwortänderungen).
Ja. Clerk bietet:
  • Vollständige CSS-Unterstützung über appearance-Props
  • Die Möglichkeit, vollständig benutzerdefinierte UIs mit Clerk-React-Hooks zu bauen
Du kannst den Standard-Look beibehalten oder das Erscheinungsbild komplett an das Branding deiner App anpassen.
Aktuell:
  • Nutzer werden automatisch benachrichtigt, wenn sie von der Warteliste freigeschaltet werden
  • Unterstützung für Massen-E-Mails ist in Kürze verfügbar
Bis dahin: Exportiere die E-Mail-Adressen und nutze dein bevorzugtes E-Mail-Tool.
Ja! Clerk hat ein großzügiges kostenloses Kontingent:
  • Bis zu 10.000 Monthly Active Users (MAUs) (monatlich aktive Nutzer)
  • Kostenpflichtige Pläne starten bei $25/Monat, danach nutzungsbasierte Preise
Du kannst es in der Produktion einsetzen, ohne zu zahlen, bis du skalierst.
Ja. Clerk ist:
  • SOC 2 zertifiziert
  • HIPAA-konform
  • GDPR-ready
Ideal für Teams, die in regulierten Branchen entwickeln.
Bald verfügbar. Du wirst bald Folgendes tun können:
  • Pläne definieren (z. B. Free, Pro, Enterprise)
  • Nutzern/Organisationen ermöglichen, Abos über Clerks UI zu verwalten
  • Daten automatisch mit Stripe synchronisieren
Folge @clerkdev auf X für Updates.
Möchtest du eine Frage zu dieser FAQ hinzufügen? Sag uns auf Discord Bescheid!

​
Abschließende Gedanken

Clerk verwandelt Authentifizierung in eine Eingabeaufforderung. Du musst sie nicht mehr selbst entwickeln. Mit nur wenigen Klicks und Eingabeaufforderungen verfügt deine App jetzt über:
  • Sichere, skalierbare Authentifizierung
  • Team- und Organisationsverwaltung
  • Impersonation-Tools zum Debuggen
  • Supabase-basierte Daten- und Zugriffskontrolle
  • Unterstützung für benutzerdefinierte Domains und eine professionelle UX