跳到正文

@xid-kit/solid

基于 @xid-kit/core 的 SolidJS context provider、基于 signal 的认证原语和无样式组件。

状态

包状态为 当前包。SolidJS context provider、基于 signal 的原语和无样式组件已实现。在真实生产基础设施上的 IdP 往返验证仍待人工核实。

Provider 配置

使用 XidProvider 包裹你的应用。它会创建 XidClient,在挂载时调用 client.load() 获取当前会话,并通过 onCleanup 进行清理。

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

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

认证原语

每个原语返回响应式 Accessor<T>(getter 函数)。在 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 原语 isLoaded、isSignedIn、userId、sessionId、session、getToken、signOut(均为 Accessor)
createUser 原语 封装 isLoaded / isSignedIn / user 判别联合的访问器
createOrganization 原语 返回活跃组织的 organization、membership 和 setActive 的访问器
createSession 原语 返回活跃会话的 session 和 getToken 的访问器
SignInButton 组件 点击时跳转到登录 URL 的无样式按钮
SignOutButton 组件 点击时调用 signOut 的无样式按钮
Protect 组件 带回退 prop 的角色与权限门控

Token 存储

  • 会话 token 是由 XID Worker 设置的 HttpOnly cookie。SDK 从不将 token 存储在 localStorage 中。
  • getToken() 返回由 @xid-kit/coreTokenManager 缓存的短期 JWT(60 秒)。
导航

输入内容以搜索...

使用方向键导航按 Enter 键选择按 Escape 键关闭