Firebase with Next.js - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase in a Next.js project.

Firebase

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: [1],
  authDomain: 'your-project.firebaseapp.com',
  projectId: 'your-project',
};

const app = initializeApp(firebaseConfig);
export default app;

Drag options to blanks, or click blank then click option'

A"your-api-key"

ByourApiKey

C12345

DfirebaseConfig.apiKey

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put the API key inside quotes.

Using a variable name instead of the actual key string.

You must provide your actual Firebase API key as a string to initialize the app correctly.

2fill in blank

medium

Complete the code to import Firestore from Firebase in Next.js.

Firebase

import { [1] } from 'firebase/firestore';

const db = [1](app);
export { db };

Drag options to blanks, or click blank then click option'

AgetFirestore

BinitializeFirestore

Cfirestore

DFirestore

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Firestore' instead of 'getFirestore'.

Trying to import from 'firebase/app' instead of 'firebase/firestore'.

The function getFirestore is used to get the Firestore instance from the Firebase app.

3fill in blank

hard

Fix the error in the code to add a document to Firestore.

Firebase

import { collection, [1] } from 'firebase/firestore';

const addUser = async (db, user) => {
  const usersCol = collection(db, 'users');
  await [1](usersCol, user);
};

Drag options to blanks, or click blank then click option'

AgetDoc

BsetDoc

CaddDoc

DupdateDoc

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'setDoc' which requires a document reference.

Using 'updateDoc' which updates existing documents only.

The addDoc function is used to add a new document to a collection in Firestore.

4fill in blank

hard

Fill both blanks to correctly fetch documents from Firestore in Next.js.

Firebase

import { collection, [1] } from 'firebase/firestore';

const fetchUsers = async (db) => {
  const usersCol = collection(db, 'users');
  const snapshot = await [2](usersCol);
  return snapshot.docs.map(doc => doc.data());
};

Drag options to blanks, or click blank then click option'

AgetDocs

BgetDoc

Cquery

DonSnapshot

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getDoc' which fetches a single document.

Using 'onSnapshot' which sets up a listener instead of a one-time fetch.

The getDocs function is imported and used to fetch all documents from a collection snapshot.

5fill in blank

hard

Fill all three blanks to correctly configure Firebase Authentication with Next.js.

Firebase

import { getAuth, [1], [2] } from 'firebase/auth';

const auth = getAuth(app);

const signIn = async (email, password) => {
  try {
    const userCredential = await [3](auth, email, password);
    return userCredential.user;
  } catch (error) {
    throw error;
  }
};

Drag options to blanks, or click blank then click option'

AsignInWithEmailAndPassword

BcreateUserWithEmailAndPassword

CsignOut

DsendPasswordResetEmail

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing sign-in and sign-up functions.

Using 'signOut' or 'sendPasswordResetEmail' incorrectly here.

Import signInWithEmailAndPassword and createUserWithEmailAndPassword for authentication. Use signInWithEmailAndPassword to sign in users.

Practice

1. What is the main purpose of integrating Firebase with a Next.js application?

easy

A. To add backend features like database and user authentication easily

B. To replace Next.js routing with Firebase functions

C. To convert Next.js into a mobile app framework

D. To remove the need for React components in Next.js

Solution

1. Step 1: Understand Firebase role

   Firebase provides backend services such as database and authentication that can be added to frontend apps.

2. Step 2: Understand Next.js role

   Next.js is a frontend framework for React apps, which can use Firebase to add backend features.

3. Final Answer:

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

4. Quick Check:

   Firebase adds backend features to Next.js apps = C [OK]

Hint: Firebase adds backend features to frontend apps [OK]

Common Mistakes:

• Thinking Firebase replaces Next.js routing
• Confusing Firebase with mobile app frameworks
• Assuming Firebase removes React components

2. Which of the following is the correct way to initialize Firebase in a Next.js project?

easy

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

B. const app = new Firebase(firebaseConfig);

C. firebase.initialize(firebaseConfig);

D. import firebase from 'firebase'; firebase.init(firebaseConfig);

Solution

1. Step 1: Check Firebase v9+ syntax

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

2. Step 2: Verify correct usage

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

3. Final Answer:

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

4. Quick Check:

   Use initializeApp from 'firebase/app' = B [OK]

Hint: Use modular import and initializeApp for Firebase v9+ [OK]

Common Mistakes:

• Using old Firebase namespace syntax
• Calling non-existent methods like firebase.init
• Creating Firebase instance with 'new' keyword

3. Given this Next.js Firebase code snippet, what will be logged if the user is not signed in?

import { getAuth, onAuthStateChanged } from 'firebase/auth';
const auth = getAuth();
onAuthStateChanged(auth, user => {
  if (user) {
    console.log('User ID:', user.uid);
  } else {
    console.log('No user signed in');
  }
});

medium

A. Error: user is null

B. User ID: undefined

C. No user signed in

D. Nothing will be logged

Solution

1. Step 1: Understand onAuthStateChanged behavior

   This function triggers callback with user object if signed in, or null if not.

2. Step 2: Analyze code branches

   If user is null (not signed in), else branch logs 'No user signed in'.

3. Final Answer:

   No user signed in -> Option C

4. Quick Check:

   Null user triggers else branch = A [OK]

Hint: Null user means else branch runs [OK]

Common Mistakes:

• Assuming user object is always defined
• Expecting an error when user is null
• Thinking nothing logs if no user

4. You wrote this code to fetch data from Firestore in Next.js but get an error:

import { getFirestore, collection, getDocs } from 'firebase/firestore';
const db = getFirestore();
async function fetchData() {
  const querySnapshot = await getDocs(collection(db, 'users'));
  querySnapshot.forEach(doc => {
    console.log(doc.data());
  });
}
fetchData();

What is the most likely cause of the error?

medium

A. doc.data() is not a function

B. The collection name 'users' is invalid

C. getDocs does not support async/await

D. Firebase app was not initialized before calling getFirestore()

Solution

1. Step 1: Check Firebase initialization requirement

   Firestore requires Firebase app to be initialized before calling getFirestore().

2. Step 2: Analyze other options

   'users' is valid collection name; getDocs supports async/await; doc.data() is valid method.

3. Final Answer:

   Firebase app was not initialized before calling getFirestore() -> Option D

4. Quick Check:

   Initialize Firebase app before Firestore = D [OK]

Hint: Always initialize Firebase app before Firestore calls [OK]

Common Mistakes:

• Skipping Firebase initialization
• Misunderstanding async/await with getDocs
• Assuming collection names cause errors

5. You want to secure a Next.js page so only authenticated users can access it using Firebase Auth. Which approach is best?

hard

A. Check user authentication only in getStaticProps and serve static content

B. Use Firebase Admin SDK on server side to verify user token in getServerSideProps

C. Use Firebase Auth on client side and redirect unauthenticated users to login page

D. Store user password in cookies and check it manually in the page component

Solution

1. Step 1: Understand authentication in Next.js

   Client-side checks can be bypassed; server-side verification is more secure.

2. Step 2: Use Firebase Admin SDK in getServerSideProps

   This allows verifying user tokens securely on server before rendering page.

3. Step 3: Analyze other options

   getStaticProps runs at build time, not per request; storing passwords in cookies is insecure.

4. Final Answer:

   Use Firebase Admin SDK on server side to verify user token in getServerSideProps -> Option B

5. Quick Check:

   Server-side token verification = A [OK]

Hint: Verify user token server-side with Firebase Admin SDK [OK]

Common Mistakes:

• Relying only on client-side auth checks
• Using getStaticProps for auth checks
• Storing passwords insecurely in cookies