---
title: "@xid-kit/nuxt"
description: "Module Nuxt 3 avec middleware serveur H3/Nitro et composables Vueauto-importés pour les applications SSR et full-stack."
locale: "fr"
---

> Documentation Index
> Fetch the locale documentation index at: https://xid.dev/fr/llms.txt
> Use this file to discover all available pages before exploring further.

# @xid-kit/nuxt

## Statut

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](/fr/sdks/vue) et enregistre unplugin client uniquement qui installe `XidPlugin`.

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@xid-kit/nuxt'],

  runtimeConfig: {
public: {
  xidApiUrl: '', // optional: omit for same-origin deployment
},
  },
})
```

## Composables (auto-importés)

```vue
<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 d'événements H3qui vérifie le JWT sans réseau et écrit `event.context.xidAuth`.Placez le fichier dans `server/middleware/` pour que Nitrol'enregistre comme middleware global.

```ts
// 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',
  protectedRoutes: ['/api/admin'],
})
```

## Lecture de l'authentification dans les routes serveur

```ts
// 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, cookieName, 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.

Source: https://xid.dev/fr/sdks/nuxt/index.mdx