Vue 3 Supabase Starter

Authentification prête à l'emploi avec Supabase, Vue 3 & Tailwind CSS.

Démo: https://vue3-supabase-starter.netlify.app/

• formulaire de login avec validation (vee-validate)
• formulaire de création de compte
• persistence de l'utilisateur
• formulaire de reset du mot de passe (pré-rempli avec email rentré lors du login)

Getting Started

Supabase

Vous devez créer un projet sur Supabase avant toute chose.

Code

• Cloner ce repo
• Créer un fichier .env et renseigner les variables présentes dans le fichier env.d.ts.

Renseigner notamment les variables d'env VITE_SUPABASE_URLet VITE_SUPABASE_ANON_KEY, que l'on peut trouver sur la page "settings > API", qui permettent au client supabase de communiquer avec l'API de supabase.

• npm install
• npm run dev

Utilisation

Tout le code est dans un dossier "src/auth" (composants, composables etc) pour qu'il soit plus facile de déplacer l'authentification supabase sur un projet existant.

useAuth

Utilisez le composable useAuth pour tout ce qui est lié à l'authentification.

const { user, login, register, logout } = useAuth();

Ci-dessus, user est l'utilisateur actuellement connecté, il s'agit d'une variable réactive.

Exemple: afficher un lien dans le menu seulement pour un utilisateur connecté:

<script setup lang="ts">
  import useAuth from "@/auth/composables/useAuth";
  const { user } = useAuth();
</script>

<template>
  <div>
    <div v-if="user">Your email is {{ user.email }}<div>
    <div v-else>Vous n'êtes pas connecté</div>
  </div>
</template>

useSupabase

Le projet utilise le package @supabase/supabase-js. Pour récupérer l'instance du client supabase.

const supabase = useSupabase();

Todo

• forgot password
• email confirmation