Comment gérer un flux de travail de mot de passe oublié et réinitialisé en utilisant React et Node.js

Les systèmes d’authentification jouent un rôle crucial dans la fourniture d’une expérience utilisateur transparente et sécurisée. Un flux de travail d’authentification implique généralement deux processus : l’inscription et la connexion.

Avec l’augmentation du nombre de services en ligne, les utilisateurs créent des comptes et chaque compte nécessite des identifiants de connexion uniques. Cependant, il est facile d’oublier ou de confondre les identifiants de connexion. Pour remédier à ce problème, votre application doit comporter une fonction de réinitialisation du mot de passe qui permet à l’utilisateur de réinitialiser son mot de passe de manière pratique et sûre.

Configurer le projet React

Vous pouvez mettre en œuvre un flux de travail de réinitialisation de mot de passe de différentes manières – il n’y a pas de norme universelle que chaque application devrait suivre. Au lieu de cela, vous devez adapter l’approche que vous choisissez pour répondre aux besoins spécifiques de votre application.

Le flux de travail que vous découvrirez ici comprend les étapes suivantes :

Pour commencer, démarrez rapidement un projet React. Ensuite, installez Axios, une bibliothèque de requêtes HTTP JavaScript.

Vous pouvez trouver le code du projet dans ce dépôt GitHub.

Créer un composant de connexion

Dans le répertoire src, créez un nouveau composant composants/Login.js et ajoutez le code suivant. Commencez par définir le processus de réinitialisation du mot de passe :

Ce code crée une fonction qui envoie un mot de passe à usage unique (OTP) à l’adresse électronique de l’utilisateur. Il vérifie d’abord l’utilisateur en contrôlant son adresse électronique dans la base de données avant de générer et d’envoyer l’OTP. Enfin, il met à jour l’interface utilisateur avec la page OTP.

Complétez le composant de connexion en ajoutant du code pour rendre l’élément de formulaire JSX de connexion :

Créer un composant de vérification OTP

Pour s’assurer de la validité d’un code saisi par un utilisateur, vous devez le comparer au code envoyé à son email.

Créez un nouveau composants/OTPInput.js et ajoutez ce code :

Ce code crée un composant React dans lequel les utilisateurs vérifient leur code OTP. Il vérifie que le code saisi correspond à celui stocké dans l’objet contextuel. S’il est valide, il affiche la page de réinitialisation du mot de passe. À l’inverse, il affiche une alerte invitant l’utilisateur à réessayer ou à renvoyer l’OTP.

Vous pouvez consulter le code dans ce dépôt qui met en œuvre une fonction pour renvoyer les OTP et un minuteur d’expiration pour le code OTP.

Enfin, rendez les éléments JSX d’entrée.

Créez le composant de réinitialisation du mot de passe

Créez un nouveau composants/Reset.js et ajoutez ce code :

Ce code affiche un formulaire qui permet aux utilisateurs de saisir un nouveau mot de passe. Lorsque l’utilisateur clique sur submit, il envoie une requête au serveur pour mettre à jour son mot de passe dans la base de données. Il mettra ensuite à jour l’interface utilisateur si la demande aboutit.

Mettez à jour votre composant App.js

Apportez les modifications ci-dessous à votre fichier src/App.js :

Ce code définit un objet contextuel qui gère l’état de l’application, c’est-à-dire l’e-mail de l’utilisateur, le code OTP et les différentes pages de l’application. Essentiellement, l’objet contextuel permet de transmettre les états requis entre les différents composants – une alternative à l’utilisation des props.

Il comprend également une fonction qui gère facilement la navigation dans les pages sans qu’il soit nécessaire de redessiner des composants entiers.

Mise en place d’un serveur Express.js

Avec la configuration du client, configurez un service d’authentification backend pour gérer la fonctionnalité de réinitialisation du mot de passe.

Pour commencer, créez un serveur web Express et installez ces paquets :

Ensuite, créez une base de données MongoDB ou configurez un cluster MongoDB sur le cloud. Ensuite, copiez la chaîne de connexion fournie, créez un fichier ENV dans le répertoire racine, et collez la chaîne de connexion.

Pour terminer, vous devez configurer la connexion à la base de données et définir les modèles de données pour vos données utilisateur. Utilisez le code de ce référentiel pour configurer la connexion à la base de données et définir les modèles de données.

Définir les routes API

Un service backend possède idéalement plusieurs routes qui gèrent les requêtes HTTP des clients. Dans ce cas, vous devrez définir trois routes qui géreront les requêtes API send-email, email verification et update-password du client React.

Créez un nouveau fichier appelé userRoutes.js dans le répertoire racine et ajoutez le code suivant :

Contrôleurs pour les routes API

Les contrôleurs sont chargés de traiter les demandes HTTP des clients. Une fois qu’un client fait une demande à une route API particulière, une fonction de contrôleur est invoquée et exécutée pour traiter la demande et renvoyer une réponse appropriée.

Créer un nouveau controllers/userControllers.js et ajoutez le code ci-dessous.

Utilisez le code de ce référentiel pour définir des contrôleurs pour les routes API de vérification de l’email et de mise à jour du mot de passe.

Commencez par définir le contrôleur d’envoi d’email :

Ce code définit une fonction qui utilise Nodemailer pour envoyer un email avec une réinitialisation OTP à un destinataire spécifié. Il met en place un transporteur en utilisant votre propre compte Gmail et votre mot de passe.

Pour obtenir le mot de passe de votre application Gmail, vous devez générer un mot de passe d’application dans les paramètres de votre compte Google. Vous utiliserez ensuite ce mot de passe à la place de votre mot de passe Gmail habituel pour authentifier le Nodemailer.

Configurer le point d’entrée du serveur

Créez un fichier server.js dans le répertoire racine et ajoutez ce code :

Une fois le client et le serveur configurés, vous pouvez exécuter les serveurs de développement pour tester la fonctionnalité du mot de passe.

Création d’un service de réinitialisation de mot de passe personnalisé

Créer un système de réinitialisation de mot de passe en l’adaptant à votre application et à ses utilisateurs est la meilleure approche, même s’il existe des solutions payantes et préconstruites. Lors de la conception de cette fonctionnalité, vous devez tenir compte à la fois de l’expérience de l’utilisateur et de la sécurité, car les attaques sont une menace constante.

S’abonner à notre lettre d’information