How to Handle Forgot and Reset Password Workflow Using React and Node.js
Authentication systems play a crucial role in providing a seamless and secure user experience. An authentication workflow typically involves two processes: sign-up and log-in.
As the number of online services increases, people create accounts, and each account requires unique login credentials. However, this makes it easy to forget or confuse login credentials. To address this, your app should implement a password reset feature that lets a user reset their password conveniently and securely.
Set Up the React Project
you’re able to implement a password reset workflow in various ways—there isn’t a universal standard that every application should follow. Instead, you should tailor the approach you choose to meet the specific needs of your application.
The workflow you’ll learn about here includes the following steps:
To get started,quickly bootstrap a React project. Next, installAxios, a JavaScript HTTP request library.
You can find the project’s code in thisGitHub repository.
Create a Login Component
In the src directory, create a newcomponents/Login.jsfile and add the following code. Start by defining the password reset process:
This code creates a function that sends a One-Time Password (OTP) to a user’s email address. It first verifies the user by checking their email in the database before generating and sending the OTP. Finally, it updates the UI with the OTP page.
Complete the login component by adding code to render the login JSX form element:
Create an OTP Verification Component
To ensure the validity of a code entered by a user, you need to compare it to the code sent to their email.
Create a newcomponents/OTPInput.jsfile and add this code:
The code creates a React component where users verify their OTP code. It checks that the entered code matches the one stored in the context object. If it’s valid, it displays the password-reset page. Conversely, it shows an alert prompting the user to try again or resend the OTP.
you could check the code in thisrepositorythat implements a function for resending OTPs and an expiration timer for the OTP code.
Finally, render the input JSX elements.
Create the Reset Password Component
Create a newcomponents/Reset.jsfile and add this code:
This code renders a form that allows users to enter a new password. When the user clicks on submit, it will send a request to the server to update their password in the database. It will then update the UI if the request is successful.
Update Your App.js Component
Make the changes below to your src/App.js file:
This code defines a context object that manages the app’s state, which includes the user’s email, the OTP code, and the various pages within the app. Essentially, the context object makes it possible to pass the required states between different components—an alternative to using props.
It also includes a function that handles page navigation with ease without needing to re-render whole components.
Set Up an Express.js Server
With the client setup, configure a backend authentication service to handle the password reset functionality.
To get started,create an Express web server, and install these packages:
Next,create a MongoDB databaseorconfigure a MongoDB cluster on the cloud. Then copy the connection string provided, create an ENV file in the root directory, and paste the connection string.
To finish, you need to configure the database connection and define the data models for your user data. Use the code in this repository toset up the database connectionanddefine the data models.
Define the API Routes
A backend service ideally has several routes that handle clients' HTTP requests. In this case, you’ll need to define three routes that’ll manage the send-email, email verification, and update-password API requests from the React client.
Create a new file called userRoutes.js in the root directory and add the following code:
Controllers for the API Routes
Controllers are responsible for processing clients' HTTP requests. Once, a client makes a request to a particular API route, a controller function gets invoked and executed to process the request and return an appropriate response.
Create a newcontrollers/userControllers.jsfile and add the code below.
Use the code in this repository todefine controllers for the email verification and update-passwordAPI routes.
Start by defining the send email controller:
This code defines a function that uses Nodemailer to send an email with a OTP reset to a specified recipient. It sets up a transporter using your own Gmail account and password.
To get your Gmail app password, you need togenerate an app password in your Google account settings. You’ll then use this password in place of your regular Gmail password for authenticating the Nodemailer.
Configure the Server Entry Point
Create a server.js file in the root directory and add this code:
With both the client and server set up, you can run the development servers to test the password functionality.
Building a Custom Password-Reset Service
Creating a password reset system by tailoring it to your application and its users is the best approach, even though paid, pre-built solutions exist. While designing this feature, you should take into account both user experience and security, as attacks are a constant threat.
User authentication is crucial for protecting sensitive information. Luckily, it’s not difficult to implement this.
it’s possible to’t call this offline, Notion.
It saves me hours and keeps my sanity intact.
If an AI can roast you, it can also prep you for emergencies.
When your rival has to bail out your assistant.
Quality apps that don’t cost anything.
