Firebase with React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

What happens when you call firebase.auth().signOut() in a React app?

In a React app using Firebase Authentication, what is the immediate effect of calling firebase.auth().signOut()?

A The user session remains active until the page is refreshed manually.

B The user is signed out and the authentication state changes to null immediately.

C The user is signed out only after the Firebase server confirms the request asynchronously.

D The user token is invalidated but the user remains signed in until the next API call.

💡 Hint

Think about how Firebase updates the authentication state in real-time.

Calling signOut() immediately updates the client authentication state to null, triggering React components listening to auth changes to update accordingly.

❓ Configuration

intermediate

Which Firebase config snippet correctly initializes Firebase in a React app?

Given the Firebase config object, which snippet correctly initializes Firebase in a React app?

Firebase

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID"
};

A

import firebase from 'firebase';
firebase.initializeApp(firebaseConfig);

B

import firebase from 'firebase/app';
const app = firebase.initializeApp(firebaseConfig);

C

import { initializeApp } from 'firebase/app';
const app = firebase.initializeApp(firebaseConfig);

D

import { initializeApp } from 'firebase/app';
const app = initializeApp(firebaseConfig);

💡 Hint

Use the modular Firebase SDK syntax for React apps.

The modern Firebase SDK uses named imports like initializeApp from 'firebase/app'. The older default import firebase is deprecated.

❓ Architecture

advanced

How to architect React components for real-time Firestore data updates?

You want your React app to show live updates from Firestore. Which architecture pattern is best?

A Use Firestore's <code>onSnapshot</code> listener inside a React <code>useEffect</code> hook to update component state.

B Fetch Firestore data once on component mount and refresh manually with a button.

C Use Firestore REST API polling every 5 seconds to update React state.

D Store Firestore data in localStorage and update React state from there.

💡 Hint

Think about how Firestore provides real-time listeners.

Using onSnapshot inside useEffect allows React components to update state immediately when Firestore data changes, enabling real-time UI updates.

❓ security

advanced

Which Firebase security rule prevents users from reading others' Firestore documents?

Given a Firestore collection users where each document ID is a user UID, which security rule restricts read access so users can only read their own document?

A

match /users/{userId} {
  allow read: if request.auth.uid == userId;
}

B

match /users/{userId} {
  allow read: if request.auth != null;
}

C

match /users/{userId} {
  allow read: if true;
}

D

match /users/{userId} {
  allow read: if request.auth.uid != userId;
}

💡 Hint

Check how to compare authenticated user ID with document ID.

Rule D allows read only if the authenticated user's UID matches the document ID, preventing access to others' documents.

✅ Best Practice

expert

What is the best practice for managing Firebase API keys in a React app?

Firebase API keys are visible in the React app bundle. What is the best practice to keep your Firebase project secure?

A Encrypt Firebase API keys in the React app code and decrypt at runtime.

B Hide Firebase API keys by storing them in environment variables and never include them in the client bundle.

C Restrict Firebase API keys in the Firebase console by allowed domains and use security rules to protect data.

D Use a backend server to proxy all Firebase requests and keep API keys secret there.

💡 Hint

Consider how Firebase API keys are designed and what protects your data.

Firebase API keys are not secret. The best practice is to restrict usage by domain in the Firebase console and enforce security rules to protect data access.

Practice

1. What is the main purpose of using Firebase with React in app development?

easy

A. To replace React's state management

B. To style React components with CSS

C. To compile React code faster

D. To add backend features like database and authentication easily

Solution

1. Step 1: Understand Firebase role

   Firebase provides backend services like database and user authentication.

2. Step 2: Understand React role

   React handles the user interface and frontend logic.

3. Final Answer:

   To add backend features like database and authentication easily -> Option D

4. Quick Check:

   Firebase adds backend features [OK]

Hint: Firebase adds backend, React builds UI [OK]

Common Mistakes:

• Thinking Firebase is for styling
• Confusing Firebase with React state
• Assuming Firebase speeds up compilation

2. Which of the following is the correct way to initialize Firebase in a React app?

easy

A. import firebase from 'firebase'; firebase.init(config);

B. const app = new Firebase(config);

C. import { initializeApp } from 'firebase/app'; const app = initializeApp(config);

D. firebase.initialize(config);

Solution

1. Step 1: Check Firebase v9+ syntax

   Firebase modular SDK uses initializeApp from 'firebase/app'.

2. Step 2: Verify correct import and call

   import { initializeApp } from 'firebase/app'; const app = initializeApp(config); correctly imports and calls initializeApp with config.

3. Final Answer:

   import { initializeApp } from 'firebase/app'; const app = initializeApp(config); -> Option C

4. Quick Check:

   Use initializeApp from 'firebase/app' [OK]

Hint: Use modular import initializeApp from 'firebase/app' [OK]

Common Mistakes:

• Using old firebase namespace import
• Calling non-existent init or initialize methods
• Creating Firebase instance with new keyword

3. Given this React code snippet using Firebase Firestore:

import { useEffect, useState } from 'react';
import { getFirestore, collection, getDocs } from 'firebase/firestore';

function UsersList() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    const db = getFirestore();
    getDocs(collection(db, 'users')).then(snapshot => {
      const list = snapshot.docs.map(doc => doc.data().name);
      setUsers(list);
    });
  }, []);
  return <ul>{users.map(name => <li key={name}>{name}</li>)}</ul>;
}

What will this component display?

medium

A. A list of user names from the 'users' collection

B. An empty list because useEffect has no dependencies

C. A list of document IDs instead of names

D. A syntax error due to missing async keyword

Solution

1. Step 1: Analyze data fetching

   useEffect runs once, fetches 'users' collection documents, maps to their 'name' field.

2. Step 2: Analyze rendering

   Users state is set to list of names, rendered as list items in <ul>.

3. Final Answer:

   A list of user names from the 'users' collection -> Option A

4. Quick Check:

   Firestore docs mapped to names displayed [OK]

Hint: useEffect fetches once, maps docs to names [OK]

Common Mistakes:

• Thinking useEffect needs async keyword directly
• Confusing document IDs with data fields
• Assuming empty list due to empty dependency array

4. What is wrong with this React Firebase code snippet?

import { useEffect, useState } from 'react';
import { getFirestore, collection, getDocs } from 'firebase/firestore';

function Items() {
  const [items, setItems] = useState([]);
  useEffect(async () => {
    const db = getFirestore();
    const snapshot = await getDocs(collection(db, 'items'));
    setItems(snapshot.docs.map(doc => doc.data()));
  }, []);
  return <div>{items.length}</div>;
}

medium

A. getDocs requires a second argument for options

B. useEffect callback should not be async function

C. setItems should be called outside useEffect

D. useState initial value must be null

Solution

1. Step 1: Identify async useEffect issue

   React's useEffect callback cannot be async directly; it should call an async function inside.

2. Step 2: Confirm other parts

   getDocs usage and setItems inside useEffect are correct; initial state as empty array is valid.

3. Final Answer:

   useEffect callback should not be async function -> Option B

4. Quick Check:

   Async function inside useEffect, not async callback [OK]

Hint: Never make useEffect callback async directly [OK]

Common Mistakes:

• Making useEffect callback async directly
• Thinking getDocs needs extra arguments
• Believing setState must be outside useEffect

5. You want to build a React app that shows a live list of chat messages from Firebase Firestore. Which approach correctly updates the UI in real-time?

hard

A. Use Firestore's onSnapshot listener inside useEffect to update state on data changes

B. Call getDocs repeatedly every second inside useEffect to fetch new messages

C. Fetch messages once on component mount and never update state again

D. Use Firebase Realtime Database instead of Firestore for real-time updates

Solution

1. Step 1: Understand real-time update methods

   Firestore provides onSnapshot to listen to live data changes and update UI immediately.

2. Step 2: Compare options

   Use Firestore's onSnapshot listener inside useEffect to update state on data changes uses onSnapshot inside useEffect, which is best practice for real-time updates in React.

3. Final Answer:

   Use Firestore's onSnapshot listener inside useEffect to update state on data changes -> Option A

4. Quick Check:

   onSnapshot enables real-time UI updates [OK]

Hint: Use onSnapshot listener for live Firestore updates [OK]

Common Mistakes:

• Polling with getDocs wastes resources
• Fetching once misses updates
• Confusing Firestore with Realtime Database necessity