Facebook sign-in in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize the Facebook auth provider.

Firebase

const provider = new firebase.auth.[1]();

Drag options to blanks, or click blank then click option'

AFacebookAuthProvider

BGoogleAuthProvider

CTwitterAuthProvider

DGithubAuthProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Using GoogleAuthProvider instead of FacebookAuthProvider

Misspelling the provider name

Forgetting to create a new instance with parentheses

The Facebook sign-in requires using FacebookAuthProvider from Firebase Auth.

2fill in blank

medium

Complete the code to trigger the Facebook sign-in popup.

Firebase

firebase.auth().signInWith[1](provider).then(result => {
  // handle result
});

Drag options to blanks, or click blank then click option'

ARedirect

BPopup

CCredential

DToken

Attempts:

3 left

💡 Hint

Common Mistakes

Using signInWithRedirect instead of signInWithPopup

Misspelling the method name

Not passing the provider as argument

To open a popup for sign-in, use signInWithPopup method.

3fill in blank

hard

Fix the error in the code to get the Facebook access token from the result.

Firebase

const credential = result.credential;
const token = credential.[1];

Drag options to blanks, or click blank then click option'

AauthToken

BtokenId

CfacebookToken

DaccessToken

Attempts:

3 left

💡 Hint

Common Mistakes

Using tokenId or authToken which do not exist

Trying to access token directly on result

Misspelling accessToken

The Facebook access token is available as accessToken on the credential object.

4fill in blank

hard

Fill both blanks to handle sign-in errors and get the error message.

Firebase

firebase.auth().signInWithPopup(provider).catch(error => {
  const errorCode = error.[1];
  const errorMessage = error.[2];
  console.error(errorCode, errorMessage);
});

Drag options to blanks, or click blank then click option'

Acode

Bmessage

Cmsg

DerrorMsg

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like msg or errorMsg

Trying to access error details outside the catch block

Not logging both code and message

Firebase errors have code and message properties for details.

5fill in blank

hard

Fill all three blanks to extract user info after Facebook sign-in.

Firebase

firebase.auth().signInWithPopup(provider).then(result => {
  const user = result.[1];
  const name = user.[2];
  const email = user.[3];
  console.log(`User: ${name}, Email: ${email}`);
});

Drag options to blanks, or click blank then click option'

Auser

BdisplayName

Cemail

Dprofile

Attempts:

3 left

💡 Hint

Common Mistakes

Using result.profile instead of result.user

Accessing name instead of displayName

Forgetting to get email from user object

The signed-in user info is in result.user. The user's name is displayName and email is email.

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