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
- Go to Facebook for Developers
- Click “Get Started” and complete the setup
- Click “Create App”
- Choose “Consumer” as the app type
- Enter your app details and create the app
Step 2: Configure Facebook Login
- In your Facebook app dashboard, click “Add Product”
- Find “Facebook Login” and click “Set Up”
- Choose “Web” platform
- Enter your site URL: http://localhost:3000 (for development)
- Go to Facebook Login → Settings
Add the following to “Valid OAuth Redirect URIs”:
https://your-project-id.firebaseapp.com/__/auth/handler
Step 3 : Connect Facebook to Firebase
- In Facebook app dashboard, go to Settings → Basic
- Copy your App ID and App Secret
- In Firebase Console → Authentication → Sign-in method → Facebook
- Paste your App ID and App Secret
- 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 :
// Add to existing imports
import { FacebookAuthProvider } from 'firebase/auth';
// Add after existing googleProvider
export const facebookProvider = new FacebookAuthProvider();
facebookProvider.addScope('email');
Update Authentication Service
Extend src/services/authService.ts with Facebook methods :
// Add to existing AuthService class
class AuthService {
// ... existing Google methods
// Facebook Sign In
async signInWithFacebook(): Promise<AuthUser | null> {
try {
const result = await signInWithPopup(auth, facebookProvider);
return this.formatUser(result.user);
} catch (error: any) {
console.error('Facebook sign in error:', error);
// Handle Facebook-specific errors
if (error.code === 'auth/account-exists-with-different-credential') {
throw new Error('Account exists with different sign-in method');
} else if (error.code === 'auth/popup-closed-by-user') {
throw new Error('Sign-in cancelled by user');
}
throw new Error('Failed to sign in with Facebook');
}
}
// ... rest of existing methods
}
Update Authentication Context
Add Facebook support to src/contexts/AuthContext.tsx :
// Add to AuthContextType interface
interface AuthContextType {
// ... existing properties
signInWithFacebook: () => Promise<void>;
}
// Add to AuthProvider component
export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
// ... existing state and effects
const signInWithFacebook = async (): Promise<void> => {
try {
setError(null);
setLoading(true);
await authService.signInWithFacebook();
} catch (error: any) {
setError(error.message);
throw error;
} finally {
setLoading(false);
}
};
const value = {
// ... existing values
signInWithFacebook
};
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};
Facebook Authentication Component
Create src/components/FacebookAuth.tsx :
// FacebookAuth.tsx
import { useAuth } from '../../contexts/AuthContext';
const FacebookAuth: React.FC = () => {
const { signInWithFacebook } = useAuth();
// here you can manage loading and errors etc.
const handleFacebookSignIn = async () => {
try {
await signInWithFacebook();
} catch (err: any) {
setError(err.message || 'Facebook sign in failed');
}
};
return (
<Box>
<Button variant=”contained” onClick={handleFacebookSignIn}>
Sign in with Facebook
</Button>
</Box>
);
};
export default FacebookAuth;
Update Authentication Container
Update src/components/auth/AuthenticationContainer.tsx :
// AuthenticationContainer.tsx
//Existing imports..
import FacebookAuth from "./FacebookAuth";
const AuthenticationContainer: React.FC = () => {
return (
//In this after GoogleAuth add Below line
<FacebookAuth />
);
};
//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 :
// Request additional permissions (requires app review)
facebookProvider.addScope('user_birthday');
facebookProvider.addScope('user_location');
Account Linking
Handle cases where users have accounts with different providers :
// In your error handling
if (error.code === 'auth/account-exists-with-different-credential') {
// Prompt user to sign in with existing method first
// Then link accounts using linkWithCredential()
}
Testing in Development
Facebook Login requires HTTPS in production, but localhost works for development. For testing :
- Use Facebook’s test users feature
- Add test accounts in Facebook Developer dashboard
- Or use your personal Facebook account during development
Production Deployment
Before going live :
- Domain Verification : Add production domain to Facebook app settings
- App Review : Submit for review if using additional permissions
- HTTPS Required : Facebook Login requires HTTPS in production
- 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 :
- Start development server: npm run dev
- Click “Continue with Facebook”
- Complete Facebook OAuth flow
- 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.
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.
