Integrera Webflow + Supabase
Webflow och Supabase bildar en kraftfull kombination i no-code-ekosystemet. App Studio har konfigurerat den här integrationen för dussintals kunder, här är vår kompletta guide för att sätta upp den snabbt och korrekt.
Varför Webflow + Supabase?
Webflow är förstahandsvalet för marknadsföringssajter och redaktionellt innehåll, men dess CMS är skrivskyddat ur användarens perspektiv. Supabase lägger till användarkonton, skrivbar data och realtidsfunktioner i Webflow utan att ni behöver migrera hela sajten. Kombinationen är idealisk för: innehåll bakom autentisering, användardashboards inbäddade på en Webflow-sida, väntelistor eller ansökningsformulär som lagrar strukturerad data, samt medlemsavdelningar på en i övrigt publik sajt.
Konfigurera integrationen
Lägg till Supabases JavaScript-bibliotek i Webflow via en anpassad kodinbäddning eller en CDN-script-tagg i sidans head. Initiera Supabase-klienten med er projekt-URL och anon-nyckel. I Webflows panel för anpassad kod skriver ni JavaScript som hanterar registrering, inloggning och utloggning med supabase.auth-metoder. Efter autentisering använder ni supabase.from(“tableName”).select() för att hämta användarspecifik data och injicera den i Webflows DOM med vanlig JavaScript.
Autentisering och skyddat innehåll
Supabase-autentisering i Webflow följer detta mönster: inloggningsformuläret skickas till en JavaScript-hanterare som anropar supabase.auth.signInWithPassword(); vid lyckad inloggning sparas sessionstoken och användaren omdirigeras till den skyddade sidan; på den skyddade sidan kontrolleras supabase.auth.getSession() vid inladdning, finns ingen session omdirigeras användaren till inloggningssidan; användarens data hämtas från Supabase och fyller i Webflow-element med document.querySelector(). Använd Webflows CSS-klass för synlighet för att dölja innehåll tills det är ifyllt.
Verkliga användningsfall
Webflow + Supabase används för: SaaS-marknadsföringssajter med ett inbyggt onboarding-flöde, kreatörsplattformar med medlemsexklusivt innehåll, jobbsajter där arbetsgivare lägger upp annonser (lagrade i Supabase) och sökande ansöker (data skrivs till Supabase), samt e-lärandesajter där elever spårar sina framsteg lagrade i Supabase. App Studio använder den här kombinationen för kunder som vill ha Webflows designflexibilitet tillsammans med riktig applikationsfunktionalitet.
Vanliga fallgropar
JavaScript-baserad autentisering i Webflow innebär att innehåll syns kortvarigt innan autentiseringskontrollen körs, använd CSS för att dölja skyddade sektioner till en början och visa dem först när autentiseringen är bekräftad. Exponera aldrig er Supabase service role-nyckel i Webflow, använd anon-nyckeln och förlita er på RLS. Webflows designer visar inte dynamisk Supabase-data i editorn, förhandsgranska alltid på den publicerade sajten eller i staging. Komplexa Webflow + Supabase-appar kan växa ur den här ansatsen; överväg att migrera till WeWeb eller ett anpassat ramverk när ni behöver mer än cirka 10 Supabase-interaktioner per sida.
- Gated content
- Member portals
- Job boards
- SaaS landing + onboarding
- User dashboards on marketing sites
Behöver du hjälp med den här integrationen?
App Studio konfigurerar dessa integrationer åt dig. Kostnadsfri offert inom 48h.