Aller au contenu

@xid-kit/nuxt

Module Nuxt 3 avec middleware serveur H3/Nitro et composables Vueauto-importés pour les applications SSR et full-stack.

Afficher en Markdown

Statut

Statut du registre : UNPUBLISHED. Installez ce SDK uniquement depuis un checkout du code source du dépôt ; n’utilisez pas de registre de paquets externe.

Le statut du package est Package actuel. Le module Nuxt, lemiddleware serveur H3/Nitro et les composables auto-importés sontimplémentés. Un aller-retour réel avec un IdP sur une infrastructure deproduction est en attente de vérification manuelle.

Configuration du module

Ajoutez @xid-kit/nuxt au tableau modules. Le module importeautomatiquement tous les composables @xid-kit/vue et enregistre unplugin client uniquement qui installe XidPlugin.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@xid-kit/nuxt'],
  xid: {
    browser: {
      mode: 'oidc',
      issuer: 'https://xid.dev',
      clientId: 'client_abc123',
      redirectUri: 'https://app.example.com/auth/callback',
    },
  },
})

Composables (auto-importés)

<script setup lang="ts">
// No import needed -- Nuxt auto-imports from @xid-kit/vue
const auth = useAuth()
const userRef = useUser()
const orgRef = useOrganization()
const sessionRef = useSession()
</script>

<template>
  <div v-if="auth.isSignedIn">
    Signed in as {{ auth.userId }}
    <button @click="auth.signOut()">Sign out</button>
  </div>
</template>

Middleware serveur (authentification JWT)

createXidServerMiddleware retourne un gestionnaire H3 qui vérifie un JWT Bearer ou applicatif explicite et écrit dans event.context.xidAuth. Configurez les sessions Core de même origine avec sessionTokenExchange ; les URL relatives H3 v1 exigent aussi un requestOrigin fiable. Placez le fichier dans server/middleware/ pour que Nitro l’enregistre globalement.

// server/middleware/xid.ts
import { createXidServerMiddleware } from '@xid-kit/nuxt'

export default createXidServerMiddleware({
  jwtKey: JSON.parse(process.env.XID_JWKS_PUBLIC_KEY!),
  issuer: 'https://acme.xid.dev',
  sessionTokenExchange: { endpoint: '/v1/sessions/token' },
  requestOrigin: process.env.XID_APP_ORIGIN!,
  protectedRoutes: ['/api/admin'],
})

Lecture de l’authentification dans les routes serveur

// server/routes/api/me.get.ts
import { getXidAuth } from '@xid-kit/nuxt'

export default defineEventHandler((event) => {
  const auth = getXidAuth(event)
  if (!auth.userId) {
    throw createError({ statusCode: 401, message: 'Unauthorized' })
  }
  return { userId: auth.userId, orgId: auth.orgId }
})

API exportée

Exporter Type Objectif
createXidServerMiddleware function Fabrique de gestionnaire d’événements H3 : vérifie le JWT, écritevent.context.xidAuth, protège les routes
getXidAuth function Lire AuthResult depuis event.context.xidAuth dans les routes etgestionnaires serveur
XID_AUTH_CONTEXT_KEY constante string Clé de contexte utilisée pour stocker le résultat d’authentification(‘xidAuth’)
XidServerMiddlewareOptions type jwtKey, issuer, authorizedParties, jwtCookieName, sessionTokenExchange, requestOrigin, protectedRoutes, onUnauthenticated

Notes de sécurité

  • event.context.xidAuth est réservé au serveur et n’est jamais envoyéau navigateur.
  • Le middleware supprime tout jeton d’authentification fourni par le clientet ne réinjecte que le résultat vérifié.
  • Placez le fichier middleware dans server/middleware/ pour qu’ilcouvre toutes les routes comme middleware Nitro global.
Navigation

Saisissez votre recherche...

Utilisez les touches fléchées pour naviguerAppuyez sur Entrée pour sélectionnerAppuyez sur Échap pour fermer