メインコンテンツへスキップ
useUsernameValidation(
  username: string,
  options?: { includeInErrors?: boolean },
): UsernameValidationResult
​
useUsernameValidation
UsernameValidationResult
現在の Auth0 の username policy に基づいてユーザー名を検証するための React フックです。このフックは、指定されたユーザー名を設定済みのすべての検証ルールに照らして確認し、 条件を満たしているかどうかを示す構造化された結果を返します。 必要に応じて、検証エラーをグローバルエラーマネージャーに送信できるため、 username フィールドを監視している UI コンポーネントで、これらのエラーを 自動的に表示したり、それに応じた動作を行ったりできます。

​
主な機能

  • ポリシーに基づく検証 — テナントで設定された Auth0 の username policy ルールに照らしてユーザー名を検証します。
  • エラーマネージャーとの統合 — 必要に応じて、検証失敗をフォームエラーコンポーネントに自動的に反映します。
  • 最適化された再計算 — username または options.includeInErrors が変更された場合にのみ再計算されます。

​
パラメーター

​
username
string
検証するユーザー名の文字列です。
​
options
{ includeInErrors?: boolean }
フックのオプション設定です。

​
戻り値

UsernameValidationResult以下を含む UsernameValidationResult オブジェクトです。
  • isValid — ユーザー名が設定済みのすべてのルールを満たしている場合は true。
  • errors — code、message、isValid を含む、ルールごとの検証エラーの配列。

​
サポートされる画面

  • signup
  • signup-id
Example
import { useUsernameValidation } from "@auth0/auth0-acul-react/signup";

export function UsernameField() {
  const { isValid, errors } = useUsernameValidation(username, { includeInErrors: true });

  return (
    <div>
      <input
        value={username}
        onChange={e => setUsername(e.target.value)}
        aria-invalid={!isValid}
      />

      {!isValid && (
        <ul>
          {errors.map(err => (
            <li key={err.code}>{err.message}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

​
備考

  • includeInErrors を有効にすると、このフックはエラーを自動的にエラーストアに反映し、useErrors フックで利用できるようになります。
  • このフックは、username または options.includeInErrors が変更された場合にのみ再計算されます。
  • useUsernameValidation はコンポーネントのトップレベルで呼び出してください。条件付きで呼び出したり、イベントハンドラー内で呼び出したりしないでください。
  • インポートパスは画面に一致している必要があります。該当する signup または signup-id を使用してください。