@innobdx/nuxt-oidc-auth

Nuxt OIDC Auth

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

npm install @innobdx/nuxt-oidc-auth

Configuration

Ajoutez le module à votre application Nuxt dans votre fichier nuxt.config.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

Utilisation

Composable useAuth

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

<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

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

// 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)
})

<!-- 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

# 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

Licence

MIT