# React SDK

`@keenauth/react` は、埋め込み可能なサインイン、サインアップ、アカウントのコンポーネントと、その基盤となるフックを提供します。ブラウザコアの [`@keenauth/js`](/docs/sdk/js) 上で動作し、ネットワーク呼び出し、PKCE、DPoP、WebAuthn のセレモニーはすべてこのコアが行います。コンポーネントが `fetch` や WebCrypto を直接呼び出すことはありません。このパッケージはまだ npm に公開されていません。

ホスト型ログインページへのリダイレクトによるサインインを行う場合、このパッケージは必要ありません。`@keenauth/js` を直接使用する [React クイックスタート](/docs/quickstarts/react) を参照してください。

## プロバイダーのセットアップ

コアを一度作成し、`KeenAuthProvider` に渡します。コンポーネントがサーバーのエラーを認識できるように、React パッケージのエラークラスをコアに渡します。

```tsx
import { KeenAuth } from "@keenauth/js";
import { KeenAuthProblemError, KeenAuthProvider, SignIn } from "@keenauth/react";

const core = new KeenAuth({
  issuer: "https://acme.eu.keenauth.app",
  clientId: "app_01j9zzzzzzzzzzzzzzzzzzzz",
  redirectUri: "https://login.acme.example/callback",
  createProblemError: (problem) => new KeenAuthProblemError(problem),
});

export function App() {
  return (
    <KeenAuthProvider core={core} locale="en">
      <SignIn transaction={{ client_id: "app_01j9zzzzzzzzzzzzzzzzzzzz", redirect_uri: "https://login.acme.example/callback" }} />
    </KeenAuthProvider>
  );
}
```

`KeenAuthProvider` には次のプロパティを指定します。

| プロパティ | 意味 |
|---|---|
| `core` | `@keenauth/js` のクライアント（`KeenAuthCore` の契約を実装した任意のオブジェクト） |
| `locale` | UI の言語（BCP 47）。既定値は `en` |
| `appearance` | 任意のテーマ上書き設定。[外観](#外観) を参照してください |

コンポーネントは、環境の Cookie と CSRF ヘッダーを付けてフロント API（`/fapi/v1`）を呼び出します。サーバーは、この呼び出しを環境自身のログインオリジンからのみ、かつファーストパーティのアプリケーションに対してのみ受け付けます。

## コンポーネント

| コンポーネント | 役割 |
|---|---|
| `SignIn` | ID 優先のサインイン。パスワード、パスキー、メールの認証コードまたはマジックリンク、および第二要素を扱います |
| `SignUp` | 環境の登録設定に基づくサインアップ |
| `UserProfile` | サインイン中のユーザーのプロフィール、メール（認証コードによる検証を含む）、パスキー、セッション |

`SignIn` と `SignUp` は、サインイン トランザクションを開始するボディである `transaction` を受け取ります。

- リダイレクトフローでは、認可リクエストから得た `{ authorization_request: "azr_…" }`。
- リダイレクトを使わない場合は、登録済みのリダイレクト URI を含む `{ client_id, redirect_uri }`。

`onComplete` は、コアがページ内でトランザクションを完了したときに呼び出されます。リダイレクトフローでは、代わりにページが遷移します。コンポーネントが描画しないステップ（チャレンジや組織の選択など）は、ホスト型ログインページで続行するためのリンクになります。

`UserProfile` は `sections` を受け取ります。これは `profile`、`emails`、`passkeys`、`sessions` のうち一部を指定するもので、既定ではすべてが対象です。別の場所で行われた変更と競合するプロフィールの更新は、エラーを表示し、現在の値を再読み込みします。

## フック

| フック | 返り値 |
|---|---|
| `useKeenAuth()` | プロバイダーの値：`core`、`locale`、`appearance` |
| `useEnvironment()` | 環境のサインイン設定と、有効なロケールのテキストを参照する `t` |
| `useTransaction()` | コアの `transactions` API を用いたトランザクションのステートマシン |
| `useMe()` | サインイン中のユーザーのプロフィールとアカウント API |

## 外観

`appearance.variables` はテーマトークン（例：`color.primary`）を上書きします。これらは CSSOM を通じてコンポーネントのルートに `--idp-*` のカスタムプロパティとして書き込まれるため、`'unsafe-inline'` を含まない厳格なコンテンツセキュリティポリシーでも動作します。`appearance.elements` は、コンポーネントの要素に独自のクラス名を追加します。パッケージにはスタイルシートが含まれていません。`idp-*` クラスのスタイルは、ご自身の CSS で指定してください。

```tsx
<KeenAuthProvider core={core} appearance={{ variables: { "color.primary": "#1f6feb" }, elements: { buttonPrimary: "acme-button" } }}>
```

## 言語とアクセシビリティ

- コンポーネントには、英語、トルコ語、フランス語、ドイツ語、韓国語、日本語、イタリア語、スペイン語のテキストが含まれます。環境のテキスト上書き設定が優先されます。それ以外のロケールでは英語にフォールバックしますが、テキストの方向はそのロケールに従います。
- すべての入力項目にラベルがあり、エラーの概要はフォーカスを受け取り、`autocomplete` の値が設定され、貼り付けがブロックされることはありません。

## パスキー

パスキーのボタンは、パスキーの Relying Party ID がページのホストを対象とする場合に表示されます（またはページのオリジンが環境の関連オリジンである場合に表示されます）。それ以外の場合、コンポーネントはホスト型ログインページへのリンクを表示します。パスキーには安全なコンテキスト（`https` または `localhost`）が必要です。

## 現在の制限事項

- ソーシャルサインインのボタンはまだ描画されません。ソーシャルサインインを提供している環境では、ホスト型ログインページへのリンクが表示されます。
- 電話番号はまだ利用できません。`UserProfile` には電話番号のセクションがありません。
- 組織のコンポーネント（組織の切り替えとプロフィール）はまだ利用できません。