Du code supabase-js v2 fonctionnel pour l'e-mail et le mot de passe, les magic links, la connexion OAuth, l'écoute de session et la déconnexion, ainsi que des politiques de row level security qui utilisent auth.uid().
Supabase Auth connecte les utilisateurs par e-mail et mot de passe, par magic links à usage unique, par codes envoyés au téléphone ou via des fournisseurs OAuth comme GitHub, le tout via l'objet supabase.auth de supabase-js. Chaque connexion produit une session dont le token atteint votre base de données, où des politiques de row level security comparent auth.uid() à une colonne user_id pour décider ce que cette personne peut lire.
Les méthodes de connexion et l'appel correspondant
Méthode
Appel supabase-js v2
Idéal pour
E-mail et mot de passe
auth.signUp / auth.signInWithPassword
Comptes classiques
Magic link
auth.signInWithOtp({ email })
Aucun mot de passe à oublier
Code par SMS ou WhatsApp
auth.signInWithOtp({ phone })
Produits pensés d'abord pour le mobile
Fournisseur OAuth
auth.signInWithOAuth({ provider })
Connexion en un clic avec un compte existant
Déconnexion
auth.signOut()
Mettre fin à la session
L'authentification est la partie d'un projet Supabase la plus souvent mal configurée : la connexion fonctionne, mais les données sont grandes ouvertes ou le serveur fait confiance à un cookie qu'il ne devrait pas croire. Choisissez une méthode ci-dessous pour obtenir son code, puis suivez la section sur les politiques pour que chacun ne voie que ses propres lignes.
Choisissez une méthode de connexion dans le sélecteur de code et copiez l'extrait dans votre application.
Activez le fournisseur correspondant dans le tableau de bord Supabase et ajoutez l'adresse de votre site aux URL de redirection autorisées.
Écoutez les événements d'authentification pour que votre interface se mette à jour à chaque connexion ou déconnexion.
Activez la row level security sur chaque table contenant des données personnelles et ajoutez des politiques qui utilisent auth.uid().
Avec la confirmation par e-mail activée, signUp renvoie un utilisateur mais une session null tant que le lien n'a pas été cliqué, affichez donc un message invitant à consulter sa boîte de réception plutôt qu'un tableau de bord.
Écrivez la fonction sous la forme (select auth.uid()) dans les politiques. Postgres peut alors l'évaluer une fois par requête au lieu d'une fois par ligne.
auth.uid() vaut null pour les requêtes sans utilisateur connecté, donc une politique qui le compare à user_id ne correspond simplement à rien pour les visiteurs anonymes.
Côté serveur, ne faites pas confiance à getSession() lu depuis les cookies ; appelez getUser() ou getClaims() pour vérifier qui fait la demande.
La clé publishable (anon) est sans danger dans les navigateurs car les politiques la limitent. Une clé secrète ou service role contourne la row level security et doit rester sur le serveur.
Questions fréquentes
Le magic link Supabase est-il la même chose que l'OTP ?
Les deux partent de signInWithOtp. Pour l'e-mail, le message contient un lien quand le modèle utilise l'URL de confirmation, et un code quand il utilise le token. La connexion par téléphone ne prend en charge que les codes, par SMS ou WhatsApp.
Comment ajouter la connexion avec Google ou GitHub ?
Activez le fournisseur dans le tableau de bord avec l'identifiant client et le secret fournis par ce fournisseur, puis appelez signInWithOAuth avec son nom et une adresse redirectTo facultative. La personne revient sur votre site déjà connectée.
Comment savoir quand un utilisateur se connecte ou se déconnecte ?
Enregistrez onAuthStateChange. Il signale des événements comme INITIAL_SESSION, SIGNED_IN, SIGNED_OUT, TOKEN_REFRESHED, USER_UPDATED et PASSWORD_RECOVERY, et renvoie un abonnement dont vous vous désabonnez quand le composant est démonté.
Pourquoi les utilisateurs connectés ne voient-ils plus rien après l'activation de la RLS ?
Une fois la row level security activée, une table refuse tout tant qu'une politique ne l'autorise pas. Ajoutez une politique select pour le rôle authenticated qui compare (select auth.uid()) à la colonne propriétaire.
Faut-il utiliser Supabase Auth ou Firebase Auth ?
Les deux couvrent les méthodes courantes. La plus grande différence est la base de données sous-jacente ; notre comparatif Supabase vs Firebase détaille ce choix.
Sessions et tokens
Après la connexion, supabase-js stocke un access token de courte durée et un refresh token, et renouvelle automatiquement l'access token. Chaque requête faite via le même client envoie l'access token, et c'est ainsi que Postgres apprend l'ID de l'utilisateur.
Dans les applications rendues côté serveur, la session vit plutôt dans des cookies. Le guide d'authentification Next.js de ce site couvre ce câblage, cette page reste donc centrée sur la bibliothèque client et les règles de la base de données.
La row level security est le vrai verrou
Masquer un bouton dans l'interface ne protège pas les données, puisque n'importe qui peut appeler votre API avec la clé publique. Les politiques s'exécutent dans Postgres à chaque requête, c'est donc là que la propriété est imposée.
Écrivez une politique par action. Une politique select utilise using, alors qu'insert a besoin de with check pour que personne ne puisse créer des lignes appartenant à quelqu'un d'autre, et update a généralement besoin des deux.
Des politiques qui utilisent auth.uid()
Chacun ne lit et n'écrit que ses propres notes
À exécuter dans l'éditeur SQL. La valeur par défaut remplit user_id à partir du token, et with check empêche quiconque d'insérer des lignes pour un autre utilisateur.
E-mail et mot de passe
Créez le compte, puis connectez-vous. Avec la confirmation activée, data.session vaut null tant que le lien de l'e-mail n'a pas été cliqué.
Magic link
Envoie un e-mail dont le lien connecte la personne et la redirige vers l'adresse de redirection.
OAuth (GitHub)
Redirige vers le fournisseur puis revient. Activez d'abord le fournisseur et renseignez ses clés dans le tableau de bord.
Écoute de session et déconnexion
Garde l'interface synchronisée avec la session et nettoie le listener quand vous avez terminé.