Auth-Kit 🔐

Auth-Kit est un kit d’authentification moderne pour Vue 3, conçu pour fonctionner avec Pinia, TypeScript et des formulaires dynamiques.
Il fournit un flux d’authentification clair, extensible et prêt pour la production.

💡 Pensé pour les apps SaaS, dashboards admin et projets modulaires.

✨ Fonctionnalités

• 🔐 Login sécurisé
• ⏳ Gestion du chargement (isLoading)
• 🔒 Verrouillage temporaire après erreurs (isLocked)
• 🔁 Gestion du flux d’authentification (steps)
• 🌍 Compatible vue-i18n
• 🧩 Intégration native avec @axproo/form-builder
• 🧠 Store Pinia prêt à l’emploi
• 🧪 Full TypeScript

📦 Installation

npm install auth-kit pinia vue

⚠️ auth-kit utilise des peerDependencies, assure-toi qu’elles sont bien installées.

🔗 Peer Dependencies

| Package | Version | | ---------------- | ------- | | vue | ^3.5.0 | | pinia | 3.0.4 | | vite | ^7.2.4 | | @axproo/app-core | ^0.1.0 |

🚀 Utilisation rapide

1️⃣ Initialiser Pinia

import { createPinia } from 'pinia'

export const pinia = createPinia()

2️⃣ Utiliser Auth-Kit

import { useAuth, useAuthFlowStore } from '@axproo/auth-kit'
import { pinia } from '@/pinia'

const { login } = useAuth()
const flow = useAuthFlowStore(pinia)

3️⃣ Soumettre le formulaire

const onSubmit = async (data: Record<string, any>) => {
  const ok = await login(pinia, data)

  if (ok) {
    flow.setStep('dashboard')
  }
}

🧩 Exemple complet (Login)

<template>
  <DynamicForm
    form-id="auth_login"
    :ui="loginSchema"
    @submit="onSubmit"
    form-class="space-y-6"
  >
    <template #spinner>
      <span class="flex items-center justify-center gap-2">
        <Loader :size="20" class="animate-spin" />
        Chargement...
      </span>
    </template>

    <template #passwordToggleButton="{ toggle, showPassword }">
      <button type="button" @click="toggle">
        <EyeOff v-if="showPassword" />
        <Eye v-else />
      </button>
    </template>

    <template #submit>
      <button :disabled="flow.isLoading || flow.isLocked">
        <span v-if="flow.isLoading">Connexion...</span>
        <span v-else-if="flow.isLocked">
          Verrouillé {{ flow.lockTimer }}s
        </span>
        <span v-else>Se connecter</span>
      </button>
    </template>

    <template #errorGlobal="{ error }">
      <ErrorMessage
        v-if="error"
        :message="error"
        :is-locked="flow.isLocked"
      />
    </template>
  </DynamicForm>
</template>

🧠 Stores disponibles

useAuthFlowStore

| Propriété | Description | | ----------- | ------------------------------------------- | | isLoading | État de chargement | | isLocked | Compte temporairement verrouillé | | lockTimer | Temps restant du verrouillage | | step | Étape actuelle (login, dashboard, etc.) |

Méthodes

flow.setStep('login' | 'dashboard' | string)

🧩 Slots supportés (DynamicForm)

| Slot | Description | | ---------------------- | ---------------------------------- | | spinner | Indicateur de chargement | | passwordToggleButton | Afficher / masquer le mot de passe | | showLabel | Label “Se souvenir de moi” | | showPasswordForgot | Bouton “Mot de passe oublié” | | submit | Bouton de soumission | | errorGlobal | Message d’erreur global |

🛠 Build

npm run build

Génère :

• auth-kit.es.js → ESM
• auth-kit.umd.js → UMD
• index.d.ts → Types TS

🧪 Environnements supportés

• Vue 3 SPA
• Dashboard Admin
• SaaS
• Projets modulaires / monorepos

📄 Licence

MIT © AXPROO

🤝 Contribuer

Les PR sont bienvenues. Merci de respecter la structure TypeScript et Pinia existante.

💬 Support

Pour toute question ou intégration avancée :

👉 AXPROO Team