Nuxt Auth Layer

Nuxt Layer para centralizar la lógica de autenticación, login, recuperación y cambio de contraseña entre los proyectos de BAHU.

Estructura

Layers-nuxt/
├── components/auth/          # Componentes reutilizables con prefijo Auth
│   ├── LoginForm.vue
│   ├── RecoveryForm.vue
│   ├── ResetForm.vue
│   ├── UpdateForm.vue
│   └── SessionExpiredModal.vue
├── composables/              # Lógica compartida
│   ├── useApi.ts
│   ├── useAuthApi.ts
│   ├── useAuth.ts
│   ├── usePublicApi.ts
│   ├── useRefreshToken.ts
│   └── useRecaptcha.ts (stub)
├── stores/authStore.ts       # Pinia store de autenticación
├── middleware/auth.ts        # Middleware de protección de rutas
├── domain/core/auth/         # Modelos Auth y Profile
├── utils/safeLocalStorage.ts
└── locales/es.json + en.json # Traducciones de login

Cómo usar en un proyecto hijo

1. Agrega el layer a nuxt.config.ts:

export default defineNuxtConfig({
  extends: [
    '../Layers-nuxt', // ruta relativa o paquete npm
  ],
});

2. Configura los endpoints en runtimeConfig.public.auth:

runtimeConfig: {
  public: {
    apiEndpoint: 'https://api.ejemplo.com',
    auth: {
      loginPath: '/onboarding/authorizations', // o '/login'
      refreshPath: '/onboarding/refresh',
      recoverPath: '/users/password-recovery',
      resetPath: '/users/password-recovery-confirmation',
      updatePath: '/self/profile/password-change',
      fetchProfile: true,          // ¿llamar /users/me tras login?
      recoveryUsesCompany: true,
      recoveryUsesRecaptcha: false,
    },
  },
}

3. Usa los componentes o el store en tus páginas:

<template>
  <AuthLoginForm
    :show-company-select="!isUniqueCompany"
    :companies="companies"
    :required-roles="requiredRoles"
    @success="onLoginSuccess"
    @forgot="showForgot = true"
  >
    <template #logo>
      <ThemeLogo />
    </template>
  </AuthLoginForm>

  <AuthRecoveryForm
    v-else
    :show-company-select="!isUniqueCompany"
    :companies="companies"
    @cancel="showForgot = false"
  />
</template>

Notas importantes

• El layer espera que el proyecto host defina useRecaptcha si se usa recoveryUsesRecaptcha: true.
• El layer usa PrimeVue, Pinia y @nuxtjs/i18n como dependencias compartidas.
• Los componentes están prefijados como Auth al importarlos automáticamente (AuthLoginForm, etc).