LoginEmailVerification

Gère les interactions pour l’écran “login-email-verification”. Cet écran invite l’utilisateur à saisir un code à usage unique envoyé à son adresse de courriel pour vérifier son identité pendant le processus de connexion. Il fournit des méthodes pour soumettre le code saisi (continueWithCode) ou pour demander un nouveau code si le code initial n’a pas été reçu ou a expiré (resendCode). Hérite de BaseContext pour accéder aux données partagées du flux d’authentification, comme le state de la transaction, les informations du client et les texts d’internationalisation.

Example

// How to use the LoginEmailVerification screen SDK:
import LoginEmailVerification from '@auth0/auth0-acul-js/login-email-verification';

// Instantiate the manager for the login email verification screen
const loginEmailVerificationManager = new LoginEmailVerification();

// Accessing screen-specific texts (e.g., for titles, labels, button texts)
const screenTexts = loginEmailVerificationManager.screen.texts;
const pageTitle = screenTexts?.title || 'Verify Your Email';
const codePlaceholder = screenTexts?.codePlaceholder || 'Enter code here';

// Accessing transaction errors from a previous attempt
const transactionErrors = loginEmailVerificationManager.transaction.errors;
if (transactionErrors && transactionErrors.length > 0) {
  transactionErrors.forEach(error => {
    console.error(`Error Code: ${error.code}, Message: ${error.message}`);
    // Display these errors to the user appropriately.
  });
}

// Example of handling code submission from a form
async function onCodeSubmit(enteredCode: string) {
  try {
    await loginEmailVerificationManager.continueWithCode({ code: enteredCode });
    // En cas de vérification réussie, Auth0 redirigera généralement l'utilisateur.
    // S'il y a une erreur de validation (p. ex., code invalide), la page sera
    // rendue à nouveau, et `loginEmailVerificationManager.transaction.errors` sera mis à jour.
  } catch (e) {
    // This catch block is for unexpected errors during submission (e.g., network issues).
    console.error('An unexpected error occurred while submitting the code:', e);
  }
}

// Example of handling a resend code request
async function onResendCodeClick() {
  try {
    await loginEmailVerificationManager.resendCode();
    // Inform the user that a new code has been sent.
    // The page might re-render; check `loginEmailVerificationManager.transaction.errors`
    // for issues like "too-many-emails".
  } catch (e) {
    console.error('An unexpected error occurred while resending the code:', e);
  }
}

Constructeurs

Crée une instance du gestionnaire d’écran LoginEmailVerification. Le constructeur initialise le BaseContext, ce qui implique l’analyse du

Propriétés

string

L’identifiant unique de l’écran de vérification du courriel pour la connexion. Cette propriété statique est utilisée par le BaseContext du SDK pour s’assurer que la classe est instanciée dans le contexte d’écran approprié.

Méthodes

Promise<void>

Soumet à Auth0 le code de vérification de courriel saisi par l’utilisateur. Cette méthode prépare et envoie les données du formulaire, y compris le code de vérification et la valeur requise action: "default", au point de terminaison /u/login-email-verification.Une promesse qui est résolue une fois l’envoi du formulaire amorcé. En général, un envoi réussi entraîne une redirection côté serveur. Si le code est incorrect ou qu’une erreur se produit, la page sera à nouveau rendue et this.transaction.errors sera renseigné.

Lève

Si payload.code est manquant ou n’est pas une chaîne de caractères. Elle peut aussi lever une erreur si FormHandler rencontre un problème pendant l’envoi (p. ex. erreur réseau). Les erreurs de validation Auth0 (p. ex. « invalid-code ») ne sont pas levées comme erreurs JS, mais sont disponibles dans this.transaction.errors après l’opération.

Example

const manager = new LoginEmailVerification();
// En supposant que 'userInputCode' est une chaîne obtenue à partir d'un champ de formulaire
manager.continueWithCode({ code: userInputCode })
  .catch(err => {
    // Gérer les erreurs d'envoi inattendues
    displayGlobalError("Impossible d'envoyer votre code. Veuillez réessayer.");
  });
// Après l'opération, vérifier manager.transaction.errors pour les messages de validation.

Afficher Paramètres

Options pour la méthode continueWithCode sur l’écran de vérification de courriel pour la connexion. Cette opération est utilisée lorsque l’utilisateur soumet le code de vérification qu’il a reçu par courriel pour poursuivre le flux d’authentification.Propriétés

string

Le code de vérification envoyé à l’adresse de courriel de l’utilisateur. Il s’agit généralement d’une courte chaîne numérique ou alphanumérique que l’utilisateur doit saisir dans le formulaire.

"ABCXYZ"

Récupère le tableau d’erreurs de transaction à partir du contexte, ou un tableau vide s’il n’en existe aucune.Un tableau d’objets d’erreur provenant du contexte de la transaction.

Promise<void>

Demande à Auth0 d’envoyer un nouveau code de vérification à l’adresse de courriel de l’utilisateur. Cette méthode est généralement utilisée lorsque l’utilisateur n’a pas reçu le code initial ou que celui-ci a expiré. Cette méthode envoie les données du formulaire avec action: "resend-code" au point de terminaison /u/login-email-verification.Une promesse qui est résolue une fois la demande de renvoi amorcée. Une demande réussie signifie généralement qu’un nouveau courriel est envoyé. La page peut être à nouveau rendue et this.transaction.errors peut être mis à jour si, par exemple, des limites de débit (too-many-emails) sont atteintes.

Lève

Si FormHandler rencontre un problème (p. ex. erreur réseau). Les erreurs de validation côté serveur (p. ex. limites de débit) ne sont pas levées comme erreurs JS, mais sont disponibles dans this.transaction.errors.

Example

const manager = new LoginEmailVerification();
manager.resendCode()
  .then(() => {
    // Informer l'utilisateur qu'un nouveau code a été envoyé.
    showNotification("Un nouveau code de vérification est en route!");
  })
  .catch(err => {
    // Gérer les erreurs d'envoi inattendues
    displayGlobalError("Impossible de demander un nouveau code. Veuillez réessayer plus tard.");
  });
// Après l'opération, vérifier manager.transaction.errors pour des problèmes spécifiques.

Afficher Paramètres

Options pour la méthode resendCode sur l’écran de vérification de courriel pour la connexion. Cette opération est utilisée lorsque l’utilisateur demande l’envoi d’un nouveau code de vérification à son adresse de courriel, par exemple s’il n’a pas reçu le code initial ou si celui-ci a expiré.

Utility FeatureFournit la fonctionnalité de renvoi avec gestion du délai d’attente pour cet écranObjet ResendControl avec la méthode startResend

Example

import LoginEmailVerification from '@auth0/auth0-acul-js/login-email-verification';

const loginEmailVerification = new LoginEmailVerification();
const { startResend } = loginEmailVerification.resendManager({
  timeoutSeconds: 15,
  onStatusChange: (remainingSeconds, isDisabled) => {
    console.log(`Renvoi disponible dans ${remainingSeconds}s, désactivé : ${isDisabled}`);
  },
  onTimeout: () => {
    console.log('Le renvoi est maintenant disponible');
  }
});

// Appelez startResend lorsque l'utilisateur clique sur le bouton de renvoi
startResend();

Afficher Paramètres

Options de configuration de la fonctionnalité de renvoiPropriétés

void

number

​Constructeurs

​Propriétés

​Méthodes

​Lève

​Lève

Constructeurs

Propriétés

Méthodes

Lève

Lève