@auth0/auth0-acul-react - v1.0.0
    Preparing search index...

    Function useUsernameValidation

    • 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.

      • Optionaloptions: { includeInErrors?: boolean }
        • OptionalincludeInErrors?: boolean

          When true, validation errors are stored in the global error manager under the username field. Defaults to false.

      Returns UsernameValidationResult

      A 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.
      • signup
      • signup-id
      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>
        );
      }
      • 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.

    Settings

    Member Visibility