Login.js

import React, { useRef, useState } from 'react';
import { Form, Button, Card, Alert } from 'react-bootstrap';
import { useAuth } from '../contexts/AuthContext'
import { Link, useNavigate } from "react-router-dom"

export default function Login() {
    const emailRef = useRef()
    const passwordRef = useRef()
    const { login } = useAuth()
    const [error, setError] = useState("")
    const [loading, setLoading] = useState(false)
    const history = useNavigate()

    async function handleSubmit(e){
        e.preventDefault()
        try {
            setError('')
            setLoading(true)
            await login(emailRef.current.value, passwordRef.current.value)
            history.push('/')
        } catch{
           setError('Failed to Login') 
        }
        setLoading(false)
    }
  return (
    <>
        <Card>
            <Card.Body>
                <h2 className="text-center mb-4">Login</h2>
                {error && <Alert variant="danger">{error}</Alert>}
                <Form onSubmit={ handleSubmit }>
                    <Form.Group id="email">   
                        <Form.Label>Email</Form.Label>
                        <Form.Control type="email"
                        ref={emailRef} placeholder="Enter your Email" required/>
                    </Form.Group>
                    <Form.Group id="password">   
                        <Form.Label>Password</Form.Label>
                        <Form.Control type="password"
                        ref={passwordRef} placeholder="Enter your Password" required/>
                    </Form.Group>
                    <br/>
                    <Button disabled={loading} className='w-100' type="submit">Login</Button>
                </Form>
                <div className="w-100 text-center mt-3">
                      <Link to="/forgot-password">Forgot Password?</Link>
                </div>
            </Card.Body>
        </Card>
        <div className='w-100 text-center mt-2'>
            Not yet Registered?  <Link to="/signup">Register</Link>
        </div>
    </>
  );
}