Skip to main content
​
useUsernameValidation(username, options?)
useUsernameValidation(username, options?): UsernameValidationResult
React hook for validating a username against the current Auth0 username policy.This hook checks the provided username against all configured validation rules and returns a structured result describing whether it passes. Optionally, it can send validation errors to the global error manager so that UI components observing the username field can automatically display or react to these errors.

​
Parameters

​
username
string
The username string to validate.
​
options?
​
includeInErrors?
boolean
When true, validation errors are stored in the global error manager under the username field. Defaults to false.

​
Returns

UsernameValidationResultA UsernameValidationResult object with:
  • isValid — true if the username satisfies all configured rules.
  • errors — an array of per-rule validation errors with code, message, and isValid.

​
Supported Screens

  • 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>
  );
}

​
Remarks

  • When includeInErrors is enabled, the hook automatically updates the errors to the error-store which can be consumed by useErrors hook.
  • The hook only recomputes when username or options.includeInErrors change.