Supabase › Authentification

Activer les providers (email, OAuth…)

Supabase propose 3 grandes méthodes d’authentification :

• Email : cette approche regroupe les méthodes d’authentification reposant sur l’adresse e-mail de l’utilisateur, telles que la connexion par email et mot de passe, la connexion par lien magique (magic link), et la connexion par code à usage unique (OTP).
• Phone : cette méthode permet aux utilisateurs de se connecter en utilisant leur numéro de téléphone. Elle utilise des codes à usage unique (OTP) envoyés par SMS pour vérifier l’identité de l’utilisateur.
• OAuth : cette méthode permet aux utilisateurs de se connecter en utilisant des comptes tiers, tels que Google, Facebook, GitHub, etc. Cela simplifie le processus d’inscription et de connexion en évitant la nécessité de créer et de gérer des mots de passe spécifiques à votre application.

Vous pouvez activer ces fournisseurs d’authentification dans le tableau de bord Supabase, sous l’onglet Authentication > Sign In / Providers. Vous pouvez désormais cocher les providers que vous souhaitez activer.

Authentification basique (login/password)

Dans le cadre de cette formation, nous allons nous concentrer sur l’authentification par email et mot de passe, qui est l’une des méthodes les plus couramment utilisées pour sécuriser les applications web.

Nous verrons comment :

1. Créer un compte utilisateur
2. Se connecter
3. Se déconnecter
4. Récupérer les informations de l’utilisateur

Créer un compte utilisateur

Pour créer un compte utilisateur avec Supabase, il faudra bien entendu avoir initialisé le client Supabase dans votre application.

Ensuite, vous pouvez utiliser la méthode signUp() de l’API d’authentification de Supabase.

const supabase = createClient(...)

const { data, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'example-password',
})

Voilà, c’est tout. Vous n’avez plus qu’à déclencher ce code lors de la soumission d’un formulaire d’inscription et le tour est joué !

Connexion

Pour se connecter avec Supabase, vous pouvez utiliser la méthode signInWithPassword() de l’API d’authentification de Supabase.

const supabase = createClient(...)

const { data, error } = await supabase.auth.signInWithPassword({
  email: '[email protected]',
  password: 'example-password',
})

Ici encore, vous n’avez plus qu’à déclencher ce code lors de la soumission d’un formulaire de connexion et le tour est joué !

Déconnexion

Pour se déconnecter avec Supabase, vous pouvez utiliser la méthode signOut() de l’API d’authentification de Supabase.

const supabase = createClient(...)

const { data, error } = await supabase.auth.signOut()

Ici encore, vous n’avez plus qu’à déclencher ce code suite à un clic sur un bouton de déconnexion.

Récupérer les informations de l’utilisateur

Pour récupérer les informations de l’utilisateur connecté, vous pouvez utiliser la méthode getUser() de l’API d’authentification de Supabase.

const supabase = createClient(...)

const { data, error } = await supabase.auth.getUser()

Cette méthode vous retournera un objet contenant les informations de l’utilisateur connecté comme son ID, son email, son rôle, etc.

Sécurité des routes

Pour sécuriser les routes de votre application, vous pouvez utiliser les guards côté frontend.

Un guard (ou « route guard ») est une fonction qui bloque ou autorise l’accès à une route selon certaines conditions, typiquement :

• L’utilisateur est connecté
• L’utilisateur a le rôle requis
• L’utilisateur a certaines permissions

En vanilla JS, un guard s’implémente souvent comme ceci :

async function authGuard() {
  const { data: { session } } = await supabase.auth.getSession()

  if (!session) {
    // L'utilisateur n'est pas connecté → redirection
    window.location.href = '/login'
  }
}

// Appel du guard au chargement d'une page protégée
authGuard()

Pour chaque page sensible, vous pouvez appeler ce guard au début du script pour vous assurer que seul un utilisateur connecté peut y accéder.

Dans notre cas, si un utilisateur souhaite accéder à une route protégée sans être connecté, il sera redirigé vers la page de connexion. Seulement, il est important de noter que si cette approche s’avère essentielle pour l’expérience de navigation de votre utilisateur, elle reste insuffisante en termes de sécurité.

En effet, ces guards agissent uniquement côté frontend, permettant à un attaquant de contourner ces mécanismes en :

• Désactivant JavaScript
• Utilisant des outils de développement pour modifier le code
• Envoyant des requêtes directes au serveur sans passer par le frontend

👉 La véritable sécurité doit donc être implémentée côté serveur (backend).

Par chance, Supabase va nous permettre de mettre en place ces guards côté serveur sans même avoir à écrire une seule ligne dans notre code backend avec les RLS policies ! On se retrouve au chapitre suivant pour aborder cela. 🚀