Phone number authentication in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase phone authentication.

Firebase

const auth = firebase.auth();
auth.[1]('[phone]')

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

AsignOut

BcreateUserWithEmailAndPassword

CsignInWithPhoneNumber

DsignInWithEmailAndPassword

Attempts:

3 left

💡 Hint

Common Mistakes

Using email authentication methods instead of phone number methods.

Trying to sign out instead of signing in.

The signInWithPhoneNumber method starts phone number authentication.

2fill in blank

medium

Complete the code to confirm the verification code received by the user.

Firebase

confirmationResult.[1](code).then((result) => {
  const user = result.user;
});

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

Aconfirm

BverifyCode

CsignIn

DsendVerificationCode

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like sendVerificationCode or verifyCode.

Trying to sign in directly without confirming the code.

The confirm method verifies the code sent to the user's phone.

3fill in blank

hard

Fix the error in the code to set up reCAPTCHA verifier for phone authentication.

Firebase

window.recaptchaVerifier = new firebase.auth.[1]('recaptcha-container');

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

ARecaptchaVerifierWidget

BRecaptchaVerifier

CRecaptchaVerifierInstance

DRecaptchaVerifierAuth

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class names that do not exist in Firebase.

Misspelling the class name.

The correct class to create a reCAPTCHA verifier is RecaptchaVerifier.

4fill in blank

hard

Fill both blanks to create a phone auth provider and send a verification code.

Firebase

const phoneProvider = new firebase.auth.[1]();
firebase.auth().[2]('[phone]');

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

APhoneAuthProvider

BsignInWithPhoneNumber

CverifyPhoneNumber

DsendVerificationCode

Attempts:

3 left

💡 Hint

Common Mistakes

Using method names that do not exist on PhoneAuthProvider.

Confusing provider class with authentication methods.

You create a PhoneAuthProvider instance, then call signInWithPhoneNumber to send the code.

5fill in blank

hard

Fill all three blanks to handle phone number sign-in with reCAPTCHA verifier.

Firebase

window.recaptchaVerifier = new firebase.auth.[1]('recaptcha-container');
const phoneNumber = '[phone]';
const appVerifier = window.[2];
firebase.auth().[3](phoneNumber, appVerifier)
  .then((confirmationResult) => {
    window.confirmationResult = confirmationResult;
  });

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

ARecaptchaVerifier

BrecaptchaVerifier

CsignInWithPhoneNumber

DverifyPhoneNumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong class or variable names for reCAPTCHA verifier.

Calling incorrect methods for phone sign-in.

First, create a RecaptchaVerifier instance. Then get it from window.recaptchaVerifier. Finally, call signInWithPhoneNumber with the phone number and verifier.