Supabase

Supabase Auth : Authentification Complète avec Email, OAuth et Magic Links

juin 14, 2026
Aucun commentaire

Supabase Auth est un système d’authentification complet basé sur GoTrue, qui gère email/password, OAuth (Google, GitHub, etc.), magic links, et OTP par SMS. Intégré nativement avec la RLS, il est l’un des atouts majeurs de la plateforme.

Pour comprendre le contexte global, consulte notre guide complet Supabase. Pour sécuriser tes données avec Auth, lis Supabase RLS. Pour gérer les migrations de ta table users, voir Supabase Migrations. Pour aller plus loin sur les tokens, consulte SQL, triggers et fonctions Supabase.

Configurer Supabase Auth

L’authentification est activée par défaut sur tous les projets Supabase. La configuration se fait dans Authentication → Settings du dashboard.

Installation du client

npm install @supabase/supabase-js

// supabase/client.ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Authentification par Email/Password

Inscription

// Inscription avec email/password
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'SecurePassword123!',
  options: {
    data: {
      first_name: 'Jean',
      last_name: 'Dupont',
      username: 'jeandupont'
    },
    emailRedirectTo: 'https://yourapp.com/auth/callback'
  }
})

Connexion

const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'SecurePassword123!'
})

if (data.session) {
  console.log('Connecté:', data.user?.email)
  console.log('Token:', data.session.access_token)
}

Déconnexion

const { error } = await supabase.auth.signOut()
// Toutes les sessions sont invalidées

Magic Links (Connexion sans Mot de Passe)

const { error } = await supabase.auth.signInWithOtp({
  email: 'user@example.com',
  options: {
    emailRedirectTo: 'https://yourapp.com/auth/callback'
  }
})

// Ou avec OTP (code à 6 chiffres) pour mobile
const { error: otpError } = await supabase.auth.signInWithOtp({
  phone: '+32470123456'
})

OAuth : Google, GitHub, Discord…

const { error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: 'https://yourapp.com/auth/callback',
    scopes: 'email profile',
    queryParams: {
      access_type: 'offline',
      prompt: 'consent'
    }
  }
})

Gestion de la Session

const { data: { session } } = await supabase.auth.getSession()
const { data: { user } } = await supabase.auth.getUser()

const { data: { subscription } } = supabase.auth.onAuthStateChange(
  (event, session) => {
    console.log('Auth event:', event)
    console.log('Session:', session)
  }
)

subscription.unsubscribe()

Protéger les Routes (Next.js Middleware)

// middleware.ts
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()
  const supabase = createMiddlewareClient({ req, res })
  
  const { data: { session } } = await supabase.auth.getSession()
  
  if (!session && req.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', req.url))
  }
  
  if (session && req.nextUrl.pathname === '/login') {
    return NextResponse.redirect(new URL('/dashboard', req.url))
  }
  
  return res
}