usePasskeyAutofill

usePasskeyAutofill() · UsePasskeyAutofillResult

Auth0 Advanced Customization of Universal Login (ACUL) の画面で、ログイン識別子フィールドに対してブラウザーの Conditional UI (パスキー自動入力) 機能を有効にする React フックです。

このフックはブラウザーの Conditional Mediation API を初期化し、追加の ユーザー操作なしで、デバイスに保存されているパスキーを username フィールドのオートコンプリートのドロップダウンに表示します。

• このフックはページのライフサイクルごとに 1 回だけ登録されます。複数回呼び出しても安全です。
• 非対応ブラウザーでは適切にフォールバックし、ユーザー操作を妨げません。
• 返される inputRef を入力要素にバインドすると、適切な autocomplete="username webauthn" 属性が自動的に設定されます。
• 入力要素のマークアップですでに autocomplete="username webauthn" を指定している場合、 ref のバインドは任意です。この場合でもフックは正しく登録されます。

主な機能

• Conditional Mediation の自動化 — ブラウザー API を手動で呼び出すことなく パスキー自動入力を初期化します。
• ref のバインドは任意 — inputRef を入力要素にバインドしてもしなくても動作します。
• シームレスなフォールバック — 非対応環境は静かに処理され、 通常のログインフローを維持します。

パラメーター

なし。

戻り値

UsePasskeyAutofillResult

以下を含むオブジェクト:

• inputRef (optional) — username 入力要素にアタッチする React ref。バインドすると、 適切な autocomplete 属性が設定されます。

対応画面

• login-id

例

import { usePasskeyAutofill } from '@auth0/auth0-acul-react/login-id';

export function LoginIdentifierInput() {
  const { inputRef } = usePasskeyAutofill();

  return (
    <input
      ref={inputRef}
      type="text"
      name="username"
      placeholder="Email or username"
    />
  );
}

備考

• inputRef を入力要素にバインドしない場合は、ブラウザーがその入力をパスキー自動入力に関連付けられるよう、 入力要素に autocomplete="username webauthn" を明示的に指定してください。
• Conditional Mediation API を利用できない環境では、このフックは効果を持ちません (たとえば古いブラウザーや非 HTTPS コンテキストなど) 。エラーはスローされません。
• usePasskeyAutofill はコンポーネントのトップレベルで 1 回だけ呼び出してください。 条件付きで呼び出したり、イベントハンドラー内で呼び出したりしないでください。