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 :
Inscription→Email de confirmation→Connexion→JWT dans un cookie→Session 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 token3.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'
})