Brancher Supabase à Nuxt

Ce que tu vas apprendre

• Installer et déclarer le module @nuxtjs/supabase.
• Renseigner l'adresse du projet et les clés dans un fichier .env qui ne part jamais dans Git.
• Savoir ce qui se passe côté navigateur et ce qui reste côté serveur.

Installer le module

Dans ton projet Nuxt, une commande installe le module et l'ajoute à la configuration :

npx nuxi@latest module add supabase

Vérifie ensuite que nuxt.config.ts le déclare :

export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase']
})

Un module Nuxt est une extension qui ajoute des fonctions prêtes à l'emploi à ton projet. Celui-ci apporte le client Supabase, la gestion de la session et des fonctions pour le serveur.

Les variables d'environnement

Crée un fichier .env à la racine du projet :

NUXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NUXT_PUBLIC_SUPABASE_KEY=sb_publishable_...

Une variable d'environnement est un réglage stocké hors du code, propre à chaque machine. L'adresse vient du dialogue Connect du tableau de bord, la clé de Settings, API Keys.

Le module lit ces noms. Les anciens SUPABASE_URL et SUPABASE_KEY fonctionnent encore comme solution de repli.

Protéger le fichier .env

Le fichier .env doit être ignoré par Git. Vérifie que ton .gitignore contient la ligne :

.env

Quelle clé pour quoi ?

Le module connaît deux clés :

Les variables qui commencent par NUXT_PUBLIC_ sont envoyées au navigateur. C'est voulu pour la clé publishable.

La clé secrète n'a pas ce préfixe. Elle ne sert qu'à un code que tu exécutes sur ton serveur, et tu n'en as pas besoin pour ce cours. Ne l'ajoute que le jour où un cas précis l'exige.

Tester la connexion côté page

useSupabaseClient() est disponible dans toutes tes pages, sans import :

<script setup lang="ts">
const supabase = useSupabaseClient()

const { data: recettes } = await useAsyncData('recettes', async () => {
  const { data } = await supabase.from('recettes').select('id, titre')
  return data
})
</script>

<template>
  <ul>
    <li v-for="r in recettes" :key="r.id">{{ r.titre }}</li>
  </ul>
</template>

useAsyncData charge les données avant l'affichage de la page. Si ta table contient des recettes, elles apparaissent sur /recettes.

Si la liste reste vide alors que la table contient des lignes, c'est probablement la RLS qui bloque la lecture. Le cours 05 explique comment l'autoriser.

Utiliser Supabase dans une route serveur

Le code d'un dossier server/ s'exécute sur le serveur. Le module fournit serverSupabaseClient pour y créer un client :

import { serverSupabaseClient } from '#supabase/server'

export default eventHandler(async (event) => {
  const client = await serverSupabaseClient(event)
  const { data } = await client.from('recettes').select('*')
  return { recettes: data }
})

La fonction est asynchrone : il faut l'attendre avec await. Elle reçoit l'événement de la requête pour retrouver la session de l'utilisateur.

Ce client utilise la clé publishable et reste soumis à la RLS. Pour contourner la RLS, le module propose une autre fonction, serverSupabaseServiceRole, à réserver à des tâches d'administration.

À retenir

• npx nuxi@latest module add supabase installe @nuxtjs/supabase.
• L'adresse et la clé publishable vont dans .env, sous NUXT_PUBLIC_SUPABASE_URL et NUXT_PUBLIC_SUPABASE_KEY.
• .env est dans .gitignore, toujours.
• La clé secrète (NUXT_SUPABASE_SECRET_KEY) n'a pas de préfixe PUBLIC et ne sert que côté serveur.
• useSupabaseClient() dans les pages, serverSupabaseClient(event) dans les routes de server/.