npm package: @innobdx/nuxt-oidc-auth
Description: Module d'authentification OIDC pour Nuxt 4
Latest version: 2.1.0

# Nuxt OIDC Auth
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

Module d'authentification Nuxt 3 pour l'implémentation d'OpenID Connect (OIDC).

## Fonctionnalités

- 🔒 Intégration fluide de l'authentification OIDC dans les applications Nuxt 3
- 🔄 Support du flux d'authentification code
- 🔄 Renouvellement automatique des tokens
- 🛡️ Middleware global pour protéger les routes
- 🌐 Compatible avec différents fournisseurs OIDC (Keycloak, Auth0, etc.)

## Installation

```bash
npm install @innobdx/nuxt-oidc-auth
```

## Configuration

Ajoutez le module à votre application Nuxt dans votre fichier `nuxt.config.ts` :

```ts
export default defineNuxtConfig({
  modules: ['@innobdx/nuxt-oidc-auth'],
  nuxtOidcAuth: {
    authority: 'https://votre-serveur-auth.com/realm',
    client_id: 'votre-client-id',
    // Autres options...
  }
})
```

### Options disponibles

| Nom | Description | Obligatoire | Valeur par défaut |
|-----|-------------|-------------|-------------------|
| `authority` | URL du fournisseur d'identité OIDC | Oui | - |
| `client_id` | Identifiant du client OIDC | Oui | - |
| `client_secret` | Secret du client OIDC | Non | - |
| `redirect_uri` | URI de redirection après authentification | Non | `${window.location.origin}/auth` |
| `silent_redirect_uri` | URI de redirection pour le renouvellement silencieux | Non | `${window.location.origin}/auth/silent-refresh` |
| `post_logout_redirect_uri` | URI de redirection après déconnexion | Non | `${window.location.origin}` |
| `response_type` | Type de réponse OIDC | Non | `code` |
| `scope` | Scopes OIDC demandés | Non | `openid profile email offline_access` |
| `silentRequestTimeoutInSeconds` | Délai d'expiration pour les requêtes silencieuses en secondes | Non | `10` |

## Utilisation

### Composable useAuth

Utilisez le composable `useAuth` pour accéder à toutes les fonctionnalités d'authentification :

```vue
<script setup>
const { user, loggedIn, accessToken, logout } = useAuth()
</script>

<template>
  <div v-if="loggedIn">
    <p>Bienvenue, {{ user.name }} !</p>
    <button @click="logout">Se déconnecter</button>
  </div>
  <div v-else>
    <p>Vous n'êtes pas connecté.</p>
  </div>
</template>
```

### API du composable

| Nom | Type | Description |
|-----|------|-------------|
| `user` | `Ref<any>` | Profil de l'utilisateur |
| `accessToken` | `Ref<string>` | Token d'accès JWT |
| `loggedIn` | `Ref<boolean>` | État de connexion |
| `tokenIsExpired` | `Ref<boolean>` | Indique si le token est expiré |
| `signInRedirect()` | `Function` | Redirige vers la page de login |
| `signInCallback()` | `Function` | Traite le callback d'authentification |
| `renewToken()` | `Function` | Force le renouvellement du token |
| `logout()` | `Function` | Déconnecte l'utilisateur |

## Protection des routes 

Un middleware global est automatiquement enregistré pour protéger toutes les routes. Si l'utilisateur n'est pas connecté, il sera redirigé vers la page d'authentification.

Les routes d'authentification suivantes sont automatiquement exclues de la protection :
- `/auth` - Page de callback d'authentification
- `/auth/silent-refresh` - Page de renouvellement silencieux

## Configuration avec Keycloak

### 1. Créer un client dans Keycloak

- Créez un nouveau client avec le type "OpenID Connect"
- Définissez "Access Type" sur "public"
- Ajoutez les redirections valides :
  - `http://localhost:3000/auth`
  - `http://localhost:3000/auth/silent-refresh` 
  - `http://localhost:3000`
- Activez "Web Origins" avec la valeur `http://localhost:3000`

## Exemple complet

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@innobdx/nuxt-oidc-auth'],
  nuxtOidcAuth: {
    authority: 'https://keycloak-server.example.com/realms/your-realm',
    client_id: 'your-client-id',
    silentRequestTimeoutInSeconds: 30
  },
  ssr: false  // Le module fonctionne uniquement en mode SPA (client-side)
})
```

```vue
<!-- pages/profile.vue -->
<script setup lang="ts">
const { user, accessToken, logout } = useAuth()
</script>

<template>
  <div>
    <h1>Profil Utilisateur</h1>
    <div v-if="user">
      <p>Nom: {{ user.name }}</p>
      <p>Email: {{ user.email }}</p>
      <p>Identifiant: {{ user.sub }}</p>
      <button @click="logout">Se déconnecter</button>
    </div>
  </div>
</template>
```

## Contribution

<details>
  <summary>Développement local</summary>
  
  ```bash
  # Installer les dépendances
  npm install
  
  # Générer les types
  npm run dev:prepare
  
  # Développer avec le playground
  npm run dev
  
  # Construire le playground
  npm run dev:build
    
  # Publier une nouvelle version
  npm run release
  ```
</details>

## Licence

MIT

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@innobdx/nuxt-oidc-auth/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/@innobdx/nuxt-oidc-auth

[npm-downloads-src]: https://img.shields.io/npm/dm/@innobdx/nuxt-oidc-auth.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/@innobdx/nuxt-oidc-auth

[license-src]: https://img.shields.io/npm/l/@innobdx/nuxt-oidc-auth.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/@innobdx/nuxt-oidc-auth

[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com