@innobdx/nuxt-oidc-auth NPM

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

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 :

<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

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

Licence

MIT

@nuxt/kit oidc-client-ts

1.4.0

6 months ago

1.3.0

6 months ago

1.2.0

6 months ago