Google, Facebook, and OTP Login Integration using Firebase in React : Part 2

Introduction

This guide builds upon Part 1: Google Authentication where we established the core authentication architecture. We'll now add Facebook authentication using the same foundation - authentication service, context, and Firebase configuration.

Prerequisites

• Completed Part 1: Google Authentication setup
• Facebook Developer account
• Existing Firebase project with authentication enabled

Facebook Developer Setup

Step 1: Set Up Facebook Developer Account

1. Go to Facebook for Developers
2. Click "Get Started" and complete the setup
3. Click "Create App"
4. Choose "Consumer" as the app type
5. Enter your app details and create the app

Step 2: Configure Facebook Login

1. In your Facebook app dashboard, click "Add Product"
2. Find "Facebook Login" and click "Set Up"
3. Choose "Web" platform
4. Enter your site URL: http://localhost:3000 (for development)
5. Go to Facebook Login → Settings
6. Add the following to "Valid OAuth Redirect URIs":

1https://your-project-id.firebaseapp.com/__/auth/handler

Step 3: Connect Facebook to Firebase

1. In Facebook app dashboard, go to Settings → Basic
2. Copy your App ID and App Secret
3. In Firebase Console → Authentication → Sign-in method → Facebook
4. Paste your App ID and App Secret
5. Copy the OAuth redirect URI from Firebase and add it to your Facebook app

Update Components

Update Firebase Configuration

Extend your existing src/config/firebase.ts:

1// Add to existing imports
2
3import { FacebookAuthProvider } from 'firebase/auth';
4
5// Add after existing googleProvider
6
7export const facebookProvider = new FacebookAuthProvider();
8
9facebookProvider.addScope('email');

Update Authentication Service

Extend src/services/authService.ts with Facebook methods:

1// Add to existing AuthService class
2
3class AuthService {
4
5// ... existing Google methods
6
7// Facebook Sign In
8
9async signInWithFacebook(): Promise<AuthUser | null> {
10
11try {
12
13const result = await signInWithPopup(auth, facebookProvider);
14
15return this.formatUser(result.user);
16
17} catch (error: any) {
18
19console.error('Facebook sign in error:', error);
20
21// Handle Facebook-specific errors
22
23if (error.code === 'auth/account-exists-with-different-credential') {
24
25throw new Error('Account exists with different sign-in method');
26
27} else if (error.code === 'auth/popup-closed-by-user') {
28
29throw new Error('Sign-in cancelled by user');
30
31}
32
33throw new Error('Failed to sign in with Facebook');
34
35}
36
37}
38
39// ... rest of existing methods
40
41}

Update Authentication Context

Add Facebook support to src/contexts/AuthContext.tsx:

1// Add to AuthContextType interface
2
3interface AuthContextType {
4
5// ... existing properties
6
7signInWithFacebook: () => Promise<void>;
8
9}
10
11// Add to AuthProvider component
12
13export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
14
15// ... existing state and effects
16
17const signInWithFacebook = async (): Promise<void> => {
18
19try {
20
21setError(null);
22
23setLoading(true);
24
25await authService.signInWithFacebook();
26
27} catch (error: any) {
28
29setError(error.message);
30
31throw error;
32
33} finally {
34
35setLoading(false);
36
37}
38
39};
40
41const value = {
42
43// ... existing values
44
45signInWithFacebook
46
47};
48
49return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
50
51};

Facebook Authentication Component

Create src/components/FacebookAuth.tsx:

1// FacebookAuth.tsx
2
3import { useAuth } from '../../contexts/AuthContext';
4
5const FacebookAuth: React.FC = () => {
6
7const { signInWithFacebook } = useAuth();
8
9// here you can manage loading and errors etc.
10
11const handleFacebookSignIn = async () => {
12
13try {
14
15await signInWithFacebook();
16
17} catch (err: any) {
18
19setError(err.message || 'Facebook sign in failed');
20
21}
22
23};
24
25return (
26
27<Box>
28
29<Button variant=”contained” onClick={handleFacebookSignIn}>
30
31Sign in with Facebook
32
33</Button>
34
35</Box>
36
37);
38
39};
40
41export default FacebookAuth;

Update Authentication Container

Update src/components/auth/AuthenticationContainer.tsx:

1// AuthenticationContainer.tsx
2
3//Existing imports..
4
5import FacebookAuth from "./FacebookAuth";
6
7const AuthenticationContainer: React.FC = () => {
8
9return (
10
11//In this after GoogleAuth add Below line
12
13<FacebookAuth />
14
15);
16
17};
18
19//Other things remain as it is

After making these changes in your existing project you will be able to use the Facebook Authentication method in your project.

Facebook-Specific Considerations

Privacy and Permissions

Facebook authentication requests basic permissions by default:

• Public profile
• Email address

Additional permissions require Facebook app review:

1// Request additional permissions (requires app review)
2
3facebookProvider.addScope('user_birthday');
4
5facebookProvider.addScope('user_location');

Account Linking

Handle cases where users have accounts with different providers:

1// In your error handling
2
3if (error.code === 'auth/account-exists-with-different-credential') {
4
5// Prompt user to sign in with existing method first
6
7// Then link accounts using linkWithCredential()
8
9}

Testing in Development

Facebook Login requires HTTPS in production, but localhost works for development. For testing:

1. Use Facebook's test users feature
2. Add test accounts in Facebook Developer dashboard
3. Or use your personal Facebook account during development

Production Deployment

Before going live:

1. Domain Verification: Add production domain to Facebook app settings
2. App Review: Submit for review if using additional permissions
3. HTTPS Required: Facebook Login requires HTTPS in production
4. Privacy Policy: Required link in Facebook app settings

Common Issues and Solutions

• Popup Blocked
  • Facebook popups are commonly blocked. Provide clear user instructions or implement redirect flow as fallback.
• App Not Live
  • Ensure your Facebook app is set to "Live" mode in the app dashboard.
• Invalid OAuth URI
  • Double-check that Firebase redirect URI matches exactly in Facebook settings.
• Testing

1. Start development server: npm run dev
2. Click "Continue with Facebook"
3. Complete Facebook OAuth flow
4. Verify user data in dashboard

Next Steps

With Google and Facebook authentication complete, you now have:

• Multi-provider OAuth support
• Consistent error handling
• Type-safe authentication flow
• Material-UI integration

Part 3 will cover phone/SMS authentication, completing your full authentication system.

You can check out the complete code for this part in my GitHub repository here:

https://github.com/Ridham-K/Blog-Code-Examples/tree/main/firebase-auth-demo

Key Differences from Google Auth

Facebook authentication has some unique characteristics:

• Stricter app review process for permissions
• Different error codes and handling
• More restrictive development vs production environments
• Additional privacy policy requirements

The beauty of our architecture is that adding Facebook required minimal changes to the core system, demonstrating the power of well-structured authentication services.