@xid-kit/vue

Estado

El estado del paquete es Paquete actual. El plugin de Vue 3, los composables y los componentes headless están implementados. Una prueba de ida y vuelta real contra un IdP en infraestructura de producción está pendiente de verificación manual.

Configuración del plugin

Registra XidPlugin una sola vez en main.ts. Crea un singleton XidClient, lo proporciona mediante XID_INJECTION_KEY y llama a client.load() para hidratar el estado de sesión.

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

Componentes

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

Exportar	Tipo	Propósito
`XidPlugin`	Plugin de Vue	Punto de entrada app.use; registra XidClient y llama a client.load()
`createXidClient`	function	Fábrica que devuelve una instancia standalone de XidClient
`useXidClient`	composable	Devuelve el XidClient inyectado; lanza excepción si el plugin no está registrado
`XID_INJECTION_KEY`	InjectionKey	Símbolo usado para proveer e inyectar el singleton de XidClient
`useXid`	composable	Ref de estado completo más todas las acciones del cliente (UseXidReturn)
`useAuth`	composable	isLoaded, isSignedIn, userId, getToken, signOut
`useUser`	composable	Ref que envuelve una unión discriminada sobre isLoaded / isSignedIn / user
`useOrganization`	composable	Org activa, membresía y acción setActive
`useSession`	composable	Sesión activa y acción getToken
`SignInButton`	componente	Botón headless que redirige a la URL de inicio de sesión al hacer clic
`SignOutButton`	componente	Botón headless que llama a client.signOut() al hacer clic
`Protect`	componente	Barrera de rol y permiso basada en slots con slots por defecto y de reserva