Authentification avec Nuxt + Moduel Supabase

Installation et Configuration

# Installation
npm install @nuxtjs/supabase

But : Installer le module officiel Supabase pour Nuxt qui facilite l'intégration.

Points d'attention :

• Vérifiez que vous utilisez Nuxt 3 pour la compatibilité

• Cette commande doit être exécutée à la racine de votre projet Nuxt

Dans nuxt.config.ts :

export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase'],
  supabase: {
    // Options de configuration
    redirectOptions: {
      login: '/auth/login',
      callback: '/auth/confirm',
      exclude: ['/']
    }
  }
})

But : Configurer le module Supabase dans votre application Nuxt et définir les routes de redirection pour l'authentification.

Points d'attention :

• login : page où rediriger les utilisateurs non connectés

• callback : page qui gère les retours d'authentification (OAuth, réinitialisation de mot de passe)

• exclude : routes accessibles sans authentification

Variables d'environnement

Créer un fichier .env :

SUPABASE_URL=https://votre-projet.supabase.co
SUPABASE_KEY=votre-clé-anon-publique

But : Stocker les informations de connexion à votre projet Supabase de façon sécurisée.

Points d'attention :

• Ne jamais exposer la clé secrète, utilisez uniquement la clé anon/publique ici

• Ce fichier doit être ajouté à votre .gitignore pour ne pas être partagé

• Ces variables sont automatiquement chargées par le module Nuxt Supabase

Composables d'authentification

Accès au client Supabase

const supabase = useSupabaseClient()

But : Obtenir une instance du client Supabase pour interagir avec tous les services (auth, base de données, stockage, etc.).

Points d'attention :

• Ce composable est disponible partout dans votre application Nuxt

• Il est déjà configuré avec vos variables d'environnement

Accès à l'utilisateur connecté

const user = useSupabaseUser()

But : Récupérer les informations de l'utilisateur actuellement connecté.

Points d'attention :

• Renvoie null si aucun utilisateur n'est connecté

• C'est une référence réactive qui se met à jour automatiquement

• Contient toutes les informations utilisateur (email, métadonnées, etc.)

Opérations courantes

Inscription

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

But : Créer un nouveau compte utilisateur avec email et mot de passe.

Points d'attention :

• Par défaut, envoie un email de confirmation (configurable dans Supabase)

• Vérifiez toujours error pour gérer les échecs (email déjà utilisé, etc.)

• Vous pouvez ajouter des métadonnées avec data: { user_metadata: { ... } }

Connexion avec email/mot de passe

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

But : Connecter un utilisateur existant avec son email et mot de passe.

Points d'attention :

• Vérifiez error pour détecter les identifiants incorrects

• Après connexion réussie, useSupabaseUser() sera automatiquement mis à jour

• La session est stockée localement (localStorage par défaut)

Connexion avec fournisseurs OAuth

const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'google' // ou 'github', 'facebook', etc.
})

But : Permettre la connexion via des services tiers (Google, GitHub, etc.).

Points d'attention :

• Redirige l'utilisateur vers le service d'authentification externe

• Nécessite une configuration préalable dans le dashboard Supabase

• Le retour se fait sur la route définie dans redirectOptions.callback

Déconnexion

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

But : Déconnecter l'utilisateur actuel et supprimer sa session.

Points d'attention :

• Supprime les tokens côté client et invalide la session

• useSupabaseUser() devient automatiquement null

• Vérifiez error pour détecter les problèmes éventuels

Réinitialisation du mot de passe

// Envoyer l'email de réinitialisation
const { data, error } = await supabase.auth.resetPasswordForEmail(
  '[email protected]'
)

// Mettre à jour le mot de passe (après redirection)
const { data, error } = await supabase.auth.updateUser({
  password: 'nouveau-mot-de-passe'
})

But : Permettre à un utilisateur de réinitialiser son mot de passe oublié.

Points d'attention :

• Le premier appel envoie un email avec un lien de réinitialisation

• Le second appel doit être exécuté après que l'utilisateur a cliqué sur le lien

• Le lien de réinitialisation contient un token temporaire qui authentifie l'utilisateur

Protection des routes

Middleware intégré// Dans pages/profile.vue

definePageMeta({
  middleware: 'auth'
})

But : Protéger automatiquement une page pour qu'elle soit accessible uniquement aux utilisateurs connectés.

Points d'attention :

• Redirige vers la page de login si l'utilisateur n'est pas connecté

• Utilise les redirectOptions définies dans nuxt.config.ts

• Aucun code supplémentaire nécessaire, c'est intégré au module

Middleware personnalisé

// Dans middleware/custom-auth.ts
export default defineNuxtRouteMiddleware(() => {
  const user = useSupabaseUser()
  
  if (!user.value) {
    return navigateTo('/auth/login')
  }
})

But : Créer une logique de protection personnalisée pour vos routes.

Points d'attention :

• Permet d'ajouter des conditions supplémentaires (rôles, permissions, etc.)

• Doit être appliqué manuellement aux pages via definePageMeta

• Vous pouvez passer des paramètres à la redirection (query params, etc.)

Gestion des sessions

// Vérifier l'état de la session
const { data, error } = await supabase.auth.getSession()

// Récupérer les informations utilisateur
const { data: { user } } = await supabase.auth.getUser()

// Écouter les changements de session
supabase.auth.onAuthStateChange((event, session) => {
  // event peut être 'SIGNED_IN', 'SIGNED_OUT', etc.
})

But : Gérer et réagir aux changements d'état de l'authentification.

Points d'attention :

• getSession() vérifie si une session valide existe

• getUser() récupère les données utilisateur actuelles

• onAuthStateChange permet de réagir en temps réel aux événements d'authentification

• Utile pour synchroniser l'état de l'UI avec l'état d'authentification

Validation avec Zod

import { z } from 'zod'

const loginSchema = z.object({
  email: z.string().email('Email invalide'),
  password: z.string().min(6, 'Mot de passe trop court')
})

// Utilisation
const formData = { email: '[email protected]', password: 'pass123' }
const result = loginSchema.safeParse(formData)

if (result.success) {
  // Données valides, procéder à la connexion
} else {
  // Gérer les erreurs de validation
  console.log(result.error.format())
}

But : Valider les données de formulaire avant de les envoyer à Supabase.

Points d'attention :

• Permet de vérifier le format et la validité des données côté client

• Évite d'envoyer des requêtes inutiles au serveur

• Fournit des messages d'erreur personnalisables pour améliorer l'UX

• safeParse renvoie un objet avec success et soit data soit error

Exemples pratiques

Composant de connexion

<script setup lang="ts">
const supabase = useSupabaseClient()
const email = ref('')
const password = ref('')
const errorMsg = ref('')
const isLoading = ref(false)

async function handleLogin() {
  isLoading.value = true
  errorMsg.value = ''
  
  try {
    const { error } = await supabase.auth.signInWithPassword({
      email: email.value,
      password: password.value
    })
    
    if (error) throw error
    
    // Redirection après connexion réussie
    navigateTo('/dashboard')
  } catch (e) {
    errorMsg.value = e.message
  } finally {
    isLoading.value = false
  }
}
</script>

<template>
  <form @submit.prevent="handleLogin">
    <!-- Champs du formulaire -->
  </form>
</template>

But : Créer un formulaire de connexion complet avec gestion des erreurs et états de chargement.

Points d'attention :

• Utilise ref() pour créer des variables réactives

• Gère l'état de chargement pour désactiver le bouton pendant la requête

• Capture et affiche les messages d'erreur de manière utilisateur-friendly

• Redirige l'utilisateur après une connexion réussie

• Utilise @submit.prevent pour éviter le rechargement de la page

Vérification de l'état d'authentification

// Dans un composable (composables/useAuthState.ts)
export function useAuthState() {
  const user = useSupabaseUser()
  const isLoggedIn = computed(() => !!user.value)
  const isAdmin = computed(() => user.value?.user_metadata?.role === 'admin')
  
  return {
    user,
    isLoggedIn,
    isAdmin
  }
}

But : Créer un composable réutilisable pour vérifier l'état et les rôles de l'utilisateur.

Points d'attention :

• Encapsule la logique d'authentification dans un composable réutilisable

• Utilise computed() pour créer des propriétés dérivées qui se mettent à jour automatiquement

• Vérifie les rôles stockés dans les métadonnées utilisateur

• Peut être importé et utilisé dans n'importe quel composant ou page