@xid-kit/vue

Statut

Le statut du package est Package actuel. Le plugin Vue 3, lescomposables et les composants headless sont implémentés. Un aller-retourréel avec un IdP sur une infrastructure de production est en attente devérification manuelle.

Configuration du plugin

Enregistrez XidPlugin une seule fois dans main.ts. Il créeun singleton XidClient, le fournit via XID_INJECTION_KEY etappelle client.load() pour hydrater l’état de session.

// main.ts
import { createApp } from 'vue'
import { XidPlugin } from '@xid-kit/vue'
import App from './App.vue'

const app = createApp(App)
app.use(XidPlugin, { apiUrl: 'https://your-tenant.xid.dev' })
app.mount('#app')

Composables

import { useAuth, useUser, useOrganization, useSession } from '@xid-kit/vue'

const auth = useAuth()
// auth.isLoaded / auth.isSignedIn / auth.userId
// auth.getToken()  -> Promise<Result<string, XidError>>
// auth.signOut()   -> Promise<Result<null, XidError>>

const userRef = useUser()
// userRef.value.isLoaded && userRef.value.isSignedIn -> userRef.value.user.id

const orgRef = useOrganization()
// orgRef.value.organization / orgRef.value.membership / orgRef.value.setActive()

const sessionRef = useSession()
// sessionRef.value.session / sessionRef.value.getToken()

Composants

<template>
  <SignInButton sign-in-url="/sign-in" redirect-url="/dashboard">Log in</SignInButton>
  <SignOutButton redirect-url="/">Log out</SignOutButton>

  <Protect role="org:admin">
    <AdminPanel />
    <template #fallback><p>Access denied.</p></template>
  </Protect>

  <Protect permission="org:member:read">
    <MemberList />
  </Protect>
</template>

<script setup lang="ts">
import { SignInButton, SignOutButton, Protect } from '@xid-kit/vue'
</script>

API exportée

Exporter	Type	Objectif
`XidPlugin`	Plugin Vue	Point d’entrée app.use ; enregistre XidClient et appelle client.load()
`createXidClient`	function	Fabrique retournant une instance XidClient autonome
`useXidClient`	composable	Retourne le XidClient injecté ; lève une exception si le plugin n’est pasenregistré
`XID_INJECTION_KEY`	InjectionKey	Symbole utilisé pour fournir et injecter le singleton XidClient
`useXid`	composable	Référence d’état complète plus toutes les actions client (UseXidReturn)
`useAuth`	composable	isLoaded, isSignedIn, userId, getToken, signOut
`useUser`	composable	Ref encapsulant une union discriminante sur isLoaded / isSignedIn / user
`useOrganization`	composable	Organisation active, appartenance et action setActive
`useSession`	composable	Session active et action getToken
`SignInButton`	composant	Bouton headless qui redirige vers l’URL de connexion au clic
`SignOutButton`	composant	Bouton headless qui appelle client.signOut() au clic
`Protect`	composant	Portail de rôle et de permission basé sur les slots avec slots par défautet de secours