Build React Login & Sign Up UI Template with Bootstrap 4

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 4 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.

GitHub Repo

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 4 in React

Next, Install and set up Bootstrap 4 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

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 --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"}>positronX.io</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;

Create React Login Form UI Template with Bootstrap 4

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="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:

Build React Sign Up UI Template with Bootstrap 4

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.

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

Final Thought

Finally, we have built React Login & Sign Up UI template using Bootstrap 4 UI framework. I hope this tutorial will help you understand how to use Bootstrap 4 UI components to make beautiful components in React. Please consider it sharing with others.