How to implement Email Registration and Login using Firebase in React?

When building a full-stack application we sometimes want to do build the authentication part quickly without writing much code, then there comes Firebase to our rescue which offers multiple authentication methods like Email-Password, Google, Facebook, etc.

Following are the steps which cover how to authenticate users through email id and password in React.js.

Getting Started: 

Step 1: Go to the firebase official site and set up the Firebase project as shown below.

Setting Up Firebase Project

Step 2: Now enable Email-Password Login in the authentication section.

Enable email/password authentication 

Creating React Application:

Step 1: Create a React application using the following command:

npx create-react-app firebase_login

Step 2: Install all the necessary packages by running the following command:

npm i react-router-dom firebase

Project Structure:

Firebase Code:

Filename: firebase.js

Create a firebase.js file where we will initialize our firebase app and paste our firebase config credentials in firebaseConfig.

Javascript

import firebaseConfig from '../config';
import firebase from 'firebase/app';

const firebaseConfig = {
    apiKey: "*******",
    authDomain: "*******",
    projectId: "*******",
    storageBucket: "*******",
    messagingSenderId: "*******",
    appId: "*******",
    measurementId: "*******"
};

firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();

Filename: Auth.js

Create a auth.js file where we will create our register and login methods for firebase.

Javascript

import firebase from 'firebase/app';
import "firebase/auth"
import {auth} from './firebase'

export const register = async({email, password})=>{
    const resp = await firebase.auth()
      .createUserWithEmailAndPassword(email, password);
    return resp.user;
}

export const login = async({email, password})=>{
    const res = await firebase.auth()
      .signInWithEmailAndPassword(email, password);
    return res.user;
}

Login/Registration Components:

Filename:Register.js

Create a Register.js file for the registration component where we will handle the registration.

Javascript

import React, {useState} from 'react'
import {register} from './auth'

const Register = () => {
    const [form,setForm] = useState({
        email:'',
        password:''
    })
    const handleSubmit = async(e)=>{
        e.preventDefault();
        await register(form);

    }
    const InputFields = {
        padding:'0.5rem',
        margin:'0.8rem',
        borderRadius: '4px'
    }
    const ButtonStyle = {
        borderRadius: '4px',
        padding:'0.7rem',
        margin:'0.5rem'
    }
    return (
        <div>
            <h1>Register</h1>
            <form onSubmit={handleSubmit} >
            <label for="email">Email</label>
            <input type="text" style={InputFields}
                   placeholder="email" id="mail"
            onChange={(e) =>
            setForm({...form, email: e.target.value})} />
            <br/>
            <label for="password">Password</label>
            <input type="password"  placeholder="Password"
                   style={InputFields}
            onChange={(e) =>
            setForm({...form, password: e.target.value})}/>
            <br/>
            <button type="submit" style={ButtonStyle}>
                Submit
            </button>
            </form>
        </div>

    )
}

export default Register

Filename: Login.js

Create a Login.js file for the login component where we will handle the login.

Javascript

import React, {useState} from 'react'
import {login} from './auth'

const Login = () => {
    const [form,setForm] = useState({
        email:'',
        password:''
    })
    const handleSubmit = async(e)=>{
        e.preventDefault();
        await login(form);

    }
    const InputFields = {
        padding:'0.5rem',
        margin:'0.8rem',
        borderRadius: '4px'
    }
    const ButtonStyle = {
        borderRadius: '4px',
        padding:'0.7rem',
        margin:'0.5rem'
    }
    return (
        <div>
            <h1>Login</h1>
            <form onSubmit={handleSubmit} >
            <label for="email">Email</label>
            <input type="text" style={InputFields}
                   placeholder="email" id="mail"
            onChange={(e) =>
            setForm({...form, email: e.target.value})} />
            <br/>
            <label for="password">Password</label>
            <input type="password"  placeholder="Password"
                   style={InputFields}
            onChange={(e) =>
            setForm({...form, password: e.target.value})}/>
            <br/>
            <button type="submit" style={ButtonStyle}>
                   Submit
            </button>
            </form>
        </div>

    )
}

export default Login

Handling Routes in App.js:-

Filename: App.js

Javascript

import {useState} from 'react';
import './App.css';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Login from './login';
import Register from './register';

function App() {

  return (
    <Router>
    <div className="App">
      <Route exact path='/register' component={Register} />
      <Route exact path='/login' component={Login} />
     </div>
     </Router>
  );
}

export default App;

Steps to Run Application:

 Run the application using the following command from the root directory of the project.

npm start

Output:

• We can now register users through the registration form by going to the http://localhost:3000/register route in the browser.

• We can verify that the user was registered successfully by checking the authentication section of the firebase.

• Users can also login  by going to http://localhost:3000/login route in the browser.

Now our Login and Registration components are done which will easily handle authentication using firebase.