Sommaire

Gestion de l’authentification Authentification:inscription

1. Inscription d’un utilisateur

Nous allons donc mettre à jour le formulaire SignUpForm créé dans la première section du chapitre Gestion de formulaires et du routage, afin d’appeler Firebase lorsque le formulaire est soumis (c’est-à-dire notamment lorsque les informations saisies ont été validées). Tout d’abord, l’authentification de Firebase fonctionne avec un couple adresse e-mail/mot de passe, et non avec un nom d’utilisateur. Commençons donc par remplacer dans le fichier les instances de username par email, et mettre à jour la validation du formulaire. Pour cela, j’ai pour ma part utilisé la bibliothèque email-validator : Formulaire

import emailValidator from ’email-validator’ 
// ... 
// Dans la validation: 
if (!values.email) { 
 errors.email = ’Please enter your e-mail address.’ 
} else if (!emailValidator.validate(values.email)) { 
 errors.email = ’Please enter a valid e-mail address.’ 
}

Dans un deuxième temps, nous allons prévoir le cas où l’inscription ne se passe pas comme prévu, c’est-à-dire le cas où une erreur est renvoyée par Firebase. Pour afficher un message à l’utilisateur, nous allons devoir stocker un flag hasError dans le state local du composant, et donc convertir notre composant en classe :

class SignUpForm ...