Password reset flow in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to send a password reset email using Firebase Authentication.

Firebase

firebase.auth().[1]('[e-mail]')

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

AsignOut

BsignInWithEmailAndPassword

CcreateUserWithEmailAndPassword

DsendPasswordResetEmail

Attempts:

3 left

💡 Hint

Common Mistakes

Using signInWithEmailAndPassword instead of sendPasswordResetEmail

Trying to create a user instead of resetting password

The sendPasswordResetEmail method sends a password reset email to the user.

2fill in blank

medium

Complete the code to handle the promise returned by sending a password reset email.

Firebase

firebase.auth().sendPasswordResetEmail('[e-mail]').[1](() => { console.log('Email sent'); })

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

Afinally

Bthen

Ccatch

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using catch instead of then for success handling

Using subscribe which is not a promise method

The then method handles the successful completion of the promise.

3fill in blank

hard

Fix the error in the code to properly catch errors when sending a password reset email.

Firebase

firebase.auth().sendPasswordResetEmail('[e-mail]').then(() => { console.log('Email sent'); }).[1]((error) => { console.error(error.message); })

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

Acatch

Bthen

Cfinally

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using then instead of catch for error handling

Using finally which runs regardless of success or failure

The catch method is used to handle errors in promises.

4fill in blank

hard

Fill both blanks to create a function that sends a password reset email and logs success or error.

Firebase

function resetPassword(email) {
  firebase.auth().[1](email).then(() => {
    console.log('Reset email sent');
  }).[2]((error) => {
    console.error('Error:', error.message);
  });
}

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

AsendPasswordResetEmail

BsignInWithEmailAndPassword

Ccatch

Dthen

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping then and catch methods

Using signInWithEmailAndPassword instead of sendPasswordResetEmail

The function uses sendPasswordResetEmail to send the email and catch to handle errors.

5fill in blank

hard

Fill all three blanks to create an async function that sends a password reset email and handles errors with try-catch.

Firebase

async function resetPasswordAsync(email) {
  try {
    await firebase.auth().[1](email);
    console.log([2]);
  } catch (error) {
    console.error([3]);
  }
}

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

AsendPasswordResetEmail

B'Password reset email sent'

Cerror.message

DsignOut

Attempts:

3 left

💡 Hint

Common Mistakes

Using signOut instead of sendPasswordResetEmail

Logging error object directly instead of error.message

Not using await with the async function

The async function uses sendPasswordResetEmail with await, logs a success message, and catches errors to log the error message.

Practice

1. What does the Firebase function sendPasswordResetEmail do?

easy

A. Sends an email to the user to reset their password

B. Changes the user's password immediately

C. Deletes the user's account

D. Creates a new user account

Solution

1. Step 1: Understand the function purpose

   The function sendPasswordResetEmail is designed to send an email to the user with a link to reset their password.

2. Step 2: Differentiate from other actions

   This function does not change the password directly or affect the account status; it only initiates the reset process by sending an email.

3. Final Answer:

   Sends an email to the user to reset their password -> Option A

4. Quick Check:

   sendPasswordResetEmail = Sends reset email [OK]

Hint: Remember: sendPasswordResetEmail only sends the reset link [OK]

Common Mistakes:

• Thinking it changes the password immediately
• Confusing it with account deletion
• Assuming it creates a new user

2. Which of the following is the correct syntax to send a password reset email in Firebase using JavaScript?

easy

A. firebase.auth().sendPasswordResetEmail(email)

B. firebase.auth.sendPasswordResetEmail(email)

C. firebase.auth().sendPasswordReset(email)

D. firebase.auth().resetPasswordEmail(email)

Solution

1. Step 1: Recall the correct Firebase method

   The correct method to send a password reset email is sendPasswordResetEmail called on the auth object.

2. Step 2: Check method call syntax

   The auth object is accessed by firebase.auth(), so the full call is firebase.auth().sendPasswordResetEmail(email).

3. Final Answer:

   firebase.auth().sendPasswordResetEmail(email) -> Option A

4. Quick Check:

   Correct method call syntax = firebase.auth().sendPasswordResetEmail(email) [OK]

Hint: Remember auth() must be called as a function before methods [OK]

Common Mistakes:

• Omitting parentheses after auth
• Using wrong method names like sendPasswordReset
• Swapping method words order

3. Consider this code snippet:

firebase.auth().sendPasswordResetEmail('[e-mail]')
  .then(() => console.log('Email sent'))
  .catch(error => console.log(error.message));

What will be printed if the email is successfully sent?

medium

A. Error message

B. Nothing

C. undefined

D. Email sent

Solution

1. Step 1: Analyze the promise resolution

   The sendPasswordResetEmail returns a promise that resolves when the email is sent successfully.

2. Step 2: Check the then and catch handlers

   On success, the then callback logs 'Email sent'. On failure, the catch logs the error message.

3. Final Answer:

   Email sent -> Option D

4. Quick Check:

   Success logs 'Email sent' [OK]

Hint: Success triggers then(), failure triggers catch() [OK]

Common Mistakes:

• Confusing catch output with success
• Expecting no output on success
• Misreading promise behavior

4. You wrote this code but the password reset email never arrives:

firebase.auth.sendPasswordResetEmail('[e-mail]')

What is the likely error?

medium

A. Email address is invalid

B. Missing parentheses after auth()

C. sendPasswordResetEmail is not a Firebase method

D. No internet connection

Solution

1. Step 1: Check method call syntax

   The code calls firebase.auth.sendPasswordResetEmail without parentheses after auth, which is incorrect.

2. Step 2: Understand correct usage

   The correct call is firebase.auth().sendPasswordResetEmail(email) because auth is a function that returns the auth object.

3. Final Answer:

   Missing parentheses after auth() -> Option B

4. Quick Check:

   auth() must be called as a function [OK]

Hint: Always call auth() with parentheses before methods [OK]

Common Mistakes:

• Omitting parentheses after auth
• Assuming method names are wrong
• Ignoring syntax errors

5. You want to implement a password reset flow that shows a success message only if the email was sent, and an error message otherwise. Which code snippet correctly achieves this?

hard

A. firebase.auth().sendPasswordResetEmail(email)
.then(() => alert('Failed to send email'))
.catch(() => alert('Reset email sent'))

B. firebase.auth().sendPasswordResetEmail(email)
.catch(() => alert('Reset email sent'))
.then(() => alert('Failed to send email'))

C. firebase.auth().sendPasswordResetEmail(email)
.then(() => alert('Reset email sent'))
.catch(() => alert('Failed to send email'))

D. firebase.auth().sendPasswordResetEmail(email)
.finally(() => alert('Reset email sent'))

Solution

1. Step 1: Understand promise handlers order

   The then handler runs on success, and catch runs on failure.

2. Step 2: Match messages to handlers

   Success should show 'Reset email sent', failure should show 'Failed to send email'. Only firebase.auth().sendPasswordResetEmail(email) .then(() => alert('Reset email sent')) .catch(() => alert('Failed to send email')) matches this logic correctly.

3. Final Answer:

   firebase.auth().sendPasswordResetEmail(email) .then(() => alert('Reset email sent')) .catch(() => alert('Failed to send email')) -> Option C

4. Quick Check:

   then() = success, catch() = error [OK]

Hint: Use then() for success, catch() for errors [OK]

Common Mistakes:

• Swapping then and catch handlers
• Using finally for success message
• Showing error message on success