@xid-kit/vue

Zustand

Paketstatus: Aktuelles Paket. Vue-3-Plugin, Composables undHeadless-Komponenten sind implementiert. Ein echter IdP-Round-Trip aufProduktionsinfrastruktur steht noch manuell aus.

Plugin-Einrichtung

Registrieren Sie XidPlugin einmalig in main.ts. Es erstellteinen XidClient-Singleton, stellt ihn über XID_INJECTION_KEYbereit und ruft client.load() auf, um den Sitzungsstatus zuhydratisieren.

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

Komponenten

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

Exportierte API

Exportieren	Art	Zweck
`XidPlugin`	Vue-Plugin	app.use-Einstiegspunkt; registriert XidClient und ruft client.load() auf
`createXidClient`	function	Factory, die eine eigenständige XidClient-Instanz zurückgibt
`useXidClient`	Composable	Gibt den injizierten XidClient zurück; wirft Exception, wenn das Pluginnicht registriert ist
`XID_INJECTION_KEY`	InjectionKey	Symbol zum Bereitstellen und Injizieren des XidClient-Singletons
`useXid`	Composable	Vollständige State-Ref plus alle Client-Aktionen (UseXidReturn)
`useAuth`	Composable	isLoaded, isSignedIn, userId, getToken, signOut
`useUser`	Composable	Ref, das eine Discriminated Union über isLoaded / isSignedIn / userkapselt
`useOrganization`	Composable	Aktive Organisation, Mitgliedschaft und setActive-Aktion
`useSession`	Composable	Aktive Sitzung und getToken-Aktion
`SignInButton`	Komponente	Headless-Button, der beim Klicken zur Anmelde-URL weiterleitet
`SignOutButton`	Komponente	Headless-Button, der beim Klicken client.signOut() aufruft
`Protect`	Komponente	Slot-basiertes Rollen- und Berechtigungsgate mit Standard- undFallback-Slots