Photo by Lautaro Andreani on Unsplash

Introduction

In this tutorial, we’ll walk you through the process of creating a secure login form in a React application. . By the end of this guide, you’ll have a solid understanding of building a login form using React.

Prerequisites

Before we begin, make sure you have the following prerequisites in place:

• Node.js and npm installed on your machine.
• A basic understanding of React fundamentals.

Setting Up Your React Project

To start, let’s create a new React project using Vite or your preferred method. This will serve as the foundation for our login form. Here’s an example of how you can set up your project:

npm create vite@latest login-app -- --template react
cd login-app
npm run dev

This will create a new React application and start a development server.

Building the Login Form Component

Now, let’s create a React component for our login form. We’ll define the form inputs and set up basic state management. Below is the code for our LoginForm component:

import React, { useState } from 'react';

function LoginForm() {
  const [username, setUsername] = useState(');
  const [password, setPassword] = useState(');

  const handleFormSubmit = (e) => {
    e.preventDefault();
    
    if (!username || !password) {
      alert('Please fill in both fields.');
      return;
    }

    console.log(username,password)
  };

  return (
    <div>
      <h2>Login</h2>
      <form onSubmit={handleFormSubmit}>
        <div>
          <label htmlFor="username">Username:</label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <button type="submit">Log In</button>
      </form>
    </div>
  );
}

export default LoginForm;

In this code, we create a LoginForm component that handles user input and logs the login credentials .

useState values

const [username, setUsername] = useState(');
const [password, setPassword] = useState(');

Here we use useState to hold the username and password values and initialise it with an empty string.

Form code

Next, we make a HTML form with the useState values which we include the username and password values.

<div>
      <h2>Login</h2>
      <form onSubmit={handleFormSubmit}>
        <div>
          <label htmlFor="username">Username:</label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <button type="submit">Log In</button>
      </form>
    </div>

The input holds two values we need to look at, namely the value and onChange.

<input
  type="text"
  id="username"
  value={username}
  onChange={(e) => setUsername(e.target.value)}
/>

The value takes in the username we specified at the top of the function and will display what the username value is.The onChange changes the value of username by setting a new value every time the user types in a new letter on the keyboard, the value of of username will change every time this happens.

The form also has onSubmit in its attributes.

<form onSubmit={handleFormSubmit}>

This function is called any time the user presses submit, mostly likely a button will do this:

<button type="submit">Log In</button>

The handleSubmit function will be called as shown here:

const handleFormSubmit = (e) => {
    e.preventDefault();
    
    if (!username || !password) {
      alert('Please fill in both fields.');
      return;
    }

    console.log(username,password)
  };

The function takes an event, e which overrides it by writing

e.preventDefault();

because the default action for a button is to refresh the page which we do not want. Next we do some validation to check if the fields are not empty, if they are we alert the user and prompt them to enter both fields. Next we want to see if this is working, so we log the values of username and password to the console.

Conclusion

That’s it you just made your first login form with React.JS! Now we can go onto making API calls in the handleSubmit function to send data to our backend, or a custom backend tool like firebase!