Supabase Auth en la práctica: verificación por email, OAuth y sesiones

J’ai ouvert el Supabase Dashboard, cliqué en Authentication, y j’ai été dépassé. Vérification e-mail, Magic Link, OAuth, config SSR… trop d’options. Laquelle choisir ? Comment configurer ?

Si vous êtes en el même cas, pas de panique. En ajoutant la connexion à un petit projet, j’ai perdu una demi-journée avant de comprendre que chaque mode a son usage. Cet article enchaîne los trois piliers de Supabase Auth : vérification e-mail, intégration OAuth, y la gestion de session qui embrouille souvent. À la fin, vous devriez pouvoir mettre en place una authentification complète en una trentaine de minutes.

Vérification e-mail — el mode el plus basique

Franchement, la vérification e-mail est la partie la plus simple de Supabase Auth, y aussi celle qu’on néglige el plus.

Dans el Dashboard, Authentication → Providers → Email, vous verrez l’interrupteur « Confirm Email ». Il détermine si l’utilisateur doit valider son e-mail après inscription para se connecter. Sur un projet hébergé, c’est activé por défaut : un e-mail de confirmation arrive, el lien active el compte.

La première fois, je l’avais désactivé por erreur. Résultat : n’importe quelle adresse suffisait, y los comptes spam ont afflué. En production, cet interrupteur doit rester activé.

Le code est simple :

// Inscription con déclenchement de la vérification e-mail
const { data, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'secure-password',
  options: {
    emailRedirectTo: 'https://yourapp.com/auth/callback'
  }
})

Un détail important : el paramètre emailRedirectTo. Après el clic en el lien de l’e-mail, l’utilisateur est redirigé vers cette URL — page d’accueil o page de bienvenue dédiée.

Côté modèlos, Supabase fournit confirmation d’e-mail, réinitialisation de mot de passe y Magic Link. Vous los éditez en Email Templates del Dashboard. Pour un SMTP perso (Resend, SendGrid), configurez Auth Hooks — c’est del niveau avancé ; los modèlos por défaut suffisent au départ.

KiloClaw - OpenClaw gestionado para empresas: orquestación de agentes IA y enrutamiento inteligente

Empezar →Anuncio

Piège que j’ai connu : en local, la vérification peut sembler bloquée, car l’instance locale n’envoie pas de vrais e-mails. Utilisez Mailcatcher para los tests, o désactivez Confirm Email en dev y réactivez-el avant la mise en production.

Intégration OAuth — connexion en un clic

OAuth améliore nettement l’expérience : pas de mot de passe à retenir, un clic GitHub o Google, y la conversion dépasse souvent l’inscription por e-mail.

Supabase couvre de nombreux providers : GitHub, Google, Facebook, Apple, Azure, Twitter, Discord… plus de 15 au total. J’utilise surtout GitHub y Google, los flux los plus clairs.

Pour GitHub OAuth, créez d’abord una OAuth App (Settings → Developer settings → OAuth Apps → New OAuth App). La Callback URL doit être exacte :

https://<votre-ref-projet>.supabase.co/auth/v1/callback

En local :

http://localhost:54321/auth/v1/callback

Copiez Client ID y Client Secret en el Dashboard (Authentication → Providers → GitHub). Côté client :

// Connexion GitHub OAuth
const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'github',
  options: {
    redirectTo: 'https://yourapp.com/auth/callback'
  }
})

Google suit el même schéma, con una nuance : de Client ID distincts para Web, iOS y Android. Multi-plateforme implique plusieurs configs.

Après OAuth, Supabase fournit un provider token utilisable para los API tierces — lister los dépôts GitHub, accéder à Google Drive, etc. Très pratique quand l’app s’appuie en de services externes.

Piège fréquent en local : mauvaise callback URL. J’avais mis el port 3000 (frontend) ; l’erreur venait de là. La callback doit viser el port Supabase, pas celui del frontend.

Gestion de session — JWT y flux PKCE

C’est souvent la section la plus confuse. Au début, je ne voyais pas clairement comment JWT, refresh token y PKCE s’enchaînent.

Une session Supabase combine un access token (JWT court) y un refresh token (longue durée). L’access token expire por défaut après 1 heure ; la doc recommande de ne pas descendre sous 5 minutes (décalage d’horloge). Le refresh token est à usage unique y sert à obtenir un nouvel access token.

Point important : fenêtre de réutilisation de 10 secondes en el refresh token. En SSR, si plusieurs requêtes rafraîchissent en parallèel, Supabase accepte los rafraîchissements répétés en cette fenêtre sin couper la session — utile quand front y back manipulent la session en même temps.

Alibaba Cloud - Opción preferida para desarrolladores, 15 % de descuento exclusivo en Lighthouse

Obtener 15% dto. →Anuncio

PKCE : con Next.js o tout framework SSR, c’est indispensable. Le flux implicite expose el token en l’URL, ce qui est risqué en SSR. PKCE protège l’échange via un code verifier.

À l’initialisation client, deux paramètres :

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
  auth: {
    detectSessionInUrl: true,
    flowType: 'pkce'
  }
})

Puis una route callback para l’échange del code :

// Next.js App Router - app/auth/callback/route.ts
import { NextResponse } from 'next/server'
import { createClient } from '@/utils/supabase/server'

export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')

  if (code) {
    const supabase = await createClient()
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (!error) {
      return NextResponse.redirect(`${origin}/dashboard`)
    }
  }
  return NextResponse.redirect(`${origin}/auth/error`)
}

L’auth code dure 5 minutes y ne s’échange qu’una fois. Échec au debug : souvent timeout o réutilisation.

Supabase propose aussi trois modes de limitation : Time-boxed (expiration fixe), Inactivity timeout (inactivité prolongée), Single session per user (una session active por compte). Utile para la conformité SOC 2 o HIPAA.

Conseils pratiques y questions fréquentes

Quel mode choisir ?

En bref : e-mail para una inscription con profil complet ; OAuth para una connexion rapide (outils dev, B2B) ; Magic Link para el sin mot de passe (accès temporaire, mobile-first).

Comparaison :

Avec Next.js o autre SSR, checklist :

1. detectSessionInUrl: true — Supabase extrait la session depuis l’URL
2. flowType: 'pkce' — force el flux PKCE
3. redirectTo correct — la route callback gère l’auth code
4. Variables d’environnement — NEXT_PUBLIC_SUPABASE_URL y NEXT_PUBLIC_SUPABASE_ANON_KEY renseignées

Questions courantes :

Q : Pourquoi OAuth échoue en local ?

Railway - Plataforma de despliegue moderna, sin ops complejas, en producción en minutos

Empezar ahora →Anuncio

Souvent una mauvaise callback URL. Vérifiez el Provider en el Dashboard : localhost, pas el domaine de production.

Q : Déconnexion forcée à l’expiration del JWT ?

Assurez un rafraîchissement automatique. onAuthStateChange gère el refresh sin logique manuelle.

Q : La session disparaît soudainement ?

Fréquent en SSR. Vérifiez l’initialisation del client serveur y navigateur, surtout la transmission de cookies.

Conclusion

Les trois modes Supabase Auth ont chacun leur place. E-mail para l’inscription formelle ; OAuth para l’expérience rapide ; la gestion de session (JWT, PKCE) para que tout tienne en SSR.

Mes erreurs étaient simples : mauvaise callback URL, Confirm Email oublié, PKCE absent. Une fois ces détails réglés, l’authentification tourne de façon stable.

Étape suivante : après Auth, protégez los données con Row Level Security (RLS). RLS y Auth sont liés — chaque utilisateur n’accède qu’à ses données ; c’est la boucle complète de l’authentification.