Password reset flow in Firebase - Step-by-Step Execution

Process Flow - Password reset flow

User requests password reset

↓

System sends reset email with link

↓

User clicks link and opens reset page

↓

User enters new password

↓

System verifies and updates password

↓

User receives confirmation

↓

END

The flow starts when the user requests a password reset, then the system sends an email with a reset link. The user clicks the link, enters a new password, and the system updates it, confirming success.

Execution Sample

Firebase

firebase.auth().sendPasswordResetEmail(email)
  .then(() => {
    console.log('Reset email sent');
  })
  .catch(error => {
    console.error(error);
  });

This code sends a password reset email to the user and logs success or error.

Process Table

Step	Action	Input/Condition	Result	Next Step
1	User requests password reset	User enters email	System receives request	Send reset email
2	System sends reset email	Email valid?	Email sent successfully	Wait for user to click link
3	User clicks reset link	Link valid and not expired?	Reset page opens	User enters new password
4	User submits new password	Password meets criteria?	Password updated in system	Send confirmation
5	System sends confirmation	Update successful	User notified of success	END

💡 Process ends after user receives confirmation of password reset.

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
email	undefined	[e-mail]	[e-mail]	[e-mail]	[e-mail]	[e-mail]
resetLinkSent	false	false	true	true	true	true
linkValid	false	false	true	true	true	true
newPassword	undefined	undefined	undefined	undefined	userNewPass123	userNewPass123
passwordUpdated	false	false	false	false	true	true
confirmationSent	false	false	false	false	false	true

Key Moments - 3 Insights

Why does the system check if the reset link is valid before allowing password change?

The system must ensure the link is valid and not expired to prevent unauthorized password changes, as shown in step 3 of the execution_table.

What happens if the user enters a password that doesn't meet criteria?

The system will not update the password and will prompt the user to enter a valid password, preventing progression past step 4 in the execution_table.

Why is confirmation sent after password update?

Sending confirmation assures the user that the password reset was successful, as indicated in step 5 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the system verify the reset link validity?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Check the 'Input/Condition' column for link validity in the execution_table.

According to variable_tracker, what is the value of 'passwordUpdated' after step 4?

A undefined

B true

C false

D null

💡 Hint

Look at the 'passwordUpdated' row under 'After Step 4' in variable_tracker.

If the user never clicks the reset link, which variable remains false according to variable_tracker?

A resetLinkSent

B confirmationSent

C linkValid

D newPassword

💡 Hint

Consider the 'linkValid' variable and when it changes in variable_tracker.

Concept Snapshot

Password Reset Flow:
1. User requests reset by email.
2. System sends reset link email.
3. User clicks link; system verifies it.
4. User enters new password; system updates it.
5. System confirms success to user.
Always verify link validity and password criteria.

Full Transcript

The password reset flow begins when a user requests a reset by providing their email. The system sends a reset email containing a link. When the user clicks this link, the system checks if the link is valid and not expired. If valid, the user is prompted to enter a new password. The system verifies the password meets criteria and updates it. Finally, the system sends a confirmation to the user indicating the reset was successful. Variables such as 'resetLinkSent', 'linkValid', and 'passwordUpdated' track the process state. Key moments include link validation to prevent unauthorized resets and confirmation to assure the user. This flow ensures security and user clarity.

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