Login.js

import React from 'react'
import { Link } from 'react-router-dom'
import firebase from 'firebase'
import { APIService } from '../../_services/api.service'

const endpoint = 'client/checkClientByEmail'

class Login extends React.Component {
    state = {
        email: '[email protected]',
        password: 'mypassword',
        formError: null,
    }

    handleChange = (e) => {
        const { name, value } = e.target
        this.setState({ [name]: value })
    }

    handleLogin = async(e) => {
        e.preventDefault()

        console.log('handle login')
        this.setState({formError: null})

        const {
            email,
            password,
        } = this.state
        const formData = {
            email,
            password,
        }

        try {
            let request = await APIService(endpoint, 'post', formData)

            if(request.status) {
                console.log('Login request - success', {request});

                firebase
                .auth()
                .signInWithEmailAndPassword(email, password)
                .catch(err => {
                    console.log('Firebase error - ', err)
                    this.setState({formError: err.message})
                })
            }
        }
        catch (e) {
            console.log('Register request - error', {e});
        }
    }

    render() {
        const {
            email,
            password,
            formError,
        } = this.state
        const hasFormError = formError !== null && formError.length

        return (
            <section id="LoginComponent">
                <div className="section-title">
                    <h2>Login</h2>
                </div>
                <div className="row">
                    <div className="col-12 col-md-4 offset-md-4">

                        {hasFormError ? (
                            <div className="alert form-error register-error">
                                <p>{formError}</p>
                            </div>
                        ) : null}

                        <form id="HomepageLoginForm mb-3" onSubmit={this.handleLogin}>
                            <div className="form-group email">
                                <label>Email</label>
                                <input type="text" name="email" className="form-control email" onChange={this.handleChange} value={email} />
                            </div>
                            <div className="form-group password">
                                <label>Password</label>
                                <input type="password" name="password" className="form-control username" onChange={this.handleChange} value={password} />
                            </div>

                            <button type="submit" className="btn btn-login">Login</button>
                            <Link className="btn btn-register" to="/register">Register</Link>
                        </form>
                    </div>
                </div>
            </section>
        )
    }
}

export default Login