Login Authentication in React
Login is a process that allows users access to a website, system or application, when they provide certain credentials, which is usually a username with email or password.
The process of login is to ensure users are who they say they are - upon confirmation, users are allowed access to functionalities, resources, etc
A login is typically created via a form in any project, and the form would have input fields where users enter their username, email or password. The form is then submitted to the server to verify that the credentials are accurate. If the credentials are accurate the user gets access, and if not, access is denied.
It’s an interface that everyone that’s signed up to certain website or application encounters before being able to access its feature. A typical example is signing into your email account or a banking app.
Now that you’ve understood what authentication, and its benefits entails, let’s get started with creating the Login form, handling the user input and also performing the authentication logic.
The first step before creating the login form is to create a registration form. This is necessary because the details users register with, will be used to log into a system or application.
Prerequisite: You should know how to create a React project using $ npm create vite@latest or any other package manager for your JavaScript Project, and also be familiar with how to create a basic React form.
Let’s create a simple Registration Form styled with tailwind CSS
import React from "react";
import { useState } from "react";
const RegistrationForm = () => {
const [formData, setFormData] = React.useState({
firstName: "",
lastName: "",
email: "",
password: "",
});
function handleChange(event) {
setFormData((prevFormData) => {
console.log({
...prevFormData,
[event.target.name]: event.target.value,
});
return {
...prevFormData,
[event.target.name]: event.target.value,
};
});
}
return (
<section className=" ml-32 w-96 h-72">
<div className="leading-10">
<p className="text-4xl mt-10">Registration Form </p>
<form action="" className="mt-10 w-full">
<label htmlFor="firstname">First Name:</label>
<input
type="text"
id="firstname"
placeholder="First Name"
onChange={handleChange}
name="firstName"
value={formData.firstName}
className=" bg-slate-200 w-full block "
/>
<label htmlFor="lastname">Last Name:</label>
<input
type="text"
id="lastame"
placeholder="Last Name"
onChange={handleChange}
name="lastName"
value={formData.lastName}
className=" bg-slate-200 w-full block "
/>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
placeholder="Email"
onChange={handleChange}
name="email"
value={formData.email}
className=" bg-slate-200 w-full block "
/>
<label htmlFor="password">Password:</label>
<input
type="password"
id="password"
placeholder="Password"
onChange={handleChange}
name="password"
value={formData.password}
className=" bg-slate-200 w-full block "
/>
<button type="submit" className="px-6 mt-10 bg-black text-white">
<span>Register</span>
</button>
</form>
</div>
</section>
);
};
export default RegistrationForm;
Code Breakdown;
Starting from the top, useState Hook is imported from react to set-up the state of the form.
import React from "react";
Create State:
const [formData, setFormData] = React.useState({
firstName: "",
lastName: "",
email: "",
password: "",
});
formData: is the state variable that holds the current values of the form input.
setFormData: function that updates the formData state.
React.useState: sets up the formData state with an object that starts with an empty string for our input value.
handleChange function:
function handleChange(event) {
setFormData((prevFormData) => {
console.log({
...prevFormData,
[event.target.name]: event.target.value,
});
return {
...prevFormData,
[event.target.name]: event.target.value,
};
});
}
event: It represents what triggers the function (in this case, typing into an input field)
setFormData: updates the form data
prevFormData: uses spread operator to copy the values from previous state or keeps a copy of existing data so it's not overwritten.
[event.target.name]: It refers to the "name" attribute of the input field where change occurs.
event.target.value: takes note or records new data the input field receives.
The handleChange function logs to the console the updated state for "formData". This is to ensure that the form is being updated when the input changes, that is, when we’re typing values in it.
