Authentication providers overview in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase Authentication.

Firebase

const auth = [1](app);

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

AgetAuth

BsignIn

CinitializeApp

DcreateUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using initializeApp instead of getAuth

Trying to call signIn or createUser directly here

The getAuth() method initializes the Firebase Authentication service.

2fill in blank

medium

Complete the code to enable Google sign-in provider.

Firebase

const provider = new [1]();

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

AGoogleAuthProvider

BFacebookAuthProvider

CTwitterAuthProvider

DEmailAuthProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing FacebookAuthProvider or TwitterAuthProvider by mistake

Using EmailAuthProvider which is for email/password sign-in

The GoogleAuthProvider class is used to enable Google sign-in.

3fill in blank

hard

Fix the error in the code to sign in with a popup using Google provider.

Firebase

auth.[1](provider).then(result => {
  console.log(result.user);
});

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

AsignInWithRedirect

BsignInWithPopup

CsignOut

DcreateUserWithEmailAndPassword

Attempts:

3 left

💡 Hint

Common Mistakes

Using signInWithRedirect instead of signInWithPopup

Using signOut or createUserWithEmailAndPassword incorrectly

signInWithPopup is the correct method to sign in using a popup window.

4fill in blank

hard

Fill both blanks to configure Facebook authentication and sign in with redirect.

Firebase

const fbProvider = new [1]();
auth.[2](fbProvider);

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

AFacebookAuthProvider

BsignInWithPopup

CsignInWithRedirect

DGoogleAuthProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Using GoogleAuthProvider instead of FacebookAuthProvider

Using signInWithPopup instead of signInWithRedirect

FacebookAuthProvider creates the Facebook provider instance, and signInWithRedirect starts sign-in with redirect.

5fill in blank

hard

Fill all three blanks to create an email/password user and handle errors.

Firebase

auth.[1](email, password)
  .then(userCredential => {
    console.log(userCredential.user);
  })
  .catch(error => {
    console.error(error.[2]);
  });

const email = '[3]';

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

AcreateUserWithEmailAndPassword

Bmessage

[e-mail]

DsignInWithEmailAndPassword

Attempts:

3 left

💡 Hint

Common Mistakes

Using signInWithEmailAndPassword instead of createUserWithEmailAndPassword

Accessing error.code instead of error.message

Leaving email blank or invalid

createUserWithEmailAndPassword creates a new user. The error object has a message property. The email is a sample string.

Practice

1. Which of the following is NOT a Firebase Authentication provider?

easy

A. Google

B. Twitter

C. LinkedIn

D. Facebook

Solution

1. Step 1: Recall Firebase supported providers

   Firebase supports Google, Facebook, Twitter, Email/Password, Phone, and Anonymous sign-in.

2. Step 2: Identify unsupported provider

   LinkedIn is not officially supported as a Firebase Authentication provider.

3. Final Answer:

   LinkedIn -> Option C

4. Quick Check:

   Firebase providers exclude LinkedIn [OK]

Hint: Remember common providers: Google, Facebook, Twitter, no LinkedIn [OK]

Common Mistakes:

• Confusing LinkedIn as supported
• Thinking all social logins are included
• Mixing OAuth providers with Firebase support

2. Which Firebase Authentication method is used to start a Google sign-in flow in JavaScript?

easy

A. firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider())

B. firebase.auth().signInWithGoogle()

C. firebase.auth().signInWithRedirect('google')

D. firebase.auth().signInWithEmailAndPassword('google')

Solution

1. Step 1: Identify correct method for Google sign-in

   Firebase uses signInWithPopup() or signInWithRedirect() with a provider instance.

2. Step 2: Match method and provider

   signInWithPopup(new firebase.auth.GoogleAuthProvider()) is the correct syntax to start Google sign-in.

3. Final Answer:

   firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider()) -> Option A

4. Quick Check:

   Use signInWithPopup with GoogleAuthProvider [OK]

Hint: Use signInWithPopup with new GoogleAuthProvider() [OK]

Common Mistakes:

• Using non-existent signInWithGoogle()
• Passing string instead of provider object
• Confusing email sign-in method

3. What will the following Firebase Authentication code do?

const provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => {
  console.log(result.user.email);
});

medium

A. Sign in anonymously and log user ID

B. Start Google sign-in and log user's email on success

C. Throw an error because FacebookAuthProvider is invalid

D. Start Facebook sign-in and log user's email on success

Solution

1. Step 1: Analyze provider and method

   The code creates a FacebookAuthProvider and calls signInWithPopup(provider), which starts Facebook sign-in.

2. Step 2: Understand the then() callback

   On success, it logs the signed-in user's email from result.user.email.

3. Final Answer:

   Start Facebook sign-in and log user's email on success -> Option D

4. Quick Check:

   FacebookAuthProvider + signInWithPopup logs email [OK]

Hint: Provider class matches sign-in method and logs user email [OK]

Common Mistakes:

• Confusing Facebook with Google provider
• Expecting anonymous sign-in
• Thinking provider is invalid

4. Identify the error in this Firebase Authentication code snippet for phone sign-in:

const provider = new firebase.auth.PhoneAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => {
  console.log(result.user.phoneNumber);
});

medium

A. Missing email parameter for phone sign-in

B. PhoneAuthProvider cannot be used with signInWithPopup()

C. PhoneAuthProvider requires OAuth scopes

D. signInWithPopup() only works with anonymous sign-in

Solution

1. Step 1: Check usage of PhoneAuthProvider

   PhoneAuthProvider is used differently; it does not support signInWithPopup().

2. Step 2: Identify correct phone sign-in method

   Phone sign-in uses verification codes and confirmation, not popup OAuth flows.

3. Final Answer:

   PhoneAuthProvider cannot be used with signInWithPopup() -> Option B

4. Quick Check:

   Phone sign-in uses verification, not popup [OK]

Hint: Phone sign-in uses verification, not popup method [OK]

Common Mistakes:

• Trying to use popup with phone provider
• Expecting email for phone sign-in
• Confusing OAuth scopes with phone auth

5. You want to allow users to sign in anonymously but later link their account to Google sign-in. Which Firebase Authentication approach is correct?

hard

A. Use signInAnonymously() first, then linkWithPopup(new GoogleAuthProvider())

B. Use signInWithPopup(new GoogleAuthProvider()) only, no anonymous sign-in

C. Use signInAnonymously() only, no linking possible

D. Use signInWithEmailAndPassword() then linkWithPopup(new GoogleAuthProvider())

Solution

1. Step 1: Understand anonymous sign-in and linking

   Firebase allows anonymous sign-in, then linking that anonymous user to another provider.

2. Step 2: Identify correct linking method

   After signInAnonymously(), use linkWithPopup() with GoogleAuthProvider to link accounts.

3. Final Answer:

   Use signInAnonymously() first, then linkWithPopup(new GoogleAuthProvider()) -> Option A

4. Quick Check:

   Anonymous sign-in + linkWithPopup for Google [OK]

Hint: Sign in anonymously, then link Google with linkWithPopup() [OK]

Common Mistakes:

• Skipping linking step
• Using only Google sign-in without anonymous
• Trying to link email/password instead