React認証クイックスタート

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

ホスト型認証から始める

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

SignInButton.jsx

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に基づくバックエンド側のマッピングを使用してください。サインインと併せて検証やモニタリングを行う方法については、共有連携プロンプトを参照してください。リダイレクトのキャンセル、サインインのダブルクリック、コールバック時の再読み込み、期限切れのセッション、MFA、ログアウトをテストしてください。読み込み中とエラーの両方の状態を、以前のユーザーの保護されたデータを表示せずにレンダリングしてください。

最終更新日 2026年11月1日

ガイド

認証

Model Context Protocol (MCP)

Web SDK

ネイティブSDK

サーバーSDK

連携

React認証クイックスタート

ホスト型認証から始める

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

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

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

ホスト型認証から始める

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