nuxt-auth-kit

export default defineNuxtConfig({
  modules: [
    'nuxt-auth-kit',
    '@nuxt/ui'       // requis pour les styles Tailwind
  ],

  nuxtAuthKit: {
    apiBase: process.env.NUXT_PUBLIC_API_BASE || 'http://localhost:8000',

    endpoints: {
      login:          '/api/auth/login',
      register:       '/api/auth/register',
      logout:         '/api/auth/logout',
      me:             '/api/auth/me',
      updateProfile:  '/api/profile',
      updatePassword: '/api/profile/password',
      forgotPassword: '/api/auth/forgot-password',
      resetPassword:  '/api/auth/reset-password'
    },

    redirects: {
      login:       '/auth/login',
      home:        '/',
      afterLogout: '/auth/login'
    },

    tokenCookieName: 'auth_token',

    rbac: {
      superAdminRole:  'super-admin',
      defaultUserRole: 'user'
    }
  }
})

NUXT_PUBLIC_API_BASE=https://api.monprojet.com

<template>
  <AuthLayout :quote="quote">
    <!-- formulaire ici -->
  </AuthLayout>
</template>

<script setup lang="ts">
// Aucun import — AuthLayout est auto-importé
const quote = {
  text:     'Une expérience fluide et agréable. La plateforme rend tout si simple.',
  author:   '3S Tech Group',
  location: 'Dakar, Sénégal',
  appName: '3S-Auth',
}
</script>

<template>
  <AuthLayout :quote="quote">
    <AuthLoginForm
      :show-social="true"
      @forgot-password="navigateTo('/auth/forgot-password')"
      @register="navigateTo('/auth/register')"
    />
  </AuthLayout>
</template>

<script setup lang="ts">
// Aucun import — tout est auto-importé
definePageMeta({ middleware: 'guest' })

const quote = {
  text: 'Une expérience fluide et agréable.',
  author: '3S Tech Group',
  location: 'Dakar'
}
</script>

<template>
  <AuthLayout>
    <!-- Défaut — mot de passe requis, sans téléphone -->
    <AuthRegisterForm @login="navigateTo('/auth/login')" />

    <!-- Sans mot de passe (ex: magic link) -->
    <AuthRegisterForm
      :except="['password']"
      @login="navigateTo('/auth/login')"
    />

    <!-- Avec téléphone, sans mot de passe -->
    <AuthRegisterForm
      :except="['password']"
      @login="navigateTo('/auth/login')"
    />

    <!-- Sans téléphone ni mot de passe -->
    <AuthRegisterForm
      :except="['password', 'phone']"
      @login="navigateTo('/auth/login')"
    />
  </AuthLayout>
</template>

<script setup lang="ts">
definePageMeta({ middleware: 'guest' })
</script>

<template>
  <AuthLayout>
    <AuthForgotPasswordForm
      @back-to-login="navigateTo('/auth/login')"
    />
  </AuthLayout>
</template>

<script setup lang="ts">
definePageMeta({ middleware: 'guest' })
</script>

<template>
  <AuthLayout>
    <AuthResetPasswordForm
      @back-to-login="navigateTo('/auth/login')"
    />
  </AuthLayout>
</template>

<script setup lang="ts">
// Lit ?token=xxx&email=xxx depuis useRoute() automatiquement
definePageMeta({ middleware: 'guest' })
</script>

<template>
  <div class="max-w-2xl mx-auto py-10 px-4 space-y-10">
    <!-- Défaut — prénom, nom, email visibles -->
    <ProfileUpdateForm
      title="Mon profil"
      :show-avatar="true"
      @success="onProfileSaved"
    />

    <!-- Avec téléphone, sans email -->
    <ProfileUpdateForm
      :except="['email']"
      @success="onProfileSaved"
    />

    <!-- Nom uniquement -->
    <ProfileUpdateForm
      :except="['email', 'phone']"
      @success="onProfileSaved"
    />
  </div>
</template>

<script setup lang="ts">
definePageMeta({ middleware: 'auth' })
function onProfileSaved() {
  // ex: afficher une notification toast
}
</script>

<template>
  <div class="max-w-2xl mx-auto py-10 px-4 space-y-10">
    <ProfileUpdatePasswordForm
      title="Changer le mot de passe"
    />
  </div>
</template>

<script setup lang="ts">
definePageMeta({ middleware: 'auth' })
</script>

<script setup lang="ts">
// useAuth est auto-importé — aucun import nécessaire
const { user, isAuthenticated, logout, loading } = useAuth()

async function handleLogout() {
  await logout()  // redirige automatiquement
}
</script>

<template>
  <div>
    <span v-if="isAuthenticated">Bonjour, {{ user?.name }}</span>
    <button @click="handleLogout" :disabled="loading">Déconnexion</button>
  </div>
</template>

const { hasRole, hasPermission } = useAuth()

// Rôle unique
if (hasRole('admin')) { /* ... */ }

// Plusieurs rôles — au moins un suffit
if (hasRole(['admin', 'manager'])) { /* ... */ }

// Permission unique
if (hasPermission('edit-posts')) { /* ... */ }

<template>
  <AdminPanel v-if="hasRole('admin')" />

  <button v-if="hasPermission('create-post')">
    Créer un article
  </button>
</template>

<script setup lang="ts">
const { hasRole, hasPermission } = useAuth()
</script>

// Page connectés uniquement
definePageMeta({ middleware: 'auth' })

// Page visiteurs uniquement
definePageMeta({ middleware: 'guest' })

// Page avec rôle requis
definePageMeta({
  middleware: 'role',
  roles: ['admin', 'manager']
})

// Connecté ET rôle requis
definePageMeta({
  middleware: ['auth', 'role'],
  roles: ['admin']
})

use App\Http\Controllers\AuthController;

Route::prefix('auth')->group(function () {
    Route::post('login',           [AuthController::class, 'login']);
    Route::post('register',        [AuthController::class, 'register']);
    Route::post('forgot-password', [AuthController::class, 'forgotPassword']);
    Route::post('reset-password',  [AuthController::class, 'resetPassword']);

    Route::middleware('auth:sanctum')->group(function () {
        Route::post('logout',  [AuthController::class, 'logout']);
        Route::get('me',       [AuthController::class, 'me']);
        Route::put('profile',  [AuthController::class, 'updateProfile']);
        Route::put('password', [AuthController::class, 'updatePassword']);
    });
});

public function me(Request $request): JsonResponse
{
    return response()->json([
        'user' => $request->user()->load('roles', 'permissions'),
    ]);
}

<AuthLoginForm
  :ui="{
    inputRounded:   'rounded-lg',
    btnColor:       'primary',
    btnRounded:     'rounded-lg',
    titleColor:     'text-slate-900',
    accentColor:    'text-blue-600',
  }"
/>

<AuthLayout
  :quote="quote"
  :ui="{
    layoutPageColor:    '#1e293b',
    layoutTextColor:    '#f8fafc',
    layoutTaglineColor: 'rgba(248,250,252,0.7)',
  }"
/>

<PhoneInput
  v-model="form.phone"
  v-model:country-code="form.phoneCountry"
  :preferred-countries="['SN', 'FR', 'CI', 'MA', 'CM']"
  :use-browser-locale="true"
  :ui="{ inputRounded: 'rounded-xl' }"
  @data="onPhoneData"
/>

interface PhoneInputData {
  e164:        string | null  // ex: '+221771234567' — à stocker en BDD
  countryCode: string | null  // ex: 'SN'
  formatted:   string         // ex: '77 123 45 67' — format national
  isValid:     boolean
}

import type {
  AuthUser,           // structure de l'utilisateur
  LoginCredentials,   // { email, password, remember? }
  RegisterData,       // { name, email, password, password_confirmation }
  UpdateProfileData,  // { name?, email?, avatar? }
  UpdatePasswordData, // { current_password, new_password, new_password_confirmation }
  ForgotPasswordData, // { email }
  ResetPasswordData,  // { token, email, password, password_confirmation }
  AuthResponse,       // { user, token }
  ApiError,           // { message, errors? }
  ModuleOptions       // config nuxtAuthKit
} from 'nuxt-auth-kit'

// Structure minimale de AuthUser
interface AuthUser {
  id:           number | string
  name:         string
  email:        string
  avatar?:      string
  roles?:       string[]
  permissions?: string[]
  [key: string]: unknown
}