useErrors

useErrors(options?: UseErrorOptions) · UseErrorsResult

Hook de React para leer y gestionar errores en ACUL (personalización avanzada de Universal Login). Agrupa los errores en tres tipos:

• auth0 — errores devueltos por Auth0 o por tu propio backend.
• validation — errores de validación del lado del cliente (por ejemplo, datos de formulario no válidos).
• configuration — errores causados por una integración incorrecta o por un uso indebido del SDK.

​

Funcionalidades clave

• Repositoroio unificado de errores — expone errores de auth0, validación y configuración desde un único hook.
• Filtrado flexible — consulta errores por tipo, campo o una combinación de ambos.
• Controles de descarte — elimina errores individuales o borra todos de una vez.

​

Parámetros

options · UseErrorOptions

Configuración opcional del hook.

Mostrar propiedades

includeDevErrors · boolean

Cuando es true, incluye en la lista de errores detalles específicos del entorno de desarrollo. El valor predeterminado es false.

​

Devuelve

UseErrorsResult

Un objeto UseErrorsResult que contiene:

• errors — la lista completa de errores de tipo ErrorsResult, con funciones auxiliares:
  • errors.byType(type, filter?) — filtra por tipo de error y, opcionalmente, por campo.
  • errors.byField(field, filter?) — filtra por campo y, opcionalmente, por tipo.
• hasError — true si actualmente hay algún error.
• dismiss(id) — elimina un error específico por su ID.
• dismissAll() — borra todos los errores registrados.

​

Pantallas compatibles

• El hook useErrors está disponible en todas las pantallas de ACUL.

Example

import { useErrors } from "@auth0/auth0-acul-react";

export function SignupForm() {
  const { errors, hasError, dismiss, dismissAll } = useErrors();

  return (
    <div>
      {hasError && (
        <div className="mb-4">
          {errors.byType("auth0").map(err => (
            <div key={err.id} className="text-red-600">
              {err.message}
              <button onClick={() => dismiss(err.id)}>Descartar</button>
            </div>
          ))}
        </div>
      )}

      <button onClick={dismissAll}>Borrar todos los errores</button>
    </div>
  );
}

Además de mostrar mensajes, puedes filtrar por campo o tipo:

console.log(errors.byType('validation')); // todos los errores de validación
console.log(errors.byType('validation', { field: 'username' })); // errores de validación para el campo 'username'
console.log(errors.byField('username')); // todos los errores para el campo 'username'
console.log(errors.byField('username', { type: 'auth0' })); // errores de auth0 para el campo 'username'

​

Observaciones

• useErrors no está limitado al ámbito de una pantalla; impórtalo directamente desde @auth0/auth0-acul-react.
• Llama a useErrors en el nivel superior de tu componente; no lo llames de forma condicional ni dentro de controladores de eventos.
• Usa includeDevErrors: true durante el desarrollo para mostrar errores por uso indebido del SDK; desactívalo en producción.