Webflow + Supabase integrieren
Webflow und Supabase bilden eine leistungsstarke Kombination im No-Code-Ökosystem. App Studio hat diese Integration für Dutzende von Kunden konfiguriert, hier ist unser vollständiger Leitfaden.
Wie Webflow + Supabase funktioniert
Webflow ist der Goldstandard für Marketing-Websites und redaktionelle Inhalte, doch dessen CMS ist aus Nutzersicht nur lesbar. Supabase ergänzt Webflow um Nutzerkonten, beschreibbare Daten und Echtzeit-Features, ohne die gesamte Website migrieren zu müssen. Die Kombination eignet sich ideal für: durch Authentifizierung geschützte Inhalte, in eine Webflow-Seite eingebettete Nutzer-Dashboards, Warteliste- oder Bewerbungsformulare, die strukturierte Daten speichern, und Mitglieder-Bereiche innerhalb einer ansonsten öffentlichen Website. Dazu wird Supabases JavaScript-Bibliothek über ein Custom Code Embed oder ein CDN-Script-Tag im Head der Seite eingebunden. Der Supabase-Client wird mit Projekt-URL und Anon Key initialisiert. Im Custom-Code-Panel von Webflow wird JavaScript geschrieben, das Registrierung, Anmeldung und Abmeldung über die supabase.auth-Methoden abwickelt. Nach der Authentifizierung wird mit supabase.from("tableName").select() nutzerspezifische Daten abgerufen und über gewöhnliches JavaScript in das Webflow-DOM eingefügt.
Anwendungsfälle für Webflow + Supabase
Supabase-Auth folgt in Webflow diesem Muster: Das Login-Formular sendet an einen JavaScript-Handler, der supabase.auth.signInWithPassword() aufruft; bei Erfolg wird das Session-Token gespeichert und zur geschützten Seite weitergeleitet; auf der geschützten Seite wird beim Laden supabase.auth.getSession() geprüft, gibt es keine Session, erfolgt eine Weiterleitung zur Login-Seite; die Nutzerdaten werden aus Supabase abgerufen und über document.querySelector() in Webflow-Elemente eingefügt. Webflows CSS-Klasse visibility eignet sich, um Inhalte zu verstecken, bis sie befüllt sind. Webflow + Supabase wird eingesetzt für: SaaS-Marketing-Websites mit integriertem Onboarding-Ablauf, Creator-Plattformen mit Mitglieder-exklusiven Inhalten, Jobbörsen, bei denen Arbeitgeber Stellen einstellen (in Supabase gespeichert) und Bewerber sich bewerben (Daten werden in Supabase geschrieben), und E-Learning-Seiten, auf denen Lernende ihren in Supabase gespeicherten Fortschritt verfolgen. App Studio nutzt diese Kombination für Kunden, die Webflows gestalterische Flexibilität mit echten Anwendungsfunktionen verbinden möchten.
Häufige Probleme und deren Lösung
Da die Auth in Webflow JavaScript-basiert läuft, sind Inhalte kurz sichtbar, bevor die Auth-Prüfung greift, geschützte Bereiche sollten deshalb per CSS zunächst versteckt und erst nach bestätigter Authentifizierung eingeblendet werden. Der Supabase Service Role Key sollte niemals in Webflow offengelegt werden, stattdessen der Anon Key verwendet und auf RLS gesetzt werden. Webflows Designer zeigt dynamische Supabase-Daten nicht im Editor an, eine Vorschau sollte immer auf der veröffentlichten Seite oder Staging-Site erfolgen. Komplexere Webflow + Supabase Apps können diesen Ansatz überfordern, ab mehr als etwa 10 Supabase-Interaktionen pro Seite lohnt sich eine Migration zu WeWeb oder einem eigenen Framework.
- Gated content
- Member portals
- Job boards
- SaaS landing + onboarding
- User dashboards on marketing sites
Benötigen Sie Hilfe bei dieser Integration?
App Studio konfiguriert diese Integrationen für Sie. Kostenloses Angebot innerhalb von 48h.