How to Set Up Facebook Login with Firebase Authentication

To set up Facebook login with Firebase Authentication, first enable Facebook as a sign-in provider in the Firebase console and provide your Facebook App ID and secret. Then, use Firebase SDK to trigger Facebook login and handle the authentication result in your app.

Syntax

Here is the basic syntax to sign in with Facebook using Firebase Authentication in JavaScript:

• firebase.auth.FacebookAuthProvider(): Creates a Facebook login provider.
• signInWithPopup(provider): Opens a popup for Facebook login.
• userCredential: Contains the signed-in user info after successful login.

javascript

const provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider)
  .then((userCredential) => {
    // User signed in
    const user = userCredential.user;
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
  });

Example

This example shows how to enable Facebook login in Firebase and sign in a user with a popup in a web app.

javascript

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

// Your Firebase config
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new FacebookAuthProvider();

function facebookLogin() {
  signInWithPopup(auth, provider)
    .then((result) => {
      const user = result.user;
      console.log('User signed in:', user.displayName);
    })
    .catch((error) => {
      console.error('Error during sign in:', error.message);
    });
}

// Call facebookLogin() when user clicks login button

Output

User signed in: John Doe

Common Pitfalls

• Not enabling Facebook login in Firebase console causes authentication failures.
• Incorrect Facebook App ID or secret in Firebase settings blocks login.
• Not configuring Facebook app's OAuth redirect URI to match Firebase's URI causes errors.
• Using deprecated Firebase SDK methods can break the login flow.

javascript

/* Wrong: Using deprecated signInWithPopup syntax */
firebase.auth().signInWithPopup(new firebase.auth.FacebookAuthProvider())
  .then(userCredential => console.log(userCredential.user))
  .catch(error => console.error(error));

/* Right: Using modular Firebase v9+ syntax */
import { getAuth, FacebookAuthProvider, signInWithPopup } from 'firebase/auth';
const auth = getAuth();
const provider = new FacebookAuthProvider();
signInWithPopup(auth, provider)
  .then(result => console.log(result.user))
  .catch(error => console.error(error));

Quick Reference

Steps to set up Facebook login with Firebase:

• Go to Firebase Console > Authentication > Sign-in method > Enable Facebook.
• Enter Facebook App ID and App Secret from your Facebook Developer account.
• Configure Facebook app's OAuth redirect URI to https://[YOUR_FIREBASE_PROJECT].firebaseapp.com/__/auth/handler.
• Use Firebase SDK's FacebookAuthProvider and signInWithPopup to sign in users.

Key Takeaways

Enable Facebook login in Firebase console and provide correct App ID and secret.

Configure Facebook app's OAuth redirect URI to Firebase's auth handler URL.

Use Firebase SDK's FacebookAuthProvider with signInWithPopup for login.

Always use the latest Firebase modular SDK syntax for compatibility.

Handle errors gracefully to improve user experience during login.