> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.
# 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.
```typescript Example theme={null}
// 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
BrandingMembers} />
ClientMembers} />
OrganizationMembers} />
PromptMembers} />
ScreenMembers} />
TenantMembers} />
TransactionMembers} />
UntrustedDataMembers} />
UserMembers} />
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
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.
```typescript Example theme={null}
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.
```
ContinueWithCodeOptionPayload}>
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**
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.
```ts Example 2 theme={null}
"ABCXYZ"
```
Error[]}>
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.
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`.
```typescript Example theme={null}
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.
```
ResendCodeOptionsPayload}>
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é.
ResendControl}>
**`Utility Feature`**
Fournit la fonctionnalité de renvoi avec gestion du délai d'attente pour cet écran
Objet ResendControl avec la méthode startResend
```typescript Example theme={null}
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();
```
StartResendOptions}>
Options de configuration de la fonctionnalité de renvoi
**Propriétés**
OnStatusChangeCallback} />