Email/password signup in Firebase - Mini Project: Build & Apply

Email/password signup

📖 Scenario: You are building a simple web app that allows users to create an account using their email and password. This is a common feature in many websites and apps where users need to sign up to access personalized content.

🎯 Goal: Create a Firebase email/password signup flow that registers a new user with their email and password.

📋 What You'll Learn

Initialize Firebase app with configuration

Create variables for user email and password

Use Firebase Authentication to create a new user with email and password

Handle success and error cases properly

💡 Why This Matters

🌍 Real World

Email/password signup is a fundamental feature for many web and mobile apps to allow users to create accounts securely.

💼 Career

Understanding Firebase Authentication signup flows is essential for cloud developers building user management features in modern applications.

1

Initialize Firebase app

Write the code to initialize Firebase using the given configuration object called firebaseConfig. Create a variable called app that calls initializeApp(firebaseConfig) from the Firebase SDK.

Firebase

// Your code here to initialize Firebase app

Need a hint?

Use initializeApp(firebaseConfig) from the Firebase SDK to start your app.

2

Create email and password variables

Create two variables called email and password and assign them the exact string values "[e-mail]" and "securePass123" respectively.

Firebase

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);

// Create variables email and password with exact values
// Your code here

Need a hint?

Use const email = "[e-mail]"; and const password = "securePass123";.

3

Use Firebase Authentication to create user

Import getAuth and createUserWithEmailAndPassword from firebase/auth. Create a variable called auth by calling getAuth(app). Then write code to call createUserWithEmailAndPassword(auth, email, password).

Firebase

import { initializeApp } from 'firebase/app';
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);

const email = "[e-mail]";
const password = "securePass123";

// Create auth variable and call createUserWithEmailAndPassword
// Your code here

Need a hint?

Use const auth = getAuth(app); and then call createUserWithEmailAndPassword(auth, email, password);.

4

Handle signup success and errors

Add .then() and .catch() to the createUserWithEmailAndPassword call. In .then(), receive userCredential and create a variable user from userCredential.user. In .catch(), receive error and create variables errorCode and errorMessage from error.code and error.message respectively.

Firebase

import { initializeApp } from 'firebase/app';
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);

const email = "[e-mail]";
const password = "securePass123";

const auth = getAuth(app);

// Add then and catch to handle success and errors
// Your code here

Need a hint?

Use .then((userCredential) => { const user = userCredential.user; }) and .catch((error) => { const errorCode = error.code; const errorMessage = error.message; }).