First Firebase integration - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Firebase Initialization Behavior

What happens if you try to initialize Firebase twice in the same web app without checking if it is already initialized?

A Firebase throws an error indicating it is already initialized.

B Firebase silently re-initializes without any error.

C Firebase merges the new config with the old one and continues.

D Firebase resets all previous data and starts fresh.

💡 Hint

Think about how Firebase protects against multiple initializations in a single app instance.

Firebase SDK throws an error if you try to initialize it more than once without checking, to prevent conflicts.

❓ Configuration

intermediate

Correct Firebase Config Object

Which of the following is a valid Firebase configuration object for initializing Firebase in a web app?

A { api_key: "abc123", auth_domain: "myapp.firebaseapp.com", project_id: "myapp" }

B { key: "abc123", domain: "myapp.firebaseapp.com", id: "myapp" }

C { apiKey: "abc123", authDomain: "myapp.firebaseapp.com", projectId: "myapp" }

D { apiKey: "abc123", authDomain: "myapp.firebaseapp.com" }

💡 Hint

Look for the exact property names Firebase expects in its config.

Firebase requires specific keys like apiKey, authDomain, and projectId to initialize properly.

❓ Architecture

advanced

Firebase Hosting and Cloud Functions Integration

You want to serve a static website and also run backend code on Firebase. Which architecture correctly uses Firebase Hosting and Cloud Functions together?

A Host static files on Cloud Functions and use Firebase Hosting only for API calls.

B Host static files on Firebase Hosting and use Cloud Functions as API endpoints triggered by HTTPS requests.

C Use Firebase Hosting to run backend code and Cloud Functions only for database triggers.

D Deploy backend code inside Firebase Hosting and static files inside Cloud Functions.

💡 Hint

Think about which Firebase service is optimized for static content and which for backend logic.

Firebase Hosting is optimized for static content delivery, while Cloud Functions handle backend logic via HTTPS triggers.

❓ security

advanced

Firebase Security Rules for Firestore

Which Firestore security rule allows only authenticated users to read and write their own user document under 'users/{userId}'?

Firebase

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read, write: if ________ ;
    }
  }
}

A request.auth.uid != null

B request.auth == null || request.auth.uid == userId

C request.auth != null && request.auth.token.email_verified == true

D request.auth != null && request.auth.uid == userId

💡 Hint

Users should only access their own documents and must be signed in.

The rule checks that the user is signed in and the document ID matches their user ID.

❓ service_behavior

expert

Firebase Realtime Database Offline Behavior

What happens when a Firebase Realtime Database client loses internet connection but continues to write data locally?

A Writes are queued locally and synchronized automatically when connection is restored.

B Writes are lost and not saved locally during offline periods.

C Writes fail immediately and throw an error until connection is back.

D Writes are saved locally but require manual sync calls to update the server.

💡 Hint

Consider Firebase's offline capabilities and automatic synchronization.

Firebase Realtime Database caches writes locally and syncs them automatically once online.

Practice

1. What is the first step to use Firebase services in your app?

easy

A. Initialize Firebase with your project configuration

B. Write data to the database

C. Create a user account

D. Deploy your app to the web

Solution

1. Step 1: Understand Firebase setup process

   Firebase services require initialization with your project details before use. Initializing Firebase with your config is the essential first step to enable services.

2. Final Answer:

   Initialize Firebase with your project configuration -> Option A

3. Quick Check:

   Firebase setup starts with initialization [OK]

Hint: Always start by initializing Firebase with your config [OK]

Common Mistakes:

• Trying to use services before initialization
• Skipping config setup
• Assuming Firebase works without project details

2. Which of the following is the correct way to initialize Firebase in JavaScript?

easy

A. firebase.configApp(config);

B. firebase.startApp(config);

C. firebase.initializeApp(config);

D. firebase.launchApp(config);

Solution

1. Step 1: Recall Firebase initialization syntax

   The official method to start Firebase is initializeApp with the config object. Only initializeApp is the correct Firebase method; others are invalid.

2. Final Answer:

   firebase.initializeApp(config); -> Option C

3. Quick Check:

   Use initializeApp to start Firebase [OK]

Hint: Remember: initializeApp starts Firebase, not startApp or others [OK]

Common Mistakes:

• Using incorrect method names
• Forgetting parentheses after method
• Passing wrong argument types

3. Given this code snippet:

const config = { apiKey: "abc123", authDomain: "myapp.firebaseapp.com" };
firebase.initializeApp(config);
console.log(firebase.apps.length);

What will be printed to the console?

medium

A. 0

B. Error

C. undefined

D. 1

Solution

1. Step 1: Understand firebase.apps array

   After initialization, firebase.apps contains all initialized app instances. Since initializeApp was called once, firebase.apps.length is 1.

2. Final Answer:

   1 -> Option D

3. Quick Check:

   One initialized app means length is 1 [OK]

Hint: firebase.apps.length shows how many apps are initialized [OK]

Common Mistakes:

• Assuming length is 0 before usage
• Expecting undefined instead of number
• Confusing apps array with config object

4. You wrote this code but get an error:

firebase.initializeApp();

What is the likely cause?

medium

A. Missing configuration object in initializeApp call

B. firebase library not imported

C. Calling initializeApp twice

D. Using wrong method name

Solution

1. Step 1: Check initializeApp requirements

   initializeApp requires a config object with project details. Calling initializeApp without config causes an error due to missing parameters.

2. Final Answer:

   Missing configuration object in initializeApp call -> Option A

3. Quick Check:

   initializeApp needs config object [OK]

Hint: Always pass config object to initializeApp [OK]

Common Mistakes:

• Forgetting to pass config
• Assuming default config is used
• Ignoring error messages about missing params

5. You want to integrate Firebase Authentication and Firestore in your app. Which is the correct sequence after importing Firebase?

hard

A. Initialize Firebase with config, then deploy app before using services

B. Initialize Firebase with config, then get Auth and Firestore instances

C. Get Auth and Firestore instances, then initialize Firebase

D. Deploy app first, then initialize Firebase and get services

Solution

1. Step 1: Initialization before service usage

   Firebase must be initialized with config before accessing any services like Auth or Firestore. After initialization, you can get instances of Auth and Firestore to use them in your app.

2. Final Answer:

   Initialize Firebase with config, then get Auth and Firestore instances -> Option B

3. Quick Check:

   Initialize first, then get services [OK]

Hint: Always initialize Firebase before accessing services [OK]

Common Mistakes:

• Trying to get services before initialization
• Deploying app before setup
• Confusing order of operations