ScaleRocket/Web

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

  1. Allez sur supabase.com/dashboard
  2. Cliquez sur New project
  3. Remplissez :
    • Name — le nom de votre projet
    • Database password — sauvegardez-le dans un endroit sûr
    • Region — choisissez la plus proche de vos utilisateurs
  4. 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'utiliserExposée au client ?
Project URLToutes les applicationsOui
anon public keyToutes les applicationsOui (sans danger à exposer)
service_role keyEdge Functions, côté serveur uniquementNon (gardez-la secrète)
# apps/app/.env.local
VITE_SUPABASE_URL=https://abcdefg.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Note : La clé anon est sans danger pour le client. Elle fonctionne avec Row Level Security pour restreindre l'accès. La clé service_role contourne 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 :

TableFonction
profilesDonnées de profil utilisateur (liées à auth.users)
subscriptionsÉtat de l'abonnement Stripe par utilisateur
creditsSolde de crédits et suivi d'utilisation
productsProduits Stripe synchronisés
pricesPrix Stripe synchronisés
blog_postsContenu 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 push

Créer une nouvelle migration

Quand vous devez modifier le schéma :

npx supabase migration new my_migration_name

Cela crée un nouveau fichier dans supabase/migrations/. Écrivez votre SQL, puis poussez :

npx supabase db push

Configurer les fournisseurs d'authentification

ScaleRocket supporte email/mot de passe, Google et GitHub en natif.

Google OAuth

  1. Allez sur Google Cloud Console
  2. Créez un nouveau projet (ou utilisez-en un existant)
  3. Allez dans APIs & Services > Credentials
  4. Créez un OAuth 2.0 Client ID (Web application)
  5. Ajoutez l'URI de redirection autorisée :
    https://your-project-ref.supabase.co/auth/v1/callback
  6. Copiez le Client ID et le Client Secret
  7. Dans le tableau de bord Supabase, allez dans Authentication > Providers > Google
  8. Activez-le, collez le Client ID et le Secret, et sauvegardez

GitHub OAuth

  1. Allez dans les GitHub Developer Settings
  2. Cliquez sur New OAuth App
  3. Définissez l'URL de callback d'autorisation :
    https://your-project-ref.supabase.co/auth/v1/callback
  4. Copiez le Client ID et le Client Secret
  5. Dans le tableau de bord Supabase, allez dans Authentication > Providers > GitHub
  6. 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

  1. Allez dans Storage dans le tableau de bord Supabase
  2. Cliquez sur New bucket
  3. Nommez-le (ex. avatars)
  4. 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é anon ne 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_role contourne 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

Fini ? Marquez cette page comme terminée.

On this page