useErrors

useErrors(options?: UseErrorOptions) · UseErrorsResult

Hook React permettant de lire et de gérer les erreurs dans ACUL (personnalisation avancée de Universal Login). Il regroupe les erreurs en trois catégories :

• auth0 — erreurs renvoyées par Auth0 ou votre propre backend.
• validation — erreurs provenant de la validation côté client (par ex., saisie de formulaire invalide).
• configuration — erreurs causées par une intégration incorrecte ou une mauvaise utilisation du SDK.

​

Fonctionnalités clés

• Gestion unifiée des erreurs — affiche les erreurs auth0, validation et configuration à partir d’un seul hook.
• Filtrage flexible — interrogez les erreurs par catégorie, par champ ou par une combinaison des deux.
• Commandes de suppression — supprimez des erreurs individuelles ou effacez-les toutes d’un coup.

​

Paramètres

options · UseErrorOptions

Configuration facultative du hook.

Afficher propriétés

includeDevErrors · boolean

Lorsque true, inclut dans la liste des erreurs les détails d’erreur propres au développement. La valeur par défaut est false.

​

Valeur de retour

UseErrorsResult

Un objet UseErrorsResult contenant :

• errors — la liste complète des erreurs de type ErrorsResult, avec des fonctions utilitaires :
  • errors.byType(type, filter?) — filtre par type d’erreur et, au besoin, par champ.
  • errors.byField(field, filter?) — filtre par champ et, au besoin, par type.
• hasError — true si au moins une erreur est actuellement présente.
• dismiss(id) — supprime une erreur précise par son id.
• dismissAll() — efface toutes les erreurs suivies.

​

Écrans pris en charge

• Le hook useErrors est disponible sur tous les écrans 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)}>Dismiss</button>
            </div>
          ))}
        </div>
      )}

      <button onClick={dismissAll}>Clear All Errors</button>
    </div>
  );
}

En plus d’afficher des messages, vous pouvez filtrer par champ ou par catégorie :

console.log(errors.byType('validation')); // toutes les erreurs de validation
console.log(errors.byType('validation', { field: 'username' })); // erreurs de validation pour le champ 'username'
console.log(errors.byField('username')); // toutes les erreurs pour le champ 'username'
console.log(errors.byField('username', { type: 'auth0' })); // erreurs auth0 pour le champ 'username'

​

Remarques

• useErrors n’est pas associé à un écran précis — importez-le directement depuis @auth0/auth0-acul-react.
• Appelez useErrors au niveau supérieur de votre composant; ne l’appelez pas de façon conditionnelle ni dans des gestionnaires d’événements.
• Utilisez includeDevErrors: true pendant le développement pour faire apparaître les erreurs liées à une mauvaise utilisation du SDK; désactivez cette option en production.