INTRODUCTION

Verizon’s 2023 Data Breach Investigations Report (DBIR) reported that 49% of security breaches involved compromised credentials. This highlights the critical importance of implementing a robust website authentication system on the developer's part.
Firebase authentication is a comprehensive authentication service provided by Firebase. It simplifies implementing authentication in web and mobile applications by offering various sign-in options and handling the backend for developers.

OVERVIEW OF FIREBASE AUTHENTICATION

Firebase is a Backend-as-a-Service (BaaS) application development platform by Google. Firebase provides tools and services to help developers build, improve, and grow their apps. These include App hosting, Authentication, Cloud Storage, Realtime Database, Cloud Firestore, Cloud Functions, Analytics, and Crashlytics.
The scope of this article does not exceed the authentication service of Firebase. In detail, we will explore the process of implementing the Email/Password authentication and the Google sign-in method.

SETTING UP FIREBASE AUTHENTICATION.

To implement Firebase Authentication, you start by creating a Firebase project. Open the Firebase console page, and click the Add Project option. Follow the subsequent prompts to create your Firebase project.

The next step is to add Firebase to your app, which could be an iOS, Android, or web app—our focus in this article is on the web app. You'll be prompted to create an app name. Upon creation, Firebase generates a configuration code unique to your project, which allows you to link your web app to the Firebase project.

Note that this article features implementing Firebase Auth in a web application developed using Reactjs, so this tutorial is tailored towards using Firebase with a React application. It is necessary to install Firebase as a dependency in our project by running the command:

npm install firebase

Then, create a js file where you initialize the Firebase SDK to our app.
To assess the Firebase Authentication system in our project, we import the getAuth function that sets up Firebase authentication allowing us to manage sign-ins, sign-ups, and authentication states as shown in the code snippet below:

import {initializeApp} from 'firebase/app';
import {getAuth} from 'firebase/auth'

const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxx.com",
    projectId: "auth-71d4f",
    storageBucket: "auth-71d4f.appspot.com",
    messagingSenderId: "420633845077",
    appId: "1:420633845077:web:e610a208e4fa3aa48de3dc"
  };

  const app = initializeApp(firebaseConfig);
  export const auth = getAuth(app)

INTEGRATING FIREBASE AUTHENTICATION

CREATING USER ACCOUNT WITH EMAIL AND PASSWORD

Firebase authentication allows users to create user accounts using their email and password. Note that the sign-in method must be enabled in the Firebase console for it to be implemented.
The “createUserWithEmailAndPassword” function from the Firebase Auth module is used to create user accounts. This function receives 3 parameters, auth (the instance of the Firebase Auth service), email, and password.

import {createUserWithEmailAndPassword} from 'firebase/auth'
//React state to maintain user input
const [registerEmail, setRegisterEmail] = useState("");
    const [registerPassword, setRegisterPassword] = useState("")
// function to create user account 
const register = async () => {
        try{
            const user = await createUserWithEmailAndPassword(auth, registerEmail, registerPassword)
            console.log(user)
        } catch(error){
            console.log(error.message)
        }
       
}    

**SIGN IN WITH EMAIL AND PASSWORD

**
This process is similar to creating a user account as we explored earlier, but with a different function. Signing in uses the signInWithEmailAndPassword function from the Firebase Auth module. Similar to the createUserWithEmailandPassword function, it accepts three parameters, auth, email, and password.
Here’s an example implementation:

import {signInWithEmailAndPassword} from 'firebase/auth'
 
const login = async () => {
        try{
            const user = await signInWithEmailAndPassword(auth, loginEmail, loginPassword)
        } catch(error){
            console.log(error.message)
        }
    }

GOOGLE SIGN-IN

Firebase Authentication allows users create accounts using their Google Accounts. To implement this, the Google sign-in option must be enabled in your firebase project console. Signing in with Google uses the signInWithPopup function from the Firebase Auth module. This function takes two parameters, the auth instance and a provider instance and is created using the GoogleAuthProvider function imported from the firebase Auth module.

import {createUserWithEmailAndPassword, GoogleAuthProvider, signInWithPopup} from 'firebase/auth'
 const provider = new GoogleAuthProvider();

    const signInWithGoogle = ()=>{
        signInWithPopup(auth, provider)
    }

MONITORING AUTHENTICATION STATE

Firebase Authentication allows you to monitor the user's authentication state. To implement this, use the onAuthStateChanged function from the Firebase Auth module. This function takes two parameters: the authentication instance and a callback function that executes whenever the user's authentication state changes. The callback function receives the user object if the user is signed in, or null if the user is signed out.

import { onAuthStateChanged } from 'firebase/auth 
import { useState } from "react"

const [user, setUser] = useState({})
    onAuthStateChanged(auth, (currentUser) => {
        setUser(currentUser)
    },[])

LOGGING OUT

Firebase Authentication allows users to log out of their accounts easily. To implement this, use the signOut function from the Firebase Auth module. This function takes one parameter: the authentication instance. Once called, it signs the user out of their account

 import { signOut } from 'firebase/auth
const logout = async () => {
        await signOut(auth)
    }

BENEFITS OF FIREBASE AUTHENTICATION

• Easy to develop
• Multiple Sign-In options
• Secure Authentication

CONCLUSION

In this article, we explored the world of Firebase Authentication, stressing its importance in our web applications to provide seamless user authentication. We also explored how to implement user authentications with email and password credentials and the Google sign-in option. We wrapped this article up by looking into the benefits of using Firebase Authentication in your project.