Facebook sign-in in Firebase - Step-by-Step Execution

Process Flow - Facebook sign-in

User clicks Facebook Sign-In button

↓

App calls Firebase Facebook Auth

↓

Firebase opens Facebook login popup

↓

User enters Facebook credentials

↓

Facebook verifies credentials

↓

Facebook returns access token to Firebase

↓

Firebase verifies token and signs in user

↓

App receives user info and updates UI

The user clicks the Facebook sign-in button, triggering Firebase to open a Facebook login popup. After the user logs in, Facebook sends a token to Firebase, which verifies it and signs in the user.

Execution Sample

Firebase

const provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider)
  .then((result) => {
    const user = result.user;
    console.log('User signed in:', user.displayName);
  })
  .catch((error) => console.error(error));

This code triggers a Facebook login popup via Firebase and logs the signed-in user's name on success.

Process Table

Step	Action	Firebase State	Facebook State	Result
1	User clicks Facebook sign-in button	Idle	Idle	Popup triggered
2	Firebase opens Facebook login popup	Waiting for Facebook login	Waiting for user input	Popup visible
3	User enters Facebook credentials	Waiting for Facebook response	Verifying credentials	Credentials submitted
4	Facebook verifies credentials	Waiting for token	Verified credentials	Access token generated
5	Facebook returns access token to Firebase	Verifying token	Token sent	Token received
6	Firebase verifies token and signs in user	Signed in	Idle	User authenticated
7	App receives user info and updates UI	Signed in	Idle	User info displayed
8	Process complete	Signed in	Idle	Ready for next action

💡 User successfully signed in after Firebase verified Facebook token

Status Tracker

Variable	Start	After Step 3	After Step 5	Final
provider	undefined	FacebookAuthProvider instance	FacebookAuthProvider instance	FacebookAuthProvider instance
result	undefined	undefined	Auth result with token	Auth result with user info
user	undefined	undefined	undefined	User object with displayName

Key Moments - 3 Insights

Why does the app open a popup instead of redirecting immediately?

The popup allows the app to keep control and handle the login without leaving the page, as shown in execution_table step 2.

What happens if the user enters wrong Facebook credentials?

Firebase will catch an error in the catch block (not shown in table), preventing sign-in and showing an error message.

Why do we need to verify the Facebook token in Firebase?

Firebase verifies the token to ensure it is valid and issued by Facebook, securing the sign-in process as in execution_table step 6.

Visual Quiz - 3 Questions

Look at the execution table, at which step does Firebase receive the Facebook access token?

A Step 5

B Step 3

C Step 6

D Step 7

💡 Hint

Check the 'Result' column for when the token is received by Firebase.

According to the variable tracker, when is the 'user' variable first assigned a value?

A After Step 3

B After Step 5

C Final

D Start

💡 Hint

Look at the 'user' row and see when it changes from undefined.

If the user cancels the Facebook login popup, what would happen in the execution flow?

A Firebase signs in the user anyway

B Firebase catches an error and sign-in fails

C The popup stays open indefinitely

D User info is displayed without login

💡 Hint

Consider what happens when credentials are not provided or login is aborted.

Concept Snapshot

Facebook sign-in with Firebase:
- Create FacebookAuthProvider instance
- Call signInWithPopup(provider)
- User logs in via popup
- Facebook returns access token
- Firebase verifies token and signs in user
- App receives user info and updates UI
- Errors handled in catch block

Full Transcript

This visual execution traces the Facebook sign-in process using Firebase. The user clicks the sign-in button, triggering Firebase to open a Facebook login popup. The user enters credentials, which Facebook verifies and returns as an access token. Firebase then verifies this token and signs in the user. The app receives the user information and updates the interface accordingly. Variables like 'provider', 'result', and 'user' change state through the process. Key moments include understanding why a popup is used, error handling for wrong credentials, and token verification for security. The quizzes test understanding of token receipt, variable assignment, and error scenarios.

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