Authentification

Ce que tu vas apprendre

• Créer un compte et se connecter avec un e-mail et un mot de passe.
• Lire l'utilisateur connecté avec useSupabaseUser.
• Protéger des pages pour que seuls les connectés y accèdent.

Comment ça marche

L'authentification vérifie qui est l'utilisateur. Supabase la gère : il stocke les comptes et les mots de passe. Tu n'écris aucun code pour les conserver.

Après une connexion réussie, le client reçoit une session : la preuve que la personne est connectée. Le module Nuxt la garde dans des cookies et la renvoie à chaque requête.

Une session contient un JWT, un jeton signé qui contient l'identité de la personne. La base s'en sert pour appliquer la RLS.

S'inscrire

const { error } = await supabase.auth.signUp({
  email: 'cuisinier@exemple.fr',
  password: 'un-mot-de-passe-solide',
})

La méthode signUp crée le compte. Dans le tableau de bord, la section Authentication règle si l'utilisateur doit confirmer son adresse par un e-mail avant de se connecter.

Se connecter et se déconnecter

const { error } = await supabase.auth.signInWithPassword({
  email: 'cuisinier@exemple.fr',
  password: 'un-mot-de-passe-solide',
})

Pour se déconnecter :

await supabase.auth.signOut()

Par défaut, signOut déconnecte l'utilisateur de tous ses appareils. Pour ne fermer que la session en cours, passe { scope: 'local' }.

Une page de connexion

<script setup lang="ts">
const supabase = useSupabaseClient()
const user = useSupabaseUser()
const email = ref('')
const password = ref('')
const message = ref('')

async function connexion() {
  const { error } = await supabase.auth.signInWithPassword({
    email: email.value,
    password: password.value
  })
  if (error) message.value = error.message
}

watch(user, () => {
  if (user.value) navigateTo('/mes-recettes')
}, { immediate: true })
</script>

La page n'a pas besoin de rediriger à la main après la connexion : watch surveille user et envoie vers /mes-recettes dès qu'il est rempli.

Le formulaire HTML (deux input, un bouton qui appelle connexion) est celui que tu connais déjà.

Lire l'utilisateur

useSupabaseUser() renvoie l'utilisateur connecté, ou null. Dans la version 2 du module, ce n'est pas le profil complet mais les claims du JWT, c'est-à-dire les informations qu'il contient :

<template>
  <p v-if="user">Connecté : {{ user.email }}</p>
  <NuxtLink v-else to="/login">Se connecter</NuxtLink>
</template>

L'identifiant est dans sub, pas dans id. Si tu as besoin de champs absents des claims, comme la date de dernière connexion, appelle supabase.auth.getUser().

Protéger des pages

Par défaut, le module redirige vers /login quiconque n'est pas connecté. Les pages publiques se déclarent dans les options :

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

La liste exclude contient les pages ouvertes à tous. Toutes les autres exigent une connexion. L'option include fait l'inverse : elle limite la protection aux routes qu'elle liste.

La page de confirmation

Quand la connexion passe par un lien (lien magique, Google, GitHub), l'utilisateur revient sur /confirm. Cette page attend que la session soit lue puis redirige :

<script setup lang="ts">
const user = useSupabaseUser()

watch(user, () => {
  if (user.value) return navigateTo('/')
}, { immediate: true })
</script>

<template>
  <div>Connexion en cours...</div>
</template>

L'adresse de retour doit être autorisée dans Authentication, URL Configuration, Redirect URLs.

À retenir

• Supabase gère les comptes : signUp crée, signInWithPassword connecte, signOut déconnecte.
• La session est un JWT que le module Nuxt conserve dans des cookies.
• useSupabaseUser() donne sub (identifiant) et email, ou null si personne n'est connecté.
• redirectOptions fixe la page de connexion et les pages publiques (exclude).
• Une redirection ne protège pas les données : seule la RLS le fait.