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

0 0 2 minutes read

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.