08 · Module 3 — Stack moderne

Configurer Supabase

PostgreSQL hébergé, authentification intégrée,
stockage de fichiers. Le backend qui s'oublie.

11 minutesPostgreSQL hébergéAuth · RLS · Région UE

§01 · Supabase — c'est quoi exactement

Firebase open source, version PostgreSQL

Supabase est un Backend-as-a-Service open source. Il vous donne une base de données PostgreSQL hébergée, un service d'authentification, une API REST générée automatiquement, du stockage de fichiers, et des Edge Functions — le tout accessible via une interface claire et une SDK JavaScript.

Base de données

PostgreSQL complet

Pas un sous-ensemble limité. PostgreSQL complet, avec relations, triggers, fonctions, full-text search, et extensions.

Auth

Intégré

Email/mot de passe, magic links, OAuth (Google, GitHub, etc.). Gestion des sessions, tokens JWT. Prêt à l'emploi.

API auto

PostgREST

Une API REST est générée automatiquement depuis votre schéma de base. Pas de backend Express à écrire pour les CRUD de base.

Tarif

Gratuit jusqu'à 2 projets actifs

Le plan Free couvre largement le développement et les projets de taille modeste. Pas de carte bleue pour commencer.

§02 · Création du projet

Cinq minutes pour être prêt

1.

Créer un compte sur supabase.com. Connexion via GitHub recommandée — ça évite un compte de plus, et Supabase et GitHub sont déjà liés dans la plupart des stacks.

2.

Créer un nouveau projet. Cliquer sur New Project. Choisir un nom explicite (celui de votre projet de référence). Choisir la région Europe West (Frankfurt) pour la conformité RGPD. Définir un mot de passe de base de données fort — le noter soigneusement.

3.

Attendre la provision. L'initialisation prend 1 à 3 minutes. Supabase crée votre instance PostgreSQL, génère les clés, met en place PostgREST et les services Auth. Pas d'action requise.

4.

Récupérer les clés. Dans Settings → API : noter l'URL du projet et les deux clés (anon/public et service_role). Ces deux valeurs vont dans votre fichier .env local.

§03 · Clés anon vs service_role

La distinction critique

Supabase fournit deux clés. Confondre leur usage est une erreur de sécurité grave. Il faut comprendre la différence une fois pour toutes.

anon / public

Clé côté client

Exposable dans le navigateur. Permet l'accès à la base avec les politiques RLS appliquées. C'est la seule clé utilisée côté front.

service_role

Clé côté serveur

Bypass complet de RLS. Accès admin total à toutes les données. Ne jamais exposer côté client — ni dans le code front, ni dans le HTML.

En pratique

Dans le .env

NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=... (côté client)
SUPABASE_SERVICE_ROLE=... (côté serveur uniquement)

Règle absolue

service_role = serveur uniquement

Si vous voyez service_role dans du code React ou Vue, c'est une faille de sécurité critique. À corriger immédiatement.

§04 · Row Level Security (RLS)

La sécurité au niveau des données

Le RLS est la fonctionnalité de sécurité la plus importante de Supabase. Il définit, au niveau de la base de données, qui peut lire ou modifier quelle ligne. Même si quelqu'un exploite une faille de votre code, les données restent protégées.

1.

Activer RLS sur chaque table créée. Dans l'interface Supabase, Table Editor → sélectionner la table → activer Row Level Security. Par défaut, RLS activé = personne ne peut rien. Puis on ajoute des politiques.

2.

Créer des politiques de lecture. Exemple : « un utilisateur peut lire ses propres lignes ». Policy : auth.uid() = user_id. Supabase propose des templates pour les cas courants.

3.

Tester les politiques dans l'éditeur SQL de Supabase avant de connecter le front. Se connecter avec différents rôles et vérifier que les restrictions s'appliquent bien.

§05 · Connexion depuis le code

SDK JavaScript en deux lignes

# 1. Installer le SDK
$ npm install @supabase/supabase-js

// 2. Initialiser le client (fichier lib/supabase.js)
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)

export default supabase

// 3. Exemple de requête
const { data, error } = await supabase
  .from('missions')
  .select('*')
  .eq('user_id', userId)

Claude Code et Supabase

Une fois le client initialisé, vous pouvez demander à Claude Code de générer des requêtes Supabase à partir de descriptions en français. « Écris une fonction qui récupère toutes les missions actives de l'utilisateur connecté, triées par date décroissante. » Claude connaît l'API Supabase JS et génère du code correct dans la grande majorité des cas.

§06 · Tâches courantes avec Claude

Ce que Claude fait très bien sur Supabase

Schéma

Génération de tables

Décrivez votre schéma en français, Claude écrit le SQL CREATE TABLE avec les types, contraintes, clés étrangères, index.

Requêtes

Filtres et jointures complexes

Les requêtes Supabase JS avec .select(), .filter(), .join() peuvent devenir complexes. Claude les génère à partir d'une description métier.

RLS

Politiques de sécurité

Décrivez la règle métier (un manager peut voir les missions de son équipe), Claude écrit la politique RLS correspondante.

Migrations

Évolutions du schéma

Ajouter une colonne, renommer une table, gérer les données existantes. Claude écrit la migration SQL et la procédure de rollback.

Fin · Leçon 08 acquise

Cap sur la leçon 09

Votre backend Supabase est prêt. La leçon suivante installe shadcn-ui pour construire des interfaces professionnelles sans partir de zéro.

Exercice — appropriation

Créez votre projet Supabase en région Frankfurt. Récupérez les deux clés (anon et service_role) et placez-les dans votre fichier .env. Créez une première table correspondant à votre projet de référence en activant RLS dessus. Connectez le SDK JavaScript et vérifiez la connexion avec une requête simple.

Quiz · Validation des acquis

Quiz · Configurer Supabase

8 questions · une seule bonne réponse par question · vous pouvez recommencer autant de fois que nécessaire.

1 / 8

Question à choix multiple