@xid-kit/svelte

상태

XID는 어떤 패키지 레지스트리에도 패키지를 게시하지 않습니다. 이 SDK는 XID 저장소에서 소스로 배포되므로 저장소를 체크아웃해서 사용하세요.

패키지 상태: 현재 패키지. Svelte 5 store, SvelteKit 서버 hook, 헬퍼 유틸리티가 구현되었습니다. 프로덕션 인프라에서의 실제 IdP 왕복 테스트는 아직 수동 검증 대기 중입니다.

클라이언트 설정

루트 레이아웃에서 createXidStores와 setXidContext를 사용하여 store를 생성하세요. store는 Svelte store 구독자 계약을 충족하는 XidClient.subscribe를 사용합니다.

<!-- +layout.svelte -->
<script lang="ts">
  import { setContext, onMount } from 'svelte'
  import { XidClient, createXidStores, setXidContext } from '@xid-kit/svelte'

  // Core auth endpoints must be served on this application's exact origin.
  const client = new XidClient({ mode: 'same-origin' })
  const stores = createXidStores(client)
  setXidContext(setContext, stores)

  onMount(() => {
    const ac = new AbortController()
    void client.load({ signal: ac.signal })
    return () => ac.abort()
  })
</script>
<slot />

인증 상태 읽기

<!-- Any child component -->
<script lang="ts">
  import { getContext } from 'svelte'
  import { getXidContext } from '@xid-kit/svelte'

  const { auth, user } = getXidContext(getContext)
  // $auth: { isLoaded, isSignedIn, userId, sessionId, session }
  // $user: discriminated union on isLoaded / isSignedIn / user
</script>

{#if !$auth.isLoaded}
  <p>Loading...</p>
{:else if $auth.isSignedIn}
  <p>Hello, {$user.isSignedIn ? $user.user.fullName : ''}</p>
{:else}
  <p>Not signed in</p>
{/if}

로그인 및 로그아웃

<script lang="ts">
  import { getContext } from 'svelte'
  import { getXidContext, buildSignInUrl, executeSignOut } from '@xid-kit/svelte'

  const { client } = getXidContext(getContext)

  function handleSignIn() {
    window.location.assign(buildSignInUrl('/sign-in', window.location.href))
  }

  async function handleSignOut() {
    await executeSignOut(client, { redirectUrl: '/' })
  }
</script>

역할 및 권한 가드

<script lang="ts">
  import { getContext } from 'svelte'
  import { getXidContext, isAllowed } from '@xid-kit/svelte'

  const { state } = getXidContext(getContext)
</script>

{#if isAllowed($state, { role: 'admin' })}
  <AdminPanel />
{/if}

{#if isAllowed($state, { permission: 'org:member:write' })}
  <EditButton />
{/if}

SvelteKit 서버 hook

// src/hooks.server.ts
import { handleXid } from '@xid-kit/svelte/server'

export const handle = handleXid({
  jwtKey: JSON.parse(process.env.XID_JWKS_PUBLIC_KEY!),
  issuer: 'https://xid.dev',
  sessionTokenExchange: { endpoint: '/v1/sessions/token' },
  protectedRoutes: ['/dashboard', '/account'],
  signInUrl: '/sign-in',
})

로드 함수에서 인증 읽기

// +page.server.ts
import { redirect } from '@sveltejs/kit'
import { getXidAuth } from '@xid-kit/svelte/server'
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ locals }) => {
  const auth = getXidAuth(locals)
  if (!auth.userId) throw redirect(303, '/sign-in')
  return { userId: auth.userId, orgId: auth.orgId }
}

App.Locals 타입 정의

// src/app.d.ts
import type { AuthResult } from '@xid-kit/svelte/server'

declare global {
  namespace App {
    interface Locals {
      xidAuth: AuthResult
    }
  }
}
export {}

내보내진 API

내보내기	종류	모듈
`XidClient, createXidStores, setXidContext, getXidContext`	클라이언트 설정	`@xid-kit/svelte`
`buildSignInUrl, executeSignOut, isAllowed`	유틸리티	`@xid-kit/svelte`
`handleXid, getXidAuth`	서버 hook	`@xid-kit/svelte/server`