Firebase Realtime Database Setup

Overview

Firebase Realtime Database offers a flexible, efficient solution for storing and syncing data in real time with all clients. This guide will help you add Firebase Realtime Database to your ChromeQuick project and customize database security rules to fit your application's requirements.

Adding Firebase Realtime Database to Your Project

Step 1: Enable Realtime Database

1. Navigate to Your Firebase Console:

• Access your Firebase project by visiting Firebase Console.

2. Add Realtime Database:

• In the Firebase console, locate and select the "Realtime Database" section from the sidebar.
• Click on "Create Database" to start setting up your database in either "locked mode" or "test mode". For development purposes, you can start in "test mode", but remember to set proper rules before moving to production.

Step 2: Configure Database Rules

The security of your data is crucial. Firebase Realtime Database uses a set of JSON rules to define how data is read and written. Here’s how to update these rules:

1. Access the Rules Tab:

• In the Realtime Database section, click on the "Rules" tab.

2. Set Your Rules:

• Modify the rules to meet your application’s specific needs. Here’s an example that restricts write access to authenticated users whose uid matches the one in the data they attempt to write, and allows read access to any authenticated user:

{
  "rules": {
    "users": {
      "$uid": {
        ".read": "auth != null",
        ".write": "$uid === auth.uid"
      }
    }
  }
}

• Click "Publish" to update the rules.
• Navigate to the database.rules.json file and update the rules here.

Step 3: Integrate Realtime Database with ChromeQuick

Since the Firebase configuration has already been set up during the Authentication step, you do not need to adjust the Firebase SDK initialization. Your project should already be importing the necessary Firebase modules for interacting with the Realtime Database.

Using the Realtime Database

You can start reading from and writing to the database as per your application requirements. Here are examples of how you can read and write to the Realtime Database from the background.js file:

Reading the user's theme from the database on startup

if (request.type === "getUserTheme") {
  onAuthStateChanged(auth, async (user) => {
    if (user) {
      const themeRef = ref(db, `users/${user.uid}/Settings`);
      try {
        const snapshot = await get(themeRef);
        if (snapshot.exists()) {
          sendResponse({ theme: snapshot.val() });
        } else {
          sendResponse({ theme: "dark" });
        }
      } catch (error) {
        sendResponse({ theme: "dark", error: error.message });
      }
    } else {
      sendResponse({ theme: "dark" });
    }
  });
  return true;
}

Writing to the Realtime database with the user's theme when changed in the settings

if (request.type === "updateUserTheme" && typeof request.theme === "string") {
  onAuthStateChanged(auth, async (user) => {
    if (user) {
      const themeRef = ref(db, `users/${user.uid}/Settings`);
      try {
        await update(themeRef, { Theme: request.theme });
        sendResponse({ success: true });
      } catch (error) {
        sendResponse({ success: false, error: error.message });
      }
    } else {
      sendResponse({ success: false, error: "User not authenticated" });
    }
  });
  return true;
}

Conclusion

Setting up Firebase Realtime Database involves adding the service to your Firebase project, configuring security rules to protect user data, and integrating it into your application logic as shown in the examples above. This setup allows your ChromeQuick project to efficiently handle user data in real time, enhancing functionality and user experience. Remember to adjust your database rules as your application evolves and as you move from development to production.