---
title: "@vonvon-kit/solid"
description: "@vonvon-kit/core 기반의 SolidJS 컨텍스트 provider, 신호 기반 인증 프리미티브, 헤드리스 컴포넌트."
locale: "ko"
---

> Documentation Index
> Fetch the relevant documentation index at: https://vonvon.id/ko/sdks/llms.txt
> Use this file to discover all available pages before exploring further.

# @vonvon-kit/solid

## 상태

Registry 상태: UNPUBLISHED. 이 SDK는 저장소 소스 checkout에서만 설치하고 외부 package registry를 사용하지 마세요.

패키지 상태: **현재 패키지**. SolidJS 컨텍스트 provider, 신호 기반 프리미티브, 헤드리스 컴포넌트가 구현되었습니다. 프로덕션 인프라에서의 실제 IdP 왕복 테스트는 아직 수동 검증 대기 중입니다.

## 공급자 설정

`VonvonProvider`로 앱을 감싸세요. `VonvonClient`를 생성하고, 마운트 시 `client.load()`를 호출하여 현재 세션을 가져오며, `onCleanup`을 통해 정리합니다.

```tsx
import { VonvonProvider } from '@vonvon-kit/solid'

export function App() {
  return (
<VonvonProvider
  mode="oidc"
  issuer="https://vonvon.id"
  clientId="client_abc123"
  redirectUri="https://app.example.com/auth/callback"
>
  <Routes />
</VonvonProvider>
  )
}
```

## 인증 프리미티브

각 프리미티브는 반응형 `Accessor<T>`(게터 함수)를 반환합니다. 변경 사항을 추적하려면 JSX 또는 `createEffect`에서 호출하세요.

```tsx
import { createAuth, createUser, createOrganization, createSession } from '@vonvon-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, VonvonError>>
  // auth.signOut()   -- (options?) => Promise<Result<null, VonvonError>>

  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

```tsx
const org = createOrganization()
// org() is CreateOrganizationReturn
if (org().isSignedIn) {
  console.log(org().organization?.name, org().membership?.role)
  const activated = await org().setActive('org_new_id')
  if (!activated.ok) throw new Error(activated.error.message)
}

const session = createSession()
if (session().isSignedIn) {
  const token = await session().getToken()
  if (!token.ok) throw new Error(token.error.message)
  // use token.value for backend requests
}
```

## 헤드리스 컴포넌트

```tsx
import { SignInButton, SignOutButton, Protect } from '@vonvon-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="admin" fallback={<p>Admins only</p>}>
  <Settings />
</Protect>

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

## 내보내진 API

| 내보내기 | 종류 | 목적 |
| --- | --- | --- |
| `VonvonProvider` | 컴포넌트 | VonvonClient를 생성하고, 마운트 시 load()를 호출하며, onCleanup을 통해 정리합니다 |
| `createAuth` | 프리미티브 | Accessor로서의 isLoaded, isSignedIn, userId, sessionId, session, getToken, signOut |
| `createUser` | 프리미티브 | isLoaded / isSignedIn / user에 대한 판별 유니온을 감싸는 Accessor |
| `createOrganization` | 프리미티브 | 활성 조직의 organization, membership, setActive를 반환하는 Accessor |
| `createSession` | 프리미티브 | 활성 세션의 session과 getToken을 반환하는 Accessor |
| `SignInButton` | 컴포넌트 | 클릭 시 로그인 URL로 이동하는 헤드리스 버튼 |
| `SignOutButton` | 컴포넌트 | 클릭 시 signOut을 호출하는 헤드리스 버튼 |
| `Protect` | 컴포넌트 | 폴백 prop이 있는 역할 및 권한 게이트 |

## 토큰 저장소

- Vonvon Worker는 불투명한 갱신 자격 증명을 `HttpOnly` 쿠키에 보관합니다. 이는 JWT가 아니며 SDK는 JavaScript에서 이를 읽거나 `localStorage`에 저장하지 않습니다.
- `getToken()`은 `@vonvon-kit/core`의 `TokenManager`에 의해 메모리에만 캐시된 단기 JWT(60초)를 반환합니다.

Source: https://vonvon.id/ko/sdks/solid/index.mdx