---
title: "@xid-kit/react"
description: "고객 애플리케이션을 위한 React 19 provider, hook, 제어 컴포넌트, hosted UI 구성 요소."
locale: "ko"
---

> Documentation Index
> Fetch the locale documentation index at: https://xid.dev/ko/llms.txt
> Use this file to discover all available pages before exploring further.

# @xid-kit/react

## 공급자 설정

```tsx
import { XidProvider } from '@xid-kit/react'

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
<XidProvider publishableKey="pk_live_..." apiUrl="https://xid.dev">
  {children}
</XidProvider>
  )
}
```

## Hook 목록

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

## 제어 컴포넌트

| 컴포넌트 | Props 타입 | 목적 |
| --- | --- | --- |
| `SignedIn` | `SignedInProps` | 세션이 로드되었고 로그인한 경우에만 자식 컴포넌트를 렌더링합니다 |
| `SignedOut` | `SignedOutProps` | 로드되었고 로그인하지 않은 경우에만 자식 컴포넌트를 렌더링합니다 |
| `Protect` | `ProtectProps` | 선택적 폴백 UI를 갖춘 권한 및 역할 게이트 |
| `XidLoaded` | `XidLoadedProps` | SDK hydration 완료 후 자식 컴포넌트를 렌더링합니다 (isLoaded true) |
| `XidLoading` | `XidLoadingProps` | SDK가 아직 로딩 중일 때 자식 컴포넌트를 렌더링합니다 (isLoaded false) |
| `XidFailed` | `XidFailedProps` | SDK 로드가 복구 불가능한 오류로 실패할 때 자식 컴포넌트를 렌더링합니다 (status error) |
| `XidDegraded` | `XidDegradedProps` | 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 |

## 외관

화이트레이블 임베드용 CSS 변수를 오버라이드하려면 `XidProvider`에 `appearance`를 전달하세요. 사용자에게 보이는 모든 문자열은 Lingui 런타임 디스크립터를 사용합니다. 타입 오버라이드를 위해 `Appearance`, `AppearanceVariables`, `AppearanceElements` 타입이 내보내집니다.

Source: https://xid.dev/ko/sdks/react/index.mdx