usePasskeyAutofill

usePasskeyAutofill() · UsePasskeyAutofillResult

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

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

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

主な機能

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

パラメータ

なし。

戻り値

UsePasskeyAutofillResult

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

• inputRef (optional) — ユーザー名入力要素にアタッチする React ref です。バインドすると、 正しい autocomplete 属性が設定されます。

サポート対象の画面

• login-id

Example

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