Firebase Multi-Factor Authentication Implementation

Overview

• Presenter: Shekinah Chocola
• Purpose: Demonstrate implementation of Firebase multi-factor authentication

Application Features

1. User account creation via email/password or Gmail account (Google provider)
2. Login functionality
3. Account logout
4. Multi-factor authentication enabling
   • Step 1: Email/password or Gmail account login
   • Step 2: Code received via phone

Demo Walkthrough

1. Sign Up with Gmail (Google Provider)
   • User creates account using Gmail
   • Upon successful creation, user can log out or activate multi-factor authentication
   • To activate, user provides phone number and receives a verification code
   • User re-enters the code and the second factor is activated
2. Sign Up with Email and Password
   • User creates account with email and password
   • User receives a verification email and needs to verify the email
   • After verification, user can log out or activate multi-factor authentication similarly as with Gmail

Code Implementation

Project Setup

1. Firebase Project Initialization

   • Create a new Firebase project (Firebase multi-factor Authentication)
   • Disable Google Analytics
   • Enable authentication (Email/Password and Google Provider)
   • Enable multi-factor authentication (SMS)

2. Next.js Application Setup

   • Initialize Firebase within a Firebase folder
   • Create necessary configuration for Firebase initialization

Page and Component Structure

1. Sign-Up Page

   • Components: SignUp, SignUpPage
   • Functions: signInWithGoogle, signUp with email and password

2. User Page

   • Components: UserPage, UserComponent
   • Function: logout
   • Redirects to login if not authenticated

3. Login Page

   • Components: LoginPage, Login
   • Functions: loginWithGoogle, loginWithEmailAndPassword
   • Redirects to user page upon successful login

Authentication Functions

• signInWithGoogle
• signUp(email, password)
• logout
• verifyPhoneNumber(user, phoneNumber, verifier)
• endRoleUser(user, verificationID, code)

Multi-Factor Authentication

1. Activate Multi-Factor Authentication
   • Component: CreateMultiFactorAuthentication
   • Two steps: Phone number registration (PhoneRegistration) and Code verification (CodeSignUp)
   • Custom Hook: UseRecaptcha
   • Verifications and Firebase interactions handled accordingly
2. Handle Multi-Factor Authentication in Login
   • Extended login process to handle multi-factor challenge
   • Functions to manage multi-factor error and recaptcha integration

Email Verification for Email/Password Accounts

• Function: verifyUserEmail(user)
• Sends verification email to user
• User must verify email before enabling multi-factor authentication
• Check verification status in the UI and provide appropriate notifications

Conclusion

• Successfully demonstrated Firebase multi-factor authentication integration
• Users can sign up, log in, and enable enhanced account security through multi-factor authentication
• Email verification is necessary for email/password signups before enabling multi-factor authentication

Key Packages Used: Firebase, Next.js, React, TypeScript, React Toastify, TailwindCSS

Final Remarks

• Subscribe and like for more tutorials