Are you new to React JS and excited to create something simple and practical? Creating a login form is a great way to dive into React JS and CSS. This project will help you understand essential concepts like components, state management, and style while giving you a functional and stylish login interface.
In this blog post, I’ll guide you through creating a Responsive Login Form using React JS and CSS. This form includes important features such as email and password fields, a password toggle for better usability, and social login options for Google and Apple.
With this guide, you’ll learn how to manage form states, implement user-friendly features, and style your components to create a clean and responsive login form. Ready to get started? Let’s create it!
Video Tutorial to Create Login Form in React JS
If you prefer video tutorials, the YouTube video above is a great resource. It explains each line of code and provides comments to make the process of creating your ReactJS login form easy to follow. If you prefer reading or need a step-by-step guide, keep following this post.
Setting Up the Project
Before we start making the responsive login form with React JS and CSS, make sure you have Node.js installed on your computer. If you don’t have it, you can download and install it from the official Node.js website.
Create a Project Folder:
- Make a new folder, for instance, “login-form”.
- Open this folder in your VS Code editor.
Initialize the Project:
Open your terminal by pressing Ctrl + J and then use Vite to create a new React app with this command:
npm create vite@latest ./ -- --template react
Install necessary dependencies and start the development server:
npm install npm run dev
If your project is up and running in your browser, congratulations! You’ve successfully set up your project. Now, let’s move on to the next step modifying folders and files.
Modify folder and CSS Files:
- Remove the default
assetsfolder andApp.cssfile. - Download the logos and place them directly into your public folder. Ensure you only include the SVG logo files and not the logos folder itself.
- Replace the content of
index.csswith the provided code.
/* Importing Google Fonts - Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #5F41E4;
}
#root {
width: 100%;
padding: 0.6rem;
}
.login-container {
margin: 0 auto;
max-width: 410px;
padding: 2rem 1.5rem;
border-radius: 0.5rem;
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.login-container .form-title {
text-align: center;
font-size: 1.37rem;
font-weight: 600;
margin-bottom: 1.87rem;
}
.login-container .social-login {
display: flex;
gap: 1.31rem;
}
.social-login .social-button {
display: flex;
gap: 0.81rem;
width: 100%;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
padding: 0.75rem 0;
border-radius: 0.31rem;
align-items: center;
justify-content: center;
background: #F9F8FF;
border: 1px solid #D5CBFF;
transition: 0.3s ease;
}
.social-login .social-button:hover {
border-color: #5F41E4;
background: #f1eff9;
}
.social-login .social-button .social-icon {
width: 23px;
}
.login-container .separator {
position: relative;
margin: 1.5rem 0;
text-align: center;
background: #fff;
}
.login-container .separator span {
z-index: 1;
font-weight: 500;
color: #6652BE;
position: relative;
background: #fff;
font-size: 1.06rem;
padding: 0 0.9rem;
}
.login-container .separator::after {
content: "";
position: absolute;
left: 0;
top: 50%;
height: 1px;
width: 100%;
background: #bfb3f2;
}
.login-form .input-wrapper {
height: 54px;
width: 100%;
position: relative;
margin-bottom: 1.5rem;
}
.login-form .input-field {
width: 100%;
height: 100%;
outline: none;
font-size: 1.06rem;
border-radius: 0.31rem;
border: 1px solid #bfb3f2;
padding: 0px 1.25rem 0 3.12rem;
transition: 0.2s ease;
}
.login-form .input-field:focus {
border-color: #5F41E4;
}
.login-form .input-field::placeholder {
color: #9284c8;
}
.login-form .input-wrapper i {
position: absolute;
top: 50%;
height: 100%;
display: flex;
color: #a395e0;
align-items: center;
transform: translateY(-50%);
transition: 0.2s ease;
}
.login-form .input-wrapper i:not(.eye-icon) {
left: 0.93rem;
pointer-events: none;
}
.login-form .input-field:focus ~ i:not(.eye-icon) {
color: #5F41E4;
}
.login-form .input-wrapper i.eye-icon {
display: none;
right: 0.93rem;
color: #917DE8;
cursor: pointer;
font-size: 1.25rem;
}
.login-form .input-wrapper .input-field:valid ~ .eye-icon {
display: flex;
}
.login-form .forgot-password-link {
display: block;
width:fit-content;
margin-top: -0.44rem;
}
.login-form .login-button {
border: none;
outline: none;
width: 100%;
height: 54px;
color: #fff;
font-size: 1.125rem;
font-weight: 500;
cursor: pointer;
margin-top: 2.19rem;
border-radius: 0.31rem;
background: #5F41E4;
transition: 0.3s ease;
}
.login-form .login-button:hover {
background: #4320df;
}
.login-container .signup-prompt {
text-align: center;
font-size: 1.06rem;
font-weight: 500;
margin: 1.75rem 0 0.31rem;
}
.login-container a {
color: #5F41E4;
font-weight: 500;
text-decoration: none;
}
.login-container a:hover {
text-decoration: underline;
}
Creating the Components
Within the src directory of your project, organize your files by creating a “components” folder. Inside the components folder, create the following files:
- SocialLogin.jsx
- InputField.jsx
Adding the Codes
Add the respective code to each newly created file. These files define the layout and functionality of the Login Form.
In components/SocialLogin.jsx, add the code to render social login buttons for Google and Apple.
const SocialLogin = () => {
return (
<div className="social-login">
<button className="social-button">
<img src="google.svg" alt="Google" className="social-icon" />
Google
</button>
<button className="social-button">
<img src="apple.svg" alt="Apple" className="social-icon" />
Apple
</button>
</div>
)
}
export default SocialLogin;
In components/InputField.jsx, add the code for email and password fields, and the functionality to toggle password visibility.
import { useState } from "react";
const InputField = ({ type, placeholder, icon }) => {
// State to toggle password visibility
const [isPasswordShown, setIsPasswordShown] = useState(false);
return (
<div className="input-wrapper">
<input
type={isPasswordShown ? 'text' : type}
placeholder={placeholder}
className="input-field"
required
/>
<i className="material-symbols-rounded">{icon}</i>
{type === 'password' && (
<i onClick={() => setIsPasswordShown(prevState => !prevState)} className="material-symbols-rounded eye-icon">
{isPasswordShown ? 'visibility' : 'visibility_off'}
</i>
)}
</div>
)
}
export default InputField;
Finally, update the content of src/App.jsx with the provided code. It imports and uses these components to complete your login form.
import SocialLogin from "./components/SocialLogin";
import InputField from "./components/InputField";
const App = () => {
return (
<div className="login-container">
<h2 className="form-title">Log in with</h2>
<SocialLogin />
<p className="separator"><span>or</span></p>
<form action="#" className="login-form">
<InputField type="email" placeholder="Email address" icon="mail" />
<InputField type="password" placeholder="Password" icon="lock" />
<a href="#" className="forgot-password-link">Forgot password?</a>
<button type="submit" className="login-button">Log In</button>
</form>
<p className="signup-prompt">
Don't have an account? <a href="#" className="signup-link">Sign up</a>
</p>
</div>
)
}
export default App;
That’s it! If you’ve completed all the steps, you should now see your Login Form project in your browser. You can test it by entering an email and password, toggling password visibility, and trying out the social login options.
Conclusion and final words
Congratulations! You’ve successfully created a functional and stylish login form using React JS and CSS. With this project, you’ve practiced managing form states, adding user-friendly features, and applying CSS to create a beautiful look.
This is just the beginning! Consider expanding your form with additional features or integrating it with a backend for real-world use. For more inspiration, there are many other login form templates available on this website.
If you encounter any problems while creating your ReactJS login form, you can download the source code files for this project for free by clicking the “Download” button. You can also view a live demo of it by clicking the “View Live” button.
Once you’ve downloaded the project, make sure to review the README.md file included in the zip for detailed instructions on how to set up and run the project.
