Build React Login & Sign Up UI Template with Bootstrap 5

Today, 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 authentication system.

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.

This step by step tutorial will help you learn how can you create an eye-catching login and user registration template for your next React project. We will be employing the Bootstrap 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.

Prerequisite

To get started, you must have basic knowledge of HTML, CSS, React, JavaScript, TypeScript, and a little bit of ES6. Make sure you must have Node set up in your machine, check out this tutorial on setting up Node Install Node JS on Mac OS.

Set up React 16+ App

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

Install & Set Up Bootstrap 5 in React

Next, Install and set up Bootstrap UI framework, and it provides beautiful UI components.

npm install bootstrap

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;

Create React Login & Sign Up Components

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>
        );
    }
}

Enable Routing in React

Run the command in the terminal to install react-router-dom module to enable Router service in React.

npm install react-router-dom

Then, go to src/index.js file and insert the following code into the file as given below..

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

Next, import BrowserRouter as Router, Routes, 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, Routes, 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'}>
              positronX
            </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">
            <Routes>
              <Route exact path="/" element={<Login />} />
              <Route path="/sign-in" element={<Login />} />
              <Route path="/sign-up" element={<SignUp />} />
            </Routes>
          </div>
        </div>
      </div>
    </Router>
  )
}
export default App

Create React Login Form UI Template with Bootstrap

Next, 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="mb-3">
          <label>Email address</label>
          <input
            type="email"
            className="form-control"
            placeholder="Enter email"
          />
        </div>
        <div className="mb-3">
          <label>Password</label>
          <input
            type="password"
            className="form-control"
            placeholder="Enter password"
          />
        </div>
        <div className="mb-3">
          <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>
        <div className="d-grid">
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
        <p className="forgot-password text-right">
          Forgot <a href="#">password?</a>
        </p>
      </form>
    )
  }
}

Following will be the output:

Build React Sign Up UI Template with Bootstrap

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="mb-3">
          <label>First name</label>
          <input
            type="text"
            className="form-control"
            placeholder="First name"
          />
        </div>
        <div className="mb-3">
          <label>Last name</label>
          <input type="text" className="form-control" placeholder="Last name" />
        </div>
        <div className="mb-3">
          <label>Email address</label>
          <input
            type="email"
            className="form-control"
            placeholder="Enter email"
          />
        </div>
        <div className="mb-3">
          <label>Password</label>
          <input
            type="password"
            className="form-control"
            placeholder="Enter password"
          />
        </div>
        <div className="d-grid">
          <button type="submit" className="btn btn-primary">
            Sign Up
          </button>
        </div>
        <p className="forgot-password text-right">
          Already registered <a href="/sign-in">sign in?</a>
        </p>
      </form>
    )
  }
}

Given below will be the output for registration UI form in React.

Add Styling to Auth Components

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 !important;
  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;
}

You have to start the React app using the given command:

npm start

Final Thought

Finally, we have built React Login & Sign Up UI template using Bootstrap UI framework.

I hope this tutorial will help you understand how to use Bootstrap UI components to make beautiful components in React.

Please consider it sharing with others.

GitHub Repo