Why framework integration matters in Firebase - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase in a web app.

Firebase

const app = initializeApp([1]);

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

AfirebaseConfig

BconfigData

CappConfig

Dsettings

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong variable name that does not hold config data.

The firebaseConfig object contains the necessary keys to connect your app to Firebase services.

2fill in blank

medium

Complete the code to import Firebase Authentication module.

Firebase

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

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

AgetFirestore

BgetStorage

CgetAuth

DinitializeApp

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Firestore or Storage modules instead of Auth.

getAuth is the function to access Firebase Authentication features.

3fill in blank

hard

Fix the error in this Firebase initialization code snippet.

Firebase

const app = initializeApp([1]);

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

AfirebaseConfig

BfirebaseConfig()

Cconfig()

Dconfig

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses after the config object causing runtime errors.

The firebaseConfig is an object, not a function, so it should not have parentheses.

4fill in blank

hard

Fill both blanks to correctly import and initialize Firestore in a Firebase app.

Firebase

import { [1] } from 'firebase/firestore';
const db = [2](app);

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

AgetFirestore

BinitializeFirestore

CgetAuth

Dfirestore

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing Firestore with Auth or using wrong function names.

getFirestore is imported and then called with the app instance to initialize Firestore.

5fill in blank

hard

Fill all three blanks to set up Firebase Storage and upload a file.

Firebase

import { [1] } from 'firebase/storage';
const storage = [2](app);
const storageRef = ref(storage, [3]);

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

AgetStorage

BinitializeStorage

C'files/myFile.txt'

D'myFile.txt'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong import names or incorrect file path strings.

Use getStorage to import and initialize storage. The reference path is the file name as a string.

Practice

1. Why is integrating Firebase with a framework important for app development?

easy

A. It automatically creates a new Firebase project without user input.

B. It makes your app run faster by changing Firebase code.

C. It removes the need to write any code for your app.

D. It simplifies connecting Firebase services to your app quickly and correctly.

Solution

1. Step 1: Understand framework integration purpose

   Framework integration helps connect Firebase services like login and database easily to your app.

2. Step 2: Identify the benefit of integration

   It saves time and reduces mistakes by providing ready-made setup and code.

3. Final Answer:

   It simplifies connecting Firebase services to your app quickly and correctly. -> Option D

4. Quick Check:

   Integration = Simplifies connection [OK]

Hint: Integration means easier, faster Firebase setup [OK]

Common Mistakes:

• Thinking integration speeds up app runtime
• Believing integration removes all coding
• Assuming integration auto-creates projects

2. Which of the following is the correct way to import Firebase SDK in a JavaScript framework?

easy

A. load firebase from 'firebase';

B. require('firebase');

C. import firebase from 'firebase/app';

D. include firebase.js;

Solution

1. Step 1: Identify modern JavaScript import syntax

   Modern frameworks use ES modules syntax like import ... from ....

2. Step 2: Match correct Firebase import statement

   The official Firebase SDK uses import firebase from 'firebase/app'; to load core features.

3. Final Answer:

   import firebase from 'firebase/app'; -> Option C

4. Quick Check:

   ES module import = import firebase from 'firebase/app'; [OK]

Hint: Use ES module import syntax for Firebase SDK [OK]

Common Mistakes:

• Using CommonJS require in ES module projects
• Trying to include Firebase with HTML tags
• Using incorrect or incomplete import statements

3. Given this Firebase initialization code in a React app:

import { initializeApp } from 'firebase/app';
const firebaseConfig = { apiKey: 'abc', projectId: 'my-project' };
const app = initializeApp(firebaseConfig);
console.log(app.name);

What will be printed in the console?

medium

A. [DEFAULT]

B. my-project

C. undefined

D. firebase-app

Solution

1. Step 1: Understand initializeApp return value

   Calling initializeApp returns a Firebase app instance with a default name [DEFAULT].

2. Step 2: Check what app.name holds

   The name property of the app instance is [DEFAULT] unless a custom name is given.

3. Final Answer:

   [DEFAULT] -> Option A

4. Quick Check:

   Default app name = [DEFAULT] [OK]

Hint: Default Firebase app name is [DEFAULT] unless renamed [OK]

Common Mistakes:

• Assuming projectId is app name
• Expecting undefined for app.name
• Confusing app.name with config keys

4. You tried to use Firebase Authentication in your Vue app but get an error: auth is not a function. What is the likely cause?

medium

A. You forgot to import the getAuth function from Firebase SDK.

B. You did not initialize Firebase with initializeApp.

C. You used the wrong Firebase project ID in config.

D. You did not install Vue CLI before adding Firebase.

Solution

1. Step 1: Identify the error meaning

   The error auth is not a function means the code tried to call auth() but it is undefined.

2. Step 2: Check Firebase Authentication import

   Firebase modular SDK requires importing getAuth to use authentication functions properly.

3. Final Answer:

   You forgot to import the getAuth function from Firebase SDK. -> Option A

4. Quick Check:

   Missing getAuth import causes auth() error [OK]

Hint: Always import getAuth for Firebase Authentication [OK]

Common Mistakes:

• Skipping import of getAuth
• Assuming initializeApp fixes auth import errors
• Blaming project ID for function errors

5. You want to add Firebase Analytics and Authentication to your Angular app. Which approach best uses framework integration to avoid setup mistakes?

hard

A. Manually add Firebase scripts in index.html and call APIs directly.

B. Use AngularFire library to connect Firebase services with Angular modules.

C. Write custom wrappers around Firebase REST APIs without SDKs.

D. Use Firebase CLI only to deploy without code integration.

Solution

1. Step 1: Understand AngularFire role

   AngularFire is the official Angular library that integrates Firebase services smoothly with Angular features.

2. Step 2: Compare integration approaches

   Using AngularFire avoids manual script errors and provides ready-to-use modules for analytics and auth.

3. Final Answer:

   Use AngularFire library to connect Firebase services with Angular modules. -> Option B

4. Quick Check:

   AngularFire = best integration for Angular + Firebase [OK]

Hint: Use official framework libraries like AngularFire for Firebase [OK]

Common Mistakes:

• Adding scripts manually causing setup errors
• Avoiding SDKs and using REST APIs directly
• Using CLI only without code integration