In this section, you’ll learn how to create a custom React login page from scratch, including adding styling and validation. As you progress, you’ll encounter the need for authentication. To address this, you’ll utilize an Express-based authentication server that leverages JWT tokens for user authentication. Additionally, we’ll explore an alternative approach using Clerk, which simplifies the authentication flow by handling much of the design work automatically.
Prerequisites for React js
To follow along with this tutorial, you need only Node.js and npm, the standard package manager for JavaScript.
Once you have these set start by creating a new directory for the project:
Create a file app.js
import React, { useState } from "react";
import "./styles.css";
import SignInForm from "./SignIn";
import SignUpForm from "../SignUp";
export default function App() {
const [type, setType] = useState("signIn");
const handleOnClick = text => {
if (text !== type) {
setType(text);
return;
}
};
const containerClass =
"container " + (type === "signUp" ? "right-panel-active" : "");
return (
<div className="App">
<h2>Sign in/up Form</h2>
<div className={containerClass} id="container">
<SignUpForm />
<SignInForm />
<div className="overlay-container">
<div className="overlay">
<div className="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>
To keep connected with us please login with your personal info
</p>
<button
className="ghost"
id="signIn"
onClick={() => handleOnClick("signIn")}
>
Sign In
</button>
</div>
<div className="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button
className="ghost "
id="signUp"
onClick={() => handleOnClick("signUp")}
>
Sign Up
</button>
</div>
</div>
</div>
</div>
</div>
);
}
Create a file index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
Create a file SignIn.js
import React from "react";
function SignInForm() {
const [state, setState] = React.useState({
email: "",
password: ""
});
const handleChange = evt => {
const value = evt.target.value;
setState({
...state,
[evt.target.name]: value
});
};
const handleOnSubmit = evt => {
evt.preventDefault();
const { email, password } = state;
alert(`You are login with email: ${email} and password: ${password}`);
for (const key in state) {
setState({
...state,
[key]: ""
});
}
};
return (
<div className="form-container sign-in-container">
<form onSubmit={handleOnSubmit}>
<h1>Sign in</h1>
<div className="social-container">
<a href="#" className="social">
<i className="fab fa-facebook-f" />
</a>
<a href="#" className="social">
<i className="fab fa-google-plus-g" />
</a>
<a href="#" className="social">
<i className="fab fa-linkedin-in" />
</a>
</div>
<span>or use your account</span>
<input
type="email"
placeholder="Email"
name="email"
value={state.email}
onChange={handleChange}
/>
<input
type="password"
name="password"
placeholder="Password"
value={state.password}
onChange={handleChange}
/>
<a href="#">Forgot your password?</a>
<button>Sign In</button>
</form>
</div>
);
}
export default SignInForm;
Create a file style.css
.App {
font-family: sans-serif;
text-align: center;
}
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,800");
* {
box-sizing: border-box;
}
body {
background: #f6f5f7;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: "Montserrat", sans-serif;
height: 100vh;
margin: -20px 0 50px;
}
h1 {
font-weight: bold;
margin: 0;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid #7532ff;
background-color: #7532ff;
color: #ffffff;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #ffffff;
}
form {
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
@keyframes show {
0%,
49.99% {
opacity: 0;
z-index: 1;
}
50%,
100% {
opacity: 1;
z-index: 5;
}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container {
transform: translateX(-100%);
}
.overlay {
background: #7532ff;
background: -webkit-linear-gradient(to right, #7532ff, #7532ff);
background: linear-gradient(to right, #7532ff, #7532ff);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #ffffff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #dddddd;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
}
footer i {
color: red;
}
footer a {
color: #3c97bf;
text-decoration: none;
}
Create a file SignUp.js
import React from "react";
function SignUpForm() {
const [state, setState] = React.useState({
name: "",
email: "",
password: "",
});
const handleChange = (evt) => {
const value = evt.target.value;
setState({
...state,
[evt.target.name]: value,
});
};
const handleOnSubmit = (evt) => {
evt.preventDefault();
const { name, email, password } = state;
alert(
`You are sign up with name: ${name} email: ${email} and password: ${password}`
);
for (const key in state) {
setState({
...state,
[key]: "",
});
}
};
return (
<div className="form-container sign-up-container">
<form onSubmit={handleOnSubmit}>
<h1>Create Account</h1>
<div className="social-container">
<a href="#" className="social">
<i className="fab fa-facebook-f" />
</a>
<a href="#" className="social">
<i className="fab fa-google-plus-g" />
</a>
<a href="#" className="social">
<i className="fab fa-linkedin-in" />
</a>
</div>
<span>or use your email for registration</span>
<input
type="text"
name="name"
value={state.name}
onChange={handleChange}
placeholder="Name"
/>
<input
type="email"
name="email"
value={state.email}
onChange={handleChange}
placeholder="Email"
/>
<input
type="password"
name="password"
value={state.password}
onChange={handleChange}
placeholder="Password"
/>
<button>Sign Up</button>
</form>
</div>
);
}
export default SignUpForm;
Create a file package.json
{
"name": "react-login-form",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.js",
"dependencies": {
"react": "16.12.0",
"react-dom": "16.12.0",
"react-scripts": "3.0.1"
},
"devDependencies": {
"typescript": "3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
If you people are facing any problem in the code then you do not need to solve it, what I have done is that I have created a folder for you people in a Zip file, you people can go and download it, and you can download it below. you will get the link