Découvrir Supabase
Ce que tu vas apprendre
- Ce que Supabase apporte à un site : une base de données et un accès prêt à l'emploi.
- Créer un projet et une table
recettesdepuis le tableau de bord. - Distinguer la clé publique (publishable) de la clé secrète, qui ne doit jamais sortir du serveur.
Un backend déjà installé
Un site de recettes doit garder ses recettes quelque part. Il faut une base de données, un moyen d'y accéder et une gestion des comptes.
Supabase est un service qui fournit tout cela. Sa base est PostgreSQL, la même que dans le cours SQL, hébergée chez Supabase.
Tu ne codes pas de serveur pour lire ou écrire des lignes. Supabase expose la base par une API (une porte d'accès par Internet) et un client JavaScript, supabase-js, qui l'utilise pour toi.
Ce que contient un projet
Un projet Supabase regroupe plusieurs services :
| Service | Rôle |
|---|---|
| Base de données | Tes tables PostgreSQL. |
| Authentification | Inscription, connexion, sessions. |
| Stockage | Photos et fichiers. |
| Temps réel | Recevoir les changements de la base en direct. |
Ce cours-ci s'occupe de la base. Les autres services arrivent dans la suite de la ligne.
Créer un projet
- Crée un compte sur supabase.com.
- Dans le tableau de bord, crée un nouveau projet dans ton organisation.
- Donne-lui un nom, par exemple
recettes, choisis un mot de passe pour la base et une région proche de tes visiteurs. - Attends la fin de la création.
Créer une table dans l'éditeur
La table recettes se crée sans écrire de SQL :
- Ouvre Table Editor.
- Clique sur New table et nomme-la
recettes. - Garde les colonnes
idetcreated_atcréées par l'éditeur. - Ajoute une colonne
titrede typetextet une colonneduree_minutesde typeint8. - Enregistre.
Le même résultat s'obtient en SQL :
create table recettes (
id bigint generated by default as identity primary key,
titre text not null,
duree_minutes int,
created_at timestamptz default now()
);
La colonne id utilise generated by default as identity : PostgreSQL numérote chaque ligne tout seul.
Ajoute ensuite deux recettes à la main dans l'éditeur pour avoir des données de test.
Deux types de clés
Pour parler à ton projet, un programme présente une clé d'API. Supabase en propose deux types :
| Clé publishable | Clé secrète | |
|---|---|---|
| Préfixe | sb_publishable_ | sb_secret_ |
| Ancien nom | anon | service_role |
| Dans le navigateur | Oui, elle est faite pour être publique | Non, jamais |
| Droits | Limités par les règles de la base | Contourne ces règles |
Tu les trouves dans Settings, puis API Keys. Le dialogue Connect affiche l'adresse du projet et la clé publishable.
anon et service_role par ces deux-là d'ici la fin de 2026. Tu croiseras encore les anciens noms dans des tutoriels.Pourquoi la clé publique est sans danger
Le site que tu publies contient la clé publishable : n'importe qui peut la lire dans le navigateur. Elle est sans danger seulement si la base se protège elle-même.
Cette protection s'appelle Row Level Security (RLS), la sécurité au niveau des lignes. Elle décide qui peut lire ou modifier chaque ligne. Le cours 05 lui est consacré.
Retiens déjà la règle : une table exposée sans RLS est lisible et modifiable par tout le monde. L'éditeur du tableau de bord l'active à la création d'une table. Une table créée en SQL n'a pas cette protection tant que tu ne l'actives pas.
À retenir
- Supabase fournit une base PostgreSQL, des comptes, du stockage et du temps réel.
- Un projet se crée depuis le tableau de bord, une table depuis le Table Editor ou en SQL.
- La clé publishable (
sb_publishable_) peut aller dans le navigateur. - La clé secrète (
sb_secret_) contourne toute protection : serveur uniquement, jamais dans Git. - La clé publique n'est sûre que si la RLS est activée sur chaque table exposée.
Pour aller plus loin
Sources officielles
Ensuite
Supabase
Le mémo de Supabase avec Nuxt : clés, configuration, requêtes, authentification, RLS, stockage et temps réel.
Brancher Supabase à Nuxt
Installer le module @nuxtjs/supabase, renseigner les variables d'environnement et savoir quelle clé va où.
- Projet
- Lignes de code
- Niveau
- Cave
- Appartement
- Supabase
- Pièce
- 1/7
- Plan n°
- supabase/01.decouvrir-supabase