useErrors

• server — erreurs retournées par Auth0 ou par votre propre backend.
• client — erreurs issues de la validation côté client (p. ex., données de formulaire non valides).
• developer — erreurs causées par une intégration incorrecte ou une mauvaise utilisation du SDK.

​

Valeur de retour

• errors — la liste complète des erreurs de type ErrorsResult, avec des fonctions utilitaires :
  • errors.byKind(kind, filter?) — filtre par catégorie d’erreur et, en option, par champ.
  • errors.byField(field, filter?) — filtre par champ et, en option, par catégorie.
• 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 actuellement suivies.

​

Écrans pris en charge

• Le hook useErrors est disponible sur chaque écran ACUL.

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

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

  return (
    <div>
      {hasError && (
        <div className="mb-4">
          {errors.byKind("server").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>
  );
}

console.log(errors.byKind('client')); // toutes les erreurs côté client
console.log(errors.byKind('client', { field: 'username' })); // erreurs côté client pour le champ 'username'
console.log(errors.byField('username')); // toutes les erreurs pour le champ 'username'
console.log(errors.byField('username', { kind: 'server' })); // erreurs côté serveur pour le champ 'username'