How to Create a Login Page In React?
React Login Form
In this post, we will learn about login form in react, how to create a login form using React JS with functions.
First install react and create react application
How To Install React JS and Setup Your React Application
Now Create Login.js component inside src
![](https://blogshub.co.in/wp-content/uploads/2022/09/image-77-784x1024.png)
Import useState hook in login component
import React, {useState} from "react";
Declare submitted flag and error message with States
const [isSubmit, setIsSubmitted] = useState(false);
const [errormsg, setErrorMessages] = useState({});
Create Database object for login credentials
// Login credentials
const database = [
{
username: "username",
password: "password@123"
}
];
Define error constant for form validation
const errors = {
username: "invalid username",
password: "invalid password"
};
Create Login Form
const loginForm = (
<form onSubmit={handleSubmit}>
<div className="form-group col-6 mt-5">
<label >User Name</label>
<input type="text" className="form-control" name="username" placeholder="Enter Username" />
{renderErrorMessage("username")}
</div>
<div className="form-group col-6 mt-3">
<label >Password</label>
<input type="password" className="form-control" name="password" placeholder="Enter Password" />
{renderErrorMessage("password")}
</div>
<div className="button-container mt-3">
<input type="submit" className="btn btn-primary"/>
</div>
</form>
);
Define handleLoginForm() function for login form
const handleLoginForm = (event) => {
//Prevent form
event.preventDefault();
var { username, password } = document.forms[0];
// Find user login info
const userData = database.find((user) => user.username === username.value);
// Compare user info
if (userData) {
if (userData.password !== password.value) {
// Invalid password
setErrorMessages({ name: "password", message: errors.password });
} else {
setIsSubmitted(true);
}
} else {
// Username not found
setErrorMessages({ name: "username", message: errors.username });
}
};
Use arrow function for error handling/validation
const renderErrorMessage = (name) =>
name === errormsg.name && (
<div className="error">{errormsg.message}</div>
);
Finally show result if login success
{isSubmit ? <div>Logged in successfully</div> : loginForm}
Import Login page inside app.js and access in App() function
import Login from './pages/Login.js';
function App() {
return (
<div className="App">
<Login/>
</div>
);
}
Complete Login.js code
import React, {useState} from "react";
export default function Login(){
const [isSubmit, setIsSubmitted] = useState(false);
const [errormsg, setErrorMessages] = useState({});
// Login credentials
const database = [
{
username: "username",
password: "password@123"
}
];
const errors = {
username: "invalid username",
password: "invalid password"
};
const handleLoginForm = (event) => {
//Prevent form reload
event.preventDefault();
var { username, password } = document.forms[0];
// Find user login info
const userData = database.find((user) => user.username === username.value);
// Compare user info
if (userData) {
if (userData.password !== password.value) {
// Invalid password
setErrorMessages({ name: "password", message: errors.password });
} else {
setIsSubmitted(true);
}
} else {
// Username not found
setErrorMessages({ name: "username", message: errors.username });
}
};
// JSX code for error message
const renderErrorMessage = (name) =>
name === errormsg.name && (
<div className="error">{errormsg.message}</div>
);
const loginForm = (
<form onSubmit={handleLoginForm}>
<div className="form-group col-6 mt-5">
<label >User Name</label>
<input type="text" className="form-control" name="username" placeholder="Enter Username" />
{renderErrorMessage("username")}
</div>
<div className="form-group col-6 mt-3">
<label >Password</label>
<input type="password" className="form-control" name="password" placeholder="Enter Password" />
{renderErrorMessage("password")}
</div>
<div className="button-container mt-3">
<input type="submit" className="btn btn-primary"/>
</div>
</form>
);
return (
<>
<div className="container mt-5">
<h2>Login </h2>
{isSubmit ? <div>Logged in successfully</div> : loginForm}
</div>
</>
)
}
Now run application using “npm start”
Conclusion
This post will helped us to create a login form with validation.
If you face any issue please comment your query.
Keep Learning 🙂