YOAT Lab
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 · Démo — récupérer ses clés API

Deux clés, deux usages

1

Settings → API

Dans le dashboard Supabase, menu Settings, sous-menu API. Toutes les credentials sont là.

2

Project URL

L'URL publique de votre projet. Pas secrète, peut aller dans le client.

3

anon · public (verte)

Clé navigateur. Respecte les politiques RLS. NEXT_PUBLIC_SUPABASE_ANON_KEY.

4

service_role (rouge)

Contourne TOUT. Jamais côté client. Serveur uniquement. SUPABASE_SERVICE_ROLE_KEY.

app.supabase.com/project/xkv... ⚡ Supabase PROJECT ⊞ Dashboard ▷ Table Editor ◇ SQL Editor 🗄 Database 🔐 Authentication 🗂 Storage SETTINGS ⚙ API 📊 Database 🌐 General Project API Use these credentials to connect to your Supabase project. PROJECT URL https://xkvqr8tnv2zwx0sp4lyu.supabase.co 📋 Copy PROJECT API KEYS ✓ anon · public SAFE Cette clé est destinée à être utilisée dans un contexte navigateur. Respecte les politiques RLS (Row Level Security) configurées. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdXBhYmFzZSI6...truncated ⚠ service_role · secret DANGER ⚠ Cette clé contourne TOUTES les politiques RLS. Accès complet à la base. À utiliser UNIQUEMENT côté serveur. Jamais dans du code navigateur. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdXBhYmFzZSI6...HIDDEN 👁 Reveal 💡 Dans votre .env.local NEXT_PUBLIC_SUPABASE_URL=https://xkv... NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ... SUPABASE_SERVICE_ROLE_KEY=eyJ...
§05 · 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.
§06 · 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.

§07 · 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.

Leçon suivante → 09 · Interface Pro avec shadcn-ui
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

Qu'est-ce que Supabase ?

Score : 0 / 8
Cliquez sur lecture pour démarrer.
§00 · Intro 0:00 / 11:00 Voix activée