---
title: "@vonvon-kit/react"
description: "고객 애플리케이션을 위한 React 19 provider, hook, 제어 컴포넌트, hosted UI 구성 요소."
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/react

## 공급자 설정

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

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

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

## Hook 목록

| Hook | 반환값 |
| --- | --- |
| `useAuth` | isLoaded, isSignedIn, userId, signOut, getToken |
| `useUser` | isLoaded, isSignedIn, user: VonvonUser \| null |
| `useSession` | isLoaded, isSignedIn, session: VonvonSession \| null |
| `useSessionList` | isLoaded, sessions, 멀티 세션 전환기용 setActive |
| `useSignIn` | Hosted Auth 로그인 흐름 헬퍼 |
| `useOrganization` | isLoaded, organization: VonvonOrganization \| null, membership |
| `useOrganizationList` | isLoaded, 조직 전환기 UI용 userMemberships |
| `useAPIKeys` | 콘솔 임베드용 관리 API 키 목록 및 작업 |
| `useVonvonContext` | 원본 VonvonContextValue (고급 사용; 위의 타입이 지정된 hook 사용 권장) |

## 제어 컴포넌트

| 컴포넌트 | Props 타입 | 목적 |
| --- | --- | --- |
| `SignedIn` | `SignedInProps` | 세션이 로드되었고 로그인한 경우에만 자식 컴포넌트를 렌더링합니다 |
| `SignedOut` | `SignedOutProps` | 로드되었고 로그인하지 않은 경우에만 자식 컴포넌트를 렌더링합니다 |
| `Protect` | `ProtectProps` | 선택적 폴백 UI를 갖춘 권한 및 역할 게이트 |
| `VonvonLoaded` | `VonvonLoadedProps` | SDK hydration 완료 후 자식 컴포넌트를 렌더링합니다 (isLoaded true) |
| `VonvonLoading` | `VonvonLoadingProps` | SDK가 아직 로딩 중일 때 자식 컴포넌트를 렌더링합니다 (isLoaded false) |
| `VonvonFailed` | `VonvonFailedProps` | SDK 로드가 복구 불가능한 오류로 실패할 때 자식 컴포넌트를 렌더링합니다 (status error) |
| `VonvonDegraded` | `VonvonDegradedProps` | SDK가 로드되었지만 성능 저하 상태일 때 자식 컴포넌트를 렌더링합니다 (status degraded) |
| `AuthenticateWithRedirectCallback` | `AuthenticateWithRedirectCallbackProps` | OAuth 리디렉션 callback 핸들러: 세션 상태를 다시 로드하고 afterSignInUrl로 리디렉션하거나 onSuccess를 호출합니다 |
| `RedirectToSignIn` | `RedirectToSignInProps` | 마운트 즉시 로그인 페이지로 리디렉션합니다 |
| `RedirectToSignUp` | `RedirectToSignUpProps` | 마운트 즉시 가입 페이지로 리디렉션합니다 |
| `RedirectToUserProfile` | `RedirectToUserProfileProps` | 마운트 즉시 사용자 프로필 페이지로 리디렉션합니다 |
| `RedirectToOrganizationProfile` | `RedirectToOrganizationProfileProps` | 마운트 즉시 조직 프로필 페이지로 리디렉션합니다 |
| `RedirectToCreateOrganization` | `RedirectToCreateOrganizationProps` | 마운트 즉시 조직 만들기 페이지로 리디렉션합니다 |
| `SignInButton` | `SignInButtonProps` | 클릭 시 로그인 URL로 이동하는 스타일 없는 버튼 |
| `SignUpButton` | `SignUpButtonProps` | 클릭 시 가입 URL로 이동하는 스타일 없는 버튼 |
| `SignOutButton` | `SignOutButtonProps` | 클릭 시 signOut을 호출하는 스타일 없는 버튼 |

## UI 컴포넌트

| 컴포넌트 | 사용 |
| --- | --- |
| `SignIn` | 임베디드 로그인 패널 (Hosted Auth) |
| `SignUp` | 임베디드 가입 패널 |
| `UserAvatar` | 이니셜 폴백이 있는 사용자 아바타 이미지 |
| `UserButton` | 세션 전환 및 로그아웃 기능이 있는 아바타 메뉴 |
| `UserProfile` | 계정 보안 및 프로필 관리 |
| `OrganizationSwitcher` | 활성 조직 선택기 |
| `OrganizationProfile` | 멤버, 역할, SSO 관리자 임베드 |
| `CreateOrganization` | 조직 생성 흐름 |
| `OrganizationList` | 전환기 UI용 사용자 조직 목록 |

## 아직 구현되지 않음

다음 항목들은 공개 로드맵에 있지만 현재 패키지에서 내보내지지 않습니다. 이 버전에서 사용 가능하다고 가정하지 마세요.

| 심볼 | 설계 약속 |
| --- | --- |
| `GoogleOneTap` | 원탭 로그인 임베드 |
| `Waitlist` | 대기자 명단 가입 게이트 컴포넌트 |
| 결제 컴포넌트 | 사용량 및 플랜 관리 임베드 |
| `useReverification` | 단계별 인증 hook |

## 외관

`appearance`는 `VonvonProvider`가 아니라 `SignIn`, `UserProfile`, `OrganizationSwitcher` 같은 사전 구축된 UI components에 전달합니다. export된 Appearance types는 타입이 지정된 CSS-variable 및 element-class overrides를 제공하며, 표시되는 모든 문구는 Lingui runtime descriptors를 사용합니다.

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