> ## Documentation Index
> Fetch the complete documentation index at: https://docs.didit.me/llms.txt
> Use this file to discover all available pages before exploring further.

# React認証クイックスタート

> Diditのホスト型認証をReactアプリケーションに追加する手順です。コールバック処理、ローディング状態、サーバー側で検証されたアクセス制御を実装します。

> [!WARNING]
>
> Authenticationは新しい機能です。React Authenticationパッケージの提供はリリース次第となります。ホスト型フローは、有効化されたアプリケーションでのみ使用してください。以下のコンポーネント一覧は今後提供予定の仕様を説明するものであり、現在公開されているパッケージAPIではありません。

## ホスト型認証から始める

1. アプリケーションを設定し、[JavaScriptクイックスタート](https://docs.didit.me/ja/authentication/quickstarts/javascript.md)から`auth.js`をコピーします。
2. 登録済みの`/auth/callback`を、`handleCallback()`を1回だけ呼び出すページにルーティングします。コードは1回限りしか使用できないため、開発時のエフェクトの再実行も含め、エフェクトの重複実行を防いでください。
3. 読み込み中、サインアウト済み、サインイン済み、セッションエラーの各状態を区別して扱います。サインインエラーは、トークンやコールバックのコードをログに記録せずに表示してください。
4. 保護されたリクエストはすべてバックエンドで検証します。コンポーネントを非表示にすることは認可にはなりません。

```jsx SignInButton.jsx theme={null}
import { useState } from "react";
import { signIn } from "./auth.js";

export function SignInButton() {
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  async function start() {
    setBusy(true);
    setError("");
    try {
      await signIn();
    } catch {
      setError("Could not start sign-in. Please try again.");
      setBusy(false);
    }
  }
  return <div>
    <button disabled={busy} onClick={start}>{busy ? "Opening sign-in…" : "Sign in"}</button>
    {error && <p role="alert">{error}</p>}
  </div>;
}
```

コールバック後に`getSession()`を呼び出して、ユーザービューに情報を表示します。サインアウト時には、ユーザー固有のキャッシュをクリアし、サーバー側での失効処理が失敗した場合は明示的に処理してください。最小構成のJavaScriptヘルパーは、再読み込み後にセッションを保持しません。

## Reactパッケージのリリースプレビュー

提供予定の`@didit-protocol/auth-react`パッケージには、`DiditAuth`ルート、`useAuth`、`useUser`、`SignIn`、`SignUp`、`UserButton`、`SignedIn`、`SignedOut`、`ConnectedAgents`が含まれます。コンポーネントのprops、コールバックのルーティング、パッケージのバージョンは、公開されたリリースに従う必要があります。これらのコンポーネントが検証SDKに含まれているとは想定しないでください。

自動シグナルと`vendorData`は、Authenticationコアのリリースに依存します。それまでは、検証済みの`sub`に基づくバックエンド側のマッピングを使用してください。サインインと併せて検証やモニタリングを行う方法については、[共有連携プロンプト](https://docs.didit.me/ja/integration/integration-prompt.md)を参照してください。

リダイレクトのキャンセル、サインインのダブルクリック、コールバック時の再読み込み、期限切れのセッション、MFA、ログアウトをテストしてください。読み込み中とエラーの両方の状態を、以前のユーザーの保護されたデータを表示せずにレンダリングしてください。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.