Étape 1 : Configurer votre projet Supabase
Rendez-vous sur supabase.com et créez un nouveau projet. Choisissez une région proche de vos utilisateurs (EU West — Paris ou Francfort — pour les applications à destination du marché français, pour la conformité RGPD).
Créez votre première table dans l'éditeur de tables Supabase. Pour une application de gestion de tâches, créez une table tasks avec les colonnes id, title, status, user_id et created_at. Activez ensuite Row-Level Security et ajoutez une politique qui garantit que les utilisateurs ne voient que leurs propres tâches.
Ce schéma de base peut être mis en place en moins de 10 minutes — c'est l'un des grands avantages de Supabase.
Étape 2 : Connecter Supabase à WeWeb
Dans WeWeb, allez dans Plugins → Sources de données → Supabase. Entrez l'URL de votre projet Supabase et la clé anon (toutes deux dans les paramètres de votre projet Supabase → API).
WeWeb détectera automatiquement vos tables et générera des sources de données typées. Vous verrez une collection "tasks" dans votre panneau de données WeWeb — prête à être liée aux composants UI.
Cette détection automatique fait gagner des heures de configuration manuelle. En quelques clics, vous avez une connexion bidirectionnelle avec votre base de données PostgreSQL.
Étape 3 : Construire le flux d'authentification
Dans WeWeb, créez une page de connexion avec un champ email et mot de passe, connectée au plugin Supabase Auth de WeWeb. Utilisez l'action "Se connecter avec email/mot de passe" sur le bouton de connexion.
Protégez les pages de votre application avec les conditions d'accès aux pages de WeWeb : "Rediriger vers /login si l'utilisateur n'est pas authentifié." Cette vérification côté client + RLS de Supabase vous donne une défense en profondeur.
WeWeb gère automatiquement la persistance du token et le rafraîchissement de session — vous n'avez pas à vous en préoccuper.
Étape 4 : Lier les données aux composants UI
Créez un composant liste dans WeWeb et liez-le à votre collection tasks. Définissez le filtre de collection pour qu'il passe automatiquement le JWT de l'utilisateur courant — le plugin Supabase de WeWeb gère cela automatiquement.
Pour chaque élément de liste, liez le titre de la tâche à un élément texte, et le statut à un badge avec un style de couleur conditionnel : vert pour "terminé", bleu pour "en cours", gris pour "à faire".
Cette liaison déclarative entre données et UI est l'une des forces de WeWeb — pas de code JavaScript nécessaire pour des cas d'usage standards.
Étapes 5 et 6 : Opérations CRUD et temps réel
Le plugin Supabase de WeWeb expose des actions d'insertion, mise à jour et suppression. Câblez-les à : un bouton "Nouvelle tâche" qui ouvre un formulaire modal, un menu déroulant de statut inline qui appelle la mise à jour, et un bouton supprimer qui appelle la suppression après une boîte de dialogue de confirmation.
Toutes les opérations respectent RLS — les utilisateurs ne peuvent modifier que leurs propres lignes.
Activez Supabase Realtime dans les paramètres de votre projet. Dans WeWeb, ajoutez une souscription Realtime à votre collection tasks. Maintenant, quand une tâche change (depuis n'importe quel appareil ou onglet), votre UI WeWeb se met à jour automatiquement. C'est la collaboration en direct sans une seule ligne de code WebSocket.
Étape 7 : Déployer en production
Dans WeWeb, cliquez sur "Publier" → entrez votre domaine personnalisé. WeWeb déploie votre application sur un CDN mondial avec HTTPS. Mettez à jour les enregistrements DNS de votre domaine pour pointer vers le CDN de WeWeb.
Votre base de données Supabase est déjà hébergée en production. Vous disposez maintenant d'une application full-stack complète et scalable — avec un domaine personnalisé, l'authentification, les données en temps réel, et zéro gestion de serveur.
Pour les projets en France, nous recommandons d'utiliser un domaine .fr ou .com avec un certificat SSL valide, et de configurer la région Supabase en EU West pour la conformité RGPD. Votre application est prête à accueillir vos premiers utilisateurs.