Schritt 1: Supabase-Projekt erstellen

Gehe zu supabase.com und erstelle ein neues Projekt. Wähle die Region "Frankfurt (EU Central 1)" für DSGVO-Konformität — deine Daten bleiben in Deutschland und der EU.

Gib deinem Projekt einen aussagekräftigen Namen (z.B. "mein-saas-produkt") und wähle ein sicheres Datenbankpasswort. Bewahre das Passwort sicher auf — du benötigst es für Direktverbindungen.

Nach der Erstellung findest du in den Projekteinstellungen deine Project URL und den anon key. Diese beiden Werte brauchst du für die WeWeb-Verbindung. Die Project URL sieht so aus: https://[deine-id].supabase.co.

Schritt 2: Datenbanktabellen anlegen

In Supabase öffnest du den Table Editor und erstellst deine erste Tabelle. Für ein einfaches Task-Management-System: Tabelle "tasks" mit Spalten: id (int8, primary key, auto-increment), title (text, not null), description (text), status (text, default "pending"), user_id (uuid, foreign key zu auth.users), created_at (timestamptz, default now()).

Aktiviere Row Level Security: ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

Erstelle eine Policy, die Nutzer nur ihre eigenen Tasks sehen lässt: CREATE POLICY "Users see own tasks" ON tasks USING (user_id = auth.uid());

Das sind die einzigen SQL-Befehle, die du ausführen musst. Alles andere passiert visuell in WeWeb.

Schritt 3: WeWeb mit Supabase verbinden

In WeWeb öffnest du die Plugin-Sektion und fügst die Supabase-Integration hinzu. Füge deine Project URL und den anon key ein — WeWeb erkennt automatisch alle deine Tabellen und Spalten.

In der Sektion "Data Sources" erstellst du eine neue Collection namens "tasks". WeWeb generiert automatisch alle CRUD-Operationen: fetchAll, fetchById, create, update, delete. Du musst keine API-Aufrufe manuell konfigurieren.

Für Auth: Aktiviere das Supabase Auth-Plugin in WeWeb. Dadurch werden automatisch Registrierungs- und Login-Seiten verfügbar, und alle nachfolgenden API-Aufrufe werden mit dem Nutzer-Token authentifiziert.

Schritt 4: CRUD-UI bauen

Erstelle eine Seite "Dashboard" mit einer Liste aller Tasks. Ziehe eine "Repeater"-Komponente auf die Seite und binde sie an die "tasks"-Collection. Konfiguriere jedes Element der Liste so, dass es title und status des Tasks anzeigt.

Füge einen "Neuer Task"-Button hinzu, der ein Modal öffnet. Im Modal: ein Textfeld für den Titel, ein Textarea für die Beschreibung und ein "Speichern"-Button. Beim Klick auf Speichern wird die "create"-Aktion der tasks-Collection mit den Formularwerten aufgerufen.

Für Statusänderungen: Füge ein Dropdown zu jedem Task-Element hinzu mit den Optionen "pending", "in_progress", "done". Beim Ändern wird automatisch die "update"-Aktion aufgerufen. Keine Zeile Code.

Schritt 5: Authentifizierung implementieren

WeWebs Supabase Auth-Plugin übernimmt den gesamten Auth-Flow. Erstelle Seiten für Login und Registrierung — WeWeb hat vorgefertigte Auth-Seitenvorlagen, die du in Minuten anpassen kannst.

Für die Weiterleitung: Konfiguriere in WeWeb, dass nicht-authentifizierte Nutzer zur Login-Seite weitergeleitet werden. Das passiert über die "Page Access" Einstellungen in jedem Seitenmenü — kein Code erforderlich.

Nach dem Login ist der Nutzer-Token automatisch in allen Supabase-Anfragen vorhanden. Deine RLS-Policy (user_id = auth.uid()) filtert automatisch alle Datenbankabfragen für den eingeloggten Nutzer. Jeder Nutzer sieht nur seine eigenen Tasks — aus der Box heraus.

Schritt 6: Deployment und Domain

In WeWeb klicke auf "Publish". WeWeb deployed deine App auf ihr CDN. Für eine benutzerdefinierte Domain: Gehe zu WeWeb-Einstellungen, füge deine Domain hinzu, und konfiguriere den CNAME-Eintrag bei deinem Domain-Registrar.

Für deutsche Nutzer: Registriere eine .de-Domain bei DENIC-Registraren wie IONOS, Strato oder 1&1. Eine .de-Domain kostet ca. 12 EUR/Jahr und signalisiert Vertrauen bei deutschen Nutzern.

Nach dem Deployment ist deine App unter deiner benutzerdefinierten Domain erreichbar, SSL ist automatisch konfiguriert, und die App wird weltweit über Cloudflares CDN schnell ausgeliefert. Die gesamte Infrastruktur — WeWeb CDN + Supabase Frankfurt — ist DSGVO-konform. Mehr über die <a href="/tools/weweb">Möglichkeiten von WeWeb.</a>