@xid-kit/vue

Vue 3 プラグイン、コンポーザブル、@xid-kit/core 上のヘッドレスコンポーネントをサポート。

状態

パッケージステータス：現行パッケージ。Vue 3 プラグイン、コンポーザブル、ヘッドレスコンポーネントが実装済みです。本番インフラでの実際の IdP ラウンドトリップはまだ手動検証待ちです。

プラグインセットアップ

main.ts で XidPlugin を一度登録します。XidClient シングルトンを作成し、XID_INJECTION_KEY 経由で提供し、セッション状態を水和するために client.load() を呼び出します。

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

コンポーザブル

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

コンポーネント

<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

エクスポート	種別	目的
`XidPlugin`	Vue プラグイン	app.use エントリーポイント。XidClient を登録し client.load() を呼び出します
`createXidClient`	function	スタンドアロン XidClient インスタンスを返すファクトリー
`useXidClient`	コンポーザブル	注入された XidClient を返します。プラグインが登録されていない場合はスローします
`XID_INJECTION_KEY`	InjectionKey	XidClient シングルトンを提供・注入するためのシンボル
`useXid`	コンポーザブル	フルステート ref と全クライアントアクション（UseXidReturn）
`useAuth`	コンポーザブル	isLoaded, isSignedIn, userId, getToken, signOut
`useUser`	コンポーザブル	isLoaded / isSignedIn / user の判別ユニオンをラップする Ref
`useOrganization`	コンポーザブル	アクティブ組織、メンバーシップ、setActive アクション
`useSession`	コンポーザブル	アクティブセッションと getToken アクション
`SignInButton`	コンポーネント	クリック時にサインイン URL へリダイレクトするヘッドレスボタン
`SignOutButton`	コンポーネント	クリック時に client.signOut() を呼び出すヘッドレスボタン
`Protect`	コンポーネント	デフォルトスロットとフォールバックスロットを持つスロットベースのロールと権限ゲート