useUsernameValidation

useUsernameValidation(
  username: string,
  options?: { includeInErrors?: boolean },
): UsernameValidationResult

useUsernameValidation · UsernameValidationResult

Hook de React para validar un nombre de usuario según la política de nombres de usuario actual de Auth0.

Este hook comprueba el nombre de usuario proporcionado con todas las reglas de validación configuradas y devuelve un resultado estructurado que indica si las cumple. Opcionalmente, puede enviar errores de validación al administrador global de errores para que los componentes de la UI que observan el campo username puedan mostrarlos o reaccionar automáticamente a ellos.

​

Características clave

• Validación según la política — comprueba el nombre de usuario según las reglas configuradas en la política de nombres de usuario de Auth0 del inquilino.
• Integración con el administrador de errores — opcionalmente, muestra automáticamente los fallos de validación en los componentes de error del formulario.
• Recálculo optimizado — solo vuelve a calcular cuando cambian username u options.includeInErrors.

​

Parámetros

username · string

La cadena del nombre de usuario que se va a validar.

options · { includeInErrors?: boolean }

Configuración opcional para el hook.

Mostrar propiedades

includeInErrors · boolean

Cuando es true, los errores de validación se almacenan en el administrador global de errores bajo el campo username. El valor predeterminado es false.

​

Devuelve

UsernameValidationResult

Un objeto UsernameValidationResult con:

• isValid — true si el nombre de usuario cumple todas las reglas configuradas.
• errors — una lista de errores de validación por regla con code, message e isValid.

​

Pantallas compatibles

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

​

Observaciones

• Cuando includeInErrors está habilitado, el hook actualiza automáticamente los errores en el almacén de errores, que puede consumir el hook useErrors.
• El hook solo vuelve a calcular cuando cambian username u options.includeInErrors.
• Llame a useUsernameValidation en el nivel superior del componente; no lo llame de forma condicional ni dentro de controladores de eventos.
• La ruta de importación debe coincidir con la pantalla: use signup o signup-id según corresponda.