React SDK

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

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

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

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

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 を受け取ります。

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 で指定してください。

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

言語とアクセシビリティ

パスキー

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

現在の制限事項