useUsernameValidation

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

useUsernameValidation · UsernameValidationResult

Hook React permettant de valider un nom d’utilisateur selon la politique de nom d’utilisateur Auth0 en vigueur.

Ce hook vérifie le nom d’utilisateur fourni en fonction de toutes les règles de validation configurées et renvoie un résultat structuré indiquant s’il est conforme. Au besoin, il peut transmettre les erreurs de validation au gestionnaire d’erreurs global afin que les composants d’UI qui surveillent le champ username puissent automatiquement les afficher ou y réagir.

​

Fonctionnalités clés

• Validation tenant compte de la politique — vérifie le nom d’utilisateur selon les règles de la politique de nom d’utilisateur Auth0 configurée pour le tenant.
• Intégration au gestionnaire d’erreurs — transmet facultativement les échecs de validation aux composants d’erreur du formulaire de façon automatique.
• Recalcul optimisé — recalcule uniquement lorsque username ou options.includeInErrors changent.

​

Paramètres

username · string

La chaîne de nom d’utilisateur à valider.

options · { includeInErrors?: boolean }

Configuration facultative du hook.

Afficher propriétés

includeInErrors · boolean

Lorsque true, les erreurs de validation sont stockées dans le gestionnaire d’erreurs global sous le champ username. La valeur par défaut est false.

​

Renvoie

UsernameValidationResult

Un objet UsernameValidationResult contenant :

• isValid — true si le nom d’utilisateur respecte toutes les règles configurées.
• errors — un tableau d’erreurs de validation par règle avec code, message et isValid.

​

Écrans pris en charge

• signup
• signup-id

Exemple

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

​

Remarques

• Lorsque includeInErrors est activé, le hook met automatiquement à jour les erreurs dans le magasin d’erreurs, que le hook useErrors peut ensuite utiliser.
• Le hook recalcule uniquement lorsque username ou options.includeInErrors changent.
• Appelez useUsernameValidation au niveau supérieur de votre composant; ne l’appelez pas de façon conditionnelle ni à l’intérieur de gestionnaires d’événements.
• Le chemin d’importation doit correspondre à l’écran — utilisez signup ou signup-id selon le cas.