Password reset flow in Firebase - Mini Project: Build & Apply

Password reset flow

📖 Scenario: You are building a simple web app that allows users to reset their password if they forget it. You will use Firebase Authentication to handle the password reset process securely.

🎯 Goal: Create a password reset flow using Firebase Authentication. The user will enter their email, and the app will send a password reset email to that address.

📋 What You'll Learn

Create a Firebase app configuration object with the given API key and project ID

Initialize Firebase Authentication service

Create a function to send a password reset email using Firebase Auth

Add a call to the password reset function with a specific email address

💡 Why This Matters

🌍 Real World

Password reset flows are essential for user account security in web and mobile apps. Firebase Authentication provides a simple way to implement this securely.

💼 Career

Understanding how to implement password reset flows with Firebase is a common task for frontend and backend developers working with cloud services.

1

Create Firebase app configuration

Create a constant called firebaseConfig with these exact properties and values: apiKey: "AIzaSyA-ExampleKey12345", authDomain: "example-app.firebaseapp.com", projectId: "example-app".

Firebase

# Create the firebaseConfig object with apiKey, authDomain, and projectId
# Your code here

Hint

Use a JavaScript object with the exact keys and values.

2

Initialize Firebase Authentication

Add these two lines below the firebaseConfig object: import initializeApp from "firebase/app" and import getAuth from "firebase/auth". Then create a constant called app by calling initializeApp(firebaseConfig). Finally, create a constant called auth by calling getAuth(app).

Firebase

const firebaseConfig = {
  apiKey: "AIzaSyA-ExampleKey12345",
  authDomain: "example-app.firebaseapp.com",
  projectId: "example-app"
};

// Import initializeApp and getAuth, then initialize app and auth
# Your code here

Hint

Use ES module import syntax and call the functions with the correct arguments.

3

Create password reset function

Create an async function called sendPasswordReset that takes one parameter email. Inside the function, import sendPasswordResetEmail from "firebase/auth" and call it with auth and email. Use await to wait for the call to complete.

Firebase

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "AIzaSyA-ExampleKey12345",
  authDomain: "example-app.firebaseapp.com",
  projectId: "example-app"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// Create async function sendPasswordReset(email) using sendPasswordResetEmail
# Your code here

Hint

Remember to mark the function as async and use await when calling sendPasswordResetEmail.

4

Call password reset function

Add a call to sendPasswordReset with the exact email string "[e-mail]".

Firebase

import { initializeApp } from "firebase/app";
import { getAuth, sendPasswordResetEmail } from "firebase/auth";

const firebaseConfig = {
  apiKey: "AIzaSyA-ExampleKey12345",
  authDomain: "example-app.firebaseapp.com",
  projectId: "example-app"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

async function sendPasswordReset(email) {
  await sendPasswordResetEmail(auth, email);
}

// Call sendPasswordReset with "[e-mail]"
# Your code here

Hint

Call the function with the exact email string.

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