---
title: "@xid-kit/react"
description: "顧客アプリケーション向けの React 19 provider、hooks、コントロールコンポーネント、Hosted UI ビルディングブロック。"
locale: "ja"
---

> Documentation Index
> Fetch the locale documentation index at: https://xid.dev/ja/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>
  )
}
```

## フック

| フック | 戻り値 |
| --- | --- |
| `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, userMemberships（組織切り替え UI 用） |
| `useAPIKeys` | コンソール埋め込み用の Management API キー一覧とアクション |
| `useXidContext` | 生の XidContextValue（高度な使用向け。上記の型付きフックを推奨） |

## コントロールコンポーネント

| コンポーネント | Props 型 | 目的 |
| --- | --- | --- |
| `SignedIn` | `SignedInProps` | セッションがロード済みかつサインイン済みの場合のみ子要素をレンダリングします |
| `SignedOut` | `SignedOutProps` | ロード済みかつサインインしていない場合のみ子要素をレンダリングします |
| `Protect` | `ProtectProps` | 任意のフォールバック UI 付きの権限とロールゲート |
| `XidLoaded` | `XidLoadedProps` | SDK のハイドレーション完了後（isLoaded が true）に子要素をレンダリングします |
| `XidLoading` | `XidLoadingProps` | SDK がまだ読み込み中（isLoaded が false）の間、子要素をレンダリングします |
| `XidFailed` | `XidFailedProps` | SDK のロードが回復不能なエラーで失敗した場合（status error）に子要素をレンダリングします |
| `XidDegraded` | `XidDegradedProps` | SDK はロード済みだが劣化状態（status degraded）の場合に子要素をレンダリングします |
| `AuthenticateWithRedirectCallback` | `AuthenticateWithRedirectCallbackProps` | OAuth リダイレクトコールバックハンドラー：セッション状態を再読み込みし、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` | ステップアップ認証フック |

## 外観

ホワイトラベル埋め込みの CSS 変数をオーバーライドするには `appearance` を `XidProvider` に渡してください。ユーザーに表示される文字列はすべて Lingui ランタイムディスクリプターを使用します。型付きオーバーライド用に `Appearance`、`AppearanceVariables`、`AppearanceElements` 型がエクスポートされます。

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