usePasskeyAutofill

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

​

主な機能

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

​

パラメータ

​

戻り値

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