How to build a login screen with React and Bootstrap

Most websites today require users to register to access certain features or special pages, but building a login screen is one of the most tedious tasks.

 

In this article, let's explore with TipsMake.com how to build a simple yet beautiful login screen using React and Bootstrap 5 !

Required

1. Basic knowledge of HTML, CSS, and Javascript.
2. Basic understanding of React.
3. Set up NodeJS on your computer.

Setting up a React app

Run the following command to create a new React project:

npx create-react-app react-login

Open the project and launch the application:

cd react-login npm start

Once the build process is complete, the application will look like this:

Install Bootstrap

Install Bootstrap using npm:

npm install –save bootstrap

Edit App.js and add an import command for Bootstrap:

 

import "bootstrap/dist/css/bootstrap.min.css"

Go ahead and delete the boilerplate code that your React app adds by default App.js. This file will look like this:

import "bootstrap/dist/css/bootstrap.min.css" import "./App.css" function App() { return } export default App

Establish a roadmap

First, you need to create a new Auth element in Auth.js. We will be working on the Auth element needed to set up the route.

import React from "react" export default function (props) { return Auth Screen }

In a real-world application, you would navigate the user to the login screen if they haven't already. This is where the navigation comes in; run the following command to install it react-router-dom, and restart the React app after the installation is complete.

npm install --save react-router-dom

Edit the file App.jsto set up the login route and default settings. Below is the login interface on the route /auth.

import "bootstrap/dist/css/bootstrap.min.css" import "./App.css" import { BrowserRouter, Routes, Route } from "react-router-dom" import Auth from "./Auth" function App() { return ( } /> ) } export default App

Create a login form

Edit Auth.jsthe initial creation:

import React from "react" export default function (props) { return (

Sign In

 Email address Password  Submit 

Forgot password?

 ) }

 

Edit App.cssto include:

.App { background-color: white; } .Auth-form-container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; } .Auth-form { width: 420px; box-shadow: rgb(0 0 0 / 16%) 1px 1px 10px; padding-top: 30px; padding-bottom: 20px; border-radius: 8px; background-color: white; } .Auth-form-content { padding-left: 12%; padding-right: 12%; } .Auth-form-title { text-align: center; margin-bottom: 1em; font-size: 24px; color: rgb(34, 34, 34); font-weight: 800; } label { font-size: 14px; font-weight: 600; color: rgb(34, 34, 34); }

If you open the route /auth, you will see the following form:

Add a registration form

Typically, programmers want users to register if they don't already have an account. (Edit element Auth.js:)

import React, { useState } from "react" export default function (props) { let [authMode, setAuthMode] = useState("signin") const changeAuthMode = () => { setAuthMode(authMode === "signin" ? "signup" : "signin") } if (authMode === "signin") { return (

Sign In

 Not registered yet?{" "} Sign Up Email address Password  Submit 

Forgot password?

 ) } return (

Sign In

 Already registered?{" "} Sign In Full Name Email address Password  Submit 

Forgot password?

 ) }

Used useStateto switch between login and registration. Now when you access [website] /auth, you can switch between login and registration.

Above is how to create a login/registration UI using React with Bootstrap . I hope this article is helpful to you.