Firebase Integration

# CHAPTER 22

Firebase Integration #

1. Introduction #

2. Learning Objectives #

• Create a new project in the Firebase Web Console.

• Initialize the Firebase JS SDK within a React Native (Expo) app.

• Implement Firebase Authentication (Sign Up, Log In, Log Out).

• Understand the NoSQL architecture of Cloud Firestore.

• Execute real-time CRUD operations against Firestore collections.

3. Step 1: Firebase Console Setup #

1. 1. Go to console.firebase.google.com and click Create a Project.

1. 2. Name it (e.g., MyReactNativeApp), disable Google Analytics for now, and click Create.

1. 3. In the Firebase Dashboard, click the Web icon (</>) to register your app.

1. 4. Firebase will output a firebaseConfig object containing your API keys. Copy this object!

4. Step 2: SDK Installation and Initialization #

npm install firebase

Create a new file in your project called firebaseConfig.js. We will initialize the connection here!

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

// Paste the object Google gave you in Step 3 here:
const firebaseConfig = {
  apiKey: "AIzaSyDOCX...",
  authDomain: "my-app.firebaseapp.com",
  projectId: "my-app",
  storageBucket: "my-app.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abcde"
};

// Initialize the Firebase App
const app = initializeApp(firebaseConfig);

// Export the specific services we want to use in our screens!
export const auth = getAuth(app);
export const db = getFirestore(app);

5. Step 3: Firebase Authentication #

import { auth } from '../firebaseConfig';
import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from 'firebase/auth';

// 1. REGISTER A NEW USER
const handleSignUp = async (email, password) => {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log("Registered:", userCredential.user.email);
  } catch (error) {
    console.error("Signup Error:", error.message);
  }
};

// 2. LOG IN AN EXISTING USER
const handleLogin = async (email, password) => {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    console.log("Logged In:", userCredential.user.email);
  } catch (error) {
    console.error("Login Error:", error.message);
  }
};

// 3. LOG OUT
const handleLogout = async () => {
  await signOut(auth);
};

*Note: Firebase handles the session automatically! You can replace the AsyncStorage logic from Chapter 21 with a simple onAuthStateChanged listener provided by Firebase.*

6. Step 4: Cloud Firestore (NoSQL Database) #

WRITE DATA (Create a User Profile)

import { db } from '../firebaseConfig';
import { collection, addDoc, doc, setDoc } from 'firebase/firestore';

// Use addDoc to generate a random ID
const addPost = async () => {
  await addDoc(collection(db, "posts"), {
    title: "My first post!",
    content: "Firebase is amazing.",
    likes: 0
  });
};

// Use setDoc to use a specific ID (like the Auth User ID!)
const saveUserProfile = async (userId, name, age) => {
  await setDoc(doc(db, "users", userId), {
    fullName: name,
    age: age,
    isPro: true
  });
};

READ DATA (Fetch the feed)

import { collection, getDocs } from 'firebase/firestore';

const fetchPosts = async () => {
  const querySnapshot = await getDocs(collection(db, "posts"));
  const postsArray = [];
  
  querySnapshot.forEach((doc) => {
    // doc.id is the unique document string, doc.data() is the JSON payload!
    postsArray.push({ id: doc.id, ...doc.data() }); 
  });
  
  console.log(postsArray);
};

7. Real-Time Data Sync #

import { onSnapshot, collection } from 'firebase/firestore';

// Call this in a useEffect!
const unsubscribe = onSnapshot(collection(db, "posts"), (snapshot) => {
  const updatedPosts = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
  setPosts(updatedPosts); // State updates, UI redraws instantly across all devices!
});

8. Visual Learning: The Firestore Tree #

[ /users ] (Collection)
     |
     |-- [ 9xH72... ] (Document auto-ID)
     |       |-- fullName: "Alice"
     |       |-- age: 25
     |
     |-- [ z3P81... ] (Document matched to Auth UID)
             |-- fullName: "Bob"
             |-- age: 30

9. Common Mistakes #

• Typos in Collection Names: If you write collection(db, "user") instead of "users", Firestore will not throw an error. Because it is NoSQL, it assumes you wanted to create a brand new, empty collection named 'user' and will silently write data there. Always double-check your spelling!

10. Best Practices #

• Security Rules: In the Firebase Console, you must write Firestore Security Rules. By default, they might be fully open, meaning any hacker can delete your entire database. You must write rules stating: allow read, write: if request.auth != null; (Only logged-in users can touch the database).

11. Practice Exercises #

1. 1. What Firebase authentication function handles the automatic, secure creation of a new user account, password hashing, and instantaneous login?

1. 2. Write the nested function path required to point to a specific document with ID 123 inside a collection named products.

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the paradigm shift in backend development introduced by Backend-as-a-Service (BaaS) platforms like Firebase. Why is it exceptionally popular for startup MVPs?

• Q: Contrast the execution of a standard getDocs() query with an onSnapshot() listener in Firestore. Provide a distinct UI use-case where onSnapshot is an absolute requirement.

• Q: Describe the security necessity of Firebase Firestore Rules. How does the mobile client authenticate its requests to the NoSQL database to satisfy these rules?

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #