Facebook sign-in in Firebase - Mini Project: Build & Apply

Facebook Sign-In with Firebase

📖 Scenario: You are building a simple web app that allows users to sign in using their Facebook account. This makes it easy for users to log in without creating a new password.

🎯 Goal: Set up Facebook sign-in authentication using Firebase in a web app. You will create the initial Firebase configuration, add Facebook as a sign-in provider, implement the sign-in function, and complete the setup to allow users to log in with Facebook.

📋 What You'll Learn

Create a Firebase configuration object with the given API keys

Add a FacebookAuthProvider instance for Facebook sign-in

Implement a function to sign in with Facebook using Firebase Authentication

Complete the Firebase app initialization and export the sign-in function

💡 Why This Matters

🌍 Real World

Many web apps allow users to sign in with social accounts like Facebook to simplify login and improve user experience.

💼 Career

Understanding how to implement social sign-in with Firebase is a common task for frontend and full-stack developers working on user authentication.

1

Create Firebase configuration object

Create a constant called firebaseConfig with the following exact properties and values: apiKey: 'AIzaSyExampleKey1234567890', authDomain: 'your-app.firebaseapp.com', projectId: 'your-app', storageBucket: 'your-app.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:abcdef123456'.

Firebase

# Your code here

Hint

Use a JavaScript object with the exact keys and values given.

2

Add FacebookAuthProvider instance

Create a constant called facebookProvider and set it to a new instance of firebase.auth.FacebookAuthProvider().

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey1234567890',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

# Your code here

Hint

Use the new keyword to create the FacebookAuthProvider instance.

3

Implement Facebook sign-in function

Write an async function called signInWithFacebook that calls firebase.auth().signInWithPopup(facebookProvider) and returns the result.

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey1234567890',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

const facebookProvider = new firebase.auth.FacebookAuthProvider();

# Your code here

Hint

Use async and await to handle the popup sign-in.

4

Initialize Firebase app and export sign-in function

Add the line firebase.initializeApp(firebaseConfig); to initialize Firebase. Then export the signInWithFacebook function using export { signInWithFacebook };.

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey1234567890',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

const facebookProvider = new firebase.auth.FacebookAuthProvider();

async function signInWithFacebook() {
  return await firebase.auth().signInWithPopup(facebookProvider);
}

# Your code here

Hint

Call firebase.initializeApp with the config, then export the sign-in function.

Practice

1. What is the main purpose of using Facebook sign-in with Firebase?

easy

A. To create Facebook accounts automatically

B. To store user data in Facebook servers

C. To replace Firebase authentication completely

D. To let users log in using their Facebook account easily

Solution

1. Step 1: Understand Facebook sign-in purpose

   Facebook sign-in allows users to authenticate using their existing Facebook account, simplifying login.

2. Step 2: Compare options

   Only To let users log in using their Facebook account easily correctly describes this purpose; others describe unrelated or incorrect uses.

3. Final Answer:

   To let users log in using their Facebook account easily -> Option D

4. Quick Check:

   Facebook sign-in = Easy login with Facebook [OK]

Hint: Facebook sign-in means easy login with Facebook account [OK]

Common Mistakes:

• Thinking Facebook sign-in stores data on Facebook
• Confusing Facebook sign-in with full Firebase replacement
• Assuming Facebook creates accounts automatically

2. Which Firebase method is used to start Facebook sign-in with a popup window?

easy

A. signInWithPopup

B. signInWithRedirect

C. signInWithEmailAndPassword

D. createUserWithEmailAndPassword

Solution

1. Step 1: Identify Firebase methods for sign-in

   Firebase offers signInWithPopup and signInWithRedirect for OAuth providers like Facebook.

2. Step 2: Choose method for popup

   signInWithPopup opens a popup window for login, matching the question requirement.

3. Final Answer:

   signInWithPopup -> Option A

4. Quick Check:

   Popup login method = signInWithPopup [OK]

Hint: Popup login uses signInWithPopup method [OK]

Common Mistakes:

• Confusing redirect and popup methods
• Using email/password methods for Facebook sign-in
• Mixing createUser with sign-in methods

3. What will the following code do?

const provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider)
  .then(result => console.log(result.user.displayName))
  .catch(error => console.error(error));

medium

A. Log the user's Facebook display name after successful sign-in

B. Throw a syntax error because of missing semicolons

C. Log an error because Facebook sign-in is not supported

D. Create a new Facebook account automatically

Solution

1. Step 1: Analyze the code flow

   The code creates a Facebook provider, calls signInWithPopup, then logs the user's display name on success.

2. Step 2: Check for errors or unsupported features

   Code syntax is correct; Facebook sign-in is supported; no account creation happens automatically.

3. Final Answer:

   Log the user's Facebook display name after successful sign-in -> Option A

4. Quick Check:

   signInWithPopup success logs displayName [OK]

Hint: signInWithPopup logs user info on success [OK]

Common Mistakes:

• Thinking missing semicolons cause errors
• Assuming Facebook sign-in is unsupported
• Believing code creates Facebook accounts

4. You get an error when calling signInWithPopup for Facebook sign-in. What is a common cause?

medium

A. Using signInWithEmailAndPassword instead

B. Facebook sign-in is not enabled in Firebase console

C. Not importing Firebase SDK

D. Calling signInWithPopup without a provider

Solution

1. Step 1: Identify common setup errors

   Facebook sign-in requires enabling it in Firebase console under Authentication providers.

2. Step 2: Evaluate other options

   Using wrong methods or missing imports cause different errors; calling without provider causes immediate failure.

3. Final Answer:

   Facebook sign-in is not enabled in Firebase console -> Option B

4. Quick Check:

   Enable Facebook sign-in in Firebase console [OK]

Hint: Enable Facebook sign-in in Firebase console first [OK]

Common Mistakes:

• Forgetting to enable Facebook provider
• Mixing signInWithEmailAndPassword with Facebook sign-in
• Ignoring SDK import errors
• Calling signInWithPopup without provider argument

5. You want to add Facebook sign-in to your app and ensure users' Facebook profile pictures are saved in Firebase user profiles. Which steps are needed?

hard

A. Use signInWithEmailAndPassword and fetch Facebook pictures separately

B. Only enable Facebook sign-in; Firebase saves profile pictures automatically

C. Enable Facebook sign-in in Firebase, use signInWithPopup, then update user profile with photoURL from Facebook data

D. Create Facebook accounts manually and link to Firebase users

Solution

1. Step 1: Enable Facebook sign-in

   Enable Facebook provider in Firebase console under Authentication > Sign-in method.

2. Step 2: Authenticate and update profile

   Implement signInWithPopup (or Redirect) with FacebookAuthProvider; then update the Firebase user profile with the photoURL obtained from Facebook data to ensure profile pictures are saved.

3. Final Answer:

   Enable Facebook sign-in in Firebase, use signInWithPopup, then update user profile with photoURL from Facebook data -> Option C

4. Quick Check:

   Enable Facebook provider + signInWithPopup + update profile photoURL [OK]

Hint: Firebase requires manual update of photoURL after Facebook sign-in [OK]

Common Mistakes:

• Believing manual photoURL update is not required
• Using signInWithEmailAndPassword for Facebook login
• Manually creating Facebook accounts instead of linking