nuxt-auth-kit 1.0.0

package/dist/runtime/components/profile/UpdateProfileForm.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="profile-update">
+    <h2 class="text-2xl font-bold text-[#1a2e1a] mb-6">{{ title }}</h2>
+
+    <form @submit.prevent="handleSubmit" class="space-y-5">
+      <div v-if="successMsg" class="bg-green-50 border border-green-200 text-green-700 rounded-xl px-4 py-3 text-sm">
+        {{ successMsg }}
+      </div>
+      <div v-if="error" class="bg-red-50 border border-red-200 text-red-700 rounded-xl px-4 py-3 text-sm">
+        {{ error }}
+      </div>
+
+      <!-- Avatar -->
+      <div v-if="showAvatar" class="flex items-center gap-5">
+        <div class="relative">
+          <div class="w-20 h-20 rounded-full overflow-hidden bg-[#1B4332]/10 flex items-center justify-center">
+            <img v-if="avatarPreview" :src="avatarPreview" class="w-full h-full object-cover" alt="avatar" />
+            <span v-else class="text-2xl font-bold text-[#1B4332]">{{ initials }}</span>
+          </div>
+          <label class="absolute -bottom-1 -right-1 w-7 h-7 bg-[#1B4332] rounded-full flex items-center justify-center cursor-pointer hover:bg-[#163828] transition">
+            <svg class="w-3.5 h-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+            <input type="file" accept="image/*" class="hidden" @change="handleAvatarChange" />
+          </label>
+        </div>
+        <div>
+          <p class="font-medium text-[#1a2e1a]">{{ form.name || user?.name }}</p>
+          <p class="text-sm text-[#6b7c6b]">{{ user?.email }}</p>
+        </div>
+      </div>
+
+      <!-- Name -->
+      <div>
+        <label class="block text-sm font-medium text-[#1a2e1a] mb-1.5">Nom complet</label>
+        <div class="relative">
+          <span class="absolute left-4 top-1/2 -translate-y-1/2 text-[#8a9a8a]">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+          </span>
+          <input
+            v-model="form.name"
+            type="text"
+            :placeholder="user?.name || 'Votre nom'"
+            class="w-full bg-white border border-[#e0e0d8] rounded-2xl py-3 pl-11 pr-4 text-[#1a2e1a] placeholder-[#aab4aa] focus:outline-none focus:border-[#1B4332] focus:ring-2 focus:ring-[#1B4332]/20 transition"
+          />
+        </div>
+        <p v-if="fieldErrors.name" class="text-red-500 text-xs mt-1">{{ fieldErrors.name }}</p>
+      </div>
+
+      <!-- Email -->
+      <div>
+        <label class="block text-sm font-medium text-[#1a2e1a] mb-1.5">Email</label>
+        <div class="relative">
+          <span class="absolute left-4 top-1/2 -translate-y-1/2 text-[#8a9a8a]">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+          </span>
+          <input
+            v-model="form.email"
+            type="email"
+            :placeholder="user?.email || 'votre@email.com'"
+            class="w-full bg-white border border-[#e0e0d8] rounded-2xl py-3 pl-11 pr-4 text-[#1a2e1a] placeholder-[#aab4aa] focus:outline-none focus:border-[#1B4332] focus:ring-2 focus:ring-[#1B4332]/20 transition"
+          />
+        </div>
+        <p v-if="fieldErrors.email" class="text-red-500 text-xs mt-1">{{ fieldErrors.email }}</p>
+      </div>
+
+      <!-- Extra slots for additional fields -->
+      <slot name="extra-fields" :form="form" />
+
+      <button
+        type="submit"
+        :disabled="loading"
+        class="bg-[#1B4332] hover:bg-[#163828] text-[#D4FF6B] font-semibold py-3 px-8 rounded-2xl transition-colors disabled:opacity-60"
+      >
+        <span v-if="!loading">Enregistrer les modifications</span>
+        <span v-else class="flex items-center gap-2">
+          <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
+          </svg>
+          Enregistrement...
+        </span>
+      </button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { useAuth } from '../../composables/useAuth'
+
+withDefaults(defineProps<{
+  title?: string
+  showAvatar?: boolean
+}>(), {
+  title: 'Informations du profil',
+  showAvatar: true
+})
+
+const emit = defineEmits<{ success: [user: any] }>()
+
+const { user, updateProfile, loading } = useAuth()
+
+const form = reactive({
+  name: user?.name || '',
+  email: user?.email || '',
+  avatar: null as File | null
+})
+
+const avatarPreview = ref<string | null>(user?.avatar as string || null)
+const error = ref<string | null>(null)
+const successMsg = ref<string | null>(null)
+const fieldErrors = reactive<Record<string, string>>({})
+
+const initials = computed(() => {
+  const name = form.name || user?.name || ''
+  return name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2)
+})
+
+function handleAvatarChange(e: Event) {
+  const file = (e.target as HTMLInputElement).files?.[0]
+  if (!file) return
+  form.avatar = file
+  const reader = new FileReader()
+  reader.onload = (ev) => { avatarPreview.value = ev.target?.result as string }
+  reader.readAsDataURL(file)
+}
+
+async function handleSubmit() {
+  error.value = null
+  successMsg.value = null
+  Object.keys(fieldErrors).forEach(k => delete fieldErrors[k])
+
+  const data: any = {}
+  if (form.name) data.name = form.name
+  if (form.email) data.email = form.email
+  if (form.avatar) data.avatar = form.avatar
+
+  const result = await updateProfile(data)
+
+  if (result.success) {
+    successMsg.value = 'Profil mis à jour avec succès !'
+    emit('success', user)
+  } else if (result.error) {
+    if (result.error.errors) {
+      Object.entries(result.error.errors).forEach(([k, v]) => { fieldErrors[k] = v[0] })
+    } else {
+      error.value = result.error.message
+    }
+  }
+}
+</script>

package/dist/runtime/composables/useAuth.d.ts

@@ -0,0 +1,58 @@
+import type { LoginCredentials, RegisterData, UpdateProfileData, UpdatePasswordData, ForgotPasswordData, ResetPasswordData, ApiError } from '../types/index.js';
+export declare function useAuth(): {
+    user: any;
+    token: any;
+    loading: any;
+    isAuthenticated: any;
+    isGuest: any;
+    hasRole: any;
+    hasPermission: any;
+    login: (credentials: LoginCredentials) => Promise<{
+        success: boolean;
+        error?: undefined;
+    } | {
+        success: boolean;
+        error: ApiError;
+    }>;
+    register: (data: RegisterData) => Promise<{
+        success: boolean;
+        error?: undefined;
+    } | {
+        success: boolean;
+        error: ApiError;
+    }>;
+    logout: () => Promise<void>;
+    fetchUser: () => Promise<any>;
+    updateProfile: (data: UpdateProfileData) => Promise<{
+        success: boolean;
+        error?: undefined;
+    } | {
+        success: boolean;
+        error: ApiError;
+    }>;
+    updatePassword: (data: UpdatePasswordData) => Promise<{
+        success: boolean;
+        error?: undefined;
+    } | {
+        success: boolean;
+        error: ApiError;
+    }>;
+    forgotPassword: (data: ForgotPasswordData) => Promise<{
+        success: boolean;
+        message: string;
+        error?: undefined;
+    } | {
+        success: boolean;
+        error: ApiError;
+        message?: undefined;
+    }>;
+    resetPassword: (data: ResetPasswordData) => Promise<{
+        success: boolean;
+        message: string;
+        error?: undefined;
+    } | {
+        success: boolean;
+        error: ApiError;
+        message?: undefined;
+    }>;
+};

package/dist/runtime/composables/useAuth.js

@@ -0,0 +1,214 @@
+import { useRuntimeConfig, navigateTo, useCookie } from "#app";
+import { useAuthStore } from "../stores/auth.js";
+export function useAuth() {
+  const store = useAuthStore();
+  const config = useRuntimeConfig();
+  const opts = config.public.nuxtAuthKit;
+  const apiBase = opts?.apiBase || "";
+  const endpoints = {
+    login: "/api/auth/login",
+    register: "/api/auth/register",
+    logout: "/api/auth/logout",
+    me: "/api/auth/me",
+    updateProfile: "/api/auth/profile",
+    updatePassword: "/api/auth/password",
+    forgotPassword: "/api/auth/forgot-password",
+    resetPassword: "/api/auth/reset-password",
+    ...opts?.endpoints || {}
+  };
+  const redirects = {
+    login: "/auth/login",
+    home: "/",
+    afterLogout: "/auth/login",
+    ...opts?.redirects || {}
+  };
+  const tokenCookieName = opts?.tokenCookieName || "auth_token";
+  const tokenCookie = useCookie(tokenCookieName, {
+    default: () => null,
+    secure: true,
+    sameSite: "lax",
+    maxAge: 60 * 60 * 24 * 7
+    // 7 days
+  });
+  async function apiFetch(path, options = {}) {
+    const headers = {
+      "Content-Type": "application/json",
+      "Accept": "application/json",
+      ...options.headers || {}
+    };
+    if (store.token) {
+      headers["Authorization"] = `Bearer ${store.token}`;
+    }
+    const response = await fetch(`${apiBase}${path}`, {
+      ...options,
+      headers
+    });
+    const data = await response.json();
+    if (!response.ok) {
+      const error = {
+        message: data.message || "Une erreur est survenue",
+        errors: data.errors
+      };
+      throw error;
+    }
+    return data;
+  }
+  function persistToken(token) {
+    store.setToken(token);
+    tokenCookie.value = token;
+  }
+  function clearToken() {
+    store.clearAuth();
+    tokenCookie.value = null;
+  }
+  async function login(credentials) {
+    store.setLoading(true);
+    try {
+      const data = await apiFetch(endpoints.login, {
+        method: "POST",
+        body: JSON.stringify(credentials)
+      });
+      persistToken(data.token);
+      store.setUser(data.user);
+      await navigateTo(redirects.home);
+      return { success: true };
+    } catch (error) {
+      return { success: false, error };
+    } finally {
+      store.setLoading(false);
+    }
+  }
+  async function register(data) {
+    store.setLoading(true);
+    try {
+      const response = await apiFetch(endpoints.register, {
+        method: "POST",
+        body: JSON.stringify(data)
+      });
+      persistToken(response.token);
+      store.setUser(response.user);
+      await navigateTo(redirects.home);
+      return { success: true };
+    } catch (error) {
+      return { success: false, error };
+    } finally {
+      store.setLoading(false);
+    }
+  }
+  async function logout() {
+    store.setLoading(true);
+    try {
+      await apiFetch(endpoints.logout, { method: "POST" });
+    } catch (_) {
+    } finally {
+      clearToken();
+      store.setLoading(false);
+      await navigateTo(redirects.afterLogout);
+    }
+  }
+  async function fetchUser() {
+    if (!store.token && !tokenCookie.value) return null;
+    if (!store.token && tokenCookie.value) {
+      store.setToken(tokenCookie.value);
+    }
+    try {
+      const data = await apiFetch(endpoints.me);
+      store.setUser(data.user || data);
+      return store.user;
+    } catch (_) {
+      clearToken();
+      return null;
+    }
+  }
+  async function updateProfile(data) {
+    store.setLoading(true);
+    try {
+      let body;
+      let headers = {};
+      if (data.avatar instanceof File) {
+        const formData = new FormData();
+        Object.entries(data).forEach(([k, v]) => {
+          if (v !== void 0 && v !== null) formData.append(k, v);
+        });
+        body = formData;
+      } else {
+        body = JSON.stringify(data);
+        headers["Content-Type"] = "application/json";
+      }
+      const response = await apiFetch(endpoints.updateProfile, {
+        method: "PUT",
+        body,
+        headers
+      });
+      store.setUser(response.user || response);
+      return { success: true };
+    } catch (error) {
+      return { success: false, error };
+    } finally {
+      store.setLoading(false);
+    }
+  }
+  async function updatePassword(data) {
+    store.setLoading(true);
+    try {
+      await apiFetch(endpoints.updatePassword, {
+        method: "PUT",
+        body: JSON.stringify(data)
+      });
+      return { success: true };
+    } catch (error) {
+      return { success: false, error };
+    } finally {
+      store.setLoading(false);
+    }
+  }
+  async function forgotPassword(data) {
+    store.setLoading(true);
+    try {
+      const response = await apiFetch(endpoints.forgotPassword, {
+        method: "POST",
+        body: JSON.stringify(data)
+      });
+      return { success: true, message: response.message };
+    } catch (error) {
+      return { success: false, error };
+    } finally {
+      store.setLoading(false);
+    }
+  }
+  async function resetPassword(data) {
+    store.setLoading(true);
+    try {
+      const response = await apiFetch(endpoints.resetPassword, {
+        method: "POST",
+        body: JSON.stringify(data)
+      });
+      return { success: true, message: response.message };
+    } catch (error) {
+      return { success: false, error };
+    } finally {
+      store.setLoading(false);
+    }
+  }
+  const { hasRole, hasPermission } = store;
+  return {
+    // State
+    user: store.user,
+    token: store.token,
+    loading: store.loading,
+    isAuthenticated: store.isAuthenticated,
+    isGuest: store.isGuest,
+    // RBAC
+    hasRole,
+    hasPermission,
+    // Actions
+    login,
+    register,
+    logout,
+    fetchUser,
+    updateProfile,
+    updatePassword,
+    forgotPassword,
+    resetPassword
+  };
+}

package/dist/runtime/middleware/auth.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/middleware/auth.js

@@ -0,0 +1,14 @@
+import { defineNuxtRouteMiddleware, navigateTo, useRuntimeConfig } from "#app";
+import { useAuthStore } from "../stores/auth.js";
+export default defineNuxtRouteMiddleware((to) => {
+  const store = useAuthStore();
+  const config = useRuntimeConfig();
+  const opts = config.public.nuxtAuthKit;
+  const loginPath = opts?.redirects?.login || "/auth/login";
+  if (!store.isAuthenticated) {
+    return navigateTo({
+      path: loginPath,
+      query: { redirect: to.fullPath }
+    });
+  }
+});

package/dist/runtime/middleware/guest.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/middleware/guest.js

@@ -0,0 +1,11 @@
+import { defineNuxtRouteMiddleware, navigateTo, useRuntimeConfig } from "#app";
+import { useAuthStore } from "../stores/auth.js";
+export default defineNuxtRouteMiddleware(() => {
+  const store = useAuthStore();
+  const config = useRuntimeConfig();
+  const opts = config.public.nuxtAuthKit;
+  const homePath = opts?.redirects?.home || "/";
+  if (store.isAuthenticated) {
+    return navigateTo(homePath);
+  }
+});

package/dist/runtime/middleware/role.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/middleware/role.js

@@ -0,0 +1,18 @@
+import { defineNuxtRouteMiddleware, navigateTo, useRuntimeConfig } from "#app";
+import { useAuthStore } from "../stores/auth.js";
+export default defineNuxtRouteMiddleware((to, _from) => {
+  const store = useAuthStore();
+  const config = useRuntimeConfig();
+  const opts = config.public.nuxtAuthKit;
+  const loginPath = opts?.redirects?.login || "/auth/login";
+  if (!store.isAuthenticated) {
+    return navigateTo(loginPath);
+  }
+  const requiredRoles = to.meta?.roles;
+  if (requiredRoles && requiredRoles.length > 0) {
+    const superAdmin = opts?.rbac?.superAdminRole || "super-admin";
+    if (!store.hasRole(superAdmin) && !store.hasRole(requiredRoles)) {
+      return navigateTo("/");
+    }
+  }
+});

package/dist/runtime/plugins/auth.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/auth.js

@@ -0,0 +1,20 @@
+import { defineNuxtPlugin, useCookie, useRuntimeConfig } from "#app";
+import { useAuthStore } from "../stores/auth.js";
+import { useAuth } from "../composables/useAuth.js";
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const store = useAuthStore();
+  const config = useRuntimeConfig();
+  const opts = config.public.nuxtAuthKit;
+  const tokenCookieName = opts?.tokenCookieName || "auth_token";
+  const tokenCookie = useCookie(tokenCookieName);
+  if (tokenCookie.value && !store.token) {
+    store.setToken(tokenCookie.value);
+    try {
+      const { fetchUser } = useAuth();
+      await fetchUser();
+    } catch (_) {
+      store.clearAuth();
+      tokenCookie.value = null;
+    }
+  }
+});

package/dist/runtime/stores/auth.d.ts

@@ -0,0 +1,38 @@
+import type { AuthUser } from '../types/index.js';
+export declare const useAuthStore: import("pinia").StoreDefinition<"nuxt-auth-kit", Pick<{
+    user: import("vue").Ref<any, any>;
+    token: import("vue").Ref<string | null, string | null>;
+    loading: import("vue").Ref<boolean, boolean>;
+    isAuthenticated: import("vue").ComputedRef<boolean>;
+    isGuest: import("vue").ComputedRef<boolean>;
+    hasRole: (role: string | string[]) => boolean;
+    hasPermission: (permission: string | string[]) => boolean;
+    setUser: (userData: AuthUser) => void;
+    setToken: (tokenValue: string) => void;
+    clearAuth: () => void;
+    setLoading: (state: boolean) => void;
+}, "user" | "token" | "loading">, Pick<{
+    user: import("vue").Ref<any, any>;
+    token: import("vue").Ref<string | null, string | null>;
+    loading: import("vue").Ref<boolean, boolean>;
+    isAuthenticated: import("vue").ComputedRef<boolean>;
+    isGuest: import("vue").ComputedRef<boolean>;
+    hasRole: (role: string | string[]) => boolean;
+    hasPermission: (permission: string | string[]) => boolean;
+    setUser: (userData: AuthUser) => void;
+    setToken: (tokenValue: string) => void;
+    clearAuth: () => void;
+    setLoading: (state: boolean) => void;
+}, "isAuthenticated" | "isGuest">, Pick<{
+    user: import("vue").Ref<any, any>;
+    token: import("vue").Ref<string | null, string | null>;
+    loading: import("vue").Ref<boolean, boolean>;
+    isAuthenticated: import("vue").ComputedRef<boolean>;
+    isGuest: import("vue").ComputedRef<boolean>;
+    hasRole: (role: string | string[]) => boolean;
+    hasPermission: (permission: string | string[]) => boolean;
+    setUser: (userData: AuthUser) => void;
+    setToken: (tokenValue: string) => void;
+    clearAuth: () => void;
+    setLoading: (state: boolean) => void;
+}, "hasRole" | "hasPermission" | "setUser" | "setToken" | "clearAuth" | "setLoading">>;

package/dist/runtime/stores/auth.js

@@ -0,0 +1,47 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+export const useAuthStore = defineStore("nuxt-auth-kit", () => {
+  const user = ref(null);
+  const token = ref(null);
+  const loading = ref(false);
+  const isAuthenticated = computed(() => !!token.value && !!user.value);
+  const isGuest = computed(() => !isAuthenticated.value);
+  function hasRole(role) {
+    if (!user.value?.roles) return false;
+    const roles = Array.isArray(role) ? role : [role];
+    return roles.some((r) => user.value.roles.includes(r));
+  }
+  function hasPermission(permission) {
+    if (!user.value?.permissions) return false;
+    const perms = Array.isArray(permission) ? permission : [permission];
+    return perms.some((p) => user.value.permissions.includes(p));
+  }
+  function setUser(userData) {
+    user.value = userData;
+  }
+  function setToken(tokenValue) {
+    token.value = tokenValue;
+  }
+  function clearAuth() {
+    user.value = null;
+    token.value = null;
+  }
+  function setLoading(state) {
+    loading.value = state;
+  }
+  return {
+    user,
+    token,
+    loading,
+    isAuthenticated,
+    isGuest,
+    hasRole,
+    hasPermission,
+    setUser,
+    setToken,
+    clearAuth,
+    setLoading
+  };
+}, {
+  persist: false
+});

package/dist/runtime/types/index.d.ts

@@ -0,0 +1,85 @@
+export interface AuthUser {
+    id: number | string;
+    name: string;
+    email: string;
+    avatar?: string;
+    roles?: string[];
+    permissions?: string[];
+    email_verified_at?: string | null;
+    created_at?: string;
+    updated_at?: string;
+    [key: string]: unknown;
+}
+export interface LoginCredentials {
+    email: string;
+    password: string;
+    remember?: boolean;
+}
+export interface RegisterData {
+    name: string;
+    email: string;
+    password: string;
+    password_confirmation: string;
+    role?: string;
+    [key: string]: unknown;
+}
+export interface UpdateProfileData {
+    name?: string;
+    email?: string;
+    avatar?: File | string | null;
+    [key: string]: unknown;
+}
+export interface UpdatePasswordData {
+    current_password: string;
+    password: string;
+    password_confirmation: string;
+}
+export interface ForgotPasswordData {
+    email: string;
+}
+export interface ResetPasswordData {
+    token: string;
+    email: string;
+    password: string;
+    password_confirmation: string;
+}
+export interface AuthResponse {
+    user: AuthUser;
+    token: string;
+    token_type?: string;
+    expires_in?: number;
+}
+export interface ApiError {
+    message: string;
+    errors?: Record<string, string[]>;
+}
+export interface ModuleOptions {
+    /** Laravel API base URL */
+    apiBase: string;
+    /** API endpoints (customizable) */
+    endpoints?: {
+        login?: string;
+        register?: string;
+        logout?: string;
+        me?: string;
+        updateProfile?: string;
+        updatePassword?: string;
+        forgotPassword?: string;
+        resetPassword?: string;
+    };
+    /** Token storage strategy */
+    tokenStorage?: 'cookie' | 'localStorage';
+    /** Cookie name for token */
+    tokenCookieName?: string;
+    /** Redirect routes */
+    redirects?: {
+        login?: string;
+        home?: string;
+        afterLogout?: string;
+    };
+    /** Role-based access control */
+    rbac?: {
+        superAdminRole?: string;
+        defaultUserRole?: string;
+    };
+}