BaliseTonSite

Authentification

Inscription, connexion, sessions JWT et providers OAuth : tout est déjà prêt.

3.1Comment ça marche

Supabase Auth gère tout le cycle d'authentification :

InscriptionEmail de confirmationConnexionJWT dans un cookieSession active

Le JWT (JSON Web Token) contient l'ID de l'utilisateur et son rôle. Supabase l'utilise automatiquement pour les policies RLS : chaque requête sait qui demande les données.

3.2Inscription

Inscription email/passwordtypescript
import { createClient } from '@/lib/supabase/client'

const supabase = createClient()

const { data, error } = await supabase.auth.signUp({
  email: 'joueur@exemple.fr',
  password: 'motdepasse-solide-123',
  options: {
    data: {
      first_name: 'Alex',
      last_name: 'Martin',
    }
  }
})

if (error) {
  console.error('Erreur inscription :', error.message)
} else {
  console.log('Utilisateur créé :', data.user?.id)
  // Un email de confirmation est envoyé automatiquement
}

3.3Connexion

Connexion email/passwordtypescript
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'joueur@exemple.fr',
  password: 'motdepasse-solide-123',
})

if (error) {
  // Erreurs courantes :
  // - "Invalid login credentials" → mauvais email ou mot de passe
  // - "Email not confirmed" → l'utilisateur n'a pas cliqué sur le lien
  console.error(error.message)
} else {
  console.log('Connecté !', data.session?.access_token)
}

3.4Récupérer l'utilisateur connecté

Côté client (composant React)typescript
const { data: { user } } = await supabase.auth.getUser()

if (user) {
  console.log('ID :', user.id)
  console.log('Email :', user.email)
  console.log('Prénom :', user.user_metadata.first_name)
} else {
  console.log('Non connecté')
}
Côté serveur (Server Component / API Route)typescript
import { createClient } from '@/lib/supabase/server'

export default async function DashboardPage() {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()

  if (!user) {
    redirect('/connexion')
  }

  return <h1>Bienvenue {user.user_metadata.first_name}</h1>
}

3.5Déconnexion

Logouttypescript
await supabase.auth.signOut()
// Le cookie de session est automatiquement supprimé

3.6Écouter les changements d'auth

Pour mettre à jour ton UI en temps réel quand l'utilisateur se connecte ou se déconnecte :

Listener d'auth (dans un useEffect)typescript
useEffect(() => {
  const { data: { subscription } } = supabase.auth.onAuthStateChange(
    (event, session) => {
      console.log('Auth event :', event)
      // event = 'SIGNED_IN' | 'SIGNED_OUT' | 'TOKEN_REFRESHED' | ...

      if (session?.user) {
        setUser(session.user)
      } else {
        setUser(null)
      }
    }
  )

  // Cleanup
  return () => subscription.unsubscribe()
}, [])

3.7OAuth : connexion avec Google, GitHub...

Connexion OAuthtypescript
const { error } = await supabase.auth.signInWithOAuth({
  provider: 'github', // ou 'google', 'discord', 'twitter'...
  options: {
    redirectTo: 'https://monsite.fr/auth/callback',
  },
})
// L'utilisateur est redirigé vers GitHub pour s'authentifier
// Puis renvoyé vers ton app avec un token

3.8Mot de passe oublié

Reset de mot de passetypescript
// 1. Envoyer le lien de reset
const { error } = await supabase.auth.resetPasswordForEmail(
  'joueur@exemple.fr',
  { redirectTo: 'https://monsite.fr/reset-password' }
)

// 2. Quand l'utilisateur clique sur le lien et arrive sur ta page :
const { error } = await supabase.auth.updateUser({
  password: 'nouveau-mot-de-passe-456'
})

Verifie tes acquis

5 questions pour valider ce chapitre

1. Quelle methode du SDK utilises-tu pour inscrire un nouveau utilisateur ?

Valide et sauvegarde ce chapitre

Ne perds pas le fil de ton apprentissage. Chaque QCM terminé sauvegarde ton score. Crée ton profil gratuitement pour débloquer toutes les évaluations du site et retrouver tes résultats plus tard.

Commencer l'aventure
Déjà membre ?Connecte-toi