@xid-kit/react

고객 애플리케이션을 위한 React 19 provider, hook, 제어 컴포넌트, hosted UI 구성 요소.

공급자 설정

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 타입이 내보내집니다.