Building a "Remember Me" Page: A Step-by-Step Guide

Last Updated Date: 30.09.2023 Version: 1.0.0 Author: Onur Dayibasi

When users forget their passwords, it's crucial to provide them with an easy, secure way to regain access. A common method is the "Remember Me" page, where users can request a password reset link or a magic link to log in. In this guide, we'll walk you through the development of such a page using Google Captcha, form validation, Axios, ReactQuery, and MockServiceWorker.

By accurately following the steps outlined in this example, you will effortlessly achieve the result demonstrated in the image below. (https://onurdayibasi.dev/remember-me3)

https://onurdayibasi.dev/remember-me3

1. STEPS

Let me first briefly summarize how we will proceed with the steps. (Landing KnowledgeMap)

https://onurdayibasi.dev/landing-knowledge-map

Step1: Captcha

As a first step, we'll go through the details of integrating Google Captcha into our platform. Google Captcha serves as a crucial tool in distinguishing real users from automated bots and keeps our app safe from potential spam or malicious activity. During this phase, it allows us to obtain the necessary keys, place the Captcha widget on our forms and interpret the user's responses to determine their authenticity. We will explain the installation process. Our goal is to equip you with a comprehensive understanding of the role of Google Captcha and how to seamlessly incorporate it into your digital projects.

https://onurdayibasi.dev/captcha

Step2: Remember Me V1 (Version1)

The next step in our quest to create a user-centered authentication experience will be to develop a form using the Ant develop (AntD) library, a popular React UI framework. This form will include mandatory elements such as login, phone number and the previously included Google Captcha. Our goal here is not only to collect this information but also to verify its correctness through client-side validation. Our form will evaluate the user input using AntD's built-in validation techniques and ensure that it fits the expected patterns and limitations. When validation is successful, the successCallback method is called, setting the stage for the next steps in our authentication process. If problems are detected in the validation, the form will call the failed handler, alerting users to their errors and helping them through the process.

https://onurdayibasi.dev/remember-me

Step3: Remember Me V2 (Version2)

In the third phase of our implementation, we will shift our focus to establishing server communication. Recognizing the importance of ensuring smooth front-end-back-end interaction even during the development phase, we will use Mock Service Worker (MSW) to simulate back-end REST handlers. This powerful tool allows us to intercept and manipulate network requests, providing a realistic test environment without a live backend. On the client side, Axios, respected for its simplicity and versatility, will be our library of choice for sending requests. To manage server state, we leverage React Query, which not only tracks server state changes but also optimizes data fetching. As we put all these components together, we will run a series of tests to evaluate the flow from the frontend to our simulated backend. Any successful interactions and responses will be quickly shown to users using Ant Design's Message component, notifying them of the transaction result

https://onurdayibasi.dev/remember-me2

Step4: Remember Me V3 (Version3)

In step 4, we want to make the design more consistent, visually appealing, and functional. To begin, we divide the screen horizontally into two sections. We improve the page's appearance by including a picture in the huge section on the left side. Our functioning portion will be the right one. On the right side, we will insert the logo, the RememberMe Form, and the company information.

https://onurdayibasi.dev/remember-me3

2. HOW TO RUN

After you download contents , this content

In contents you will find the code folder, open this folder in your popular editor, from cd terminal go to the file directory with package.json under the code/ folder and run npm install here. This will download the libraries that the project depends on in the node_modules folder. You can then run the application by running the npm run dev command.

Local Server Working. http://127.0.0.1:5173/

Click Captcha

****When you go to the Captcha page, since there is no special key for this Captcha, Error for Site Owner as below: Invalid Key error

Go to https://www.google.com/recaptcha and get a SiteKey , open Captcha.jsx in project and replace with “reCAPTCHA_site_key”

You can now see that Catpcha is working on the Captcha page. When you click on Captcha, a valid value will be retrieved by Captcha and displayed in the JSONViewer.

Click Remember Version 1 ****

Press the Submit button without filling in the form elements, you will see that Client Side Validation runs and gives some warnings on the screen.

When you fill in the Form elements with the correct data and press Submit, see the data you get from the Form displayed in JSON on the side.

Note: There is no Network operation in this example. Only the data received from the Form is shown as JSON.

Click Remember Version 2

In this example, our goal is to send Form data over the Network with ReactQuery and Axios. When you fill out the relevant form and press the Submit button, you will see that you get an error. Here you realize that the request is actually working correctly, but the MSW where we mock the server side of the data is not working properly.

To Fix: For MSW Local Working run in terminal npx msw init ./public

After running this command, you can see that MSW is now responding correctly to requests. When we fill the form with the correct data and press Submit, you can see that the rememberme api gives 200 results.

Click Remember Version 3

In the Version 3 example, you can try that the form now works in a more layout and styling settled area and the returning messages are shown to the user as a notification alert.

3. CODE ANALYSIS

Let's dive in to code !

Package Structure

When we examine the package structure of the code, the garden-infra and samples packages actually contain only the infrastructure packages I use to demo the application. If you developers want to use these samples in your own project, the files in the component and container package are the ones you should be interested in.

Component contains 2 components. One is RememberMe component and the other is Captcha component that Remember Me compose.

In the Container, there is a RememberMeContainer file that is responsible for Remember Me's communication with the server and contains the ReactQuery business logic that manages it.

Using these components, you can add the RememberMe page to your project as you wish.

Dependencies

Below package.json dependencies listed;

"dependencies": {
    "@tanstack/react-query": "^4.29.12",
    "@tanstack/react-query-devtools": "^4.29.19",
    "antd": "^5.9.4",
    "axios": "^0.23.0",
    "i": "^0.3.7",
    "msw": "latest",
    "npm": "^10.1.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-google-recaptcha": "^3.1.0",
    "react-router-dom": "^6.14.2",
    "@ant-design/icons": "^5.2.6",
    "react-draggable": "^4.4.4",
    "react-native-md5": "^1.0.0",
    "react-helmet": "^6.1.0",
    "react-json-view": "^1.21.3"
  },

React Dependencies

"dependencies": {
    "react": "^18.2.0",
     "react-dom": "^18.2.0"
  },

Routing

"dependencies": {
    "react-router-dom": "^6.14.2",
  },

React Query & Network Dependencies

"dependencies": {
    "@tanstack/react-query": "^4.29.12",
    "@tanstack/react-query-devtools": "^4.29.19",
    "axios": "^0.23.0",
    "msw": "latest",
  },

Component Libraries

"dependencies": {
    "antd": "^5.9.4",
    "react-google-recaptcha": "^3.1.0",
    "@ant-design/icons": "^5.2.6",
    "react-draggable": "^4.4.4",
    "react-json-view": "^1.21.3"
  },

Utility Libraries

"dependencies": {
    "prop-types": "^15.8.1",
    "react-draggable": "^4.4.4",
    "react-native-md5": "^1.0.0",
    "react-helmet": "^6.1.0"
  },