Configuration de Supabase
Configurez votre projet Supabase — base de données, fournisseurs d'authentification, stockage et Row Level Security.
Configuration de Supabase
Supabase est le backend de ScaleRocket. Il gère votre base de données (PostgreSQL), l'authentification, le stockage de fichiers et les Edge Functions.
Créer un projet Supabase
- Allez sur supabase.com/dashboard
- Cliquez sur New project
- Remplissez :
- Name — le nom de votre projet
- Database password — sauvegardez-le dans un endroit sûr
- Region — choisissez la plus proche de vos utilisateurs
- Attendez que le provisionnement soit terminé
Obtenir vos clés API
Allez dans Settings > API dans votre tableau de bord Supabase. Vous avez besoin de trois valeurs :
| Clé | Où l'utiliser | Exposée au client ? |
|---|---|---|
| Project URL | Toutes les applications | Oui |
| anon public key | Toutes les applications | Oui (sans danger à exposer) |
| service_role key | Edge Functions, côté serveur uniquement | Non (gardez-la secrète) |
# apps/app/.env.local
VITE_SUPABASE_URL=https://abcdefg.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...Note : La clé
anonest sans danger pour le client. Elle fonctionne avec Row Level Security pour restreindre l'accès. La cléservice_rolecontourne le RLS — ne l'exposez jamais au navigateur.
Schéma de base de données
ScaleRocket inclut des migrations dans supabase/migrations/ qui créent les tables suivantes :
| Table | Fonction |
|---|---|
profiles | Données de profil utilisateur (liées à auth.users) |
subscriptions | État de l'abonnement Stripe par utilisateur |
credits | Solde de crédits et suivi d'utilisation |
products | Produits Stripe synchronisés |
prices | Prix Stripe synchronisés |
blog_posts | Contenu de blog géré depuis le panneau d'administration |
Pousser les migrations
Liez votre projet et poussez le schéma :
# Login to Supabase CLI
npx supabase login
# Link to your project (find ref in dashboard URL)
npx supabase link --project-ref your-project-ref
# Push all migrations
npx supabase db pushCréer une nouvelle migration
Quand vous devez modifier le schéma :
npx supabase migration new my_migration_nameCela crée un nouveau fichier dans supabase/migrations/. Écrivez votre SQL, puis poussez :
npx supabase db pushConfigurer les fournisseurs d'authentification
ScaleRocket supporte email/mot de passe, Google et GitHub en natif.
Google OAuth
- Allez sur Google Cloud Console
- Créez un nouveau projet (ou utilisez-en un existant)
- Allez dans APIs & Services > Credentials
- Créez un OAuth 2.0 Client ID (Web application)
- Ajoutez l'URI de redirection autorisée :
https://your-project-ref.supabase.co/auth/v1/callback - Copiez le Client ID et le Client Secret
- Dans le tableau de bord Supabase, allez dans Authentication > Providers > Google
- Activez-le, collez le Client ID et le Secret, et sauvegardez
GitHub OAuth
- Allez dans les GitHub Developer Settings
- Cliquez sur New OAuth App
- Définissez l'URL de callback d'autorisation :
https://your-project-ref.supabase.co/auth/v1/callback - Copiez le Client ID et le Client Secret
- Dans le tableau de bord Supabase, allez dans Authentication > Providers > GitHub
- Activez-le, collez le Client ID et le Secret, et sauvegardez
Paramètres email
Dans le tableau de bord Supabase sous Authentication > Email Templates, vous pouvez personnaliser :
- L'email de confirmation
- L'email de réinitialisation de mot de passe
- L'email de lien magique
Note : Pour la production, configurez un serveur SMTP personnalisé sous Settings > Authentication > SMTP Settings pour que les emails proviennent de votre domaine au lieu de celui par défaut de Supabase.
Buckets de stockage
ScaleRocket utilise Supabase Storage pour les fichiers téléversés par les utilisateurs (avatars, pièces jointes, etc.).
Créer un bucket
- Allez dans Storage dans le tableau de bord Supabase
- Cliquez sur New bucket
- Nommez-le (ex.
avatars) - Choisissez Public ou Private selon vos besoins
Politiques de stockage
Pour un bucket d'avatars public, créez une politique qui permet aux utilisateurs authentifiés de téléverser :
-- Allow authenticated users to upload their own avatar
CREATE POLICY "Users can upload own avatar"
ON storage.objects FOR INSERT
TO authenticated
WITH CHECK (
bucket_id = 'avatars' AND
auth.uid()::text = (storage.foldername(name))[1]
);
-- Allow anyone to view avatars
CREATE POLICY "Public avatar access"
ON storage.objects FOR SELECT
TO public
USING (bucket_id = 'avatars');Téléverser depuis le client
// apps/app/src/lib/storage.ts
import { supabase } from "./supabase";
export async function uploadAvatar(userId: string, file: File) {
const filePath = `${userId}/${file.name}`;
const { data, error } = await supabase.storage
.from("avatars")
.upload(filePath, file, { upsert: true });
if (error) throw error;
return data.path;
}Row Level Security
Toutes les tables ScaleRocket ont le RLS activé par défaut. Cela signifie :
- La clé
anonne peut accéder à aucune donnée sauf si une politique l'autorise explicitement - Chaque utilisateur ne peut lire/écrire que ses propres données
- La clé
service_rolecontourne le RLS (à utiliser uniquement dans les Edge Functions)
Exemple de politique RLS pour la table profiles :
-- Users can read their own profile
CREATE POLICY "Users can view own profile"
ON public.profiles FOR SELECT
USING (auth.uid() = id);
-- Users can update their own profile
CREATE POLICY "Users can update own profile"
ON public.profiles FOR UPDATE
USING (auth.uid() = id);Prochaines étapes
- Configurer Stripe pour les paiements
- Mettre en place les flux d'authentification dans le tableau de bord
- Créer des Edge Functions pour votre API
Fini ? Marquez cette page comme terminée.