@xid-kit/solid

SolidJS コンテキストプロバイダー、シグナルベースの認証プリミティブ、@xid-kit/core 上のヘッドレスコンポーネントをサポート。

状態

パッケージステータス：現行パッケージ。SolidJS コンテキストプロバイダー、シグナルベースのプリミティブ、ヘッドレスコンポーネントが実装済みです。本番インフラでの実際の IdP ラウンドトリップはまだ手動検証待ちです。

プロバイダーの設定

アプリを XidProvider でラップします。マウント時に XidClient を作成して client.load() を呼び出して現在のセッションを取得し、onCleanup でクリーンアップします。

import { XidProvider } from '@xid-kit/solid'

export function App() {
  return (
    <XidProvider publishableKey="pk_live_...">
      <Routes />
    </XidProvider>
  )
}

認証プリミティブ

各プリミティブはリアクティブな Accessor<T>（ゲッター関数）を返します。変更を追跡するには JSX または createEffect で呼び出します。

import { createAuth, createUser, createOrganization, createSession } from '@xid-kit/solid'
import { Show } from 'solid-js'

function Profile() {
  const auth = createAuth()
  // auth.isLoaded()  -- Accessor<boolean>
  // auth.isSignedIn() -- Accessor<boolean>
  // auth.userId()    -- Accessor<string | null>
  // auth.getToken()  -- () => Promise<Result<string, XidError>>
  // auth.signOut()   -- (options?) => Promise<Result<null, XidError>>

  return (
    <Show when={auth.isLoaded()} fallback={<p>Loading...</p>}>
      <Show when={auth.isSignedIn()} fallback={<p>Not signed in</p>}>
        <p>Signed in as {auth.userId()}</p>
        <button onClick={() => void auth.signOut()}>Sign out</button>
      </Show>
    </Show>
  )
}

createOrganization と createSession

const org = createOrganization()
// org() is CreateOrganizationReturn
if (org().isSignedIn) {
  console.log(org().organization?.name, org().membership?.role)
  await org().setActive('org_new_id')
}

const session = createSession()
if (session().isSignedIn) {
  const { value: token } = await session().getToken()
  // use token for backend requests
}

ヘッドレスコンポーネント

import { SignInButton, SignOutButton, Protect } from '@xid-kit/solid'

// Navigates to /sign-in by default
<SignInButton signInUrl="/auth/sign-in" redirectUrl="/dashboard">
  Log in
</SignInButton>

// Signs out all sessions; pass sessionId to target one
<SignOutButton redirectUrl="/home">Log out</SignOutButton>

// Role and permission gate
<Protect role="org:admin" fallback={<p>Admins only</p>}>
  <Settings />
</Protect>

<Protect permission="org:member:write" fallback={null}>
  <InviteForm />
</Protect>

エクスポートされた API

エクスポート	種別	目的
`XidProvider`	コンポーネント	XidClient を作成し、マウント時に load() を呼び出し、onCleanup でクリーンアップします
`createAuth`	プリミティブ	Accessor としての isLoaded、isSignedIn、userId、sessionId、session、getToken、signOut
`createUser`	プリミティブ	isLoaded / isSignedIn / user の判別ユニオンをラップするアクセサー
`createOrganization`	プリミティブ	アクティブ組織の organization、membership、setActive を返すアクセサー
`createSession`	プリミティブ	アクティブセッションのセッションと getToken を返すアクセサー
`SignInButton`	コンポーネント	クリック時にサインイン URL へ移動するヘッドレスボタン
`SignOutButton`	コンポーネント	クリック時に signOut を呼び出すヘッドレスボタン
`Protect`	コンポーネント	フォールバック prop 付きのロールと権限ゲート

トークンストレージ

セッショントークンは XID Worker が設定する HttpOnly Cookie です。SDK はトークンを localStorage に保存しません。
getToken() は @xid-kit/core の TokenManager によってキャッシュされる短期 JWT（60 秒）を返します。