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.