Tutorials

Tutorial: Supabase mit Lovable AI verbinden (Guide 2025)

Melden

Hier ist ein aktuelles Tutorial für das Jahr 2025, wie du Supabase (dein Backend) mit Lovable (deinem AI-App-Builder, ehemals GPT Engineer) verbindest.

In diesem Guide lernst du, wie du die Power von Lovable AI für das Frontend mit der Skalierbarkeit von Supabase für die Datenbank und Authentifizierung kombinierst.

Einleitung

Lovable (lovable.dev) hat sich 2025 als eines der führenden Tools für KI-generierte Full-Stack-Anwendungen etabliert. Damit deine App Daten dauerhaft speichern und Benutzer einloggen kann, benötigst du ein Backend. Supabase ist hierfür die Standardlösung.

Schritt 1: Supabase-Projekt erstellen

Bevor du in Lovable startest, benötigst du ein aktives Supabase-Projekt.

  1. Gehe auf supabase.com und logge dich ein.
  2. Klicke auf "New Project".
  3. Wähle einen Namen, ein sicheres Datenbank-Passwort und eine Region (z. B. Frankfurt für Deutschland).
  4. Warte ca. 1–2 Minuten, bis die Datenbank bereitgestellt wurde.

Schritt 2: API-Zugangsdaten finden

Um die Verbindung herzustellen, benötigt Lovable zwei spezifische Informationen:

  1. Gehe in deinem Supabase-Dashboard auf Project Settings (das Zahnrad-Icon unten links).
  2. Klicke auf den Reiter API.
  3. Kopiere dir folgende Werte:
    • Project URL (z. B. https://xyz.supabase.co)
    • API Key (anon/public) (Der öffentliche Schlüssel)

Schritt 3: Verbindung in Lovable herstellen

Lovable macht die Integration im Jahr 2025 extrem einfach durch ein dediziertes Integrations-Panel.

  1. Öffne dein Projekt in Lovable.
  2. Klicke in der rechten Seitenleiste oder im oberen Menü auf das Supabase-Icon (oder auf "Integrations").
  3. Es öffnet sich ein Fenster mit zwei Optionen:
    • Option A (Automatisch): Klicke auf "Connect to Supabase". Du wirst weitergeleitet, um Lovable Zugriff auf deine Supabase-Organisation zu geben. Dies ist der empfohlene Weg.
    • Option B (Manuell): Gib die URL und den anon key aus Schritt 2 manuell in die Felder ein.
  4. Klicke auf "Connect" oder "Save Keys".

Schritt 4: Datenbank-Schema mit der KI erstellen

Jetzt kommt die Magie von Lovable: Du musst SQL nicht mehr zwingend selbst schreiben.

  1. Nutze den Chat in Lovable und schreibe:

    "Erstelle eine Tabelle 'profiles' in Supabase mit den Feldern ID, Username und Bio. Verbinde sie mit der Supabase-Auth."

  2. Lovable generiert nun die notwendigen SQL-Befehle (Migrations).
  3. Du wirst oft gefragt, ob Lovable die Änderungen direkt in Supabase ausführen darf. Bestätige dies.
  4. Kontrolle: Gehe zurück zu deinem Supabase-Dashboard in den Table Editor. Du wirst sehen, dass die Tabelle automatisch erstellt wurde.

Schritt 5: Authentifizierung (Login/Signup) aktivieren

Damit deine Nutzer sich einloggen können:

  1. Gehe in Supabase zu Authentication -> Providers.
  2. Stelle sicher, dass "Email" aktiviert ist (standardmäßig an).
  3. In Lovable kannst du nun einfach sagen: "Füge eine Login-Seite mit Supabase Auth hinzu."
  4. Lovable erstellt automatisch die Komponenten für Login, Registrierung und Logout.

Profi-Tipps für 2025

1. Row Level Security (RLS)

Supabase schützt deine Daten standardmäßig. Wenn deine App keine Daten anzeigt, liegt es meist daran, dass die RLS-Policies fehlen.

  • Lösung: Sage Lovable: "Erstelle eine RLS-Policy, damit Nutzer nur ihre eigenen Profil-Daten lesen und schreiben können."

2. Edge Functions

Wenn du komplexe Logik (wie Stripe-Zahlungen) benötigst, kannst du Lovable bitten, eine Supabase Edge Function zu schreiben. Lovable generiert den TypeScript-Code, den du in Supabase unter "Edge Functions" einfügen kannst.

3. Sync-Check

Solltest du manuelle Änderungen in der Supabase-Datenbank vornehmen, klicke in Lovable auf den Button "Resync Database Schema", damit die KI weiß, welche Tabellen aktuell existieren.

Fehlerbehebung (Troubleshooting)

  • Fehler: "Supabase key not found"
    • Lösung: Prüfe in Lovable unter den "Environment Variables", ob VITE_SUPABASE_URL und VITE_SUPABASE_ANON_KEY korrekt gesetzt sind.
  • Fehler: "CORS Error"
    • Lösung: In der Regel erkennt Lovable die lokale Preview-URL automatisch. Falls nicht, füge die URL deiner App in Supabase unter Authentication -> URL Configuration hinzu.

Fazit

Die Verbindung zwischen Lovable und Supabase ist im Jahr 2025 die schnellste Methode, um eine produktionsreife App zu bauen. Während Lovable das "Auge" (UI) deiner App ist, bildet Supabase das "Gedächtnis" (Daten).

Viel Erfolg beim Bauen!

0