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

Need a 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

Need a 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

Need a 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

Need a hint?

Call the function with the exact email string.