Intégrer Webflow + Supabase
Webflow et Supabase forment une combinaison puissante dans l'écosystème no-code. App Studio a configuré cette intégration pour des dizaines de clients, voici notre guide complet pour la mettre en place rapidement et correctement.
Pourquoi Webflow + Supabase ?
Webflow est la référence pour les sites marketing et le contenu éditorial, mais son CMS est en lecture seule du point de vue de l'utilisateur. Supabase ajoute des comptes utilisateur, des données modifiables, et des fonctionnalités temps réel à Webflow sans migrer tout le site. La combinaison est idéale pour : du contenu réservé derrière une authentification, des tableaux de bord utilisateur intégrés dans une page Webflow, des formulaires de liste d'attente ou de candidature qui stockent des données structurées, et des sections réservées aux membres sur un site par ailleurs public.
Configurer l'intégration
Ajoutez la bibliothèque JavaScript de Supabase à Webflow via un embed de code personnalisé ou une balise script CDN dans le head de la page. Initialisez le client Supabase avec l'URL de votre projet et la clé anon. Dans le panneau de code personnalisé de Webflow, écrivez le JavaScript qui gère l'inscription, la connexion, et la déconnexion via les méthodes de supabase.auth. Après authentification, utilisez supabase.from("tableName").select() pour récupérer les données propres à l'utilisateur et les injecter dans le DOM de Webflow avec du JavaScript standard. L'authentification Supabase dans Webflow suit ce schéma : le formulaire de connexion soumet à un gestionnaire JavaScript qui appelle supabase.auth.signInWithPassword() ; en cas de succès, le token de session est stocké et l'utilisateur est redirigé vers la page protégée ; sur la page protégée, supabase.auth.getSession() est vérifié au chargement, en l'absence de session l'utilisateur est redirigé vers la page de connexion ; les données de l'utilisateur sont récupérées depuis Supabase et injectées dans les éléments Webflow via document.querySelector(). Utilisez la classe CSS «visibility» de Webflow pour masquer le contenu jusqu'à ce qu'il soit rempli.
Cas d'usage concrets
Webflow + Supabase est utilisé pour : des sites marketing SaaS avec un flux d'onboarding intégré, des plateformes de créateurs avec du contenu réservé aux membres, des job boards où les employeurs publient des offres (stockées dans Supabase) et les candidats postulent (données écrites dans Supabase), et des sites e-learning où les apprenants suivent leur progression stockée dans Supabase. App Studio utilise cette combinaison pour les clients qui veulent la flexibilité de design de Webflow avec de vraies capacités applicatives.
Bonnes pratiques
L'authentification en JavaScript dans Webflow signifie que le contenu est visible brièvement avant que la vérification d'authentification ne s'exécute, utilisez du CSS pour masquer initialement les sections protégées et ne les afficher qu'une fois l'authentification confirmée. N'exposez jamais votre clé service role Supabase dans Webflow, utilisez la clé anon et appuyez-vous sur le RLS. Le designer de Webflow n'affiche pas les données Supabase dynamiques dans l'éditeur, prévisualisez toujours sur le site publié ou en staging. Les applications Webflow + Supabase complexes peuvent dépasser cette approche, envisagez de migrer vers WeWeb ou un framework sur mesure quand vous dépassez environ 10 interactions Supabase par page.
- Gated content
- Member portals
- Job boards
- SaaS landing + onboarding
- User dashboards on marketing sites
Besoin d'aide pour cette intégration ?
App Studio configure ces intégrations pour vous. Devis gratuit sous 48h.