Today, In this tutorials we are going to create a fantastic React login and sign up user interface template using Bootstrap 5. This login & sign up UI template will surely help you in building simple react auth system.
Access FREE COURSE : PHP FREE TUTORIALS LIBRARY
Login system typically allows an individual us to gain access in any software system securely. Sign up is the process which enables a particular user to register in any web and mobile application.
In this step by step tutorial will help you learn how can you create an login and signup template for your React project. We will be employing the Bootstrap 5 front-end framework to build this react login system.
We’ll set up an uncomplicated React app and start building from scratch and implement a login and registration UI component in it.
Before you started, you must have basic knowledge of HTML, CSS, React, JavaScript, TypeScript, and a little bit of ES6. Make sure you must have Node.js set up in your laptop.
Run command to install React project for building React Login & Sign Up UI template with Bootstrap using create-react-app.
npx create-react-app react-login-signup-ui-template
Enter inside the react-login-signup-ui-template project.
cd react-login-signup-ui-template
Next, Install and set up Bootstrap 5 UI framework, and it provides beautiful UI components.
npm install bootstrap --save
Then, import bootstrap.min.css from node_modules inside src/App.js file.
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
function App() {
return (
<div className="App">
<h3>Build Sign Up & Login UI Template in React</h3>
</div>
);
}
export default App;
Start the React app.
npm start
Now, we will create a login and sign up components in React app, create a components directory in the src folder. And also create login.component.js and signup.component.js files inside of it.
Add the following code in login.component.js file.
import React, { Component } from "react";
export default class Login extends Component {
render() {
return (
<div>
<h3>React Login Component</h3>
</div>
);
}
}
Add the following code in signup.component.js file.
import React, { Component } from "react";
export default class SignUp extends Component {
render() {
return (
<div>
<h3>React SignUp Component</h3>
</div>
);
}
}
Run the command in the terminal to install react-router-dom module to enable Router service in React.
npm install --save react-router-dom
Then, go to src/index.js file and import ReactDOM and service and wrap tag using module.
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
serviceWorker.unregister();
Next, import BrowserRouter as Router, Switch, Route, Link React router modules to enable the routers with their associative components. Go to src/App.js and include the following code in it.
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Login from "./components/login.component";
import SignUp from "./components/signup.component";
function App() {
return (<Router>
<div className="App">
<nav className="navbar navbar-expand-lg navbar-light fixed-top">
<div className="container">
<Link className="navbar-brand" to={"/sign-in"}>Codegyan.in</Link>
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to={"/sign-in"}>Login</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to={"/sign-up"}>Sign up</Link>
</li>
</ul>
</div>
</div>
</nav>
<div className="auth-wrapper">
<div className="auth-inner">
<Switch>
<Route exact path='/' component={Login} />
<Route path="/sign-in" component={Login} />
<Route path="/sign-up" component={SignUp} />
</Switch>
</div>
</div>
</div></Router>
);
}
export default App;
To Build React Login & Sign Up UI Template, we will add the following code inside components/login.component.js file to build the login form template.
import React, { Component } from "react";
export default class Login extends Component {
render() {
return (
<form>
<h3>Sign In</h3>
<div className="form-group">
<label>Email address</label>
<input type="email" className="form-control" placeholder="Enter email" />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" placeholder="Enter password" />
</div>
<div className="form-group">
<div className="custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" id="customCheck1" />
<label className="custom-control-label" htmlFor="customCheck1">Remember me</label>
</div>
</div>
<button type="submit" className="btn btn-primary btn-block">Submit</button>
<p className="forgot-password text-right">
Forgot <a href="#">password?</a>
</p>
</form>
);
}
}
Following will be the output
Next, we will place the following code inside components/signup.component.js file to build the sign up form auth template UI template.
import React, { Component } from "react";
export default class SignUp extends Component {
render() {
return (
<form>
<h3>Sign Up</h3>
<div className="form-group">
<label>First name</label>
<input type="text" className="form-control" placeholder="First name" />
</div>
<div className="form-group">
<label>Last name</label>
<input type="text" className="form-control" placeholder="Last name" />
</div>
<div className="form-group">
<label>Email address</label>
<input type="email" className="form-control" placeholder="Enter email" />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" placeholder="Enter password" />
</div>
<button type="submit" className="btn btn-primary btn-block">Sign Up</button>
<p className="forgot-password text-right">
Already registered <a href="#">sign in?</a>
</p>
</form>
);
}
}
Given below will be the output for registration UI form in React.
In next step, we will add styling to our React login UI app to make it beautiful. Go to src/index.css file and add the given below code.
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800');
* {
box-sizing: border-box;
}
body {
background: #1C8EF9 ;
min-height: 100vh;
display: flex;
font-weight: 400;
font-family: 'Fira Sans', sans-serif;
}
h1,h2,h3,h4,h5,h6,label,span {
font-weight: 500;
font-family: 'Fira Sans', sans-serif;
}
body, html, .App, #root, .auth-wrapper {
width: 100%;
height: 100%;
}
.navbar-light {
background-color: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
}
.auth-wrapper {
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
}
.auth-inner {
width: 450px;
margin: auto;
background: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
padding: 40px 55px 45px 55px;
border-radius: 15px;
transition: all .3s;
}
.auth-wrapper .form-control:focus {
border-color: #167bff;
box-shadow: none;
}
.auth-wrapper h3 {
text-align: center;
margin: 0;
line-height: 1;
padding-bottom: 20px;
}
.custom-control-label {
font-weight: 400;
}
.forgot-password,
.forgot-password a {
text-align: right;
font-size: 13px;
padding-top: 10px;
color: #7f7d7d;
margin: 0;
}
.forgot-password a {
color: #167bff;
}
Finally, we have built React Login & Sign Up UI template using Bootstrap 5 UI framework.
Also Read : Best Login Form or Page using HTML & CSS With Source Code
I hope this tutorial will help you understand how to use Bootstrap 5 UI components to make beautiful components in React. Please consider it sharing with others.