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.