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.