Basic Registration and Login Form Using React Hook Form

Basic Registration and Login Form Using React Hook Form

Last Updated : 07 Jun, 2025

In ReactJS, creating a form can be a nightmare as it involves handling and validating inputs. React-hook-form is a ReactJS library that simplifies the process of creating forms.

The library provides all the features that a modern form needs. It is simple, fast, and offers isolated re-renders for elements.

React Hook Form Library

React Hook Form is a popular third-party library that simplifies form management in React functional components by using hooks. It offers a complete set of tools to handle various aspects of forms, such as form state management, field handling, and form submission.

Some of the features of the React Hook Form Libraries are:

Open-source
Supports TypeScript
Provides DevTool for inspecting form data
Provides Form Builder – create forms by drag and drop
Supports for React-native

Creating registration and login forms is an essential part of user management. Below are the steps to build a basic registration and login page using React and React Hook Form.

Step 1: Create a React Application

First, create a new React application using the following command:

npm create vite@latest shopping-cart --template react

Step 2: Navigate to the Project Folder

Once the project is created, go to the project folder:

cd shopping-cart
npm install

Step 3: Install React Hook Form Library

Install the React Hook Form library by running the below command:

npm install react-hook-form

Project Structure

pro-1 — Folder Structure

Step 4: Storing Form Data in localStorage

As we are building a login form, we need to verify log-in credentials so we store the form data in local storage.

const onSubmit = (data) => {
    localStorage.setItem(data.email, JSON.stringify({ 
        name: data.name, password: data.password 
    }));
    console.log(JSON.parse(localStorage.getItem(data.email)));
  };

Login.jsx

import React from "react";
import { useForm } from "react-hook-form";
import "./App.css";

function Login() {
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm();

    const onSubmit = (data) => {
        const userData = JSON.parse(localStorage.getItem(data.email));
        if (userData) {
            if (userData.password === data.password) {
                console.log(userData.name + " You Are Successfully Logged In");
            } else {
                console.log("Email or Password is not matching with our record");
            }
        } else {
            console.log("Email or Password is not matching with our record");
        }
    };

    return (
        <>
            <h2>Login Form</h2>

            <form className="App" onSubmit={handleSubmit(onSubmit)}>
                <input
                    type="email"
                    {...register("email", { required: true })}
                    placeholder="Email"
                />
                {errors.email && <span style={{ color: "red" }}>*Email* is mandatory</span>}

                <input
                    type="password"
                    {...register("password", { required: true })}
                    placeholder="Password"
                />
                {errors.password && <span style={{ color: "red" }}>*Password* is mandatory</span>}

                <input type="submit" style={{ backgroundColor: "#a1eafb" }} />
            </form>
        </>
    );
}

export default Login;

App.css

App {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 300px;
  margin: 20px auto;
}
 
input {
  padding: 10px;
  font-size: 16px;
}

Output:

Login-foam — Basic Login Form Using React Hook Form

In this example:

Form Handling with React Hook Form: Utilizes the useForm hook from react-hook-form to manage form state and validation.
Form Fields: Includes email and password inputs, both marked as required fields.
Validation: Displays error messages if the required fields are left empty.
Form Submission: On form submission, checks if the entered email exists in localStorage. If found, compares the stored password with the entered one.
Feedback: Logs appropriate messages to the console based on the login attempt's success or failure.

Step 6: Building Registration Form

Registration.jsx

import React from "react";
import { useForm } from "react-hook-form";
import "./App.css";

function Register() {
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm();

    const onSubmit = (data) => {
        const existingUser = JSON.parse(localStorage.getItem(data.email));
        if (existingUser) {
            console.log("Email is already registered!");
        } else {
            const userData = {
                name: data.name,
                email: data.email,
                password: data.password,
            };
            localStorage.setItem(data.email, JSON.stringify(userData));
            console.log(data.name + " has been successfully registered");
        }
    };

    return (
        <>
            <h2>Registration Form</h2>

            <form className="App" onSubmit={handleSubmit(onSubmit)}>
                <input
                    type="text"
                    {...register("name", { required: true })}
                    placeholder="Name"
                />
                {errors.name && <span style={{ color: "red" }}>*Name* is mandatory</span>}

                <input
                    type="email"
                    {...register("email", { required: true })}
                    placeholder="Email"
                />
                {errors.email && <span style={{ color: "red" }}>*Email* is mandatory</span>}

                <input
                    type="password"
                    {...register("password", { required: true })}
                    placeholder="Password"
                />
                {errors.password && <span style={{ color: "red" }}>*Password* is mandatory</span>}

                <input type="submit" style={{ backgroundColor: "#a1eafb" }} />
            </form>
        </>
    );
}

export default Register;

App.css

.App {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 300px;
  margin: 20px auto;
}
 
input {
  padding: 10px;
  font-size: 16px;
}

Output

registration-form — Basic Registration Form Using React Hook Form

In this example

Form Handling with React Hook Form: Utilizes the useForm hook from react-hook-form to manage form state and validation.
Form Fields: Includes name, email, and password inputs, all marked as required fields.
Validation: Displays error messages if any required fields are left empty.
Form Submission: On form submission, checks if the entered email already exists in localStorage. If not, stores the new user's data.
Feedback: Logs appropriate messages to the console based on the registration attempt's success or failure.

Advantages of using React Hook Form

Easy to learn and build
Provides form validation
Easy to handle the form submission.
We can watch any particular form field.
We can integrate with any UI library.
Provides schema validation

Conclusion

React Hook Form simplifies form handling in React by reducing boilerplate code, improving performance, and offering an easy-to-use API for validation and state management. It is highly efficient, supports TypeScript, and smoothly integrates with various UI libraries, making it a powerful tool for both simple and complex forms.

Basic Registration and Login Form Using React Hook Form

M

mohans8050

Improve

Article Tags :

Similar Reads

How to Implement Email Registration and Login using Firebase in React?

Implementing Email Registration and Login using Firebase in React allows us to authenticate the users securely. Firebase provides predefined ways to register users and handle authentication. Firebase offers multiple authentication methods like Email-Password, Google, Facebook, etc.ApproachTo impleme

How to Develop User Registration Form in React JS ?

The Form is usually defined inside the <form> tag in conventional HTML code and also in ReactJS. It can have the usual form submission behavior that can take it to a new page but that will not make use of React's full potential, instead, as we all know it is done using React components.Prerequ

How to Create Form Builder using React and Dynamic State Management ?

In web development building forms is a common task. However, creating dynamic forms with varying fields and configurations can be a challenge. This is where a form builder tool comes in handy. In this article, we'll learn how to build a form builder tool using React Hooks for state management, allow

How to pass data into table from a form using React Components ?

React JS is a front-end library used to build UI components. This article will help to learn to pass data into a table from a form using React Components. This will be done using two React components named Table and Form. We will enter data into a form, which will be displayed in the table on 'submi

ReactJS Form Validation using Formik and Yup

ReactJS Form Validation using Formik and Yup packages is one good approach for form validation. we can validate forms using controlled components. But it may be time-consuming and the length of the code may increase if we need forms at many places on our website. Formik is designed to manage forms w