How to create login and logout page in react?

React login and logout pages code below:

Main concept is that we are using here localStorage Property when we login then check if local storage value is true then you will redirect in the main dashboard page and when you will click on the logout button then we clear localStorage value. As given below example.

Need to create a login page:

Login.js

import React, { useState } from "react"

import { Button } from "react-bootstrap"

export default function Login(props) {

    const [email, setEmail] = useState(""); 

    const [password, setPassword] = useState("");

    function validateForms() {

        return email.length > 0 && password.length > 0;

    }

    function handleLogin(event) {

        event.preventDefault();

        if(email==='sheo@gmail.com' && password ==='123@#$' ){

   // here is the set default email and password need to set as you wish

window.localStorage.setItem('token',true);

            props.history.push("/dashboard");

        }

        else{

            props.history.push("/login"); // for the redirect

        }

    }

    return (

        <div className="container">

            <div className="row justify-content-md-center">

                <div className="card">

                    <div className="card-header">Login</div>

                    <div className="card-body">

                        <form>

                            <div className="form-group">

                   <label for="Email">Email address</label>

                                <input type="email" className="form-control"  placeholder="Enter email" autofocus value={email} onChange={e => setEmail(e.target.value)} />

                            </div>

                            <div className="form-group">

                          <label for="Password">Password</label>

                                <input type="password" className="form-control" placeholder="Password" value={password}  onChange={e => setPassword(e.target.value)} />

                            </div>

                            <Button block bsSize="large" disabled={!validateForms()} onClick={handleLogin} type="submit">Login</Button>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    )

}

logout.js

import React, { Component } from 'react'

import { baseUrl } from '../helpers';

import {Link} from 'react-router-dom'

export default class Logout extends Component {

   

    logout = () => {

        window.localStorage.clear();

        window.location.href = baseUrl +"login";

    }

    render(){

        return(

            <Link onClick={this.logout} className="logout">Logout</Link>

        )

    }

}

  

Logout button code.

Inside of the render() {

const isLoggedIn = window.localStorage.getItem('token')

 Where you need logout button:

{isLoggedIn ? <Logout /> : null}

// this is condition if you have found token value will be true then you are logged if the value will be false then you will be a push for the login page. These are react login and logout page.