Firebase makes this possible with custom claims and security rules. In this article, you’ll learn how to:

• Add custom claims to users with the Firebase Admin SDK.

• Use Firebase Security Rules to enforce RBAC.

• Test your rules with different roles.

By the end, you’ll have a working setup where roles like admin and user are enforced directly in Firestore.

Table of Contents

• Step 1: Understand Firebase Custom Claims

• Step 2: Assign a Role with the Firebase Admin SDK

• Step 3: Write and Enforce Firestore Security Rules

• Step 4: Build the Frontend with Next.js and Firebase

• Step 5: Test the RBAC Workflow

• Conclusion

Prerequisites

To follow along, you should:

• Have a Firebase project set up with Authentication and Firestore enabled.

• Be comfortable with JavaScript/Node.js.

• Have the Firebase SDK and Admin SDK installed.

If you’re new to Firebase, check out the official setup guide before continuing.

Step 1: Understand Firebase Custom Claims

Firebase custom claims allow you to attach extra information (like a role) to a user’s authentication token. You set this information server-side using the Admin SDK. They are included in the user’s request.auth.token, and you can’t set them directly from the client (for security reasons).

Here’s an example: a user’s ID token might look like this after a claim is added:

{
  "user_id": "abc123",
  "email": "jane@example.com",
  "role": "admin"
}

In this example, the role field determines access privileges in your application. Firebase automatically includes this claim in the user’s ID token, so it can be securely validated both on the server and in Firestore rules.

Step 2: Assign a Role with the Firebase Admin SDK

The Firebase Admin SDK allows you to manage users and assign roles securely from your backend (or through a script).

First, install the Admin SDK in a Node environment (not in your frontend app):

npm install firebase-admin

Then initialize it with your Firebase service account credentials:

const admin = require("firebase-admin");
const serviceAccount = require("./service-account.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});

To get your service-account.json file, navigate to your firebase settings > project settings > service account.

Click on Generate private key, and it will automatically download the JSON file. You can rename the file or use it as it is.

You can now define a simple function to set a user’s role:

async function setUserRole(uid, role) {
  await admin.auth().setCustomUserClaims(uid, { role });
  console.log(`Role ${role} assigned to user ${uid}`);
}

The role parameter can be anything you define, for example:

• "admin": Full read/write access.

• "editor": Can create or modify limited content.

• "user": Read-only access.

The role you assign to a user depends on your app’s needs. In most applications, you’ll start simple, perhaps just admin and user and expand over time.

Usage example:

Once you’ve defined the function, call it with a user’s UID:

setUserRole("USER_UID_HERE", "admin");

This securely attaches a custom claim to the user.

Note: The user must log out and log back in (or refresh their token) for the new claim to take effect.

Step 3: Write Firestore Security Rules for RBAC

Firestore Security Rules control how your data can be read or written. They are executed before any client request reaches your database, ensuring that your security logic isn’t bypassed.

Open your Firestore Rules (firestore.rules) and define role-based access like this:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    match /posts/{postId} {
      // Anyone logged in can read
      allow read: if request.auth != null;

      // Only admins can write
      allow write: if request.auth.token.role == "admin";
    }
  }
}

Here’s what’s happening:

• request.auth != null: ensures the user is logged in.

• request.auth.token.role == "admin": Grants write access only to users with the admin role.

You can expand this for multiple roles:

allow write: if request.auth.token.role in ["admin", "editor"];

Quick Reference

Keep these points in mind when managing Firebase RBAC:

• Keep your roles simple (for example, admin, editor, user). Don’t overcomplicate.

• Don’t store roles in Firestore documents. Enforce via custom claims instead.

• Always test rules locally before deploying.

• Remember that users must refresh their tokens after claims are updated.

Step 4: Build the Frontend with Next.js and Firebase

Let’s bring this to life with a working demo using Next.js and Firebase.

firebase-rbac/
├── firebase-admin-scripts/       # Server-side scripts for setting user roles
│   ├── assignRole.js             # Uses Firebase Admin SDK to assign custom claims
│   ├── .env                      # Contains service account path and test UID
│   └── fir-rbac-...json          # Firebase Admin SDK service account json file
│
├── src/
│   ├── app/
│   │   ├── page.js               # Main Next.js page for login + post display
│   │   ├── layout.js             # Global layout
│   │   └── globals.css           # Tailwind global styles
│   └── lib/
│       └── firebase.js           # Firebase client initialization
│
├── .env.local                    # Firebase web config (NEXT_PUBLIC_ variables)
├── package.json
└── README.md

In your .env.local, complete these variables with your Firebase project config information:

NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id

Firebase Initialization (src/lib/firebase.js):

import { initializeApp, getApps, getApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

Demo Component (src/app/page.js):

This component lets you log in, view posts, and, if you’re an admin, create new posts.

"use client";

import { useState, useEffect } from "react";
import { auth, db } from "@/lib/firebase";
import {
  signInWithEmailAndPassword,
  onAuthStateChanged,
  signOut,
} from "firebase/auth";
import { collection, getDocs, addDoc } from "firebase/firestore";

export default function Page() {
  const [user, setUser] = useState(null);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [posts, setPosts] = useState([]);
  const [newPost, setNewPost] = useState("");

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (u) => {
      setUser(u);
      if (u) await loadPosts();
      else setPosts([]);
    });
    return () => unsubscribe();
  }, []);

  const loadPosts = async () => {
    const snapshot = await getDocs(collection(db, "posts"));
    setPosts(snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() })));
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await signInWithEmailAndPassword(auth, email, password);
      alert("Logged in!");
      setEmail("");
      setPassword("");
    } catch (error) {
      console.error("Login failed:", error.message);
      alert("Login failed: " + error.message);
    }
  };

  const handleLogout = async () => {
    await signOut(auth);
    setUser(null);
  };

  const handleAddPost = async () => {
    try {
      await addDoc(collection(db, "posts"), { text: newPost });
      setNewPost("");
      await loadPosts();
      alert("New Post added!");
    } catch (e) {
      alert("Opps!! Only admins can add posts.");
      console.error(e.message);
    }
  };

  return (
    <main className="min-h-screen flex flex-col items-center justify-center bg-gray-900 text-gray-100 px-4">
      <div className="w-full max-w-md bg-gray-800 rounded-2xl shadow-lg p-8 space-y-6">
        <h1 className="text-2xl font-bold text-center text-indigo-400">
          Firebase RBAC Demo (Next.js)
        </h1>

        {/* Login Form */}
        {!user ? (
          <form onSubmit={handleLogin} className="space-y-4">
            <div>
              <label className="block text-gray-300 text-sm mb-1">Email</label>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@example.com"
                required
                className="w-full px-3 py-2 rounded-md bg-gray-700 border border-gray-600 text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-400"
              />
            </div>

            <div>
              <label className="block text-gray-300 text-sm mb-1">
                Password
              </label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••"
                required
                className="w-full px-3 py-2 rounded-md bg-gray-700 border border-gray-600 text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-400"
              />
            </div>

            <button
              type="submit"
              className="w-full px-6 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 transition font-medium text-white"
            >
              Login
            </button>
          </form>
        ) : (
          <div className="space-y-6">
            <div className="flex flex-col items-center">
              <p className="text-gray-300 mb-2">
                Logged in as{" "}
                <span className="font-semibold text-indigo-400">
                  {user.email}
                </span>
              </p>
              <button
                onClick={handleLogout}
                className="text-sm text-red-400 hover:text-red-300 underline"
              >
                Logout
              </button>
            </div>

            <section className="border-t border-gray-700 pt-4">
              <h2 className="text-lg font-semibold text-indigo-300 mb-3">
                Posts
              </h2>

              {posts.length > 0 ? (
                <ul className="space-y-2">
                  {posts.map((p) => (
                    <li
                      key={p.id}
                      className="bg-gray-700 rounded-md px-3 py-2 text-gray-200"
                    >
                      {p.text}
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="text-gray-400 italic">No posts yet.</p>
              )}

              <div className="mt-4 flex items-center gap-2">
                <input
                  value={newPost}
                  onChange={(e) => setNewPost(e.target.value)}
                  placeholder="New post"
                  className="flex-1 px-3 py-2 rounded-md bg-gray-700 border border-gray-600 text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-400"
                />
                <button
                  onClick={handleAddPost}
                  className="px-4 py-2 rounded-md bg-indigo-600 hover:bg-indigo-500 transition font-medium text-white"
                >
                  Add
                </button>
              </div>
            </section>
          </div>
        )}
      </div>

      <footer className="mt-8 text-gray-500 text-sm">
        Built with Next.js + Firebase | &copy; FreeCodeCamp 2025
      </footer>
    </main>
  );
}

Step 5: Test the RBAC Workflow

Now that everything is set up, it’s time to test the entire Role-Based Access Control flow to ensure your rules and roles are working correctly.

Enable Authentication

Head over to your Firebase Console, select your project, and navigate to Authentication then Sign-in method. Select Add New Provider. Then enable Email/Password authentication. This will let you create and sign in with test users directly from your app.

Configure Firestore Rules

Next, you’ll need to update the Firestore rules. Navigate to Firestore Database, located in the build drop-down. Once you’re there, click on Rules where you will be able to update the rules.

Replace the default rules with the RBAC rules you defined earlier. These rules ensure that only authenticated users can read data, and only admins can create or modify posts.

Then publish the updated version and you are good to go.

Assign a Role to a User

To test admin permissions, assign an admin role to one of your test users. Open your terminal, change into the firebase-admin-scripts directory, and run:

cd firebase-admin-scripts
node assignRole.js

This executes the Admin SDK script that adds a custom claim to your test user. Once the role is set, you’ll get a message confirming that the admin role has been assigned to the specified user ID.

If the user is logged in already, the user must log out and log back in for the new role to take effect.

Run the App

Now you can start your Next.js development server:

npm run dev

Visit http://localhost:3000 in your browser. You should find the Firebase RBAC demo app.

Verify Role-Based Access

Try logging in as the user who was assigned the admin role. Once logged in, you should be able to create new posts successfully. Next, log in as a regular user. You’ll notice that you can view existing posts, but any attempt to add a new post will fail with a “Permission denied” alert.

If you see these behaviors, then your RBAC system is working as intended!

By enforcing permissions at the Firestore layer, you ensure that security is handled centrally and can’t be bypassed by manipulating the client-side code. This approach keeps your app secure and scalable, even as your roles and data grow more complex.

Next steps:

• Add more roles (like editor, and more as you wish).

• Combine RBAC with document-level validation for fine-grained control.

• Explore Firebase’s security rules.

Conclusion

You just learned a simple but important role-based access control (RBAC) functionality in Firebase. In this guide, we covered custom claims and how to set roles using the Admin SDK. You also learned how to enforce those roles in Firestore security rules.

In this article, you’ll learn how to build a reusable upload service that:

1. Uploads single and multiple files to Firebase Storage

2. Returns file download URLs

3. Uses Dependency Injection (DI) with injectable to keep the code modular, testable, and easy to maintain

By the end, you will have a production-ready upload service for your Flutter Web project.

Table of Contents:

1. Why File Uploads Matter in Flutter Web

2. Upload Flow Overview

3. Prerequisites

4. How to Define the Upload Data Model and Service Interface

5. How to Implement the Upload Service

6. How to Handle Errors

7. Dependency Injection with injectable

8. How to Use the Upload Service

9. Best Practices

10. Conclusion

11. References

Why File Uploads Matter in Flutter Web

When building for the web, users often expect features like uploading a profile picture, submitting documents, or sharing media. Unlike mobile, the web environment requires handling files via browser APIs, which then need to be integrated with backend services like Firebase for persistence.

Upload Flow Overview

Here’s a high-level look at how the upload process works:

1. The user selects a file or image using a browser file picker.

2. Flutter reads the file as a Uint8List.

3. The file is uploaded to Firebase Storage.

4. A download URL is generated and stored in Firestore (or used directly).

Prerequisites

Before starting, ensure you have the following:

1. A Flutter Web project

    flutter config --enable-web
    flutter create my_web_project
    cd my_web_project
   

2. Firebase set up in your Flutter app: Follow Add Firebase to your Flutter app (Web) and include the Firebase SDK snippet in index.html.

3. Firebase Storage enabled in the Firebase Console: Go to Build > Storage > Get Started and allow read/write access for testing. Example rules:

    service firebase.storage {
      match /b/{bucket}/o {
        match /{allPaths=**} {
          allow read, write: if true;
        }
      }
    }
   

   Don’t use these rules in production.

4. Required dependencies in your pubspec.yaml:

    dependencies:
      firebase_core: ^3.13.0
      firebase_storage: ^12.4.2
      injectable: ^2.3.2
      get_it: ^8.0.3
   
    dev_dependencies:
      build_runner: ^2.4.13
      injectable_generator: ^2.4.1
   

   Run flutter pub get to install.

How to Define the Upload Data Model and Service Interface

We begin with a data model to represent the file and a service interface to define the upload contract.

import 'dart:typed_data';

class UploadData {
  final Uint8List fileData;   // File in binary format
  final String folderName;    // Folder path in Firebase Storage
  final String fileName;      // File name

  const UploadData({
    required this.fileData,
    required this.fileName,
    required this.folderName,
  });
}

Next, create an abstract service that defines what the upload logic should do.

abstract class IUploadService {
  Future<String> uploadDoc({
    required UploadData file,
  });

  Future<List<String>> uploadMultipleDoc({
    required List<UploadData> files,
  });
}

Here’s what’s happening in this code:

• uploadDoc: Uploads one file and returns its download URL

• uploadMultipleDoc: Uploads multiple files in parallel and returns a list of URLs

How to Implement the Upload Service

Now let’s implement the upload logic with Firebase Storage.

import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/foundation.dart';
import 'package:injectable/injectable.dart';
import 'i_upload_service.dart';
import 'custom_error.dart';

@LazySingleton(as: IUploadService)
class UploadService extends IUploadService {
  final FirebaseStorage firebaseStorage;

  UploadService({required this.firebaseStorage});

  @override
  Future<String> uploadDoc({required UploadData file}) async {
    try {
      var storageRef = firebaseStorage.ref('${file.folderName}/${file.fileName}');
      var uploadTask = storageRef.putData(file.fileData);
      TaskSnapshot snapshot = await uploadTask;
      return await snapshot.ref.getDownloadURL();
    } on FirebaseException catch (e) {
      throw CustomError(
        errorMsg: "Firebase upload failed: ${e.message}",
        code: e.code,
        plugin: e.plugin,
      );
    } catch (e) {
      if (kDebugMode) print("Unexpected error: $e");
      rethrow;
    }
  }

  @override
  Future<List<String>> uploadMultipleDoc({required List<UploadData> files}) async {
    return await Future.wait(
      files.map((file) => uploadDoc(file: file)),
    );
  }
}

This code defines a service class for uploading documents to Firebase Storage in a Flutter app. Let’s break it down step by step so you see exactly what’s happening:

1. Imports

1. firebase_storage: provides Firebase Storage SDK for uploading and managing files.

2. flutter/foundation.dart: gives access to constants like kDebugMode for debug logging.

3. injectable.dart: enables dependency injection using the injectable + getIt package.

4. i_upload_service.dart: defines the abstract contract/interface for the upload service.

5. custom_error.dart: defines a custom error class to standardize error handling.

2. Dependency Injection Setup

@LazySingleton(as: IUploadService)
class UploadService extends IUploadService {

1. @LazySingleton(as: IUploadService) registers UploadService as the implementation of IUploadService.

2. This means anywhere in the app where IUploadService is requested, getIt will provide an instance of UploadService.

3. It’s a singleton, so only one instance is created and reused across the app.

3. Constructor

final FirebaseStorage firebaseStorage;

UploadService({required this.firebaseStorage});

1. The class requires a FirebaseStorage instance, which will also be injected automatically.

2. This makes the service easier to test and replace.

4. Upload a Single File

@override
Future<String> uploadDoc({required UploadData file}) async {
  try {
    var storageRef = firebaseStorage.ref('${file.folderName}/${file.fileName}');
    var uploadTask = storageRef.putData(file.fileData);
    TaskSnapshot snapshot = await uploadTask;
    return await snapshot.ref.getDownloadURL();
  } on FirebaseException catch (e) {
    throw CustomError(
      errorMsg: "Firebase upload failed: ${e.message}",
      code: e.code,
      plugin: e.plugin,
    );
  } catch (e) {
    if (kDebugMode) print("Unexpected error: $e");
    rethrow;
  }
}

What this code does:

1. Creates a reference in Firebase Storage at the path folderName/fileName

2. Uploads the raw file bytes (file.fileData) using putData.

3. Waits for the upload to complete and retrieves a TaskSnapshot.

4. From the snapshot, gets the download URL of the uploaded file and returns it.

5. If a FirebaseException occurs, it wraps the error inside a custom CustomError.

6. Any other unexpected error is logged (only in debug mode) and rethrown.

5. Upload Multiple Files

@override
Future<List<String>> uploadMultipleDoc({required List<UploadData> files}) async {
  return await Future.wait(
    files.map((file) => uploadDoc(file: file)),
  );
}

What the code does:

1. Accepts a list of UploadData objects.

2. For each file, it calls uploadDoc (the single upload function).

3. Future.wait runs all uploads in parallel, waits for them to complete, and returns a list of download URLs.

This class is a Firebase Storage upload service. It can upload single or multiple documents. It follows dependency injection principles for testability and scalability. It uses error handling with CustomError to provide cleaner error messages. Multiple uploads are executed in parallel for efficiency.

How to Handle Errors

Instead of relying on raw print statements, it’s better to use a structured error class. A structured error class organizes all error information, like the message, code, and source, into a single object. This makes error handling consistent, reusable, and easy to manage. You can inspect, log, or display errors programmatically, which is much more maintainable than scattered prints.

import 'package:equatable/equatable.dart';

class CustomError extends Equatable {
  final String errorMsg;
  final String code;
  final String plugin;

  const CustomError({
    required this.errorMsg,
    required this.code,
    required this.plugin,
  });

  @override
  List<Object?> get props => [errorMsg, code, plugin];

  @override
  String toString() {
    return 'CustomError(errorMsg: $errorMsg, code: $code, plugin: $plugin)';
  }
}

Why you should use this approach:

• Ensures consistency across the project.

• Makes errors reusable anywhere in the app.

• Allows programmatic handling (for example, act differently based on the error code).

• Provides clear debugging information through toString().

• Scales well as your app grows.

Dependency Injection with injectable

In a typical app, you might manually create service instances like UploadService or FirebaseStorage wherever you need them. But as your app grows, manually creating and passing dependencies becomes messy, error-prone, and hard to test.

This is where Dependency Injection (DI) comes in. DI allows you to declare dependencies once, and let a framework handle creating and providing them wherever they’re needed. The injectable package in Flutter works with getIt to automate this process.

Instead of creating UploadService manually, you configure it with injectable so that your app automatically gets the correct instance when needed, following the singleton or lazy-loading patterns.

Step 1: Annotate your service

@LazySingleton(as: IUploadService)
class UploadService implements IUploadService {
  // your upload logic here
}

@LazySingleton(as: IUploadService) tells injectable:

• Lazy: Only create the instance when it’s first used.

• Singleton: Reuse the same instance throughout the app.

• as: IUploadService: Expose the service via its interface, making testing and swapping implementations easier.

Step 2: Run the generator

flutter pub run build_runner build

This command generates code that wiring all your injectable dependencies together, so you don’t have to manually instantiate them.

Step 3: Create an injectable module

import 'package:firebase_storage/firebase_storage.dart';
import 'package:injectable/injectable.dart';

@module
abstract class InjectableModule {
  @lazySingleton
  FirebaseStorage get firebaseStorage => FirebaseStorage.instance;
}

This code is setting up dependency injection for FirebaseStorage using the injectable package. Let me break it down:

1. @module: The @module annotation tells injectable that this class will act as a provider of external dependencies (things you don’t create manually but get from libraries, SDKs, or APIs).

   In this case, FirebaseStorage is coming from the Firebase SDK, so you don’t construct it yourself. You just get an instance from the SDK.

2. abstract class InjectableModule: This is a special module class that contains dependency definitions. Since it’s abstract, it won’t be instantiated directly. Instead, injectable generates code to handle the injection.

3. @lazySingleton: This annotation tells injectable that the dependency should be created only once and reused throughout the app (singleton pattern).

   • Lazy means it won’t be created until it’s actually needed.

   • Singleton means the same instance will be reused everywhere after the first creation.

4. FirebaseStorage get firebaseStorage => FirebaseStorage.instance;: This line defines what dependency to provide. Here it’s saying:

   • Whenever something in the app needs a FirebaseStorage instance, inject FirebaseStorage.instance.

   • This way, you don’t manually create or pass around FirebaseStorage yourself – injectable plus getIt handle that automatically.

In practice, this ensures that everywhere in your app where you need FirebaseStorage, you can simply inject it via constructor injection (for example, in your UploadService) without manually instantiating it.

Step 4: Resolve the service anywhere

final uploadService = getIt<IUploadService>();

Why we do this

By using injectable:

1. You stop manually instantiating dependencies everywhere.

2. Your services are easier to test, because you can swap implementations via interfaces.

3. You ensure singleton patterns and lazy loading without extra boilerplate.

4. Your app becomes more maintainable, especially as it grows.

In practice:
Anywhere in your app where UploadService needs FirebaseStorage, you just inject it via the constructor:

class UploadService implements IUploadService {
  final FirebaseStorage _firebaseStorage;

  UploadService(this._firebaseStorage);

  // Use _firebaseStorage here
}

Injectable + getIt takes care of providing the correct _firebaseStorage instance automatically.

How to Use the Upload Service

The Upload Service is a modular, reusable service in your app that handles uploading files to Firebase Storage. By using this service, you abstract away direct Firebase interactions, keep your code clean, and leverage dependency injection to access the service anywhere in your app.

The Upload Service provides several options:

• Single file upload – Upload one file at a time and get its download URL.

• Multiple file upload – Upload a batch of files in one go and receive a list of download URLs.

• Error handling – Any issues during upload (like network errors or permission problems) are caught and can be handled gracefully.

Below, we’ll go step by step through how to use these options in practice.

Example: Upload a single file.

Future<void> uploadFile(Uint8List fileData) async {
  final file = UploadData(
    fileData: fileData,
    fileName: 'example.txt',
    folderName: 'documents',
  );

  try {
    final uploadService = getIt<IUploadService>();
    final downloadUrl = await uploadService.uploadDoc(file: file);
    print('Uploaded successfully: $downloadUrl');
  } catch (e) {
    print('Upload failed: $e');
  }
}

This function uploadFile is a wrapper that prepares a file for upload and delegates the actual uploading to your UploadService via dependency injection. Let me break it down step by step:

Future<void> uploadFile(Uint8List fileData) async {
  final file = UploadData(
    fileData: fileData,
    fileName: 'example.txt',
    folderName: 'documents',
  );

1. First, it takes a file as raw bytes (Uint8List fileData).

2. Then it wraps this data in an UploadData object, giving it a fileName (example.txt) and a folderName (documents). This essentially creates metadata about the file, so your upload service knows what to call it and where to store it in Firebase Storage.

  try {
    final uploadService = getIt<IUploadService>();
    final downloadUrl = await uploadService.uploadDoc(file: file);
    print('Uploaded successfully: $downloadUrl');
  } catch (e) {
    print('Upload failed: $e');
  }
}

3. Next, it retrieves the IUploadService instance using getIt (your dependency injection container). Thanks to the binding you defined earlier (UploadService registered as IUploadService), getIt knows to give you the correct implementation.

4. It calls uploadService.uploadDoc(file: file) which triggers the actual upload to Firebase Storage. If successful, Firebase returns a download URL of the uploaded file.

5. The function then prints out:

   • "Uploaded successfully: <downloadUrl>" if the upload worked.

   • "Upload failed: <error>" if an error occurred (for example, no internet or Firebase permission issues).

In simple terms:

1. Input: Raw file data (bytes).

2. Process: Wraps it in an UploadData object → sends it to Firebase via UploadService.

3. Output: Prints the public download URL if upload succeeds, or prints an error message if it fails.

Example: Upload multiple files.

Future<void> uploadMultiple(List<Uint8List> filesData) async {
  final uploadService = getIt<IUploadService>();

  final files = filesData.map((data) => UploadData(
    fileData: data,
    fileName: '${DateTime.now().millisecondsSinceEpoch}.txt',
    folderName: 'batch_docs',
  )).toList();

  try {
    final urls = await uploadService.uploadMultipleDoc(files: files);
    print('All files uploaded: $urls');
  } catch (e) {
    print('Batch upload failed: $e');
  }
}

This function handles batch uploading of multiple files to Firebase Storage using the IUploadService. Let’s break it down step by step:

1. Access the upload service

final uploadService = getIt<IUploadService>();

Here, getIt retrieves the registered IUploadService instance through dependency injection. This service abstracts all the logic of uploading files, so you don’t deal with Firebase APIs directly in this method.

2. Prepare the list of files

final files = filesData.map((data) => UploadData(
  fileData: data,
  fileName: '${DateTime.now().millisecondsSinceEpoch}.txt',
  folderName: 'batch_docs',
)).toList();

filesData is a list of raw file contents (Uint8List). For each file in the list, it creates an UploadData object.

The filename is generated dynamically using the current timestamp (DateTime.now().millisecondsSinceEpoch), ensuring each file has a unique name.

All files are placed in the "batch_docs" folder in Firebase Storage. This way, you have a structured list of files ready for uploading.

3. Upload Multiple File Mechanism

final urls = await uploadService.uploadMultipleDoc(files: files);

The uploadService is asked to upload all files in one go using its uploadMultipleDoc method. It uploads each file to Firebase Storage. Once done, it returns a list of download URLs, one for each uploaded file.

4. Handle success or failure

print('All files uploaded: $urls');

On success, it prints out the URLs of all uploaded files (so you can later use them, for example, to display or share the documents).

print('Batch upload failed: $e');

If something goes wrong, it catches the exception and logs the error message.

In short, this function takes multiple raw files, wraps them into UploadData objects, uploads them all to Firebase Storage using the service layer, and prints the resulting download URLs.

Best Practices

1. Validate file size before uploading to avoid oversized files.

2. Restrict file types (for example, only image/*) to improve security.

3. Store metadata (like user ID, timestamp) in Firestore along with the download URL.

4. Use unique paths (uploads/userId/filename) to prevent collisions.

Conclusion

You now have a reusable and modular upload service for Flutter Web that supports single and multiple file uploads, handles errors in a structured way, and uses Dependency Injection for clean architecture.

This foundation makes it easy to extend the service further, for example by adding file deletion, upload progress tracking, or authenticated uploads.

References

1. Firebase Storage for Flutter

2. Firebase Storage API Reference

3. injectable Package

4. get_it Package

This is where Firebase Crashlytics becomes an essential tool. Crashlytics is a lightweight, real-time crash reporter that helps you understand why your app is crashing and how widespread the problem is among users. With this knowledge, you can fix bugs faster and improve your app’s reliability.

In this article, we’ll walk through setting up Firebase Crashlytics in a Flutter app for both iOS and Android platforms. Along the way, you’ll learn not only how to integrate Crashlytics, but also the reasoning behind each step, so you fully understand how it works.

Table of Contents:

1. Prerequisites

2. Set Up the Flutter Project

3. Connect Flutter to Firebase

4. Add the Required Dependencies

5. Initialize Crashlytics in main.dart

6. Build a Simple Test Screen

7. Run and Test the App

8. Understanding the Crashlytics Dashboard

9. Advanced Firebase Crashlytics in Flutter: Going Beyond the Basics

   • How to Log Non-Fatal Errors

   • How to Add Custom Keys for Context

   • How to Log Custom Events and Breadcrumbs

   • How to Associate Crashes with Users

   • How to Ensure Proper Symbolication

   • How to Controll Data Collection

10. Best Practices for Production

11. Conclusion

12. References

Prerequisites

Before jumping into the setup, make sure you have the following requirements ready. These prerequisites ensure your environment is properly configured and you won’t get stuck midway through the integration.

First, you need a working Flutter installation on your system. Flutter must be correctly installed and configured so you can run apps on both iOS and Android. If you haven’t set this up yet, follow the official Flutter installation guide to prepare your development environment.

Next, you need a Firebase account. Firebase provides a web-based console where you’ll create a project that links to your Flutter app. You can sign up for free at the Firebase Console.

For a smoother integration process, I also highly recommend installing the Firebase CLI. The CLI enables the flutterfire configure command, which automatically links your Flutter project to Firebase and generates a firebase_options.dart file with all your platform-specific configurations. This step is optional, but it saves you time compared to manually adding configuration files. You can install the CLI by following Firebase CLI setup instructions.

Finally, ensure you have either an iOS simulator (via Xcode on macOS) or an Android emulator (via Android Studio or the command line) to test the integration. Crashlytics will only log crashes once the app has run on a real or simulated device.

With these prerequisites in place, you’re ready to move on to the actual integration steps.

Set Up the Flutter Project

The journey begins by creating a Flutter project. If you don’t already have one, run the following command from your terminal:

flutter create my_crashlytics_app
cd my_crashlytics_app

This generates the boilerplate structure for your Flutter app, giving us a foundation where we can add Firebase and Crashlytics.

Connect Flutter to Firebase

Before Crashlytics can work, your app must be connected to a Firebase project. Head over to the Firebase Console and create a new project. Think of the Firebase project as the “backend container” that manages all services, including analytics, authentication, and crash reporting.

Once the project is created, you need to register your Flutter apps with Firebase. Flutter supports both iOS and Android, so you’ll add both platforms.

On the iOS side, Firebase will guide you through adding an iOS app, downloading the GoogleService-Info.plist configuration file, and placing it inside the ios/Runner directory of your Flutter project. On Android, you’ll do something similar by downloading the google-services.json file and adding it to the android/app directory.

If you prefer a more streamlined approach, the Firebase CLI provides a flutterfire configure command. Running this will allow you to select your Firebase project and automatically generate a firebase_options.dart file for your Flutter app. This file centralizes your Firebase configuration and reduces manual setup.

Add the Required Dependencies

With Firebase linked, the next step is to bring in the necessary packages that enable Crashlytics. Flutter integrates with Firebase through plugins, which are small libraries that bridge Flutter and native SDKs. Open your pubspec.yaml file and add the following:

dependencies:
  firebase_core: ^4.0.0
  firebase_crashlytics: ^5.0.0

The firebase_core package initializes communication with Firebase, while firebase_crashlytics is the library that captures and reports crashes. Run flutter pub get to download and install these dependencies.

Initialize Crashlytics in main.dart

Now that the dependencies are installed, we need to initialize Firebase when the app starts and configure Crashlytics to capture both synchronous and asynchronous errors. Replace the contents of your lib/main.dart file with the following code:

import 'dart:ui';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';
import 'firebase_options.dart';
import 'presentation/home_screen.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  // Capture Flutter framework errors
  FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;

  // Capture uncaught asynchronous errors
  PlatformDispatcher.instance.onError = (error, stack) {
    FirebaseCrashlytics.instance.recordError(error, stack, fatal: true);
    return true;
  };

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Crashlytics Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

Let’s pause to unpack this. The FlutterError.onError line ensures that any error that occurs inside Flutter’s widget tree is reported as a fatal crash. The PlatformDispatcher.instance.onError captures errors outside of the widget tree, such as asynchronous exceptions, and reports them to Crashlytics as well. Together, these configurations ensure that virtually all unexpected issues are sent to Firebase.

Build a Simple Test Screen

To verify that Crashlytics works, let’s create a test screen where we can deliberately throw errors. Create a new folder called presentation in your lib directory, then inside it, create a file named home_screen.dart with the following content:

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Firebase Crashlytics App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 15),
            ElevatedButton(
              onPressed: () => throw Exception('Test Exception'),
              child: const Text('Throw Exception'),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                throw const FormatException('Custom format error occurred');
              },
              child: const Text('Throw Exception with Feedback'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

This screen provides two buttons: one that throws a general exception and another that throws a format exception. When clicked, these crashes are reported to Crashlytics. This makes it easy to test whether your setup is working correctly.

Run and Test the App

At this stage, run the app on an iOS simulator or Android emulator. Interact with the screen and press the buttons that throw exceptions. Even though the app will crash or display an error, Crashlytics will silently log the details and send them to Firebase once the app restarts and regains network connectivity.

Crashes usually take a couple of minutes to appear in the Firebase Console. Navigate to your project in the console, then go to Release & Monitor > Crashlytics. There, you will see a dashboard listing all recorded crashes, complete with stack traces, device information, and frequency of occurrence. The screenshots below showcase what you’ll be able to see on Crashlytics.

Understanding the Crashlytics Dashboard

The Crashlytics dashboard is more than just a list of crashes. It groups issues together so you can see how many users are affected by a specific bug. It highlights trends such as whether a particular crash is new, increasing, or decreasing. It also integrates with alerts, allowing you to get notified when a severe issue affects a significant portion of your users.

This means you don’t just learn that your app crashed, you also get actionable insights to prioritize which bugs need immediate attention.

Advanced Firebase Crashlytics in Flutter: Going Beyond the Basics

Once Crashlytics is successfully integrated into your Flutter app, the next step is to take full advantage of its advanced features. While catching crashes is useful, real-world debugging often requires context, deeper insights, and error handling strategies that go beyond simply knowing an app has failed. Let’s explore these advanced concepts.

How to Log Non-Fatal Errors

Not every problem in an application leads to a crash. Sometimes you’ll encounter recoverable errors, such as a failed API call, a parsing issue, or a user action that leads to unexpected behavior. These issues don’t crash your app but still affect user experience. Crashlytics allows you to record them as non-fatal errors.

In Flutter, you can use:

try {
  // Some code that might fail
  final result = int.parse("invalid_number");
} catch (e, stack) {
  FirebaseCrashlytics.instance.recordError(
    e,
    stack,
    fatal: false,
    reason: 'Number parsing failed in profile setup',
  );
}

Here, the fatal: false flag ensures the error is logged without being treated as a full app crash. The optional reason parameter provides extra human-readable context in the Crashlytics dashboard. This feature is invaluable for tracking silent failures that degrade performance but don’t necessarily kill your app.

How to Add Custom Keys for Context

One of the challenges with debugging crashes in production is reproducing the problem. A stack trace alone often doesn’t tell you enough about the user’s journey. Custom keys allow you to attach extra metadata to Crashlytics reports, such as the user’s app state, preferences, or which feature they were using when the crash occurred.

For example:

FirebaseCrashlytics.instance.setCustomKey('screen', 'CheckoutScreen');
FirebaseCrashlytics.instance.setCustomKey('cart_items', 3);
FirebaseCrashlytics.instance.setCustomKey('payment_method', 'Card');

With these keys set, any crash or non-fatal error that occurs while the user is on the checkout screen will carry this context. When you open the report in the Firebase Console, you’ll immediately see these values, which makes debugging significantly easier.

How to Log Custom Events and Breadcrumbs

In addition to custom keys, Crashlytics allows you to log custom messages that act as breadcrumbs. These are small logs that tell you what the app was doing leading up to a crash.

FirebaseCrashlytics.instance.log('User tapped "Place Order" button');
FirebaseCrashlytics.instance.log('API request started: /checkout');
FirebaseCrashlytics.instance.log('Payment process initialized');

If a crash happens afterward, you’ll have a trail of events that explain the sequence leading up to the failure. This is often the missing piece in diagnosing complex crashes.

How to Associate Crashes with Users

Crashlytics supports user identifiers, allowing you to link crashes back to specific users. While you should avoid storing sensitive data, you can safely attach unique identifiers such as user IDs, emails, or usernames.

FirebaseCrashlytics.instance.setUserIdentifier('user_12345');

With this, you can investigate whether specific users or groups of users are disproportionately affected by a bug. This also helps customer support teams quickly link bug reports from users to real data in Crashlytics.

How to Ensure Proper Symbolication

When you run your app in debug mode, stack traces are human-readable. But in release builds, especially on iOS and Android, stack traces can be obfuscated or stripped of symbols. Symbolication is the process of mapping these stripped traces back to meaningful method and class names.

On iOS, you’ll need to upload dSYM files (debug symbol files) to Firebase. These files are generated when you build your iOS app for release. You can automate the upload by adding a Run Script in Xcode under your project’s build settings:

"${PODS_ROOT}/FirebaseCrashlytics/upload-symbols" \
-gsp "${PROJECT_DIR}/Runner/GoogleService-Info.plist" \
-p ios "${DWARF_DSYM_FOLDER_PATH}/${DWARF_DSYM_FILE_NAME}"

This ensures that whenever you build a release, symbol files are automatically uploaded to Firebase.

On Android, if you’re using ProGuard or R8 for code shrinking and obfuscation, you’ll need to upload mapping files. In your app/build.gradle, enable the Crashlytics Gradle plugin:

apply plugin: 'com.google.firebase.crashlytics'

This plugin takes care of uploading the mapping files automatically when you build a release.

Without symbolication, your crash reports will contain unreadable stack traces, making debugging almost impossible. Ensuring proper symbol upload is critical for production-level monitoring.

How to Controll Data Collection

In some cases, such as adhering to GDPR or other data privacy laws, you may want to control when Crashlytics starts collecting data. Flutter gives you a way to enable or disable collection dynamically:

await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(false);

You can turn this on once the user has given consent. This flexibility is especially useful in regions with strict user privacy requirements.

Best Practices for Production

1. Test before release: Always trigger crashes in debug mode and confirm they appear in the Crashlytics dashboard before deploying your app.

2. Use non-fatal logs liberally: Many silent issues can be caught this way before they escalate into widespread crashes.

3. Automate symbol uploads: Make sure your CI/CD or build pipeline uploads dSYM (iOS) and mapping files (Android) consistently.

4. Add context with custom keys and logs: The more context you attach, the faster you can reproduce and fix bugs.

5. Respect privacy: Never log personally identifiable or sensitive information.

Conclusion

Integrating Firebase Crashlytics into a Flutter app is a straightforward process, but its impact is massive. By providing real-time crash reporting and detailed analytics, Crashlytics helps you maintain stability, build user trust, and ultimately deliver a better app experience. From setting up the Firebase project to capturing both synchronous and asynchronous errors, we’ve gone through everything you need to get started.

Crashlytics goes far beyond crash reporting. By leveraging features like non-fatal error logging, custom keys, breadcrumbs, and user identifiers, you can transform raw crash data into meaningful insights that directly improve your debugging process.

With proper symbolication in place, you’ll always have readable stack traces, making it much easier to fix issues in production. With this advanced setup, Crashlytics becomes not just a safety net, but a core part of your development workflow, helping you ship stable apps, respond quickly to issues, and build trust with your users.

The next step is to deploy your app to real devices and monitor crashes as they happen in the wild. Over time, Crashlytics will become one of your most valuable tools in maintaining app quality.

References

• Flutter Documentation – Install Flutter

• Firebase Documentation – Firebase Console

• Firebase Documentation – Add Firebase to your Flutter App

• Firebase Crashlytics for Flutter – firebase_crashlytics Package

• Firebase Core for Flutter – firebase_core Package

• Firebase Documentation – Firebase Crashlytics Overview

• Firebase Documentation – Upload dSYM Files (iOS)

• Firebase Documentation – Upload ProGuard/R8 Mapping Files (Android)

• Firebase CLI – Install and Configure Firebase CLI

Instead of manually creating test users, products, or other entities every time you reset your database, seed files automate this process, ensuring every team member works with identical data sets.

The benefits of using seed files go far beyond convenience. They provide consistent test data across different environments, dramatically faster development setup times, and truly reproducible environments that eliminate the "it works on my machine" problem. When your entire team can spin up identical databases with realistic data in seconds, everyone can develop significantly faster and debugging becomes more predictable.

Firebase, Google's backend-as-a-service (BaaS) platform, offers an excellent foundation for implementing seed files thanks to its flexible NoSQL structure and robust Node.js SDK. Firestore's document-based architecture naturally accommodates the varied data types and relationships commonly found in seed files. At the same time, Firebase's real-time capabilities make sure that your seeded data immediately reflects across all connected clients.

Seed files prove most valuable during initial project setup, feature development requiring specific data configurations, automated testing scenarios, and when onboarding new team members. They're particularly crucial when working with complex data relationships or when your application requires substantial amounts of interconnected data to function properly.

This article will guide you through creating comprehensive seed files for Firebase-powered Node.js applications, covering everything from basic setup to advanced techniques for managing complex data relationships and environment-specific configurations.

Table of Contents

1. Prerequisites

2. How to Set Up Firebase for Your Node.js Application

3. How to Plan Your Seed Data Structure

4. How to Create Basic Seed Files

5. How to Build Complex Data Relationships

6. How to Manage Seed Scripts

7. Environment-Specific Seeding

8. How to Integrate All This into Your Development Workflow

9. How to Document Your Seeding Practices

   • Create a Seeding Guide

   • Environment Configuration Documentation

10. How to Write Automated Tests for Seed Data

    • Install Testing Dependencies

    • Test Seed Data Structure

    • Test Raw Seed Data Files

    • Add Test Scripts to package.json

    • Create Jest Configuration

11. Conclusion

Prerequisites

Before getting started, you’ll need Node.js 24 or higher running on your system because the Admin SDK requires modern JavaScript features. You also need to have an active Firebase project with Firestore enabled, which you can create through the Firebase Console.

You should also know ES6+ JavaScript features in general and async/await syntax and destructuring in particular, as these will be helpful when going through the code examples.

A rudimentary understanding of NoSQL database theory, especially document-based storage and collections, will also help, as Firestore stresses being in opposition to traditional relational databases.

Finally, a little knowledge of the Firebase security model and authentication system will go a long way in ensuring that you can safely implement seed files in different environments.

To create a Firebase project and enable the Firestore database, read this guide.

How to Set Up Firebase for Your Node.js Application

You’ll start by installing the server-side SDK, which allows access to Firebase services without user authentication. This SDK fits well in a trusted server environment that needs complete admin privileges for a Firebase project:

npm install firebase-admin dotenv

The installation also brings in dotenv, which lets you securely maintain environment variables, something very important when handling Firebase credentials in varying deployment environments.

Next, you’ll need to configure your Firebase project by navigating to the Firebase Console. There, you can first create a service account: Go to Project Settings > Service Accounts, then generate a new private key. This JSON file holds the credentials that will allow your apps to communicate with Firebase services. Store it safely and never commit it to your source version control.

Now you’ll need to create a Firebase initialization module to hold the code connecting to your Firestore database.

For example:

// config/firebase.js
const admin = require('firebase-admin');
require('dotenv').config();

const serviceAccount = {
  type: "service_account",
  project_id: process.env.FIREBASE_PROJECT_ID,
  private_key_id: process.env.FIREBASE_PRIVATE_KEY_ID,
  private_key: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n'),
  client_email: process.env.FIREBASE_CLIENT_EMAIL,
  client_id: process.env.FIREBASE_CLIENT_ID,
  auth_uri: "https://accounts.google.com/o/oauth2/auth",
  token_uri: "https://oauth2.googleapis.com/token",
  auth_provider_x509_cert_url: "https://www.googleapis.com/oauth2/v1/certs"
};

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: `https://${process.env.FIREBASE_PROJECT_ID}.firebaseio.com`
});

const db = admin.firestore();
module.exports = { admin, db };

This configuration module uses environment variables to securely store sensitive Firebase credentials while providing a clean interface for database operations throughout your application. The service account credentials enable full read/write access to your Firestore database, which is necessary for seed operations.

How to Plan Your Seed Data Structure

Effective seed data requires careful planning to make sure that it accurately reflects your application's real-world usage patterns. Start by analyzing your application's core entities and their relationships, identifying which collections are fundamental to your app’s operation and which depend on others.

Consider a typical e-commerce application structure where users create orders containing products from various categories. Your seed data should establish these relationships logically, ensuring referential integrity across collections. Users should exist before orders, products should belong to valid categories, and orders should reference existing users and products.

Designing seed data is pivotal to supporting different development scenarios. Users should be created with various roles and permissions, products should be scattered across multiple categories and different price ranges, and orders should be put into varying states (like pending, completed, or cancelled). This diversity in your data allows you to test various code paths and edge cases without manually creating certain data combinations.

You’ll also need to determine suitable data volumes for each environment. For quicker testing in development environments, 10-50 records per collection should be sufficient. But for staging environments, you could simulate production load by having hundreds or thousands of records. Testing environments usually need bare minimum, tightly-controlled data that supports particular test scenarios.

You should arrange your seed data by environments and purposes, having separate data sets for unit testing, integration testing, and general development. This way, teams can test for different reasons against a dataset without interfering with one another.

How to Create Basic Seed Files

You’ll want to provide the seed scripts with an organized file structure so everything stays organized as the application grows. Create a folder called seeds with subfolders for various collections and environments like this:

seeds/
├── data/
│   ├── users.js
│   ├── products.js
│   └── categories.js
├── scripts/
│   ├── seedUsers.js
│   ├── seedProducts.js
│   └── seedAll.js
└── index.js

Separating raw data and seeding logic makes it easier to change data without modifying insertion scripts. Begin with a simple user seed script that covers the basics.

For example:

// seeds/scripts/seedUsers.js
const { db } = require('../../config/firebase');
const users = require('../data/users');

async function seedUsers() {
  console.log('Starting user seeding...');

  try {
    const batch = db.batch();
    const usersCollection = db.collection('users');

    for (const userData of users) {
      const docRef = usersCollection.doc(); // Auto-generated ID
      batch.set(docRef, {
        ...userData,
        createdAt: new Date(),
        updatedAt: new Date()
      });
    }

    await batch.commit();
    console.log(`Successfully seeded ${users.length} users`);
  } catch (error) {
    console.error('Error seeding users:', error);
    throw error;
  }
}

module.exports = seedUsers;

The principal features of the script involve: batch operations for efficiency, automatic timestamp generation, error handling with meaningful logging, and auto-generated document IDs. Batch operations are essential for performance, as they minimize the number of network calls and provide atomicity.

Now, create the relevant data files that’ll hold the actual seed data, distinct from the seeding logic.

For example:

// seeds/data/users.js
module.exports = [
  {
    email: 'admin@example.com',
    firstName: 'Admin',
    lastName: 'User',
    role: 'admin',
    isActive: true,
    preferences: {
      theme: 'dark',
      notifications: true
    }
  },
  {
    email: 'user@example.com',
    firstName: 'Regular',
    lastName: 'User',
    role: 'user',
    isActive: true,
    preferences: {
      theme: 'light',
      notifications: false
    }
  }
];

This separation makes it straightforward to alter seed data without the need to modify seeding logic itself. It facilitates quick adjustments of data for different environments or testing scenarios.

How to Build Complex Data Relationships

With every application that grows in complexity, you’ll need to employ some potentially advanced techniques to handle things like relationship-building among collections and data consistency. You can ensure correct referencing during seeding of related collections by storing document IDs and using those IDs in dependent collections.

You can create a seed system that takes care of collection dependencies automatically like this:

// seeds/scripts/seedWithReferences.js
const { db } = require('../../config/firebase');

async function seedWithReferences() {
  console.log('Starting advanced seeding with references...');

  // First, seed categories and store their IDs
  const categoryIds = await seedCategories();

  // Then, seed products with category references
  const productIds = await seedProducts(categoryIds);

  // Finally, seed orders with product references
  await seedOrders(productIds);
}

async function seedCategories() {
  const categories = [
    { name: 'Electronics', description: 'Electronic devices and gadgets' },
    { name: 'Books', description: 'Physical and digital books' }
  ];

  const categoryIds = [];
  const batch = db.batch();

  for (const category of categories) {
    const docRef = db.collection('categories').doc();
    batch.set(docRef, {
      ...category,
      createdAt: new Date()
    });
    categoryIds.push({ id: docRef.id, name: category.name });
  }

  await batch.commit();
  console.log(`Seeded ${categories.length} categories`);
  return categoryIds;
}

async function seedProducts(categoryIds) {
  const products = [
    {
      name: 'Smartphone',
      price: 599.99,
      categoryName: 'Electronics',
      stock: 100
    },
    {
      name: 'JavaScript Guide',
      price: 29.99,
      categoryName: 'Books',
      stock: 50
    }
  ];

  const productIds = [];
  const batch = db.batch();

  for (const product of products) {
    const category = categoryIds.find(cat => cat.name === product.categoryName);
    const docRef = db.collection('products').doc();

    batch.set(docRef, {
      name: product.name,
      price: product.price,
      stock: product.stock,
      categoryId: category.id,
      categoryName: category.name,
      createdAt: new Date()
    });

    productIds.push({ id: docRef.id, name: product.name, price: product.price });
  }

  await batch.commit();
  console.log(`Seeded ${products.length} products`);
  return productIds;
}

This guarantees that relationships between collections will be properly maintained while the actual seeding takes place, which prevents any orphaned records and maintains referential integrity. IDs are returned by the function and can be used by dependent collections to create an obvious dependency chain.

To create realistic fake data, you can use the Faker.js library to churn out huge volumes of different variations of realistic-looking data.

For example:

const { faker } = require('@faker-js/faker');

function generateFakeUsers(count = 100) {
  const users = [];

  for (let i = 0; i < count; i++) {
    users.push({
      email: faker.internet.email(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
      dateOfBirth: faker.date.birthdate(),
      address: {
        street: faker.location.streetAddress(),
        city: faker.location.city(),
        country: faker.location.country(),
        zipCode: faker.location.zipCode()
      },
      phone: faker.phone.number(),
      isActive: faker.datatype.boolean(0.9), // 90% active users
      registrationDate: faker.date.past()
    });
  }

  return users;
}

Using this technique, you can quickly generate large volumes of realistically behaving test data, especially for performance testing and making sure your application handles all kinds of data scenarios well.

How to Manage Seed Scripts

A good seed script management system should give you flexibility in executing and maintaining your scripts. Here, you will develop one main seeding script that will initiate the entire seed process.

You’ll want to avoid unconditional seeding so that the existing data is not unintentionally overwritten.

Here is an example of how to do that:

// seeds/index.js
const seedUsers = require('./scripts/seedUsers');
const seedCategories = require('./scripts/seedCategories');
const seedProducts = require('./scripts/seedProducts');
const { db } = require('../config/firebase');

async function clearCollection(collectionName) {
  console.log(`Clearing ${collectionName} collection...`);
  const snapshot = await db.collection(collectionName).get();
  const batch = db.batch();

  snapshot.docs.forEach(doc => {
    batch.delete(doc.ref);
  });

  if (snapshot.docs.length > 0) {
    await batch.commit();
    console.log(`Cleared ${snapshot.docs.length} documents from ${collectionName}`);
  }
}

async function runSeeds(options = {}) {
  const { clear = false, collections = ['users', 'categories', 'products'] } = options;

  try {
    if (clear) {
      for (const collection of collections.reverse()) {
        await clearCollection(collection);
      }
    }

    // Run seeds in dependency order
    if (collections.includes('users')) await seedUsers();
    if (collections.includes('categories')) await seedCategories();
    if (collections.includes('products')) await seedProducts();

    console.log('All seeding completed successfully!');
  } catch (error) {
    console.error('Seeding failed:', error);
    process.exit(1);
  }
}

// Command line interface
if (require.main === module) {
  const args = process.argv.slice(2);
  const clear = args.includes('--clear');
  const collections = args.includes('--collections') 
    ? args[args.indexOf('--collections') + 1].split(',') 
    : undefined;

  runSeeds({ clear, collections });
}

module.exports = { runSeeds, clearCollection };

This management system provides a clean interface for running seeds with several options, such as clearing data or seeding some particular collections. The CLI can be easily plugged into npm package.json scripts and CI/CD pipelines.

Make sure you perform conditional seeding to avoid overwriting existing data:

async function conditionalSeed(collectionName, seedFunction) {
  const snapshot = await db.collection(collectionName).limit(1).get();

  if (snapshot.empty) {
    console.log(`${collectionName} collection is empty, proceeding with seeding...`);
    await seedFunction();
  } else {
    console.log(`${collectionName} collection already contains data, skipping...`);
  }
}

Here, the collections are checked for existing data before seeding, which helps prevent accidental data loss. It’s safe to run seed scripts more than once.

Environment-Specific Seeding

You can make your seed system environment-aware by structuring environment-specific data sets and configurations. Use environment variables to decide which dataset will be used:

// seeds/data/index.js
const development = require('./development');
const staging = require('./staging');
const test = require('./test');

const data = {
  development,
  staging,
  test
};

module.exports = data[process.env.NODE_ENV || 'development'];

You’ll create separate data files for each environment, with proper volumes and characteristics. Development environments should have minimal data that is nice and easy to understand, while staging environments can afford larger datasets that resemble production conditions better.

You can prevent accidental seeding via safety measures in production environments like this:

async function safeProductionSeed() {
  if (process.env.NODE_ENV === 'production') {
    const confirmation = process.env.CONFIRM_PRODUCTION_SEED;
    if (confirmation !== 'YES_I_AM_SURE') {
      console.error('Production seeding requires explicit confirmation');
      process.exit(1);
    }
  }

  // Proceed with seeding...
}

The protection requires an explicit confirmation to seed production databases, preventing accidental loss or corruption of data.

How to Integrate All This into Your Development Workflow

Your seed scripts should ideally be integrated into your development workflow by adding suitable npm scripts to the package.json:

{
  "scripts": {
    "seed": "node seeds/index.js",
    "seed:clear": "node seeds/index.js --clear",
    "seed:users": "node seeds/index.js --collections users",
    "seed:dev": "NODE_ENV=development npm run seed",
    "seed:test": "NODE_ENV=test npm run seed:clear",
    "dev": "npm run seed:dev && npm start",
    "test": "npm run seed:test && npm run test:unit"
  }
}

The scripts provide an easy way of seeding data for various common task scenarios and for plugging into the Dev and Test workflows. The dev script automatically seeds the database before starting the development server, ensuring developers always work with fresh, consistent data.

How to Document Your Seeding Practices

Proper documentation will really help your team and make long-term maintenance of your seeding system easier. Without it, your team members may have to search for the commands to run or squander time trying to figure out what data exists for a certain environment. Even worse, they might make ill-advised changes to the seed files.

Good documentation should answer three questions: How do I use the seeding system? What data exists and why? How do I extend or safely modify the system? Creating extensive documentation that addresses these items is our goal.

Create a Seeding Guide

Let's begin by creating a documentation file for the seeding system. This file should be placed in the root directory of the project so it’s always easy for team members to find.

# Database Seeding Guide

## Seed Commands
- To seed the database with fresh data for development: `npm run seed`
- To clear all existing data and reseed completly: `npm run seed:clear`
- To seed only the users collection: `npm run seed:users`
- To seed at a development data volume: `npm run seed:dev`
- To seed at a production data volume: `npm run seed:staging`

## Environment Data Sets
- **Development**: 10-50 records per collection for fast local testing quick iteration
- **Staging**: 100-1000 records for production-like-load-testing and performance evaluation
- **Test**: Stripped-down controlled data specially designed for automated testing scenarios

## Collection Dependencies
Our seeding system respects data relationships by running in this specific order:
1. Categories (no dependencies) - Product categories must first exist
2. Users (no dependencies) - User accounts are independent
3. Products (requires Categories) - Each product looks up a category
4. Orders (requires Users and Products) - Orders look up users and products

## Safety-Features
- Check automatically if there already is data that is about to seed to prevent accidental overwrites
- Production environment needs explicit confirmation with CONFIRM_PRODUCTION_SEED=YES_I_AM_SURE
- All database operations use atomic batch writes to guarantee consistency
- Conditional seeding makes sure duplicate data is not created when running scripts multiple times

### Adding New Seed Data
1. Add your data under `/seeds/data/[collection].js`
2. If your new data has relationships, update the corresponding seeding script
3. Test thoroughly in your development environment
4. Run the automated tests to verify data integrity
5. Update this documentation accordingly if you add commands or data descriptions

This documentation format provides immediate answers to common questions team members might have. The commands give a copy-pastable set of instructions, while the environment descriptions allow developers to know what to expect from each setting.

The dependencies section is vital because it prevents team members from unknowingly breaking associations by running seeds in an incorrect order. The safety features section makes sure people have confidence that the system won't accidentally delete important data.

Environment Configuration Documentation

An environment variable may be confusing and troublesome if it is not properly documented. So you should create a template detailing exactly what's needed and why each variable matters.

# Firebase Service Account Configuration
# Get these values from Firebase Console > Project Settings > Service Accounts
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n"
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-xxx@project.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY_ID=your-private-key-id
FIREBASE_CLIENT_ID=your-client-id

# Application Environment
# Controls which data set is used (development/staging/test/production)
NODE_ENV=development

# Production Safety Flag - ONLY set this in production environments
# This prevents accidental seeding of production databases
# CONFIRM_PRODUCTION_SEED=YES_I_AM_SURE

# Optional: Customize data volumes per environment
# SEED_USER_COUNT=50
# SEED_PRODUCT_COUNT=200

This is where .env.example comes into its own. It shows developers exactly what variables they need to set, gives context about where to find the values, and adds safety warnings about production usage. In the comments, it doesn't just disclose what the variable should do, but also tells why we need it and how to obtain the values.

How to Write Automated Tests for Seed Data

Testing your seed scripts might seem unnecessary, but it becomes critical as your application grows. Without tests, changes to your data structure might break the seeding system, relationships might not be maintained correctly, and your seed data might get outdated as the application evolves.

Automated tests on seed data test for three key things: making sure the raw data files have the proper information, the process for seeding records is actually working, and relationships between data are kept intact. Let's create a full-fledged testing suite to cover all these scenarios.

Install Testing Dependencies

Before writing tests, you'll need Jest as your testing framework. Jest supports async operations very well, which is necessary when writing tests against databases.

npm install --save-dev jest

Since it supports promises and async/await, Jest is well-suited to test Firebase operations. But you will need to configure it for your particular Firebase setup. You'll learn how to do that in the following sections.

Test Seed Data Structure

The first kind of tests verify if your seed actually works and creates data with the right structure. These tests run the actual seed scripts and check the database to see if things were created as expected.

const { db } = require('../config/firebase');
const { runSeeds, clearCollection } = require('../seeds/index');

describe('Seed Data Tests', () => {
  beforeAll(async () => {
    // Ensure we're using test environment to avoid affecting other data
    process.env.NODE_ENV = 'test';
    // Start with a clean slate by clearing and reseeding all data
    await runSeeds({ clear: true });
  });

  afterAll(async () => {
    // Clean up test data to avoid cluttering the test database
    await clearCollection('users');
    await clearCollection('categories'); 
    await clearCollection('products');
  });

  test('users collection has correct structure', async () => {
    const snapshot = await db.collection('users').limit(1).get();
    expect(snapshot.empty).toBe(false);

    const user = snapshot.docs[0].data();
    expect(user).toHaveProperty('email');
    expect(user).toHaveProperty('firstName');
    expect(user).toHaveProperty('lastName');
    expect(user).toHaveProperty('role');
    expect(user).toHaveProperty('createdAt');
    expect(user).toHaveProperty('updatedAt');
  });

  test('products maintain referential integrity with categories', async () => {
    const [productsSnapshot, categoriesSnapshot] = await Promise.all([
      db.collection('products').get(),
      db.collection('categories').get()
    ]);

    const categoryIds = categoriesSnapshot.docs.map(doc => doc.id);

    productsSnapshot.docs.forEach(productDoc => {
      const product = productDoc.data();
      expect(product).toHaveProperty('categoryId');
      expect(categoryIds).toContain(product.categoryId);
    });
  });

  test('seed scripts handle existing data correctly', async () => {
    // Get initial count after first seeding
    const initialSnapshot = await db.collection('users').get();
    const initialCount = initialSnapshot.size;

    // Run seeds again - should not create duplicates
    await runSeeds({ collections: ['users'] });

    const finalSnapshot = await db.collection('users').get();
    expect(finalSnapshot.size).toBe(initialCount);
  });
});

There are three basic things that these tests check for your seed system. The structure test makes sure seeded documents have all the necessary fields – if you add a required field to your application but fail to update the seed data, this test will alert you.

The referential integrity test is vital to enforce the intended relationships between the data. It makes sure that every product actually references a category existing in the database. If you don't have this test, you can accidentally create orphaned records that break the application.

The duplicate-handling test preserves the idempotency of your seeding system-it can be executed multiple times without duplicate data being generated. This is important since developers often resettle their local databases in their development workflow.

Test Raw Seed Data Files

Before putting your raw seed data into the database, it should be tested. Such checks let you catch problems with the data itself before they cause issues in your application.

These validation tests will resolve most data-quality concerns before they reach your database. That is, email verification ensures every user email is in correct format-otherwise the users would face authentication issues later. Role verification would also prevent misspellings of assignment names that could destroy your authorization system.

Category reference is very important for enforcing data-level relationships before seeding even starts. If someone adds a product referencing a non-existent category, this test will blow up immediately.

The duplicate email test addresses a common issue where a user can accidentally be assigned the same email address, which violates any unique constraints in your application.

Add Test Scripts to package.json

Adding npm scripts will make your tests easier to run. Testing then becomes a part of your regular development workflow.

{
  "scripts": {
    "test:seeds": "jest tests/seedData.test.js",
    "test:seed-validation": "jest tests/seedDataValidation.test.js",
    "test:all-seeds": "npm run test:seed-validation && npm run test:seeds",
    "dev:safe": "npm run test:seed-validation && npm run seed:dev && npm start"
  }
}

Here, test:all-seeds runs both sets of tests in the right order-from checking the raw data all the way to testing the seeding process. dev:safe is an example seed test integration into the developer flow – seed testing is assured before you run the development server.

Create Jest Configuration

Set up Jest to best accommodate Firebase operations, which tend to be longer than typical unit tests and creation of special timeouts.

// jest.config.js
module.exports = {
  testEnvironment: 'node',
  testTimeout: 30000, // Firebase operations can be slow, especially batch writes
  setupFilesAfterEnv: ['<rootDir>/tests/setup.js'],
  // Only run test files, ignore seed data files
  testMatch: ['**/tests/**/*.test.js']
};

// tests/setup.js
// Global test configuration that applies to all test files

// Ensure all tests run in test environment
process.env.NODE_ENV = 'test';

// Increase timeout for Firebase operations
jest.setTimeout(30000);

// Optional: Add global test utilities
global.testDb = require('../config/firebase').db;

This configuration entails setting a longer timeout for the tests since Firebase operations, especially batch writes, can take a number of seconds. Also, this setup file makes sure all the tests run in the test environment so that you don’t mistakenly alter any development data.

JestConfig also states that files with a name ending in .test.js are the only ones to be considered tests, preventing Jest from considering your seed data files as tests.

A complete test and documentation will transform your seeding system from a mere utility to a solid, maintainable component of your development infrastructure. Documentation serves to empower the team to use this system with confidence, while tests identify issues before they trickle into development or production environments.

Conclusion

Seed files are a crucial element in a modern application's building blocks that ensure a uniform, reproducible development environment for samples. When you implement advanced seeding processes using a combination of Firebase and Node.js, you get a potent system that acts as a development accelerator, fostering testing reliability and consistency among your team members.

The methods discussed in this article, from basic file management up to intricate relationship handling and environment-specific configurations, provide you with the framework necessary to implement seed files effectively in your Firebase Node.js setups. As your application grows, these patterns will grow with you, supporting anything from just a simple development environment to some really complex multi-environment deployments.

You can explore the official seed docs to see more advanced seeding patterns and examples. You can also reach out to me for any questions or collaboration.

I hope you found this guide helpful! 🙂

The synergy between Flutter and Firebase allows developers to build feature-rich, high-performance applications with remarkable efficiency.

This article will give you a deep dive into integrating and leveraging a wide array of Firebase services within your Flutter applications. We'll explore the FlutterFire ecosystem, I’ll explain essential code snippets, and clarify how the Firebase Console serves as your primary management interface. You’ll also learn about the evolving concept of "Firebase Studio" as an advanced development environment.

Prerequisites

To gain the most from this deep dive into building cutting-edge Flutter applications with Firebase, there are some tools and key concepts you should know. This article assumes you have:

1. Fundamental Programming Knowledge

• Basic Programming Concepts: Familiarity with concepts such as variables, data types, control flow (loops, conditionals), functions, and object-oriented programming (OOP) principles (classes, objects, inheritance, encapsulation).

• Dart Programming Language: As Flutter's primary language, a working knowledge of Dart syntax, asynchronous programming (Futures, async/await), and collection types (Lists, Maps) is essential. While this article will focus on application building, a prior grasp of Dart will significantly accelerate your learning.

2. Flutter Development Environment

• Flutter SDK Installed: You should have the Flutter SDK correctly installed and configured on your operating system (Windows, macOS, or Linux). This includes:

  • The Flutter command-line tool (flutter).

  • Necessary supporting libraries and platform-specific SDKs (for example, Android SDK, Xcode for iOS development on macOS).

  • You can verify your setup by running flutter doctor in your terminal and resolving any reported issues.

• Integrated Development Environment (IDE):

  • VS Code (with Flutter and Dart extensions): Highly recommended for its lightweight nature and powerful extensions for Flutter development.

  • Android Studio (with Flutter and Dart plugins): A robust option, especially if you're heavily involved in native Android development.

• Device or Emulator Setup:

  • Android Emulator: Configured and running via Android Studio.

  • iOS Simulator (macOS only): Configured and running via Xcode.

  • Physical Device: An Android or iOS device with USB debugging enabled for real-world testing.

• Basic Flutter Application Development: You should be able to:

  • Create a new Flutter project (flutter create).

  • Understand the basic widget tree structure (StatelessWidget, StatefulWidget).

  • Run a simple "Hello World" Flutter application on an emulator or physical device.

3. Firebase Account and Console Familiarity

• Google Account: A valid Google account is required to access and use Firebase.

• Firebase Project: You should have a basic understanding of what a Firebase project is and how to create one via the Firebase Console.

• Familiarity with Firebase Console: Basic navigation and understanding of the different services available in the Firebase Console (for example, Authentication, Firestore, Storage).

• Firebase CLI (Command Line Interface): While not strictly required for every step, installing and being able to log in to the Firebase CLI (firebase login) is highly recommended for tasks like deploying Cloud Functions or interacting with your Firebase project from the terminal.

• FlutterFire CLI: For streamlined Firebase integration in Flutter, installing the FlutterFire CLI (dart pub global activate flutterfire_cli) is essential for commands like flutterfire configure.

4. Optional but Recommended

• Version Control (Git): Familiarity with Git for managing your project's codebase.

• Command Line Basics: Comfort with navigating directories and executing commands in your terminal.

• Cloud Concepts: A general understanding of cloud services, databases (NoSQL vs. SQL), and serverless computing will be beneficial but not strictly necessary to follow the core concepts.

• Firebase Studio: While you can follow this article without it, exploring Firebase Studio (formerly Project IDX) can significantly enhance your development experience by providing an AI-assisted, cloud-based IDE with deep Firebase integration.

Table of Contents:

• 1. The Foundation: Setting Up Your Firebase Project and FlutterFire

• 2. Deep Dive into Core Firebase Services with Flutter

• 3. Other Valuable Firebase Services for Flutter

• 4. Firebase Local Emulators: Developing Offline and Faster

• 5. Continuous Integration and Deployment (CI/CD) with Firebase & Flutter

• Conclusion

• References

1. The Foundation: Setting Up Your Firebase Project and FlutterFire

Before diving into specific services, we need to establish the connection between your Flutter project and Firebase.

Creating a Firebase Project:

Your Firebase journey begins in the Firebase Console (console.firebase.google.com). This web-based interface is where you'll create, configure, and monitor all your Firebase projects and services.

1. Navigate to the console: Open your web browser and go to console.firebase.google.com.

2. Sign in: Use your Google account credentials.

3. Create a new project: Click "Add project" or "Create a project."

4. Add your project details:

   • Project name: Choose a descriptive name (for example, "MyFlutterAwesomeApp").

   • Project ID: Firebase automatically generates a unique ID. This ID is critical as it identifies your project across all Firebase and Google Cloud services. You can customize it if desired, ensuring it's globally unique.

   • Google Analytics: Strongly recommended. Google Analytics provides vital insights into user behavior, app usage, and performance metrics, which are invaluable for optimizing your Flutter app.

5. Finalize Creation: Click "Create project." Firebase will provision the necessary cloud resources.

Integrating FlutterFire:

FlutterFire is the official suite of Firebase plugins for Flutter. The flutterfire_cli simplifies the setup process.

Step 1: Install Firebase CLI

If you haven't already, install the Firebase Command Line Interface globally via npm:

npm install -g firebase-tools

This tool allows you to interact with Firebase from your terminal, including project initialization and deployment.

Step 2: Log In to Firebase CLI

Authenticate your CLI with your Google account:

firebase login

Step 3: Install FlutterFire CLI

Activate the FlutterFire CLI globally using Dart's package manager:

dart pub global activate flutterfire_cli

This tool automates the platform-specific configuration for your Flutter app.

Step 4: Create/Navigate to your Flutter Project

flutter create my_deep_dive_app
cd my_deep_dive_app

Step 5: Configure Firebase for Flutter

Run the flutterfire configure command from your Flutter project's root directory.

flutterfire configure

Here’s what’s going on:

• This command is the magic wand. It interacts with your Firebase project, registers your Flutter app's Android, iOS, and Web platforms (you'll select which ones to enable), and automatically generates the lib/firebase_options.dart file.

• firebase_options.dart contains the platform-specific Firebase configuration details (API keys, project IDs, and so on) that your Flutter app needs to connect to Firebase. This eliminates manual configuration for each platform.

Step 6: Add the firebase_core Dependency

Open your pubspec.yaml file (located at the root of your Flutter project) and add firebase_core to your dependencies. This plugin is the foundational layer for all other Firebase services.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.x.x # Use the latest stable version from pub.dev

Run flutter pub get in your terminal to fetch the new dependency.

Step 7: Initialize Firebase in main.dart

Before your Flutter application runs, you must initialize Firebase. You typically do this in the main function.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart'; // This file is generated by `flutterfire configure`

Future<void> main() async {
  // Ensures that Flutter's widget binding is initialized before Firebase is initialized.
  // This is crucial for asynchronous operations like Firebase.initializeApp().
  WidgetsFlutterBinding.ensureInitialized();

  // Initializes Firebase for the current platform.
  // DefaultFirebaseOptions.currentPlatform uses the configuration from firebase_options.dart
  // based on whether the app is running on Android, iOS, or Web.
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase Deep Dive',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const AuthWrapper(), // We'll use this for authentication flow
    );
  }
}

// Placeholder for AuthWrapper which will manage authentication state
class AuthWrapper extends StatelessWidget {
  const AuthWrapper({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Firebase Deep Dive')),
      body: const Center(
        child: Text('Firebase Initialized. Ready for action!'),
      ),
    );
  }
}

Here’s what’s going on:

• WidgetsFlutterBinding.ensureInitialized(): This line is vital. It makes sure that the Flutter engine is fully initialized before attempting to perform any asynchronous operations, such as calling Firebase.initializeApp().

• await Firebase.initializeApp(...): This is the core Firebase initialization. It sets up the connection to your Firebase project.

• DefaultFirebaseOptions.currentPlatform: This static property from the generated firebase_options.dart file automatically selects the correct Firebase configuration for the platform your Flutter app is currently running on (iOS, Android, or Web).

2. Deep Dive into Core Firebase Services with Flutter

Now, let's explore the individual Firebase services and how to interact with them in Flutter. For each service, you'll typically add a new FlutterFire plugin to your pubspec.yaml and then enable the service in the Firebase Console.

Firebase Authentication: Identity Management Made Easy

Firebase Authentication simplifies user authentication, offering various methods without requiring you to manage backend servers. Let’s walk through the setup now.

Step 1: Add Dependency

dependencies:
  # ...
  firebase_auth: ^latest_version # Check pub.dev for the latest

Run flutter pub get.

Step 2: Enable Providers (Firebase Console)

Go to "Authentication" -> "Sign-in method." Enable desired providers like "Email/Password," "Google," "Facebook," and so on. Follow the on-screen instructions for each (for example, providing API keys for social providers).

Here’s the code. It’s a lot, so I’ve added comments and explained key points after:

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart'; // For UI elements like SnackBar

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  // Stream to listen to authentication state changes (User logged in/out)
  Stream<User?> get user {
    return _auth.authStateChanges();
  }

  // Register with Email and Password
  Future<User?> registerWithEmailAndPassword(String email, String password) async {
    try {
      // Creates a new user account with the provided email and password.
      // On success, returns a UserCredential object containing the newly created user.
      UserCredential result = await _auth.createUserWithEmailAndPassword(
        email: email,
        password: password,
      );
      return result.user; // Return the User object
    } on FirebaseAuthException catch (e) {
      // Catch specific Firebase authentication exceptions for better error handling
      print("FirebaseAuthException during registration: ${e.code} - ${e.message}");
      // You can display a user-friendly message based on e.code
      if (e.code == 'weak-password') {
        // Handle weak password
      } else if (e.code == 'email-already-in-use') {
        // Handle email already registered
      }
      return null;
    } catch (e) {
      // Catch any other general exceptions
      print("General error during registration: $e");
      return null;
    }
  }

  // Sign in with Email and Password
  Future<User?> signInWithEmailAndPassword(String email, String password) async {
    try {
      // Signs in an existing user with email and password.
      UserCredential result = await _auth.signInWithEmailAndPassword(
        email: email,
        password: password,
      );
      return result.user;
    } on FirebaseAuthException catch (e) {
      print("FirebaseAuthException during sign-in: ${e.code} - ${e.message}");
      if (e.code == 'user-not-found') {
        // Handle no user found
      } else if (e.code == 'wrong-password') {
        // Handle incorrect password
      }
      return null;
    } catch (e) {
      print("General error during sign-in: $e");
      return null;
    }
  }

  // Sign out
  Future<void> signOut() async {
    try {
      // Signs out the currently authenticated user.
      await _auth.signOut();
      print("User signed out successfully.");
    } catch (e) {
      print("Error signing out: $e");
    }
  }

  // Example: Google Sign-In (requires additional setup for iOS/Android/Web)
  // This is a simplified example, a full implementation involves more steps
  // with google_sign_in package.
  Future<User?> signInWithGoogle() async {
    try {
      // Trigger the Google Sign-In flow
      // final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
      // final GoogleSignInAuthentication googleAuth = await googleUser!.authentication;

      // Create a new credential
      // final OAuthCredential credential = GoogleAuthProvider.credential(
      //   accessToken: googleAuth.accessToken,
      //   idToken: googleAuth.idToken,
      // );

      // Sign in to Firebase with the credential
      // UserCredential result = await _auth.signInWithCredential(credential);
      // return result.user;
      print("Google Sign-In not fully implemented in this snippet, requires google_sign_in package.");
      return null;
    } catch (e) {
      print("Error with Google Sign-In: $e");
      return null;
    }
  }
}

// Example of how AuthWrapper might look to manage navigation based on auth state
class AuthWrapper extends StatelessWidget {
  const AuthWrapper({super.key});

  @override
  Widget build(BuildContext context) {
    // Access the user stream from AuthService
    return StreamBuilder<User?>(
      stream: AuthService().user, // Listen to authentication state changes
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // While waiting for the authentication state to be determined, show a loading spinner
          return const Scaffold(body: Center(child: CircularProgressIndicator()));
        } else if (snapshot.hasData) {
          // If there is user data, the user is signed in
          return const HomeScreen(); // Navigate to your main app screen
        } else {
          // If there is no user data, the user is signed out
          return const SignInScreen(); // Navigate to your sign-in screen
        }
      },
    );
  }
}

class SignInScreen extends StatelessWidget {
  const SignInScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final AuthService _auth = AuthService();
    final TextEditingController _emailController = TextEditingController();
    final TextEditingController _passwordController = TextEditingController();

    return Scaffold(
      appBar: AppBar(title: const Text('Sign In')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(controller: _emailController, decoration: const InputDecoration(labelText: 'Email')),
            TextField(controller: _passwordController, decoration: const InputDecoration(labelText: 'Password'), obscureText: true),
            ElevatedButton(
              onPressed: () async {
                User? user = await _auth.signInWithEmailAndPassword(_emailController.text, _passwordController.text);
                if (user != null) {
                  ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Signed In Successfully!')));
                } else {
                  ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Sign In Failed.')));
                }
              },
              child: const Text('Sign In'),
            ),
            ElevatedButton(
              onPressed: () async {
                User? user = await _auth.registerWithEmailAndPassword(_emailController.text, _passwordController.text);
                if (user != null) {
                  ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Registered Successfully!')));
                } else {
                  ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Registration Failed.')));
                }
              },
              child: const Text('Register'),
            ),
            // Add Google Sign-In button here (requires google_sign_in package)
            // ElevatedButton(
            //   onPressed: () async {
            //     User? user = await _auth.signInWithGoogle();
            //     if (user != null) {
            //       ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Signed In with Google!')));
            //     } else {
            //       ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Google Sign In Failed.')));
            //     }
            //   },
            //   child: const Text('Sign In with Google'),
            // ),
          ],
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final AuthService _auth = AuthService();
    final User? currentUser = FirebaseAuth.instance.currentUser; // Get current user

    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
        actions: [
          IconButton(
            icon: const Icon(Icons.logout),
            onPressed: () async {
              await _auth.signOut();
            },
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome, ${currentUser?.email ?? 'Guest'}!'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // Navigate to other parts of your app
                print('Navigate to profile or settings');
              },
              child: const Text('Go to Profile'),
            ),
          ],
        ),
      ),
    );
  }
}

Key concepts in this auth code:

• FirebaseAuth.instance: The singleton instance of the Firebase Authentication service.

• _auth.authStateChanges(): A Dart Stream that emits a User object whenever the user's sign-in state changes (for example, login, logout, registration). This is powerful for building reactive UIs that respond to authentication state.

• createUserWithEmailAndPassword(): Registers a new user. If successful, result.user contains the new User object.

• signInWithEmailAndPassword(): Authenticates an existing user.

• signOut(): Logs out the current user.

• FirebaseAuthException: Specific exceptions provided by Firebase for authentication errors (for example, weak-password, email-already-in-use, user-not-found). Catching these allows you to provide precise feedback to the user.

• User object: Represents the currently logged-in user, providing access to properties like uid (unique user ID), email, displayName, and so on. The uid is especially important for associating user data in Firestore or Realtime Database.

Cloud Firestore: Real-time NoSQL Database

Cloud Firestore is a flexible, scalable NoSQL document database for mobile, web, and server development. It offers real-time data synchronization and powerful querying capabilities. Here are the setup steps:

Step 1: Add Dependency

dependencies:
  # ...
  cloud_firestore: ^latest_version # Check pub.dev for the latest

Run flutter pub get.

Step 2: Enable Firestore (Firebase Console)

Go to "Firestore Database" and click "Create database." Choose a security rules mode (start in test mode for development, but always define stricter rules for production) and a location.

Here’s the code:

import 'package:cloud_firestore/cloud_firestore.dart';

class FirestoreService {
  // Get the singleton instance of Cloud Firestore
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  // Add a new user document
  Future<void> addUser(String uid, String email, String username) async {
    try {
      // Access the 'users' collection and create/set a document with the user's UID as its ID.
      // `set()` will create the document if it doesn't exist or overwrite it if it does.
      await _firestore.collection('users').doc(uid).set({
        'email': email,
        'username': username,
        'createdAt': FieldValue.serverTimestamp(), // Automatically get server timestamp
        'lastActive': FieldValue.serverTimestamp(),
      });
      print('User $username added/updated in Firestore!');
    } catch (e) {
      print('Error adding user to Firestore: $e');
    }
  }

  // Get a single user document by UID
  Future<Map<String, dynamic>?> getUserData(String uid) async {
    try {
      // Get a specific document from the 'users' collection.
      DocumentSnapshot doc = await _firestore.collection('users').doc(uid).get();
      if (doc.exists) {
        // If the document exists, return its data.
        return doc.data() as Map<String, dynamic>?;
      } else {
        print('User document not found for UID: $uid');
        return null;
      }
    } catch (e) {
      print('Error getting user data: $e');
      return null;
    }
  }

  // Stream of user data (real-time updates for a single document)
  Stream<Map<String, dynamic>?> getUserStream(String uid) {
    // Listen for real-time changes to a specific user document.
    return _firestore.collection('users').doc(uid).snapshots().map((snapshot) {
      // Map the snapshot to a Map<String, dynamic> or null if the document doesn't exist.
      return snapshot.data();
    });
  }

  // Add a new message to a chat collection
  Future<void> addMessage(String chatRoomId, String senderUid, String messageText) async {
    try {
      // Access a specific chat room's messages sub-collection.
      // `add()` generates a new unique ID for the document.
      await _firestore.collection('chat_rooms').doc(chatRoomId).collection('messages').add({
        'senderId': senderUid,
        'message': messageText,
        'timestamp': FieldValue.serverTimestamp(),
      });
      print('Message sent in chat room $chatRoomId');
    } catch (e) {
      print('Error sending message: $e');
    }
  }

  // Stream of messages for a specific chat room (real-time updates for a collection)
  Stream<List<Map<String, dynamic>>> getMessagesStream(String chatRoomId) {
    // Listen to all documents in the messages sub-collection, ordered by timestamp.
    return _firestore
        .collection('chat_rooms')
        .doc(chatRoomId)
        .collection('messages')
        .orderBy('timestamp', descending: true) // Order messages for display
        .snapshots() // Get real-time snapshots
        .map((snapshot) {
          // Map each document snapshot to its data, converting to a list of maps.
          return snapshot.docs.map((doc) => doc.data()).toList();
        });
  }

  // Update a field in a document
  Future<void> updateUsername(String uid, String newUsername) async {
    try {
      // Updates specific fields in a document without overwriting the entire document.
      await _firestore.collection('users').doc(uid).update({'username': newUsername});
      print('Username for $uid updated to $newUsername!');
    } catch (e) {
      print('Error updating username: $e');
    }
  }

  // Delete a document
  Future<void> deleteUserDocument(String uid) async {
    try {
      // Deletes a specific document.
      await _firestore.collection('users').doc(uid).delete();
      print('User document for $uid deleted!');
    } catch (e) {
      print('Error deleting user document: $e');
    }
  }
}

Key concepts in Firestore code:

• FirebaseFirestore.instance: The singleton instance for interacting with Firestore.

• collection('collection_name'): Refers to a top-level collection.

• doc('document_id'): Refers to a specific document within a collection. If the ID is known (for example, user UID), you can use doc().

• add(data): Adds a new document to a collection with an automatically generated unique ID.

• set(data): Creates a document with a specified ID. If a document with that ID already exists, it completely overwrites it. Use SetOptions(merge: true) to merge data instead of overwriting.

• update(data): Updates specific fields within an existing document. It will fail if the document does not exist.

• delete(): Deletes a document.

• get(): Fetches a single document or a query result once.

• snapshots(): Returns a Stream that emits QuerySnapshot or DocumentSnapshot objects whenever the data changes. This is the core of real-time functionality.

• orderBy(), where(), limit(): Powerful methods for querying and filtering data.

• FieldValue.serverTimestamp(): A special value that, when set, is automatically replaced by the server's timestamp when the document is written. Useful for createdAt or lastModified fields.

Cloud Storage: Scalable File Storage

Firebase Cloud Storage allows you to store and retrieve user-generated content, such as images, videos, and other files. It's backed by Google Cloud Storage, offering high availability and scalability.

Step 1: Add Dependency

dependencies:
  # ...
  firebase_storage: ^latest_version # Check pub.dev for the latest
  image_picker: ^latest_version # (Optional) For picking images from device
  file_picker: ^latest_version # (Optional) For picking any file type

Run flutter pub get.

Step 2: Enable Storage (Firebase Console)

Go to "Storage" in your Firebase project and click "Get started." Configure security rules (e.g., allow read/write for authenticated users) before proceeding.

Here’s the code:

import 'dart:io'; // Required for File class
import 'package:firebase_storage/firebase_storage.dart';
import 'package:image_picker/image_picker.dart'; // From pub.dev for picking images

class StorageService {
  final FirebaseStorage _storage = FirebaseStorage.instance;

  // Upload a file (e.g., an image) to Firebase Storage
  Future<String?> uploadImage(File imageFile, String folderPath) async {
    try {
      // Create a unique file name using timestamp to avoid collisions
      String fileName = DateTime.now().millisecondsSinceEpoch.toString();
      // Create a reference to the storage path
      Reference storageRef = _storage.ref().child('$folderPath/$fileName.jpg');

      // Upload the file
      UploadTask uploadTask = storageRef.putFile(imageFile);

      // Wait for the upload to complete and get the snapshot
      TaskSnapshot snapshot = await uploadTask;

      // Get the download URL of the uploaded file
      String downloadUrl = await snapshot.ref.getDownloadURL();
      print('Image uploaded! URL: $downloadUrl');
      return downloadUrl; // Return the public URL to store in Firestore, etc.
    } on FirebaseException catch (e) {
      print('Firebase Storage Error: ${e.code} - ${e.message}');
      return null;
    } catch (e) {
      print('General Storage Error: $e');
      return null;
    }
  }

  // Example: Picking an image from the gallery and uploading
  Future<String?> pickAndUploadImage(String folderPath) async {
    final ImagePicker picker = ImagePicker();
    final XFile? pickedFile = await picker.pickImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      File file = File(pickedFile.path);
      return await uploadImage(file, folderPath);
    } else {
      print('No image selected.');
      return null;
    }
  }

  // Download a file from Firebase Storage
  Future<void> downloadFile(String storagePath, String localPath) async {
    try {
      Reference ref = _storage.ref().child(storagePath);
      // Create a local file to save the downloaded content
      File downloadToFile = File(localPath);
      await ref.writeToFile(downloadToFile); // Write the downloaded bytes to the local file
      print('File downloaded to $localPath');
    } on FirebaseException catch (e) {
      print('Error downloading file: ${e.code} - ${e.message}');
    } catch (e) {
      print('General download error: $e');
    }
  }

  // Delete a file from Firebase Storage
  Future<void> deleteFile(String storagePath) async {
    try {
      Reference ref = _storage.ref().child(storagePath);
      await ref.delete(); // Delete the file from Storage
      print('File deleted from Storage: $storagePath');
    } on FirebaseException catch (e) {
      print('Error deleting file: ${e.code} - ${e.message}');
    } catch (e) {
      print('General delete error: $e');
    }
  }
}

Key concepts in storage code:

• FirebaseStorage.instance: The singleton instance for interacting with Storage.

• _storage.ref(): Gets a root reference to your Storage bucket.

• child('path/to/file.jpg'): Creates a reference to a specific file or path within your Storage bucket.

• putFile(file): Uploads a File object. Other methods like putString (for base64 or raw strings) and putData (for Uint8List) are also available.

• UploadTask: Represents an ongoing upload operation. You can listen to its progress or await its completion.

• TaskSnapshot: Contains information about the completed upload, including ref (reference to the uploaded file) and bytesTransferred.

• getDownloadURL(): Once uploaded, this method provides a public URL to access the file. You'd typically store this URL in your Firestore database.

• writeToFile(): Downloads a file and saves it to a specified local path.

• delete(): Deletes a file at the specified reference.

Cloud Functions: Serverless Backend Logic

Cloud Functions allow you to run backend code in response to events triggered by Firebase products (like Firestore writes, Authentication events, Storage uploads) or HTTPS requests. This is "serverless," meaning Google manages the server infrastructure.

Step 1: Add Dependency

dependencies:
  # ...
  cloud_functions: ^latest_version # Check pub.dev for the latest

Run flutter pub get.

Step 2: Initialize Functions (Firebase CLI)

In your Flutter project's root, if you haven't already, run:

firebase init functions

• Select your Firebase project.

• Choose a language (JavaScript or TypeScript). JavaScript is simpler for quick examples.

• This creates a functions directory in your project root.

Step 3: Enable Cloud Functions API (Google Cloud Console)

Ensure the Cloud Functions API is enabled for your project. (Usually enabled by default with Firebase setup).

Here’s the code (Node.js for Function, Dart for Calling):

functions/index.js (Your Cloud Function Code):

// Import Firebase Admin SDK to interact with other Firebase services
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp(); // Initializes the Admin SDK

// 1. HTTP Callable Function: Called directly from your Flutter app via HTTPS
exports.addMessage = functions.https.onCall(async (data, context) => {
  // context.auth contains authentication info if the user is logged in
  if (!context.auth) {
    // Throw an error if the function is called by an unauthenticated user
    throw new functions.https.HttpsError(
      'unauthenticated',
      'The function must be called while authenticated.'
    );
  }

  // Get data passed from the Flutter app
  const text = data.text;
  const uid = context.auth.uid; // The authenticated user's ID

  // Validate input
  if (!text || typeof text !== 'string' || text.length === 0) {
    throw new functions.https.HttpsError(
      'invalid-argument',
      'The function must be called with one argument "text" containing the message text.'
    );
  }

  // Write to Firestore
  await admin.firestore().collection('messages').add({
    text: text,
    senderId: uid,
    timestamp: admin.firestore.FieldValue.serverTimestamp(),
  });

  // Return a success message to the client
  return { status: 'success', message: 'Message added successfully!' };
});

// 2. Firestore Triggered Function: Runs in response to a Firestore document creation
exports.onNewUserCreated = functions.firestore
  .document('users/{userId}') // Listens for any new document in the 'users' collection
  .onCreate(async (snap, context) => {
    // snap.data() contains the data of the newly created document
    const newUser = snap.data();
    const userId = context.params.userId; // Get the ID of the new document (user ID)

    console.log(`New user created: ${newUser.email} with ID: ${userId}`);

    // Example: Send a welcome email (requires a third-party email service integration)
    // Or update another part of the database
    await admin.firestore().collection('notifications').add({
      userId: userId,
      message: `Welcome, ${newUser.username}! Thanks for joining.`,
      read: false,
      timestamp: admin.firestore.FieldValue.serverTimestamp(),
    });

    return null; // Always return null or a Promise in background functions
  });

Deploy Cloud Functions:

Navigate to your functions directory in the terminal and run:

firebase deploy --only functions

main.dart / Flutter Code for Calling Functions:

import 'package:cloud_functions/cloud_functions.dart';

class CloudFunctionsService {
  final FirebaseFunctions _functions = FirebaseFunctions.instance;

  // Call the 'addMessage' HTTPS Callable Function
  Future<String?> callAddMessageFunction(String messageText) async {
    try {
      // Get a reference to the callable function
      HttpsCallable callable = _functions.httpsCallable('addMessage');

      // Call the function with parameters. The data argument is what becomes 'data' in the function.
      final HttpsCallableResult result = await callable.call(<String, dynamic>{
        'text': messageText,
      });

      // Access the data returned by the function
      print('Cloud Function Result: ${result.data}');
      return result.data['message'] as String?;
    } on FirebaseFunctionsException catch (e) {
      // Handle errors specifically from Cloud Functions
      print('Cloud Function Error: ${e.code} - ${e.message}');
      if (e.details != null) {
        print('Error details: ${e.details}');
      }
      return null;
    } catch (e) {
      print('General error calling function: $e');
      return null;
    }
  }
}

Key concepts in the cloud functions code:

• Node.js Environment: Cloud Functions are typically written in Node.js (or Python, Go, Java, and so on). The Firebase Admin SDK is crucial here for interacting with other Firebase services from the backend.

• functions.https.onCall(): Defines an HTTPS Callable Function. These are the most common way for your Flutter app to directly invoke backend logic. Firebase automatically handles authentication and CORS.

• data: The payload sent from the Flutter app.

• context.auth: Contains authentication details of the user who invoked the function (if authenticated).

• functions.firestore.document().onCreate(): Defines a function triggered by a Firestore event. Other triggers include onUpdate, onDelete, onWrite for Firestore/Realtime Database, and onFinalize, onDelete for Cloud Storage.

• snap: For database triggers, this is a DocumentSnapshot of the data that triggered the event.

• context.params: For path-based triggers (like users/{userId}), this contains the wildcard values (for example, context.params.userId).

• Flutter cloud_functions:

  • FirebaseFunctions.instance: The singleton instance.

  • httpsCallable('functionName'): Gets a reference to your callable function.

  • callable.call(data): Invokes the function with the provided data (a Map<String, dynamic>).

  • FirebaseFunctionsException: Catches specific errors thrown by Cloud Functions.

Firebase Hosting: Fast & Secure Web Hosting

Firebase Hosting provides fast, secure, and reliable hosting for your Flutter web applications, static content, and single-page applications (SPAs). It includes a global CDN, SSL certificates, and custom domain support.

Step 1: Add Flutter Web Support

If your project doesn't already, add web support:

flutter create . --platforms web

Step 2: Build Flutter Web App

flutter build web --release

This command compiles your Flutter app into optimized HTML, CSS, JavaScript, and assets, placing them in the build/web directory.

Step 3: Initialize Firebase Hosting (Firebase CLI)

From your Flutter project's root:

firebase init hosting

• Select your Firebase project.

• Public directory: Crucially, set this to build/web (this is where Flutter puts its web output).

• Configure as a single-page app (rewrite all URLs to /index.html)? For most Flutter web apps, say Yes. This ensures all routes are handled by your Flutter app.

• Set up automatic builds and deploys with GitHub? Optional, but highly recommended for CI/CD.

Deployment:

# From your Flutter project root
flutter build web --release # Rebuild your web app if you made changes
firebase deploy --only hosting # Deploy only the hosting portion

Here’s what’s going on:

• flutter build web --release: Creates an optimized, minified version of your Flutter web app suitable for production deployment. The --release flag is important for performance.

• firebase deploy --only hosting: Deploys the contents of your configured public directory (build/web) to Firebase Hosting. After deployment, Firebase will provide you with a public URL (for example, your-project-id.web.app or your-project-id.firebaseapp.com).

Firebase Console: Go to "Hosting" to view your deployed sites, deployment history, connected domains, and configure custom redirects or rewrites.

Firebase Remote Config: Dynamic App Behavior

Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update. You define parameters in the Firebase Console, set their default in-app values, and then update those values remotely.

Step 1: Add Dependency

dependencies:
  # ...
  firebase_remote_config: ^latest_version # Check pub.dev for the latest

Run flutter pub get.

Step 2: Enable Remote Config (Firebase Console)

Go to "Remote Config." Click "Create your first parameter."

• Define a Parameter Key (for example, welcome_message, show_new_feature).

• Provide a Default value (this is what your app will use if no remote value is fetched).

• Add Conditional values (optional): You can set different values for specific user segments (for example, users in a particular country, app version, or Google Analytics audience).

• Publish Changes: After defining parameters, hit "Publish changes" to make them live.

Here’s the code:

import 'package:firebase_remote_config/firebase_remote_config.dart';
import 'package:flutter/material.dart';

class RemoteConfigService {
  final FirebaseRemoteConfig _remoteConfig = FirebaseRemoteConfig.instance;

  Future<void> initializeRemoteConfig() async {
    // Set default values for parameters.
    // These values are used if no remote value is fetched or if fetch fails.
    await _remoteConfig.setDefaults(const {
      'welcome_message': 'Welcome to our awesome app!',
      'show_promo_banner': false,
      'promo_text_color': '#FFFFFF', // White
    });

    // Configure fetch settings (e.g., minimum fetch interval)
    // In production, set a higher minimumFetchInterval (e.g., 1 hour).
    // During development, you can set it to zero for rapid testing.
    await _remoteConfig.setConfigSettings(RemoteConfigSettings(
      fetchTimeout: const Duration(minutes: 1), // Max duration to wait for fetch
      minimumFetchInterval: Duration.zero, // How often to fetch (set to 0 for dev)
    ));

    // Fetch and activate the latest values from Firebase
    await _remoteConfig.fetchAndActivate();

    // Listen for real-time updates (optional, for instant changes without re-fetching)
    // This is useful for rapidly deploying changes to users who are actively using the app.
    _remoteConfig.onConfigUpdated.listen((event) async {
      print('Remote Config updated: ${event.updatedKeys}');
      await _remoteConfig.activate(); // Activate the new config
      print('New config activated!');
      // You might want to rebuild your UI or notify listeners here
    });

    print('Remote Config initialized and fetched!');
  }

  // Get a string parameter
  String getWelcomeMessage() {
    return _remoteConfig.getString('welcome_message');
  }

  // Get a boolean parameter
  bool showPromoBanner() {
    return _remoteConfig.getBool('show_promo_banner');
  }

  // Get a color parameter (example: convert hex string to Color object)
  Color getPromoTextColor() {
    String hexColor = _remoteConfig.getString('promo_text_color');
    // Remove # if present, then parse hex to int
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF$hexColor"; // Add alpha if not present
    }
    return Color(int.parse(hexColor, radix: 16));
  }
}

// Example usage in a Flutter Widget
class MyConfiguredScreen extends StatefulWidget {
  const MyConfiguredScreen({super.key});

  @override
  State<MyConfiguredScreen> createState() => _MyConfiguredScreenState();
}

class _MyConfiguredScreenState extends State<MyConfiguredScreen> {
  final RemoteConfigService _remoteConfigService = RemoteConfigService();
  String _welcomeMessage = "Loading...";
  bool _showBanner = false;
  Color _bannerColor = Colors.white;

  @override
  void initState() {
    super.initState();
    _loadConfig();
  }

  Future<void> _loadConfig() async {
    await _remoteConfigService.initializeRemoteConfig();
    setState(() {
      _welcomeMessage = _remoteConfigService.getWelcomeMessage();
      _showBanner = _remoteConfigService.showPromoBanner();
      _bannerColor = _remoteConfigService.getPromoTextColor();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Remote Config Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              _welcomeMessage,
              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            if (_showBanner)
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Container(
                  padding: const EdgeInsets.all(12.0),
                  color: _bannerColor,
                  child: Text(
                    'Special Promotion!',
                    style: TextStyle(color: _bannerColor.computeLuminance() > 0.5 ? Colors.black : Colors.white),
                  ),
                ),
              ),
            ElevatedButton(
              onPressed: _loadConfig, // Allow refreshing config manually
              child: const Text('Refresh Config'),
            ),
          ],
        ),
      ),
    );
  }
}

Key concepts in remote config code:

• FirebaseRemoteConfig.instance: The singleton instance for Remote Config.

• setDefaults(): Crucial for setting in-app default values. These are used immediately on app startup and serve as a fallback if no remote values can be fetched (for example, offline).

• setConfigSettings(): Configures how often the app attempts to fetch new configurations (minimumFetchInterval) and the fetchTimeout. During development, Duration.zero for minimumFetchInterval is useful for quick testing.

• fetchAndActivate(): Fetches the latest configuration values from Firebase and then activates them, making them available to your app. This is an atomic operation.

• onConfigUpdated.listen(): A stream that emits an event whenever the Remote Config values are updated and published in the Firebase Console. This allows for real-time, dynamic updates in your running app without requiring a manual re-fetch.

• getString(), getBool(), getInt(), getDouble(): Methods to retrieve the parameter values by their keys. The types must match what you configured in the Console.

Firebase Cloud Messaging (FCM): Push Notifications

Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably send messages at no cost. You can send notification messages (displayed to the user) or data messages (handled by your app's code).

Step 1: Add Dependency

dependencies:
  # ...
  firebase_messaging: ^latest_version # Check pub.dev for the latest
  flutter_local_notifications: ^latest_version # For showing foreground notifications

Run flutter pub get.

Step 2: Platform-Specific Setup

For Android: Ensure your android/app/build.gradle has apply plugin: 'com.google.gms.google-services' and implementation platform('com.google.firebase:firebase-bom:...'). No further major steps usually.

For iOS:

• Enable Push Notifications capability in Xcode (Project Target > Signing & Capabilities).

• Enable Background Modes > Remote notifications.

• Ensure your GoogleService-Info.plist is correctly placed.

• Use CocoaPods to update: cd ios && pod install.

For Web: Create a firebase-messaging-sw.js file in your web directory and register it as a service worker in web/index.html. This file handles background messages for web.

• web/firebase-messaging-sw.js:

    importScripts('https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js');
    importScripts('https://www.gstatic.com/firebasejs/9.22.0/firebase-messaging-compat.js');
  
    firebase.initializeApp({ /* your web firebaseConfig object here */ });
    const messaging = firebase.messaging();
  
    messaging.onBackgroundMessage(function(payload) {
      console.log('[firebase-messaging-sw.js] Received background message ', payload);
      // Customize notification here
      const notificationTitle = payload.notification.title;
      const notificationOptions = {
        body: payload.notification.body,
        icon: '/icons/Icon-192.png' // Ensure this path is correct
      };
      return self.registration.showNotification(notificationTitle, notificationOptions);
    });
  

• web/index.html (inside <body> tag, before main.dart.js):

    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
          navigator.serviceWorker.register('/firebase-messaging-sw.js');
        });
      }
    </script>
  

For Firebase Console: No explicit "enable" step – FCM is enabled by default.

Here’s the code:

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart'; // For local notifications
import 'package:flutter/material.dart';

// Top-level function for handling background messages (must be outside any class)
@pragma('vm:entry-point')
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  // If you're going to use other Firebase services in the background,
  // make sure to call `initializeApp` before using other Firebase services.
  await Firebase.initializeApp(); // Ensure Firebase is initialized for background tasks
  print("Handling a background message: ${message.messageId}");

  // You can show a local notification for background messages
  // Or perform other background tasks like updating Firestore
  NotificationService().showNotification(message);
}

class NotificationService {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;
  final FlutterLocalNotificationsPlugin _flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();

  static bool _isFlutterLocalNotificationsInitialized = false;

  Future<void> initialize() async {
    // Request permissions for iOS and Web (Android handles it automatically)
    NotificationSettings settings = await _firebaseMessaging.requestPermission(
      alert: true,
      badge: true,
      sound: true,
      provisional: false,
    );
    print('User granted permission: ${settings.authorizationStatus}');

    // Setup background message handler (for when the app is terminated or in background)
    FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

    // Initialize flutter_local_notifications plugin for foreground notifications
    if (!_isFlutterLocalNotificationsInitialized) {
      const AndroidInitializationSettings initializationSettingsAndroid =
          AndroidInitializationSettings('@mipmap/ic_launcher'); // Your app icon

      const DarwinInitializationSettings initializationSettingsIOS =
          DarwinInitializationSettings(
        requestAlertPermission: false,
        requestBadgePermission: false,
        requestSoundPermission: false,
      );

      const InitializationSettings initializationSettings = InitializationSettings(
        android: initializationSettingsAndroid,
        iOS: initializationSettingsIOS,
      );

      await _flutterLocalNotificationsPlugin.initialize(
        initializationSettings,
        onDidReceiveNotificationResponse: (NotificationResponse response) async {
          // Handle notification tap when app is in foreground/background/terminated
          print('Notification tapped: ${response.payload}');
          // You can navigate based on the payload data
        },
      );
      _isFlutterLocalNotificationsInitialized = true;
    }

    // Handle messages when the app is in the foreground
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Got a message whilst in the foreground!');
      print('Message data: ${message.data}');
      if (message.notification != null) {
        print('Message also contained a notification: ${message.notification!.title} / ${message.notification!.body}');
        // Show local notification for foreground messages
        showNotification(message);
      }
    });

    // Handle messages when the app is opened from a terminated state
    _firebaseMessaging.getInitialMessage().then((RemoteMessage? message) {
      if (message != null) {
        print('App opened from terminated state with message: ${message.data}');
        // Navigate or handle the message
      }
    });

    // Handle messages when the app is opened from a background state
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('App opened from background with message: ${message.data}');
      // Navigate or handle the message
    });

    // Get the FCM token for the device
    String? token = await _firebaseMessaging.getToken();
    print('FCM Token: $token');

    // Subscribe to a topic (optional, for sending messages to groups of users)
    await _firebaseMessaging.subscribeToTopic('general_updates');
    print('Subscribed to topic: general_updates');
  }

  // Helper to display a local notification
  Future<void> showNotification(RemoteMessage message) async {
    RemoteNotification? notification = message.notification;
    AndroidNotification? android = message.notification?.android;

    if (notification != null && android != null) {
      _flutterLocalNotificationsPlugin.show(
        notification.hashCode, // Unique ID for the notification
        notification.title,
        notification.body,
        NotificationDetails(
          android: AndroidNotificationDetails(
            'channel_id', // Must match your Android Notification Channel ID
            'channel_name',
            channelDescription: 'Description for notifications',
            icon: android.smallIcon,
            // other properties like sound, importance
          ),
        ),
        payload: message.data.toString(), // Pass data to be retrieved on tap
      );
    }
  }

  // You can also send test messages directly from the Firebase Console (Engage > Cloud Messaging).
}

// Ensure you call NotificationService().initialize() in your main.dart after Firebase.initializeApp()
// Example:
/*
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  await NotificationService().initialize(); // Initialize FCM
  runApp(const MyApp());
}
*/

Key concepts in FCM code:

• FirebaseMessaging.instance: The singleton instance for FCM.

• requestPermission(): Prompts the user for notification permissions (especially on iOS and Web).

• _firebaseMessagingBackgroundHandler(): A crucial top-level, static function that handles messages received when the app is in the background or terminated. It must be a top-level function.

• FirebaseMessaging.onMessage.listen(): Listens for incoming messages when the app is in the foreground. For these, you typically need flutter_local_notifications to display a notification, as the system won't display it automatically.

• FirebaseMessaging.getInitialMessage(): Checks if the app was launched by tapping on a notification while it was in a terminated state.

• FirebaseMessaging.onMessageOpenedApp.listen(): Listens for when a user taps on a notification to open the app from a background state.

• getToken(): Retrieves the unique FCM registration token for the device. This token is used to send targeted notifications to specific devices.

• subscribeToTopic(): Allows you to send messages to groups of users who have subscribed to a particular topic, instead of sending to individual tokens.

• flutter_local_notifications: A separate plugin necessary to show heads-up notifications when your app is in the foreground, or to customize background/terminated notifications.

Firebase Crashlytics: Crash Reporting

Firebase Crashlytics helps you track, prioritize, and fix stability issues that impact your app's quality. It provides real-time crash reports and comprehensive data for debugging.

Step 1: Add Dependency

dependencies:
  # ...
  firebase_crashlytics: ^latest_version # Check pub.dev for the latest

Run flutter pub get.

Step 2: Platform-Specific Setup

For Android: Add the Crashlytics Gradle plugin in your android/build.gradle and apply it in android/app/build.gradle. (Refer to FlutterFire docs for specific versions.)

iOS: No additional steps beyond GoogleService-Info.plist and pod install are usually required.

Step 3: Enable Crashlytics (Firebase Console)

Go to "Crashlytics" and click "Enable Crashlytics."

Here’s the code:

import 'package:firebase_crashlytics/firebase_crashlytics.dart';
import 'package:flutter/foundation.dart'; // For kDebugMode
import 'dart:async'; // For runZonedGuarded

void main() {
  // Catch any errors that occur in the Flutter framework and send them to Crashlytics.
  // This should be done as early as possible in your app's lifecycle.
  FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterError;

  // Use runZonedGuarded to catch all errors that are not handled by the Flutter framework
  // (e.g., errors in asynchronous operations or isolates).
  runZonedGuarded<Future<void>>(() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp();

    // Disable Crashlytics in debug mode for development (optional, but good practice)
    // You can temporarily set to true to test crash reporting
    if (kDebugMode) {
      await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(false);
    } else {
      await FirebaseCrashlytics.instance.setCrashlyticsCollectionEnabled(true);
    }

    runApp(const MyApp());
  }, (error, stack) {
    // Catch errors from outside the Flutter framework (e.g., async errors)
    FirebaseCrashlytics.instance.recordError(error, stack, fatal: true); // Mark as fatal
  });
}

// Example usage within your app to force a crash or log a non-fatal error
class CrashTestScreen extends StatelessWidget {
  const CrashTestScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Crashlytics Test')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // Force a crash (for testing Crashlytics integration)
                FirebaseCrashlytics.instance.crash();
              },
              child: const Text('Force Crash!'),
            ),
            ElevatedButton(
              onPressed: () {
                try {
                  // Simulate an error that doesn't crash the app
                  throw Exception('This is a non-fatal error caught manually.');
                } catch (e, s) {
                  // Record a non-fatal error with stack trace
                  FirebaseCrashlytics.instance.recordError(e, s, reason: 'manual non-fatal error');
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Non-fatal error logged! Check Crashlytics.')),
                  );
                }
              },
              child: const Text('Log Non-Fatal Error'),
            ),
            ElevatedButton(
              onPressed: () {
                // Add custom key-value pairs to crash reports for more context
                FirebaseCrashlytics.instance.setCustomKey('user_id', 'test_user_123');
                FirebaseCrashlytics.instance.setCustomKey('app_flow', 'checkout_process');
                FirebaseCrashlytics.instance.log('User entered payment details.'); // Add a log message
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Custom data and log added.')),
                );
              },
              child: const Text('Add Custom Data'),
            ),
          ],
        ),
      ),
    );
  }
}

Key concepts in Crashlytics code:

• FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterError;: This line, placed in main(), automatically catches all errors thrown by the Flutter framework (for example, UI rendering errors) and sends them to Crashlytics.

• runZonedGuarded(): A powerful Dart feature. It creates an error zone that catches all asynchronous errors (for example, errors in Future callbacks, Stream listeners) that are not explicitly handled by try-catch blocks. This ensures comprehensive crash reporting.

• FirebaseCrashlytics.instance.recordError(error, stack, {fatal: true});: Manually logs an error to Crashlytics. fatal: true indicates a crash that terminated the app.

• setCrashlyticsCollectionEnabled(bool enabled): Allows you to control whether Crashlytics collects data. It's often disabled in kDebugMode to avoid cluttering your console with development errors.

• setCustomKey(key, value): Attaches custom key-value pairs to a crash report, providing more context (for example, user ID, current screen, specific app state).

• log(message): Adds custom log messages to a crash report, helping you trace the user's actions leading up to a crash.

• Firebase Console (Crashlytics section): Provides a dashboard to view aggregated crash reports, stack traces, device info, custom keys, and logs. You can prioritize crashes, filter by version/OS, and track trends.

Firebase Performance Monitoring: App Performance Insights

Firebase Performance Monitoring helps you gain insights into your app's performance characteristics in real-world scenarios. It automatically collects data like app startup time, network request latency, and screen rendering times. You can also add custom traces to measure specific parts of your code.

Step 1: Add Dependency

dependencies:
  # ...
  firebase_performance: ^latest_version # Check pub.dev for the latest

Run flutter pub get.

Step 2: Platform-Specific Setup

Performance Monitoring usually requires minimal additional setup beyond adding the plugin, but check FlutterFire documentation for any specific Gradle/Podfile configurations.

Step 3: Enable Performance Monitoring (Firebase Console)

Go to "Performance" and click "Enable Performance Monitoring."

Here’s the code:

import 'package:firebase_performance/firebase_performance.dart';
import 'package:flutter/material.dart';

class PerformanceMonitorService {
  final FirebasePerformance _performance = FirebasePerformance.instance;

  // Example: Custom Trace for a specific operation (e.g., fetching user profile)
  Future<void> measureUserProfileFetch() async {
    // Define a custom trace with a unique name
    final Trace profileTrace = _performance.newTrace('fetch_user_profile_trace');

    try {
      await profileTrace.start(); // Start measuring

      // Simulate network request or database operation
      print('Fetching user profile...');
      await Future.delayed(const Duration(seconds: 2)); // Simulate work

      // Add custom metrics (optional)
      profileTrace.putMetric('data_size_kb', 150);
      profileTrace.putAttribute('source', 'firestore');

      print('User profile fetched!');
    } catch (e) {
      print('Error fetching profile: $e');
    } finally {
      await profileTrace.stop(); // Stop measuring (always call stop in finally block)
    }
  }

  // Example: Monitoring an HTTP request (automatic for network requests but can be customized)
  Future<void> makeMonitoredHttpRequest() async {
    final HttpMetric httpMetric = _performance.newHttpMetric('https://jsonplaceholder.typicode.com/posts/1', HttpMethod.Get);
    try {
      await httpMetric.start(); // Start measuring HTTP request

      // Simulate an HTTP GET request
      final uri = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');
      final client = HttpClient();
      final request = await client.getUrl(uri);
      final response = await request.close();

      httpMetric.putAttribute('status_code', response.statusCode.toString());
      httpMetric.putAttribute('content_type', response.headers.contentType.toString());

      await response.drain(); // Consume the response body
      httpMetric.responseContentType = response.headers.contentType?.value;
      httpMetric.responsePayloadSize = response.contentLength;
      httpMetric.httpResponseCode = response.statusCode;

      print('HTTP request completed with status: ${response.statusCode}');
    } catch (e) {
      print('HTTP request error: $e');
    } finally {
      await httpMetric.stop(); // Stop measuring HTTP request
    }
  }
}

// Example usage in a Flutter Widget
class PerformanceScreen extends StatelessWidget {
  const PerformanceScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final PerformanceMonitorService _perfService = PerformanceMonitorService();
    return Scaffold(
      appBar: AppBar(title: const Text('Performance Monitoring')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => _perfService.measureUserProfileFetch(),
              child: const Text('Measure User Profile Fetch'),
            ),
            ElevatedButton(
              onPressed: () => _perfService.makeMonitoredHttpRequest(),
              child: const Text('Make Monitored HTTP Request'),
            ),
          ],
        ),
      ),
    );
  }
}

Key concepts in performance monitoring code:

• FirebasePerformance.instance: Singleton instance.

• newTrace('trace_name'): Creates a custom trace to measure the duration and optionally custom metrics of specific code blocks.

  • trace.start(): Begins the measurement.

  • trace.stop(): Ends the measurement. Always ensure stop() is called, ideally in a finally block.

  • putMetric(name, value): Adds a custom metric (for example, number of items processed).

  • putAttribute(key, value): Adds custom attributes (for example, network type, user ID) for filtering in the Console.

• newHttpMetric(url, method): Automatically monitors network requests made by your app. Performance Monitoring usually detects common HTTP libraries automatically, but you can explicitly instrument with HttpMetric for fine-grained control or custom network stacks.

  • httpMetric.start(), httpMetric.stop(): Start and stop measurement.

  • httpMetric.responseCode, httpMetric.requestPayloadSize, httpMetric.responsePayloadSize, httpMetric.responseContentType: Properties to set for detailed HTTP request metrics.

• Firebase Console (Performance section): Provides dashboards for app startup time, network requests, and custom traces. You can filter data, identify bottlenecks, and monitor trends over time.

Firebase A/B Testing: Experimentation for Optimization

Firebase A/B Testing helps you optimize your app experience by making it easy to run, analyze, and scale product and marketing experiments. It works seamlessly with Remote Config (for in-app feature variations) and Cloud Messaging (for testing different notification messages).

Let’s walk through the setup.

Step 1: Dependencies

A/B Testing relies on Firebase Remote Config and Google Analytics. So ensure firebase_remote_config and firebase_analytics are in your pubspec.yaml.

Step 2: Enable A/B Testing (Firebase Console)

Go to "A/B Testing" and click "Get started."

Step 3: Create an Experiment (Firebase Console)

• Choose between a Remote Config experiment or a Notifications experiment.

• Define Variants: Your control group (original behavior) and one or more test variants (for example, a different welcome message, a new button color).

• Targeting: Specify which users should be included in the experiment (for example, app version, audience from Analytics, specific user property).

• Goals: Define what success looks like (for example, a specific Analytics event like purchase, session_start, first_open).

• Distribution: Set the percentage of users to include in the experiment.

• Start Experiment: Publish the experiment. Firebase handles the user allocation and data collection.

Let’s look at the code:

The Flutter code for A/B testing is primarily the Remote Config code you've already seen. The A/B Testing platform simply serves different Remote Config values to different user segments based on your experiment definitions.

// The RemoteConfigService from earlier is sufficient.
// Your app will automatically receive the Remote Config values
// assigned by the A/B test.

// No additional A/B Testing specific Flutter code is typically needed beyond
// ensuring your app fetches and activates Remote Config values,
// and logs relevant Analytics events for your experiment goals.

// Ensure you log relevant Analytics events for your A/B test goals.
// Example:
import 'package:firebase_analytics/firebase_analytics.dart';

class AnalyticsService {
  final FirebaseAnalytics _analytics = FirebaseAnalytics.instance;

  Future<void> logPurchaseEvent({
    required String itemId,
    required String itemName,
    required double value,
  }) async {
    await _analytics.logPurchase(
      currency: 'USD',
      value: value,
      items: [
        AnalyticsEventItem(itemId: itemId, itemName: itemName),
      ],
    );
    print('Purchase event logged for analytics: $itemName');
  }

  Future<void> logCustomEvent(String eventName, Map<String, dynamic> parameters) async {
    await _analytics.logEvent(name: eventName, parameters: parameters);
    print('Custom event logged: $eventName with params: $parameters');
  }
}

Key concepts in A/B testing code:

• Variants: Different versions of your app's behavior or UI you want to test.

• Targeting Rules: Define which users participate in the experiment.

• Goals: Key metrics (usually Firebase Analytics events) that define success for your experiment. Firebase will analyze which variant best achieves these goals.

• Remote Config Integration: A/B Testing uses Remote Config to deliver different feature flags or values to different user groups. Your Flutter app simply fetches the Remote Config values, and the A/B Testing backend decides which variant's values to send.

• Analytics Integration: Crucial for measuring the impact of your variants on user behavior and achieving your experiment goals.

Firebase App Distribution: Beta Testing Workflow

Firebase App Distribution makes it easy to distribute pre-release versions of your app to trusted testers. It streamlines the beta testing workflow by managing tester groups, sending out invites, and collecting feedback.

Step 1: Add firebase_app_distribution to pubspec.yaml (optional for local testing/CI, mostly for SDK):

dependencies:
  # ...
  firebase_app_distribution: ^latest_version # Check pub.dev for the latest

Run flutter pub get.

Step 2: Enable App Distribution (Firebase Console)

Go to "App Distribution" and click "Get started."

Step 3: Tester Management (Firebase Console)

Add testers by email, create groups, and invite them.

Step 4: Integration for Build/Distribution (Primarily CLI/CI/CD)

• For Android: Build your APK/AAB (flutter build apk --release or flutter build appbundle --release).

• For iOS: Build your IPA (requires Xcode and Apple Developer Program).

Distribution (Using Firebase CLI):

# Android Example:
# 1. Build your release APK/AAB
flutter build apk --release # or flutter build appbundle --release

# 2. Distribute using Firebase CLI
firebase appdistribution:distribute build/app/outputs/flutter-apk/app-release.apk \
  --app <YOUR_ANDROID_APP_ID_FROM_FIREBASE_CONSOLE> \
  --groups "testers" \
  --release-notes "New features: login, chat, profile update."

# iOS Example:
# 1. Build your release IPA (usually via Xcode or a CI/CD pipeline)
#    (e.g., flutter build ipa --release - for native builds, complex)

# 2. Distribute using Firebase CLI
#    Ensure your IPA path is correct and your app is signed for distribution
firebase appdistribution:distribute /path/to/your/app.ipa \
  --app <YOUR_IOS_APP_ID_FROM_FIREBASE_CONSOLE> \
  --groups "ios-testers" \
  --release-notes "iOS specific fixes and improvements."

Here’s what’s going on in this code:

• firebase appdistribution:distribute: The core command for uploading your app builds.

• --app <APP_ID>: Your Firebase App ID for the specific platform (Android or iOS). You can find this in your Firebase Console under Project Settings -> Your Apps.

• --groups "group1,group2": Distribute to specific tester groups you've defined in the Firebase Console.

• --release-notes "...": Add release notes for your testers.

• --release-notes-file "notes.txt": Alternatively, specify a file containing release notes.

In-App Updates (using firebase_app_distribution Flutter plugin): The Flutter plugin allows you to check for updates directly within your app and prompt testers to install the latest version.

import 'package:firebase_app_distribution/firebase_app_distribution.dart';
import 'package:flutter/material.dart';

class AppDistributionService {
  final FirebaseAppDistribution _appDistribution = FirebaseAppDistribution.instance;

  Future<void> checkForUpdates() async {
    // Check if the current user is a tester
    bool isTester = await _appDistribution.isTester();
    if (!isTester) {
      print('Current user is not a tester.');
      return;
    }

    // Get the latest release information
    AppDistributionRelease? release = await _appDistribution.checkForUpdate();

    if (release != null) {
      print('New release available: ${release.displayVersion} (${release.buildVersion})');
      print('Release notes: ${release.releaseNotes}');

      // Prompt the user to update
      // You'd typically show a dialog here
      // Example: showUpdateDialog(context, release);

      // If you want to update directly (for in-app updates)
      await _appDistribution.updateRelease(); // This will open the App Distribution tester app/web page
    } else {
      print('No new updates available.');
    }
  }

  // You can also authenticate testers directly if needed
  Future<void> signInTester() async {
    try {
      await _appDistribution.signInTester();
      print('Tester signed in!');
    } catch (e) {
      print('Error signing in tester: $e');
    }
  }
}

Key concepts in app distribution:

• Testers & Groups: Manage who gets access to your pre-release builds.

• Releases: Track all your distributed builds, their versions, and release notes in the console.

• In-app Updates: The Flutter SDK allows testers to check for and install new builds without leaving your app, providing a seamless testing experience.

• Firebase Console (App Distribution section): The central place to upload builds, manage testers, view insights on adoption, and access release details.

3. Other Valuable Firebase Services for Flutter

Beyond the core services, Firebase offers many more tools that enhance Flutter applications:

Firebase Analytics: Understand User Behavior

Firebase Analytics collects usage and behavior data for your app. It's the foundation for many other Firebase services (like A/B Testing, Remote Config conditions, Crashlytics user segments).

Step 1: Add Dependency

dependencies:
  # ...
  firebase_analytics: ^latest_version

Run flutter pub get.

Step 2: Enabled by Default

Analytics is usually enabled when you create your Firebase project and integrate FlutterFire.

Code explanation:

import 'package:firebase_analytics/firebase_analytics.dart';

class AppAnalytics {
  final FirebaseAnalytics _analytics = FirebaseAnalytics.instance;

  // Log a screen view
  Future<void> logScreenView(String screenName) async {
    await _analytics.logScreenView(screenName: screenName);
    print('Screen view logged: $screenName');
  }

  // Log a custom event
  Future<void> logCustomEvent(String eventName, Map<String, dynamic> parameters) async {
    await _analytics.logEvent(name: eventName, parameters: parameters);
    print('Custom event logged: $eventName with params: $parameters');
  }

  // Log a purchase event
  Future<void> logEcommercePurchase({
    required String transactionId,
    required double value,
    required String currency,
    List<AnalyticsEventItem>? items,
  }) async {
    await _analytics.logPurchase(
      transactionId: transactionId,
      value: value,
      currency: currency,
      items: items,
    );
    print('Ecommerce purchase logged: $transactionId');
  }

  // Set user properties (e.g., user type, subscription status)
  Future<void> setUserProperty(String name, String value) async {
    await _analytics.setUserProperty(name: name, value: value);
    print('User property set: $name = $value');
  }

  // Set the current user ID
  Future<void> setUserId(String id) async {
    await _analytics.setUserId(id: id);
    print('User ID set for analytics: $id');
  }
}

Key concepts:

• Automatic Events: Analytics automatically logs some events (for example, first_open, session_start).

• Custom Events: You can define and log custom events with parameters to capture specific user interactions relevant to your app's goals (for example, button_click, item_added_to_cart).

• User Properties: Define characteristics of your user base (for example, premium_user, app_language) that you can use to segment users for analysis or targeting.

• Firebase Console (Analytics section): Provides detailed dashboards, funnels, user cohorts, and custom reports to understand how users engage with your app.

4. Firebase Local Emulators: Developing Offline and Faster

Developing with cloud services can be slow due to deployment times and cost concerns. Firebase Local Emulators provide a suite of emulators for various Firebase services, allowing you to develop and test your Flutter app entirely offline and locally, without incurring any cloud costs or deployment delays.

Step 1: Install Firebase CLI (if you haven't already)

npm install -g firebase-tools

Step 2: Initialize Emulators in your project

Navigate to your Flutter project's root directory in the terminal and run:

firebase init emulators

This command will prompt you to select which Firebase emulators you want to set up (for example, Auth, Firestore, Functions, Hosting, Storage, Pub/Sub). Select the ones relevant to your project.

Then it will create an emulator-settings.json file (or similar) and update your firebase.json with emulator configurations.

Running Emulators:

To start the emulators, simply run:

firebase emulators:start

This will launch the emulators and provide you with URLs for the Emulator UI (typically http://localhost:4000) and the individual service endpoints.

Connecting Flutter to Emulators:

To make your Flutter app connect to the local emulators instead of the actual Firebase cloud, you need to configure the firebase_core plugin to use the emulator hosts. This is typically done right after Firebase.initializeApp().

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:cloud_functions/cloud_functions.dart';
// import 'package:firebase_remote_config/firebase_remote_config.dart'; // Add if using Remote Config emulator
// import 'package:firebase_messaging/firebase_messaging.dart'; // Add if using Pub/Sub emulator

import 'firebase_options.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  // --- Configure Firebase to use Local Emulators ---
  // Check if running in debug mode or specific environment to enable emulators
  // You might use a flavor-based approach or environment variables for this in production apps
  if (const String.fromEnvironment('FLUTTER_APP_ENV') == 'development') { // Example: using an env variable
    print('Connecting to Firebase Emulators...');

    // Firestore Emulator
    FirebaseFirestore.instance.settings = const Settings(
      host: 'localhost:8080', // Default Firestore emulator port
      sslEnabled: false,
      persistenceEnabled: false, // Disable persistence for emulator
    );

    // Auth Emulator
    await FirebaseAuth.instance.useAuthEmulator('localhost', 9099); // Default Auth emulator port

    // Storage Emulator
    await FirebaseStorage.instance.useStorageEmulator('localhost', 9199); // Default Storage emulator port

    // Cloud Functions Emulator
    FirebaseFunctions.instance.useFunctionsEmulator('localhost', 5001); // Default Functions emulator port

    // Optional: Remote Config Emulator (requires separate setup and API)
    // You typically point to a specific endpoint or use a local file for remote config emulation
    // The Remote Config emulator does not have a direct `useRemoteConfigEmulator` method
    // You'd typically load local JSON for development or use specific testing frameworks.

    // Optional: Pub/Sub Emulator for FCM (Cloud Messaging)
    // For FCM, you'll generally test with real devices and real FCM service
    // if you need full notification delivery. However, if your functions
    // react to Pub/Sub events that would normally be triggered by FCM,
    // you can emulate Pub/Sub.
  }
  // --- End of Emulator Configuration ---

  runApp(const MyApp());
}

// ... rest of your MyApp and other Flutter code (AuthWrapper, etc.)

Here’s what’s going on in this code:

• firebase init emulators: Sets up your project for emulation.

• firebase emulators:start: Launches the selected emulators. The terminal output will show the URLs for each service's emulator.

• FirebaseFirestore.instance.settings = Settings(...): For Firestore, you configure the host, disable SSL (because it's local), and often disable persistence.

• FirebaseAuth.instance.useAuthEmulator(host, port): For Authentication, you explicitly tell the SDK to use the emulator host and port.

• FirebaseStorage.instance.useStorageEmulator(host, port): Similarly for Storage.

• FirebaseFunctions.instance.useFunctionsEmulator(host, port): For Cloud Functions, you direct callable functions to the local emulator.

• Remote Config Emulator: The firebase_remote_config plugin doesn't have a direct useEmulator method. For development, you often load default values or use mock data. For comprehensive testing, you might deploy to a test Firebase project or use specialized testing tools.

• Conditional Emulation: The example uses const String.fromEnvironment('FLUTTER_APP_ENV') == 'development' to conditionally enable emulators. This is a common pattern to avoid connecting to emulators in production builds. You would run your Flutter app with:

    flutter run --dart-define='FLUTTER_APP_ENV=development'
  

Benefits of emulators:

• Offline development: Work without an internet connection.

• Cost savings: No charges for read/write operations, function invocations, or storage.

• Faster iteration: Instantly see changes to your security rules, functions, and data without waiting for cloud deployments.

• Consistent testing: Create repeatable test environments with known data states.

• Isolated environments: Develop features in isolation without affecting your production data.

5. Continuous Integration and Deployment (CI/CD) with Firebase & Flutter

For production Flutter applications, automating your build, test, and deployment process is critical. Firebase integrates well with popular CI/CD platforms to streamline this workflow.

Key Concepts:

• Build Automation: Automatically compiling your Flutter app (APK, AAB, IPA, Web) whenever code changes are pushed.

• Testing: Running unit, widget, and integration tests to catch bugs early.

• Deployment: Automatically releasing your app to Firebase Hosting, App Distribution, or even directly to app stores (though the latter is more complex).

• Firebase CLI: The backbone of Firebase CI/CD, as it enables programmatic interaction with Firebase services.

• Service Accounts: For automated systems, you'll use a Firebase Service Account instead of personal login credentials. This provides secure, non-interactive authentication.

Example Workflow (GitHub Actions):

Here's a simplified example of a GitHub Actions workflow that builds a Flutter web app and deploys it to Firebase Hosting.

Setup Firebase Service Account

1. In your Firebase Console, go to Project settings -> Service accounts.

2. Click "Generate new private key" to download a JSON file (for example, your-project-id-firebase-adminsdk-xxxxx-xxxxx.json).

3. In GitHub: Go to your repository's Settings -> Secrets and variables -> Actions -> New repository secret.

4. Create a secret named FIREBASE_SERVICE_ACCOUNT_KEY (or similar) and paste the entire content of the downloaded JSON file into the value field. This keeps your key secure.

GitHub Actions Workflow File (.github/workflows/main.yml):

name: Deploy Flutter Web to Firebase Hosting

on:
  push:
    branches:
      - main # Trigger on pushes to the main branch

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest # Use a Linux runner

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Set up Flutter
        uses: subosito/flutter-action@v2
        with:
          channel: 'stable' # or 'beta', 'master'

      - name: Install dependencies
        run: flutter pub get

      - name: Build Flutter Web App
        run: flutter build web --release

      - name: Install Firebase CLI
        run: npm install -g firebase-tools

      - name: Deploy to Firebase Hosting
        # Use Firebase CLI with the service account key
        run: firebase deploy --only hosting --project ${{ secrets.FIREBASE_PROJECT_ID }} --token "${{ secrets.FIREBASE_SERVICE_ACCOUNT_KEY }}"
        # Alternative using FIREBASE_TOKEN for simple cases (requires firebase login --no-localhost)
        # run: firebase deploy --only hosting --project ${{ secrets.FIREBASE_PROJECT_ID }}
        env:
          # If using FIREBASE_TOKEN instead of service account:
          # FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          FIREBASE_PROJECT_ID: your-firebase-project-id # Replace with your actual project ID

Here’s what’s going on:

• on: push: branches: - main: This workflow will run automatically whenever changes are pushed to the main branch.

• runs-on: ubuntu-latest: Specifies the operating system of the virtual machine that will run the job.

• uses: actions/checkout@v4: Checks out your repository code.

• uses: subosito/flutter-action@v2: Sets up the Flutter SDK on the runner.

• flutter pub get: Fetches all your Dart/Flutter dependencies.

• flutter build web --release: Builds the production-ready Flutter web application.

• npm install -g firebase-tools: Installs the Firebase CLI on the runner.

• firebase deploy --only hosting --project ... --token "${{ secrets.FIREBASE_SERVICE_ACCOUNT_KEY }}": This is the deployment command.

  • --only hosting: Specifies that only the Hosting service should be deployed.

  • --project ${{ secrets.FIREBASE_PROJECT_ID }}: Specifies your Firebase project ID. You might add this as another GitHub secret for flexibility.

  • --token "${{ secrets.FIREBASE_SERVICE_ACCOUNT_KEY }}": This is how the Firebase CLI authenticates with Firebase using the service account key. GitHub Actions securely injects the secret value. Note: For basic hosting, sometimes just a FIREBASE_TOKEN generated from firebase login --no-localhost is used, but a service account is more robust for CI/CD.

Further CI/CD Enhancements:

• Testing: Add steps for flutter test after flutter pub get to run your tests automatically.

• App Distribution: Integrate firebase appdistribution:distribute commands for Android APK/AAB or iOS IPA releases to testers.

• Cloud Functions Deployment: Add firebase deploy --only functions for backend updates.

• Multiple Environments: Use different Firebase projects for dev, staging, and production environments, and configure your CI/CD to deploy to the appropriate project based on branch (e.g., develop branch to dev project, main to prod).

Conclusion

Firebase is more than just a collection of backend services – it's an ecosystem designed to accelerate application development and streamline operations. When paired with Flutter's prowess in building beautiful, natively compiled applications, you gain an incredibly productive development stack.

From the robust Firebase Authentication that handles user identity, through the real-time prowess of Cloud Firestore for data, to the scalable Cloud Storage for assets, Cloud Functions for serverless logic, and Firebase Hosting for web deployment – every piece fits together seamlessly.

Services like Remote Config and A/B Testing empower you to dynamically adapt and optimize your app, while Crashlytics and Performance Monitoring keep your app stable and performant. Finally, App Distribution simplifies beta testing, and the Local Emulators revolutionize your development workflow.

For developers looking to accelerate their workflow and leverage the latest in cloud-based development, Firebase Studio (which evolved from Project IDX) offers a compelling environment. It's an AI-assisted, online integrated development environment (IDE) built on Google Cloud and Visual Studio Code, providing a complete workspace in the browser.

By deeply understanding these services, mastering the Firebase Console for management, leveraging the Firebase CLI for automation, and embracing the evolving capabilities of environments like Firebase Studio for AI-powered assistance, Flutter developers are exceptionally well-equipped to build highly scalable, engaging, and resilient applications that stand out in today's digital landscape.

References:

1. Official Documentation (Always the Primary Source):

• Firebase Documentation (Overall): The comprehensive hub for all Firebase services. This is where you'll find the most up-to-date and accurate information for each product.

  • https://firebase.google.com/docs

• Flutter Documentation: The official guides for the Flutter SDK, covering UI, state management, platform integration, and more.

  • https://flutter.dev/docs

• FlutterFire Documentation (Firebase for Flutter): This is critically important as it details how to specifically integrate Firebase services with Flutter. It includes setup guides, plugin usage, and Flutter-specific considerations.

  • https://firebase.google.com/docs/flutter/setup

  • https://firebase.flutter.dev/ (This is often a more direct route to the FlutterFire-specific documentation for individual plugins)

2. Specific Firebase Product Documentation (for "Deep Dive" Sections):

Depending on the specific "cutting-edge" aspects you want to explore, you'd dive into these:

• Firebase Authentication: For user sign-up, login, and identity management (email/password, social logins, phone auth, anonymous).

  • https://firebase.google.com/docs/auth

• Cloud Firestore: The flexible, scalable NoSQL database.

  • https://firebase.google.com/docs/firestore

• Firebase Realtime Database: The original NoSQL database, often used for high-frequency, real-time data needs.

  • https://firebase.google.com/docs/database

• Firebase Cloud Storage: For storing and serving user-generated content like images and videos.

  • https://firebase.google.com/docs/storage

• Firebase Cloud Functions: For serverless backend logic, responding to Firebase events, or serving HTTP requests.

  • https://firebase.google.com/docs/functions

• Firebase Hosting: For deploying your Flutter web app or static assets.

  • https://firebase.google.com/docs/hosting

• Firebase Remote Config: For dynamic app behavior and UI changes without app updates.

  • https://firebase.google.com/docs/remote-config

• Firebase Cloud Messaging (FCM): For sending push notifications.

  • https://firebase.google.com/docs/cloud-messaging

• Firebase Analytics: For understanding user behavior and app performance.

  • https://firebase.google.com/docs/analytics

• Firebase Crashlytics: For real-time crash reporting.

  • https://firebase.google.com/docs/crashlytics

• Firebase Performance Monitoring: For insights into app performance.

  • https://firebase.google.com/docs/perf-mon

• Firebase App Distribution: For distributing pre-release versions to testers.

  • https://firebase.google.com/docs/app-distribution

• Firebase Local Emulator Suite: For local development and testing of Firebase services.

  • https://firebase.google.com/docs/emulator-suite

• Firebase CLI: Command-line tools for managing Firebase projects.

  • https://firebase.google.com/docs/cli

3. Best Practices and Advanced Topics:

• Firebase Security Rules: Crucial for securing your Firestore and Cloud Storage data.

  • https://firebase.google.com/docs/rules

• Firebase Admin SDK: For server-side interactions with Firebase (e.g., managing users, sending messages, data migrations).

  • https://firebase.google.com/docs/admin/setup

Firebase, a platform developed by Google, offers a simple and efficient way to add authentication to your app.

In this article, I’ll walk you through the steps to authenticate your app using Firebase. Whether you're working on a web or mobile application, Firebase provides a straightforward way to integrate various authentication methods.

By the end of this article, you'll have a fully functional authentication system that allows users to sign up, sign in, and manage their accounts securely.

Table of Contents

• Table of Contents

• Prerequisites

• Why Use Firebase for Authentication?

• Step 1: How to Set Up a Firebase Project

• Step 2: How to Install Firebase in Your Project

• Step 3: How to Initialize Firebase in Your App

• Step 4: How to Set Up Authentication Methods

• Authentication Method Using Google

• Step 5: How to Upload to GitHub

• Conclusion

Prerequisites

Before we begin, you need to have the following:

• A Google Account: Firebase is a Google product, and you need a Google account to access the Firebase Console and use Firebase services. If you don’t have a Google account, you can create one here.

Why Use Firebase for Authentication?

Firebase Authentication provides backend services and easy-to-use SDKs to authenticate users to your app. It supports various authentication methods, including:

• Email and password authentication

• Google, Facebook, Twitter, and GitHub Authentication

• Phone Number Authentication

• Anonymous Authentication

These features make Firebase an excellent choice for developers who want to implement secure and reliable authentication without dealing with the complexities of building a custom authentication system.

Let’s get started with the setup!

Step 1: How to Set Up a Firebase Project

Before using Firebase Authentication, you need to set up a Firebase project.

i. Create a Firebase Project

• Go to the Firebase Console.

• Click "Add Project" and follow the on-screen instructions to create a new project.

Once your project is created, you’ll be directed to the Firebase project dashboard.

ii. Add Your App to the Project

• In the Firebase console, click on the "Web" icon (</>) to add a web app to your Firebase project.

• Register your app with a nickname, and click "Register app."

• You will be provided with a Firebase SDK snippet (Software Development Kit), which you'll need to add to your app.

• 

Step 2: How to Install Firebase in Your Project

To start with Firebase Authentication, you'll first need to install Firebase in your project. Here's how you can do it:

• In your code editor, open the terminal for your project.

• Run the following command to install Firebase:

npm install firebase

This command will add Firebase to your project, allowing you to use its authentication and other features.

Step 3: How to Initialize Firebase in Your App

After installing Firebase, the next step is to initialize it in your project using the configuration snippet provided in the Firebase console, commonly referred to as the Firebase SDK snippet.

To set this up:

1. Create a folder named config in your project directory.

2. Inside the folder, create a file called firebase.js.

3. Paste the SDK snippet you obtained from the Firebase console into the firebase.js file.

Here’s what your project setup should look like:

This code initializes Firebase in your app, enabling you to utilize Firebase authentication and other services, such as Firebase storage, for managing your data.

Note: Ensure you generate your unique application key for your application to function correctly.

Step 4: How to Set Up Authentication Methods

Firebase supports multiple authentication methods, like using Google, Facebook, GitHub, and so on.

But let’s set up email and password authentication as an example:

• Go to "Authentication" in the left-hand menu in the Firebase console.

• Click on the "Sign-in method" tab.

• Enable "Email/Password" under the "Sign-in providers" section.

  

  Now that you've enabled email/password authentication, you can create a sign-up and a sign-in function in your app.

  Let’s create a working example of a sign-up function:

  • In your project, create a file named sign-up.jsx.

  • Import the function needed to create a user from Firebase. The function you'll use to create a user is createUserWithEmailAndPassword.

  • Before creating a user, make sure to import the auth instance that is initialized in firebase.js into the sign-up.jsx file.

    import { auth } from '../../../config/firebase';
    import { createUserWithEmailAndPassword } from 'firebase/auth';

    const SignUp = () => {
      // To create the user with email and password
      const handleUser = async (e) => {
        e.preventDefault();
        try {
          await createUserWithEmailAndPassword(auth, email, password);
          alert('User created successfully');
        } catch (err) {
          console.error(err);
        }
      };

      // ... (rest of your SignUp component)
    };

In the return statement, I will use a form, so we need to import the useState() Hook to manage and track changes in the form's input fields.

    <div>
      <h2>Register your Account</h2>
      <form onSubmit={handleCreateUser}>
        <div>
          <label>Name</label>
          <input
            type="text"
            id="name"
            name="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="confirm_password" className={styles.label}>
            Confirm Password
          </label>
          <input
            type="password"
            id="confirm_password"
            name="confirm_password"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
          />
        </div>

        <div>
          <div>
            <input type="checkbox" id="terms" name="terms" className="mr-2" />
            <label htmlFor="terms">
              I agree to the <a href="#">Terms and Conditions</a>
            </label>
          </div>
        </div>

        <button type="submit">Register</button>
      </form>
    </div>

Putting all code together (Sign-up.jsx):

    import { useState } from 'react';
    import { auth } from '../../config/firebase';
    import { createUserWithEmailAndPassword } from 'firebase/auth';

    const SignUp = () => {
      const [name, setName] = useState('');
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const [confirmPassword, setConfirmPassword] = useState('');

      const handleCreateUser = async (e) => {
        e.preventDefault();
        try {
          await createUserWithEmailAndPassword(auth, email, password);
          alert('User created successfully');
        } catch (error) {
          console.log(error);
        }
      };

      return (
        <div>
          <h2>Register your Account</h2>
          <form onSubmit={handleCreateUser}>
            <div>
              <label>Name</label>
              <input
                type='text'
                id='name'
                name='name'
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            </div>

            <div>
              <label htmlFor='email'>Email</label>
              <input
                type='email'
                id='email'
                name='email'
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>

            <div>
              <label htmlFor='password'>Password</label>
              <input
                type='password'
                id='password'
                name='password'
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>

            <div>
              <label htmlFor='confirm_password'>
                Confirm Password
              </label>
              <input
                type='password'
                id='confirm_password'
                name='confirm_password'
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
              />
            </div>

            <div>
              <div>
                <input
                  type='checkbox'
                  id='terms'
                  name='terms'
                  className='mr-2'
                />
                <label htmlFor='terms'>
                  I agree to the{' '}
                  <a href='#'>
                    Terms and Conditions
                  </a>
                </label>
              </div>
            </div>

            <button type='submit'>Register</button>
          </form>
        </div>
      );
    };

    export default SignUp;

Now that you've created the sign-up function, it's time to add a sign-in function so users can log into your app.

Here's how to create a simple sign-in function:

• In your project, create a new file named sign-in.jsx.

• Import the initialized auth instance from firebase.js into sign-in.jsx.

• Use the signInWithEmailAndPassword function from Firebase to allow users to sign in.

Here’s the structure for the sign-in function:

import { useState } from 'react';
import { auth } from '../../config/firebase';
import { signInWithEmailAndPassword } from 'firebase/auth';

const SignIn = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignIn = async (e) => {
    e.preventDefault();
    try {
      await signInWithEmailAndPassword(auth, email, password);
      alert('Signed in successfully');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <h2>Sign In</h2>
      <form onSubmit={handleSignIn}>
        <div>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="password">Password</label>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <button type="submit">Sign In</button>
      </form>
    </div>
  );
};

export default SignIn;

The visual display of the result from the code above both sign-up and sign-in

Authentication Method Using Google

As mentioned earlier, you can collect users' emails directly through a form before they use your app and other ways to authenticate the users.

To use Google authentication:

• In the Firebase console, navigate to "Authentication" in the left-hand menu.

• Click on the "Sign-in method" tab.

• Enable "Google" under the "Sign-in providers" section (for this tutorial, we'll stick with Google, though you can choose other providers).

Now that you've enabled Google authentication, you can create a Google sign-up and sign-in function for your app.

Let's go through how to set up a Google sign-up function:

• First, create a file named Google.jsx in your project.

• Import auth and GoogleAuthProvider from the firebase.js file

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';


const firebaseConfig = {
  apiKey: ....,
  authDomain: ....,
  projectId:.... ,
  storageBucket: .... ,
  messagingSenderId: .... ,
  appId: ....,
  measurementId: ....,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth= getAuth(app);
export const googleProvider = new GoogleAuthProvider(app);

• Initialize the Google provider and export it for use in other parts of your application.

import { auth, googleProvider } from './firebase';  // Adjust the path to your Firebase config file
import { signInWithPopup } from 'firebase/auth';

• Import the necessary Firebase function to authenticate a user. Use the signInWithPopup method to authenticate users with Google.

While there are other authentication methods available, signInWithPopup is preferable as it keeps users within the app, avoiding the need to open a new browser tab.

const signInWithGoogle = async () => {
  try {
    await signInWithPopup(auth, googleProvider);
    alert('Signed in successfully with Google');
  } catch (error) {
    console.error('Error signing in with Google', error);
  }
};

• In your return statement, create a button to trigger the Google sign-in.

return (
  <div>
    <button onClick={signInWithGoogle}>Sign in with Google</button>
  </div>
);

The visual display of the result from the code above:

Firebase allows you to sign users out of your application easily. Here's how you can implement a sign-out function:

• First, import the signOut function from Firebase.

• Once imported, you can call signOut to log the user out of the app.

Here’s a simple example:

import { auth } from './config/firebase'; // Adjust the path based on your file structure
import { signOut } from 'firebase/auth';

const handleSignOut = async () => {
  try {
    await signOut(auth);
    alert('User signed out successfully');
  } catch (error) {
    console.error('Error signing out:', error);
  }
};

With this function, users can easily log out of the app.

In the return statement, you'll typically have a button that triggers the handleSignOut function when clicked.

return (
  <div>
    <h2>Welcome to the app!</h2>
    <button onClick={handleSignOut}>Sign Out</button>
  </div>

The visual display of the result from the code above

Make sure your Firebase project is configured to handle authentication correctly, including Google sign-in, to ensure a smooth sign-in and sign-out experience.

Step 5: How to Upload to GitHub

Before pushing your project to GitHub, make sure to store your Firebase API key in an environment variable to keep it secure. This will prevent sensitive information from being exposed in your shared code.

Creating a .env file

• At the root of your application, create a .env file.

• Add your Firebase API key to the firebase.js file.

• Use import or process.env to access your Firebase API key. Since the app was created with Vite, I used import.

• Finally, update your .gitignore file to include the .env file. This step also protects other sensitive files and directories, like node_modules.

# Logs
logs
node_modules
.env

Conclusion

In conclusion, this guide explains how to integrate Firebase Authentication into your app. Firebase simplifies adding authentication features such as email/password and Google login.

By setting up a Firebase project, installing, and initializing it in your app, you can efficiently build secure user sign-up and sign-in functionalities without the need to start from scratch or set up a server.

If you found this article helpful, share it with others who may also find it interesting.

Stay updated with my projects by following me on Twitter, LinkedIn and GitHub.

The code I used for this tutorial article can be found on my GitHub.

Thank you for reading.

In this in-depth tutorial, you'll learn how to build a full-stack Kanban task management app. Along the way, we'll explore the synergies between technologies like Next.js (featuring a dive into the app router), Next-auth for user authentication, and Firebase, a backend as a service platform to save user data in a database.

We'll also cover how you can integrate Firebase Firestore with Redux Toolkit which enables you to cache data you have retrieved from the database to improve performance. You will also learn how to manage state with Redux Toolkit.

To wrap it up, we will employ React-beautiful-dnd, a library that effortlessly integrates drag-and-drop interactions into our Kanban boards to enhance the user experience.

Here's what we'll cover:

1. How to implement authentication with the next-auth.js library
2. How to set up and integrate the Redux store with Firestore in Next.js.
3. How to build and populate the Kanban app markup with data
4. How to implement Create, Read, Update, and Delete (CRUD) operations on boards and tasks.
5. How to implement drag and drop with react-beautiful-dnd library.

Prerequisites

• You should have prior experience working with the Reactjs/Next.js framework.
• You should have an understanding of type annotations in TypeScript, and ultimately, working with TypeScript in React.
• An understanding of DSA in JavaScript is a plus.
• Experience with Redux-toolkit library will also be a plus.

A few notes:

• This article will focus primarily on functionality, but we'll use Tailwind CSS for styling.
• I'll also include comments with each code snippet provided throughout this article to explain the code better. Keep an eye out for them.

Table Of Contents

1. How To Implement Authentication With next-auth.js
2. How to Configure the Redux Store
3. How to Create Your Kanban App Markup
4. How to Configure Firebase Firestore
5. How to Add Initial Data to the Firestore Database
6. How to Use RTK Query to Fetch Data from Cloud Firestore
7. How to Fetch and Populate Data
   • How to populate the navbar
   • How to populate the sidebar
   • How to populate the BoardTasks component
8. How to Implement CRUD Operations
   • How to add and edit a board
   • How to add and edit tasks
   • How to delete boards and tasks
9. How to Implement Drag and Drop Functionality
10. Conclusion

When you are ready, let's dive in.

How To Implement Authentication With next-auth.js

Begin by running the following command in your terminal to create a new Next.js project:

npx create-next-app@latest kanban-app-tutorial

Throughout the installation process, you will encounter prompts. Make sure you enable TypeScript and Tailwind CSS, as both will be integral to our project development.

Go ahead and clean out the redundant code that comes with the project. Delete the content in the page.tsx file and paste the code below as a placeholder:

export default function Home() {
  return (
    <main>
      <p>Hi</p>
    </main>
  )
}

Also, edit the content in the global.css file and leave only the Tailwind CSS imports.

Once these modifications are complete, install the next-auth.js library with the following command:

npm install next-auth

After successful installation, create an api folder in your root app folder, and inside it create an auth folder. Then, create a [...nextauth] folder inside the auth folder.

Finally, create two files named route.ts and options.ts inside the [...nextauth] folder.

Your file structure should look like the following:

Among the various next-auth.js providers, we will exclusively utilize the Google Provider to execute the authentication process.

In the option.ts file, paste the following code:

import type { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const options: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  secret: process.env.NEXTAUTH_URL,
};

Here, we imported the NextAuthOptions type provided by next-auth for the sake of type safety concerning the options variable.

In the above code, the options object is where whichever provider we want to utilize will be housed (the Google Provider in this case).

You can get your clientId and clientSecret values from the Google Cloud Platform. If you need a step-by-step guide on how to get them, refer to this guide.

Once you have gotten them, create a .env file in the root folder of your application and paste the values in their respective variables.

Lastly, create a secret key for the NEXTAUTH_SECRET variable using the following terminal command:

openssl rand -base64 32

Ultimately, your .env file should contain these variables and values:

GOOGLE_CLIENT_ID = <client ID value>
GOOGLE_CLIENT_SECRET = <client secret value>
NEXT_AUTH_SECRET = <next auth secret>

Important: You’ll also need these environment variables in production. So, don’t forget to update your production environment variable in your project settings on Vercel.

Proceed to the route.ts file and paste the following code in it:

import NextAuth from "next-auth/next";
import { options } from "./options";

const handler = NextAuth(options);

export { handler as GET, handler as POST };

Here, we imported the options variable from the option.ts file and passed it as a parameter to the NextAuth function, assigning the result to the handler variable.

The final statement ensures that any GET or POST request sent to the api/auth/[...nextauth] route will be managed by next-auth.js.

However, authentication won't be initiated yet because we haven't informed next-auth.js about which pages should be protected.

To implement protected routes, generate a middleware.ts file in the root src folder and insert the following code:

export { default } from 'next-auth/middleware'

export const config = { matcher: ['/'] }

The matcher property in the config object is an array containing the routes you want the middleware to protect. In this case, '/' designates the home page, indicating that the middleware protects the home page.

When you run your project server (with npm run dev), you should see an authentication page as seen below:

Now, let's configure the Redux store in our application.

How to Configure the Redux Store

To set up the Redux store in your application, follow these steps:

1. Begin by installing the necessary packages. Run the following command in your terminal:

npm install @reduxjs/toolkit react-redux

This installs the Redux Toolkit and react-redux for React bindings.

2. In the root src directory, create a folder named redux. Within this folder, create a store.ts file. Paste the following code into the store.ts file:

   // store.ts

   import { configureStore } from "@reduxjs/toolkit";
   import { setupListeners } from "@reduxjs/toolkit/dist/query";

   // Create the Redux store
   export const store = configureStore({
     reducer: {}, // Add your reducers here
   });

   // Setup listeners for refetch behaviors
   setupListeners(store.dispatch);

   // Define RootState and AppDispatch types
   export type RootState = ReturnType<typeof store.getState>;
   export type AppDispatch = typeof store.dispatch;

In this code snippet, configureStore is used to create the Redux store, and setupListeners is called to handle refetchOnFocus and refetchOnReconnect behaviours.

3. Now, create another file in the same redux folder named hooks.ts and add the following code:

// hooks.ts
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "./store";
// Typed versions of useDispatch and useSelector hooks

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

This code creates typed versions of the useDispatch and useSelector hooks to ensure type safety when interacting with the Redux store.

4. Still in the redux folder, create a file named provider.tsx with the following code snippet:

// provider.tsx
'use client'
import { store } from "./store";
import { Provider } from "react-redux";

// Custom provider component
export function Providers({ children }: { children: React.ReactNode }) {
   return <Provider store={store}>{children}</Provider>;
 }

This file defines a custom provider component to wrap around your application components.

5. In your application layout file (src/app/layout.tsx), import the Providers component and wrap it around your main layout as seen below:

// layout.tsx

import type { Metadata } from 'next'
import { Plus_Jakarta_Sans } from "next/font/google";
import './globals.css'
import { Providers } from "@/components/redux/provider";

//font we'll use throughout the project
const pjs = Plus_Jakarta_Sans({ subsets: ["latin"], display: "swap" });
// Metadata definition
export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
  }

// RootLayout component
export default function RootLayout({
   children,
   }: {
   children: React.ReactNode
 }) {
   return (
      <html lang="en" className={pjs.className}>
        <body>
          <Providers>
            {children}
          </Providers>
        </body>
      </html>
  );
}

By wrapping your components with the Providers component, you ensure that every component in your application has access to the Redux store.

Up to this point, your folder structure should look like this:

With these steps, you have successfully integrated the Redux store into your application, and you are ready to create slices for your application.

Before diving into the implementation of slices, let's create the markup for our application.

How to Create Your Kanban App Markup

This section guides you through the process of building the markup for your Kanban app. By the end of this section, your markup should resemble the image below:

Let's start by creating the navbar component.

1. Begin by establishing a components folder within the app directory. Inside it, create a Navbar.tsx file and insert the following code:

// src/app/components/Navbar.tsx

export default function Navbar() {

return (
  <nav className="bg-white border flex h-24">
    <div className="flex-none w-[18.75rem] border-r-2 flex items-center pl-[2.12rem]">
      <p className="font-bold text-3xl"> Kanban App </p>
    </div>

   <div className="flex justify-between w-full items-center pr-[2.12rem]">
       <p className="text-black text-2xl font-bold pl-6">
         Board Name
       </p>

      <div className="flex items-center space-x-3">
        <button className="bg-blue-500 text-black px-4 py-2 flex rounded-3xl items-center space-x-2">
           <p>+ Add New Task</p>
        </button>
          <div className="flex items-center">
            <button className="text-3xl mb-4">...</button>
          </div>
        </div>
      </div>
    </nav>
  )}

2. Next, render the Navbar component in the src/app/layout.tsx file:

   import type { Metadata } from 'next'
   import { Providers } from "@/components/redux/provider";
   import Navbar from './components/Navbar';
   import { Plus_Jakarta_Sans } from "next/font/google";
   import './globals.css'

   const pjs = Plus_Jakarta_Sans({ subsets: ["latin"], display: "swap" });

   export const metadata: Metadata = {
    title: 'Create Next App',
    description: 'Generated by create next app',
   }

   export default function RootLayout({
    children,
   }: {
    children: React.ReactNode
   }) {
   return (
    <html lang="en" className={pjs.className}>
      <body>
        <Providers>
          <Navbar />  {/* Render the component here */}
          {children}
        </Providers>
      </body>
    </html>
    )}

Now, the Navbar component is available globally across all pages in the application since it's rendered in the root layout component.

After implementing these changes, upon signing in to your application on localhost:3000, you should observe the UI as depicted in the image below.

The placeholder "Current board name" in the navbar will eventually be replaced with the name of an active board once we populate the app with data.

The "Add New Task" button is designed to open the "Add new tasks" modal, and the ellipsis next to it will trigger a dropdown for editing and deleting a board. The implementation of this dropdown is the focus of the next step.

3. Create a Dropdown.tsx file in the same components folder, and paste the following code into it:

   //src/app/components/Dropdown.tsx

   interface IDropdown {
    show: boolean
   }

   export default function Dropdown({ show }: IDropdown) {

    return (
      <div
        className={`${
          show ? "block" : "hidden"
        } w-48 absolute top-full bg-white
         border shadow-lg right-0 py-2 rounded-2xl`}
      >
        <div className="hover:bg-gray-300">
          <button className="text-sm px-4 py-2">Edit Board</button>
        </div>
        <div className="hover:bg-gray-300">
          <button className="text-sm px-4 py-2">
            Delete Board
          </button>
        </div>
      </div>
    )}

This component takes a show parameter of type boolean as a prop. The dropdown content is displayed when show is true and hidden when it's false.

Now, proceed to the Navbar.tsx file and update the code to render the Dropdown component. Pay attention to the comments in the code snippet below to get a grasp of the updates here:

   //src/app/components/Navbar.tsx

   'use client' // we made this a client component since we have to make use of useState

   import Dropdown from "./Dropdown";
   import { useState } from 'react'

   export default function Navbar() {

   const [show, setShow] = useState<boolean>(false); // this will manage the state of the show variable

   return (
    <nav className="bg-white border flex h-24">
      <div className="flex-none w-[18.75rem] border-r-2 flex items-center pl-[2.12rem]">
        <p className="font-bold text-3xl"> Kanban App </p>
      </div>

      <div className="flex justify-between w-full items-center pr-[2.12rem]">
        <p className="text-black text-2xl font-bold pl-6">Current board name</p>

        <div className="flex items-center space-x-3">
          <button className="bg-blue-500 text-black px-4 py-2 flex rounded-3xl items-center space-x-2">
            <p>+ Add New Task</p>
          </button>
          <div className="relative flex items-center">
            <button 
            onClick={() => setShow(!show)} // trigger function that shows dropdown here
            className="text-3xl mb-4">...</button>
            <Dropdown show={show}/>  {/* render dropdown here and pass show as prop */}
          </div>
        </div>
      </div>
    </nav>
    )}

After you make these adjustments in your Navbar component, you can now toggle the dropdown by clicking on the ellipsis:

In the next step, we'll implement components that make up the body of our application, specifically the sidebar components and board that displays the tasks.

4. To implement the sidebar, create a Sidebar.tsx file within the same components directory. Paste the following code into it:

   // src/app/components/Sidebar.tsx

   export default function Sidebar() {
   return (
    <aside className="w-[18.75rem] flex-none dark:bg-dark-grey h-full py-6 pr-6">
      <p className="text-medium-grey pl-[2.12rem] text-[.95rem] font-semibold uppercase pb-3">
        {`All Boards (0)`}
      </p>
      <div className="cursor-pointer flex items-center rounded-tr-full rounded-br-full bg-blue-500 space-x-2 pl-[2.12rem] py-3 pb-3">
        <p className="text-white text-lg capitalize">Current board name</p>
      </div>
      <button className="flex items-center space-x-2 pl-[2.12rem] py-3">
        <p className="text-base font-bold capitalize text-main-purple">
          + Create New Board
        </p>
      </button>
    </aside>
   );
   }

5. Following this, create another file named BoardTasks.tsx and paste the code below to it. This component will contain the contents of an active board task. Since the app is not yet populated with data, we'll use a placeholder that will be substituted by actual tasks later.

   // src/app/components/BoardTasks.tsx

   export default function BoardTasks() {
   return (
    <div className="overflow-x-auto overflow-y-auto w-full bg-stone-200">
      <div className="w-full h-full flex justify-center items-center">
        <div className="flex flex-col items-center">
          <p className="text-black text-sm">
            This board is empty. Create a new column to get started.
          </p>
          <button className="bg-blue-500 text-black px-4 py-2 flex mt-6 rounded-3xl items-center space-x-2">
            <p>+ Add New Column</p>
          </button>
        </div>
      </div>
    </div>
    );
   }

6. Then, paste the following code in your src/app/page.tsx file to render both the Sidebar and BoardTasks components:

   import Sidebar from "./components/Sidebar";
   import BoardTasks from "./components/BoardTasks";

   export default function Home() {
   return (
    <main className="flex h-full">
      <Sidebar />
      <BoardTasks />
    </main>
   );
   }

Up to this point, your file structure should resemble the following:

7. Finally, in the root layout.tsx file, update the style of the body tag as shown below:

 // src/app/layout.tsx
   // rest of the code here
   export default function RootLayout({
   children,
   }: {
   children: React.ReactNode;
   }) {
   return (
    <html lang="en" className={pjs.className}>
      <body className='pb-24 h-screen overflow-hidden'> {/* update style here*/}
        {/* rest of the code here */}
      </body>
    </html>
   );
   }

This adjustment ensures that the content in the BoardTasks component is scrollable on both the x and y axis if it exceeds the length and breadth of the screen.

With this, the markup for our app is complete. Your UI should resemble this if you have been following along:

The sidebar will display the number of boards and the names of available boards in the app. Clicking different boards in the sidebar will switch to the selected board, and clicking "Create New Board" in the sidebar opens the "Add New Board" modal.

Right next to the sidebar, the tasks in each board will be displayed in columns. The current screen will be displayed if the board has no tasks yet. The "+Add New Column" button will open a modal used to add a column to a board.

All these features will be activated as we populate the application with data.

Moving forward, the next section will guide you in integrating Firebase Firestore into your application.

How to Configure Firebase Firestore

To integrate Firestore into your application, you'll need to create a Firebase project using the Firebase console. Feel free to name the project according to your preference, but for the sake of this tutorial, let's name it "Kanban-app-tutorial."

Once the project is created, you'll be prompted to register your app. After registration, install Firebase in your application. Install the Firebase package with the following command in your terminal:

npm install firebase

Now, you need to initialize Cloud Firestore in your application. Create a folder named utils and within it, create a firebaseConfig.ts file. Paste your Firebase configuration into it as shown below:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// Your web app's Firebase configuration
const firebaseConfig = {
 // Paste your Firebase config here
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Firestore and export it
export const db = getFirestore(app);

Finally, navigate to your newly created project on the cloud platform and create a Cloud Firestore database. Following this, proceed to the "Rules" tab and modify the read and write rules from false to true as illustrated in the image:

This will enable anyone to add data to the database without restrictions. Note that this is not recommended for production – we are implementing it like this for the purpose of this article.

With this setup complete, we can now begin adding data to the Cloud Firestore.

How to Add Initial Data to the Firestore Database

Our goal is to ensure that users aren't greeted with an empty board when they complete the authentication process. Instead, we want to present them with dummy task data that they can interact with, allowing them to explore the application's features.

Also, we aim to make this data user-specific, forming the foundation for each user to build upon by creating new boards and tasks.

To accomplish this, when a new user signs in, we'll generate a new document in the database for that user.

Here's a breakdown of our approach:

1. Check if the user is new: We need to determine whether the user is signing in for the first time. This way, we can automatically create a new document for the user in the database.

2. Create a new user document: If the user is new, we proceed to create a new data entry in the database specifically for that user.

To begin, create a data.js file inside the utils folder we created earlier (this will contain our dummy data for a board). Paste the provided data code into it.

//used to generate new id
export const id = () => Math.random().toString(36).substring(2, 10);

export const data = {
  "boards": [
    {
      id: id(),
      name: "Roadmap",
      columns: [
        {
          id: id(),
          name: "Now",
          tasks: [
            {
              id: id(),
              title: "Launch version one",
              status: "Now"
            },
            {
              id: id(),
              title: "Review early feedback and plan next steps for roadmap",
              status: "Now"
            }
          ]
        },
        {
          id: id(),
          name: "Next",
          tasks: []
        },
        {
          id: id(),
          name: "Later",
          tasks: []
        }
      ]
    }
  ]
}

Now, navigate to the src/app/page.tsx file and modify it as demonstrated below:

"use client";
import Sidebar from "./components/Sidebar";
import BoardTasks from "./components/BoardTasks";
// Firestore methods: collection and getDocs for document reference, addDoc for adding a document
import { collection, getDocs, addDoc } from "firebase/firestore";
// Connect our app to Firestore
import { db } from "./utils/firebaseConfig";
import { useEffect, useState } from "react";
// Import getSession from next-auth library to retrieve signed-in user details
import { getSession } from "next-auth/react";
// Import data from data.json, used to initialize the Firestore database for new users
import { data } from "./utils/data.json";

export default function Home() {
  // Manage user details in this state. Key index in TypeScript ensures type safety.
  const [userDetails, setUserDetails] = useState<{ [key: string]: any }>();

  // Get user session using getSession. Contains user's name and email, then passed to user details state.
  const getUserSession = async () => {
    const session = await getSession();
    if (session) {
      setUserDetails(session.user);
    }
  };

  const handleAddDoc = async () => {
    if (userDetails) {
      // Execute code inside curly braces only when `userDetails` is true.

      // Reference to the document with the user's email to check its existence in the database.
      const docRef = collection(db, "users", userDetails.email, "tasks");
      const getDos = await getDocs(docRef);

      // If the document exists, terminate the program.
      if (getDos.docs.length > 0) {
   ;     return;
      } else {
        // If not, submit a new document containing the data from data.json for the user in the database.
        try {
          await addDoc(
            collection(db, "users", userDetails.email, "tasks"),
            data
          );
        } catch (e) {
          console.error("Error adding document: ", e);
        }
      }
    }
  };

  useEffect(() => {
    getUserSession(); // Call getUserSession function after the page renders.
  }, []);

  useEffect(() => {
    handleAddDoc(); // Call handleAddDoc function after the user details update.
  }, [userDetails]);

  return (
    <main className="flex h-full">
      <Sidebar />
      <BoardTasks />
    </main>
  );
}

This code ensures that when a user logs in, their details are fetched and checked. If it's a new user, a new document with initial dummy data is added to the Firestore database under the user's email. Make sure you've read through the comments I added if you need any further explanation.

Upon visiting your project console, you'll notice the presence of a document created for the signed-in user (which is you):

The initial setup is now complete, enabling us to fetch data and initiate the population of our application. But before directly interacting with the data, we'll employ RTK query, which is included in the Redux toolkit package, as an intermediary.

This approach not only eliminates the need to write data fetching and caching logic in various components repeatedly, but also eliminates background revalidation, so we don't need explicit manual refreshes.

The next section will explore this process.

How to Use RTK Query to Fetch Data from Cloud Firestore

Here, we'll begin the process of creating slices for the reducer, starting with the development of the slice dedicated to data fetching.

Within the src/redux directory, create a new folder named services.

Inside the newly created services folder, establish a file named apiSlice.ts. Copy and paste the provided code into this file:

   import { createApi, fakeBaseQuery } from "@reduxjs/toolkit/query/react";
   import { getSession } from "next-auth/react";
   import { collection, getDocs } from "firebase/firestore";
   import { db } from "@/components/app/utils/firebaseConfig";

   // Create the Firestore API using createApi
   export const fireStoreApi = createApi({
   reducerPath: "firestoreApi", // Specifies the path for the reducer
   baseQuery: fakeBaseQuery(), // Utilizes fakeBaseQuery because Firebase has no traditional REST API endpoint
   tagTypes: ["Tasks"], // Defines tag types for caching purposes
   endpoints: (builder) => ({
    fetchDataFromDb: builder.query<{ [key: string]: any }[], void>({
      // Utilizes builder.query for making requests; builder.mutation can be used for CRUD operations
      async queryFn() {
        // Employs queryFn since we are not fetching data from a conventional API;
        // This allows us to include arbitrary code, as long as we return our data in the { data: results } format

        try {
          const session = await getSession();
          const { user } = session!;
            const ref = collection(db, `users/${user?.email}/tasks`);
            const querySnapshot = await getDocs(ref);
            return { data: querySnapshot.docs.map((doc) => doc.data()) };
            // Data must be returned in this format when using queryFn

        } catch (e) {
          return { error: e };
        }
      },
      providesTags: ["Tasks"], // Specifies tags for caching
    }),
   }),
   });

   // Export hooks for using the created endpoint
   export const { useFetchDataFromDbQuery } = fireStoreApi;

This code establishes a Firestore API using createApi, defining an endpoint for fetching data. The use of fakeBaseQuery is intentional, considering Firebase doesn't have a conventional base URL.

The code also integrates caching and invalidation through tags. In this slice, we've specified tagTypes as 'Tasks'. In subsequent sections, we'll explore how invalidation and refetching can be done through tags.

In the slice, endpoints can be perceived as API endpoints. Functions defined within this endpoints function will be exported in the form of use...Query if it's a builder.query function (as in this case, useFetchDataFromDbQuery), and use...Mutation if it's a builder.mutation function (more on this later).

Now, we'll lay the foundation for incorporating the slices we generate into the Redux store. Since we will create multiple slices in the future, it's prudent to compile them into a dedicated file using combineReducers.

Next, create a rootReducer.ts file within the src/redux folder. Embed the following code snippet into this file to integrate the previously created apiSlice:

  import { combineReducers } from "@reduxjs/toolkit";
   import { fireStoreApi } from "./services/apiSlice";

   export const rootReducer = combineReducers({
    [fireStoreApi.reducerPath]: fireStoreApi.reducer,
   });

In this snippet, we imported the earlier-created apiSlice and include it in the combineReducers function, specifying the key-value pair as [fireStoreApi.reducerPath]: fireStoreApi.reducer.

This configuration ensures that the state managed by the apiSlice is effectively integrated into the Redux store.

Finally, we'll add the rootReducer to the Redux store here. Navigate to the src/redux/store.ts and modify it like below:

import { configureStore } from "@reduxjs/toolkit";
   import { setupListeners } from "@reduxjs/toolkit/dist/query";
   import { rootReducer } from "./rootReducer";
   import { fireStoreApi } from "./services/apiSlice";

   export const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(fireStoreApi.middleware),
   });
   setupListeners(store.dispatch)
   export type RootState = ReturnType<typeof store.getState>;
   export type AppDispatch = typeof store.dispatch;

Here, we integrate our rootReducer into the store and pass the fireStoreApi.middleware to the middleware prop of the configureStore function. This ensures that the Redux store uses the middleware for making requests to Firestore.

Now, we can safely start the process of fetching and populating our application with data, which will be the focus of the upcoming section.

How to Fetch and Populate Data

Our approach begins with populating data in the Navbar component, followed by the Sidebar, and finally, the BoardTasks.

How to populate the navbar

For the Navbar, we want to display the name of the current board. But since we'll need this information in other parts of the app, we'll also store it centrally in the Redux store.

To achieve this, we'll create a new slice called appSlice, which will manage the state related to the current board name. This slice will also be responsible for handling logic and state unrelated to API calls.

First, create a features folder within the src/redux directory.

Inside the features folder, create a file named appSlice.ts and paste the following code:

   import { createSlice, PayloadAction } from "@reduxjs/toolkit";
   import { RootState } from "../store";

   // Define the initial state for the slice
   const initialState = {
    currentBoardName: "",
   };

   export const features = createSlice({
   // Name of the slice
   name: "features",
   initialState,
   // Functions that update the initialState are written inside the reducers object
   reducers: {
    // This function updates the board name when called
    setPageTitle: (state, action: PayloadAction<string>) => {
      state.currentBoardName = action.payload;
    },
   },
   });

   // Export the functions defined inside the reducers here
   export const { setPageTitle } = features.actions;

   // Selector function to retrieve the current board name from the state
   export const getPageTitle = (state: RootState) => state.features.currentBoardName;

   // Export the reducer for use in the Redux store
   export default features.reducer;

This code defines the appSlice slice, which includes the initial state, reducers, and actions for managing the current board name.

To make the appSlice available globally, we must integrate it into the Redux store. Open the src/redux/rootReducer.ts file and modify it as follows:

   // src/redux/rootReducer.ts
   import { combineReducers } from "@reduxjs/toolkit";
   import { fireStoreApi } from "./services/apiSlice";
   import  featuresReducer  from "./features/appSlice";

   export const rootReducer = combineReducers({
   //add the features slice here
   features: featuresReducer,
   [fireStoreApi.reducerPath]: fireStoreApi.reducer,
   });

This updated rootReducer now includes the featuresReducer, making the appSlice available throughout the application.

Next, we need to update the Navbar component to fetch the current board name from the Redux store and display it. Open the app/components/Navbar.tsx file and make the following changes:

  'use client' 

   import Dropdown from "./Dropdown";
   import { useState, useEffect } from 'react'
   // Import Redux functions and selectors for managing board names
   import { setCurrentBoardName, getCurrentBoardName } from '../../redux/features/appSlice'
   import { useAppDispatch, useAppSelector } from '@/components/redux/hooks'
   // Import the data-fetching hook from the API slice
   import { useFetchDataFromDbQuery } from "@/components/redux/services/apiSlice";

   export default function Navbar() {
    const [show, setShow] = useState<boolean>(false);
   // Destructuring assignment to extract data from the useFetchDataFromDbQuery hook
   const { data } = useFetchDataFromDbQuery();
   // Access the Redux dispatch function for calling actions
   const dispatch = useAppDispatch();

   // Effect hook to run when the data updates
   useEffect(() => {
    if (data) {
      // When a user signs in, set the currentBoardName to the first board's name
      const activeBoard = data[0].boards[0];
      dispatch(setCurrentBoardName(activeBoard.name));
    }
   }, [data]);

   // Select the current board name from the Redux store
   const currentBoardName = useAppSelector(getCurrentBoardName);

   return (
    <nav className="bg-white border flex h-24">
      <div className="flex-none w-[18.75rem] border-r-2 flex items-center pl-[2.12rem]">
        <p className="font-bold text-3xl"> Kanban App </p>
      </div>

      <div className="flex justify-between w-full items-center pr-[2.12rem]">
        {/* populate the current board name in the navbar */}
        <p className="text-black text-2xl font-bold pl-6">{currentBoardName}</p>

        <div className="flex items-center space-x-3">
          <button className="bg-blue-500 text-black px-4 py-2 flex rounded-3xl items-center space-x-2">
            <p>+ Add New Task</p>
          </button>
          <div className="relative flex items-center">
            <button onClick={() => setShow(!show)} className="text-3xl mb-4">
              ...
            </button>
            <Dropdown show={show} />
          </div>
        </div>
      </div>
    </nav>
   );
   }

After these updates, your navbar should now display the name of the current board, which is "Roadmap":

How to populate the sidebar

Once populated with data, the sidebar will display the number of boards and the names of the available boards in the application. Clicking on different boards in the sidebar will switch the view to the selected board.

While we currently only have one board available in the data, we'll lay the groundwork for these features to support multiple boards in the future.

Navigate to the Sidebar component and make the following edits as seen below:

import { useState } from "react";
import { useAppDispatch } from "@/components/redux/hooks";
import { useFetchDataFromDbQuery } from "@/components/redux/services/apiSlice";
import { setCurrentBoardName } from "@/components/redux/features/appSlice";

export default function Sidebar() {
  // State to keep track of the index of the active board during navigation
  const [active, setActive] = useState<number>(0);

  const { data } = useFetchDataFromDbQuery();
  const dispatch = useAppDispatch();

  // Function to handle navigation through boards
  const handleNav = (index: number, name: string) => {
    setActive(index);
    dispatch(setCurrentBoardName(name));
  };

  return (
    <aside className="w-[18.75rem] flex-none dark:bg-dark-grey h-full py-6 pr-6">
      {data && (
        <>
          {/* Display the number of boards available in the data */}
          <p className="text-medium-grey pl-[2.12rem] text-[.95rem] font-semibold uppercase pb-3">
            {`All Boards (${data[0]?.boards.length})`}
          </p>
          {/* Display the names of each board */}
          {data[0]?.boards.map(
            (board: { [key: string]: any }, index: number) => {
              const { name, id } = board;
              const isActive = index === active; // Check if the board is active
              return (
                <div
                  key={id}
                  onClick={() => handleNav(index, name)} // Handle navigation through boards on click
                  className={`${
                    isActive ? 'rounded-tr-full rounded-br-full bg-blue-500 text-white' : 'text-black'
                  } cursor-pointer flex items-center 
                  space-x-2 pl-[2.12rem] py-3 pb-3`}
                >
                  <p className="text-lg capitalize">{name}</p>
                </div>
              );
            }
          )}
        </>
      )}
      <button className="flex items-center space-x-2 pl-[2.12rem] py-3">
        <p className="text-base font-bold capitalize text-main-purple">
          + Create New Board
        </p>
      </button>
    </aside>
  );
}

With the above code, we have prepared the sidebar for handling multiple boards in the future. When multiple boards are available in the data, the sidebar will dynamically display them, allowing users to switch between them seamlessly.

Up to this point, your sidebar UI should reflect these updates:

Moving forward, in the next section we'll populate the BoardTasks component.

How to populate the BoardTasks component

In this section, the goal is to present a maximum of seven task columns on the screen. If there are fewer than seven columns, we'll display an option to add more. Also, we'll want to have an indication of an empty column for columns without tasks.

Each task card should feature edit and delete icons. These will serve as placeholders for forthcoming modal functionalities.

To implement these changes, go to the BoardTasks component and make the following updates:

import { useEffect, useState } from "react";
import { useFetchDataFromDbQuery } from "@/components/redux/services/apiSlice";
import { useAppSelector } from "@/components/redux/hooks";
import { getCurrentBoardName } from "@/components/redux/features/appSlice";
import { MdEdit, MdDelete } from "react-icons/md";

// Define types for the tasks data
interface ITask {
  title: string;
  description: string;
  status: string;
}

// Define types for the data in each column
interface Column {
  name: string;
  tasks?: ITask[];
}

export default function BoardTasks() {
  // Get loading state and data from the useFetchDataFromDbQuery endpoint
  const { isLoading, data } = useFetchDataFromDbQuery();
  // Manage column data in columns state
  const [columns, setColumns] = useState<Column[]>([]);
  // Get active board name from the redux store
  const activeBoard = useAppSelector(getCurrentBoardName);

  // Once data fetches successfully, this function in the useEffect runs
  useEffect(() => {
    if (data !== undefined) {
      const [boards] = data;
      if (boards) {
        // Get the data of the active board
        const activeBoardData = boards.boards.find(
          (board: { name: string }) => board.name === activeBoard
        );
        if (activeBoardData) {
          const { columns } = activeBoardData;
          setColumns(columns);
        }
      }
    }
  }, [data, activeBoard]);

  return (
    <div className="overflow-x-auto overflow-y-auto w-full p-6 bg-stone-200">
      {/* If data has not been fetched successfully, display a loading state, else display the column of tasks */}
      {isLoading ? (
        <p className="text-3xl w-full text-center font-bold">Loading tasks...</p>
      ) : (
        <>
          {/* If columns of tasks isn't empty: display the tasks, else display the prompt to add a new column */}
          {columns.length > 0 ? (
            <div className="flex space-x-6">
              {columns.map((column) => {
                const { id, name, tasks } = column;
                return (
                  <div key={id} className="w-[17.5rem] shrink-0">
                    <p className="text-black">{`${name} (${
                      tasks ? tasks?.length : 0
                    })`}</p>

                    {tasks &&
                      // Display the tasks if there are tasks in the column, if not, display an empty column
                      (tasks.length > 0 ? (
                        tasks.map((task) => {
                          const { id, title, status } = task;

                          return (
                            <div
                              key={id}
                              className="bg-white p-6 rounded-md mt-6 flex items-center justify-between border"
                            >
                              <p>{title}</p>
                              <div className="flex items-center space-x-1">
                                <MdEdit className="text-lg cursor-pointer" />
                                <MdDelete className="text-lg cursor-pointer text-red-500" />
                              </div>
                            </div>
                          );
                        })
                      ) : (
                        <div className="mt-6 h-full rounded-md border-dashed border-4 border-white" />
                      ))}
                  </div>
                );
              })}
              {/* If the number of columns of tasks is less than 7, display an option to add more columns */}
              {columns.length < 7 ? (
                <div className="rounded-md bg-white w-[17.5rem] mt-12 shrink-0 flex justify-center items-center">
                  <p className="cursor-pointer font-bold text-black text-2xl">
                    + New Column
                  </p>
                </div>
              ) : (
                ""
              )}
            </div>
          ) : (
            <div className="w-full h-full flex justify-center items-center">
              <div className="flex flex-col items-center">
                <p className="text-black text-sm">
                  This board is empty. Create a new column to get started.
                </p>
                <button className="bg-blue-500 text-black px-4 py-2 flex mt-6 rounded-3xl items-center space-x-2">
                  <p>+ Add New Column</p>
                </button>
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}

After you make these edits, your UI should now reflect the changes as demonstrated in the GIF below:

Next, we'll turn our attention to implementing CRUD (Create, Read, Update, and Delete) operations throughout our application.

How to Implement CRUD Operations

Before we dive into implementing CRUD functionalities throughout our app, we need to establish the updateBoardToDb mutation endpoint within the apiSlice. This endpoint will allow us to make necessary updates to our database for CRUD actions.

Integrate the following code into your redux/services/apiSlice.ts file to include the mutation endpoint:

import { createApi, fakeBaseQuery } from "@reduxjs/toolkit/query/react";
import { getSession } from "next-auth/react";
// additionally import the doc and updateDoc method from firestore to get user document reference and update the document, respectively
import { collection, doc, getDocs, updateDoc } from "firebase/firestore";
import { db } from "@/components/app/utils/firebaseConfig";

export const fireStoreApi = createApi({
  reducerPath: "firestoreApi",
  baseQuery: fakeBaseQuery(),
  tagTypes: ["Tasks"],
  endpoints: (builder) => ({
    fetchDataFromDb: builder.query<{ [key: string]: any }[], void>({
      async queryFn() {
        try {
          const session = await getSession();
          if (session?.user) {
            const { user } = session;
            const ref = collection(db, `users/${user.email}/tasks`);
            const querySnapshot = await getDocs(ref);
            return { data: querySnapshot.docs.map((doc) => doc.data()) };
          }
        } catch (e) {
          return { error: e };
        }
      },
      providesTags: ["Tasks"],
    }),
    // endpoint for CRUD actions
    updateBoardToDb: builder.mutation({
      async queryFn(boardData) {
        try {
          const session = await getSession();
          if (session?.user) {
            const { user } = session;
            const ref = collection(db, `users/${user.email}/tasks`);
            const querySnapshot = await getDocs(ref);
            const boardId = querySnapshot.docs.map((doc) => {
              return doc.id;
            });
            await updateDoc(doc(db, `users/${user.email}/tasks/${boardId}`), {
              boards: boardData,
            });
          }
          return { data: null };
        } catch (e) {
          return { error: e };
        }
      },
      invalidatesTags: ["Tasks"], // this will be used to invalidate the initially fetched data. 
      // Data will have to be refetched once this enpoint has been called
    }),
  }),
});

// Export hooks for using the created endpoint
export const { useFetchDataFromDbQuery, useUpdateBoardToDbMutation } =
  fireStoreApi;

Upon calling the useUpdateBoardToDbMutation endpoint, our database data will be updated accordingly.

Following each update, Redux seamlessly performs background refreshes to ensure we're operating with the latest data. This functionality is enabled by the invalidatesTags property we passed to the updateBoardToDb endpoint.

Having successfully implemented the CRUD endpoint, our next step is to implement the features for adding and editing boards.

How to add and edit a board

Once we've completed the UI implementation, the modal for adding a new board should resemble the following:

Similarly, for editing a board:

If you look at the images above, you can see that both modals share a striking resemblance, differing only in their titles.

This presents an excellent opportunity to implement the DRY (Don't Repeat Yourself) concept in programming. In a few steps, we'll explore how to leverage a single modal to fulfill both purposes.

First, we'll use the react-modal library to create a custom modal component. This allows us to avoid building from scratch.

To begin, install the react-modal library by running the following command:

 npm i react-modal

Then create a Modal.tsx file in the app/components directory and add the provided code. This code defines a custom modal component with styling.

import ReactModal from "react-modal";

interface ModalProps {
  children?: React.ReactNode;
  isOpen: boolean;
  onRequestClose: () => void;
}

ReactModal.setAppElement("*");

export function Modal({ children, isOpen, onRequestClose }: ModalProps) {
  const modalStyle = {
    overlay: {
      zIndex: "900000",
      backgroundColor: "rgba(0,0,0,0.45)",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
    },
    content: {
      top: "50%",
      left: "50%",
      right: "auto",
      bottom: "auto",
      marginRight: "-50%",
      transform: "translate(-50%, -50%)",
      padding: "0px",
      borderRadius: ".5rem",
      width: "auto",
      backgroundColor:  "#fff",
      border: "none",
    },
  };

  return (
    <ReactModal
      onRequestClose={onRequestClose}
      isOpen={isOpen}
      style={modalStyle}
    >
      {children}
    </ReactModal>
  );
}

interface ModalBody {
  children: React.ReactNode;
}

export function ModalBody({ children }: ModalBody) {
  return <form className="w-[21.4rem] md:w-[30rem] p-8">{children}</form>;
}

In this code, we have implemented and styled the overlay and body (content) of the modal.

Now, create a folder named AddAndEditBoardModal.tsx and paste the provided code into it as a placeholder. Don't worry about the red squiggly lines you get in your code editor for now – we'll address them in a bit.

   import { Modal, ModalBody } from "./Modal";

   export default function AddAndEditBoardModal() {

    return (
      <Modal isOpen onRequestClose>
        <ModalBody>
         <p>Add and Edit Board Modal</p>
        </ModalBody>
      </Modal>
    );
   }

In this code, we imported our custom modal component, and we've wrapped it around a placeholder text.

Next, render the newly created modal component in the app/page.tsx component:

   // rest of imports here
   import AddAndEditBoardModal from "./components/AddAndEditBoardModal";
   // rest of the code here
   export default function Home() {
   return (
    <main className="flex h-full">
      <Sidebar />
      <BoardTasks />
      {/* render modal component here */}
      <AddAndEditBoardModal />
    </main>
   );
   }

In this step, we've created a placeholder for the AddAndEditBoardModal component and rendered it in the Page.tsx component.

Next, we'll implement the functions to trigger the modal and manage the open and close state in the redux store to maintain clean code and avoid prop drilling.

Navigate to your redux/features/appSlice.ts file and update it with the code below:

   import { createSlice, PayloadAction } from "@reduxjs/toolkit";
   import { RootState } from "../store";

   const initialState = {
   currentBoardName: "",
   // Manage the state for opening and closing the Add and Edit Board modal
   isAddAndEditBoardModal: { isOpen: false, variant: "" },
   };

   export const features = createSlice({
    name: "features",
    initialState,

    reducers: {
     setCurrentBoardName: (state, action: PayloadAction<string>) => {
      state.currentBoardName = action.payload;
    },
    // Open the Add and Edit Board modal with a specified variant (add or edit)
    openAddAndEditBoardModal: (state, { payload }) => {
      state.isAddAndEditBoardModal.isOpen = true;
      // Set the kind of modal to open (add board or edit board) based on the variant parameter
      state.isAddAndEditBoardModal.variant = payload;
    },
    // Close the Add and Edit Board modal
    closeAddAndEditBoardModal: (state) => {
      state.isAddAndEditBoardModal.isOpen = false;
      state.isAddAndEditBoardModal.variant = "";
    },
   },
   });
   export const {
   setCurrentBoardName,
   openAddAndEditBoardModal,
   closeAddAndEditBoardModal,
   } = features.actions;
   export const getCurrentBoardName = (state: RootState) => state.features.currentBoardName;
   // Selector functions to retrieve isOpen value of state from the isAddAndRditBoardModal state
   export const getAddAndEditBoardModalValue = (state: RootState) => state.features.isAddAndEditBoardModal.isOpen;
   // Selector functions to retrieve isOpen value of state from the isAddAndRditBoardModal state
   export const getAddAndEditBoardModalVariantValue = (state: RootState) => state.features.isAddAndEditBoardModal.variant;
   // Export the reducer for use in the Redux store
   export default features.reducer;

Then, navigate back to the AddAndEditBoardModal.tsx component and update it as seen below:

   import { Modal, ModalBody } from "./Modal";
   import { useAppSelector, useAppDispatch } from "@/components/redux/hooks";
   //import needed functions from the appSlice
   import {
   getAddAndEditBoardModalValue,
   getAddAndEditBoardModalVariantValue,
   closeAddAndEditBoardModal,
   } from "@/components/redux/features/appSlice";

   export default function AddAndEditBoardModal() {
   // get the variant of the modal
   const modalVariant = useAppSelector(getAddAndEditBoardModalVariantValue);
   const dispatch = useAppDispatch();
   // opens that modal is isOpen evaluates to true
   const isOpen = useAppSelector(getAddAndEditBoardModalValue);
   // close the modal
   const closeModal = () => dispatch(closeAddAndEditBoardModal());

   return (
    <Modal isOpen={isOpen} onRequestClose={closeModal}>
      <ModalBody>
        {/* display the variant(title) of the modal */}
        <p>{modalVariant}</p>
      </ModalBody>
    </Modal>
   );
   }

Following these updates, we can safely implement the trigger for the add and edit board modal.

Next, navigate to the Sidebar component and update the button with the "+ Create new board" text so it opens the "Add Board" modal when clicked:

   // add this to the imports
   import { openAddAndEditBoardModal } from "@/components/redux/features/appSlice";

   export default function Sidebar() {
    // rest of code here
   return (
     <aside className="w-[18.75rem] flex-none dark:bg-dark-grey h-full py-6 pr-6">
       {/* rest of code here */}
       {/* trigger the create new board modal */}
       <button
         onClick={() => dispatch(openAddAndEditBoardModal("Add New Board"))}
         className="flex items-center space-x-2 pl-[2.12rem] py-3"
       >
         <p className="text-base font-bold capitalize text-main-purple">
           + Create New Board
         </p>
       </button>
     </aside>
   );
   }

Now, upon clicking the "+ Create new board" button in the sidebar, the modal containing the "Add new board" text should appear. You should also be able to close it by clicking on the overlay:

Next, we'll implement the trigger for the edit board modal.

Navigate to the app/components/Dropdown.tsx component and update the "Edit board" button as follows:

   import { useAppDispatch } from '@/components/redux/hooks'
   import { openAddAndEditBoardModal } from '@/components/redux/features/appSlice';

   interface IDropdown {
    show: boolean
   }

   export default function Dropdown({ show }: IDropdown) {

    const dispatch = useAppDispatch()

    return (
      <div
        className={`${
          show ? "block" : "hidden"
        } w-48 absolute top-full bg-white
         border shadow-lg right-0 py-2 rounded-2xl`}
      >
        <div className="hover:bg-gray-300">
        {/* trigger Edit Board modal here */}
          <button
           onClick={() => dispatch(openAddAndEditBoardModal('Edit Board'))}
           className="text-sm px-4 py-2">Edit Board</button>
        </div>
        <div className="hover:bg-gray-300">
          <button className="text-sm px-4 py-2">
            Delete Board
          </button>
        </div>
      </div>
    );
   }

After making this update, clicking on the "Edit board" button in the dropdown will open the edit board modal, as illustrated in the GIF below:

The option to add a new column to the BoardTasks component should also open this modal when clicked. So navigate to the BoardTasks component and import the openAddEditBoardModal function and useAppDispatch hook from appSlice and redux hooks, respectively.

Then declare the dispatch function in the component with this statement: const dispatch = useAppDispatch()

Finally, update the "+New Column" div element to open the "Edit board" modal when clicked:

   // rest of the code 
    <div
    onClick={() => dispatch(openAddAndEditBoardModal("Edit Board"))
    className="rounded-md bg-white w-[17.5rem] mt-12 shrink-0 flex justify-center items-center">
   <p className="cursor-pointer font-bold text-black text-2xl">  + New Column </p>
   </div>
   //rest of the code

After these updates, the "Edit board" modal should open up when the "+New Column" card is clicked:

In the upcoming steps, we'll construct the complete markup and functionalities for our modal.

Referring to the images of both modals presented at the start of this section, in the "Add New Board" modal, the fields for board and column names should be blank. In contrast, the "Edit Board" modal should display the existing name and columns of the board and should be editable.

The "+ Add New Column" button in both modals allows the addition of more fields to the board's columns, and subsequently, the updated data is sent to the database.

Keep in mind that, given the frontend-centric nature of this project, a significant portion of the business logic will be handled on the front-end. However, don’t worry; we will take this snippet by snippet until we completely implement all features.

To begin, update the AddAndEditBoardModal component by pasting the code below:

import { useState, useEffect } from "react";
import { Modal, ModalBody } from "./Modal";
import { useAppSelector, useAppDispatch } from "@/components/redux/hooks";
//import needed functions from the appSlice
import {
  getAddAndEditBoardModalValue,
  getAddAndEditBoardModalVariantValue,
  closeAddAndEditBoardModal,
  getCurrentBoardName,
} from "@/components/redux/features/appSlice";
import {
  useFetchDataFromDbQuery,
  useUpdateBoardToDbMutation,
} from "@/components/redux/services/apiSlice";
import { FaTimes } from "react-icons/fa";
import { id } from '../utils/data'
// define types for boarddata
interface IBoardData {
  id: string,
  name: string;
  columns: {
    id: string;
    name: string;
    columns?: { name: string; tasks?: { [key: string]: any }[] };
  }[];
}
// dummy add board data for the "Add board" modal
let addBoardData = {
  id: id(),
  name: "",
  columns: [
    {
      id: id(),
      name: "",
      tasks:
 [],
    },
  ],};

export default function AddAndEditBoardModal() {
// rest of the code
}

Here, we have made the necessary imports and defined a type for board data - which we will use when populating the modal. We also implemented dummy data for the add board modal. We will see how this will be of use in a bit.

Next, go to the AddAndEditBoardModal function and paste the following code into it to declare variables and state values. The comments explain the future use of each of the declarations.

 //manage the board data state
  const [boardData, setBoardData] = useState<IBoardData>();
  // check if the board name field is empty
  const [isBoardNameEmpty, setIsBoardNameEmpty] = useState<boolean>(false);
  // will be used to check if any of the board column field is empty
  const [emptyColumnIndex, setEmptyColumnIndex] = useState<number>();

  // get the variant of the modal
  const modalVariant = useAppSelector(getAddAndEditBoardModalVariantValue);
  // check the type of the open modal, whether Add new board, or Edit board
  const isVariantAdd = modalVariant === "Add New Board";
  const dispatch = useAppDispatch();
  // opens that modal if isOpen evaluates to true
  const isOpen = useAppSelector(getAddAndEditBoardModalValue);
  const currentBoardTitle = useAppSelector(getCurrentBoardName);
  // close the modal
  const closeModal = () => dispatch(closeAddAndEditBoardModal());
  // Fetch data from the database to populate the edit board modal
  let { data } = useFetchDataFromDbQuery();
  // Mutation hook for updating the board in the database
  const [updateBoardToDb, { isLoading }] = useUpdateBoardToDbMutation();

Here, we’ll implement the functions that will be responsible for the modal’s functionality. Paste the following code just below the declarations above:

  // Effect to set initial data for the modal based on the variant
  useEffect(() => {
    if (data) {

      if (isVariantAdd) {
        setBoardData(addBoardData);
      } else {
        const activeBoard = data[0].boards.find(
          (board: { name: string }) => board.name === currentBoardTitle
        );
        setBoardData(activeBoard);
      }
    }
  }, [data, modalVariant]);

  // Effect to clear error messages after a certain time
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setIsBoardNameEmpty(false);
      setEmptyColumnIndex(undefined);
    }, 3000);
    return () => clearTimeout(timeoutId);
  }, [emptyColumnIndex, isBoardNameEmpty]);

  // Handler for board name change
  const handleBoardNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (boardData) {
      const newName = { ...boardData, name: e.target.value };
      setBoardData(newName);
    }
  };

  // Handler for column name change. These kind of functions are called closures

  const handleColumnNameChange = (index: number) => {
    return function (e: React.ChangeEvent<HTMLInputElement>) {
      // handle change for create new board modal
      if (boardData) {
        const modifyColumns = boardData.columns.map((column, columnIndex) => {
          if (columnIndex === index) {
            return { ...column, name: e.target.value };
          }
          return column;
        });
        const modifiedColumn = { ...boardData, columns: modifyColumns };
        setBoardData(modifiedColumn);
      }
    };
  };

  // Handler for adding a new column to the form
  const handleAddNewColumn = () => {
    // max columns we want to have in a board is 7
    if (boardData && boardData.columns.length < 6) {
      // Make a copy of the existing boardData
      const updatedBoardData = { ...boardData };
      // Create a new column object
      const newColumn = { id: id(), name: "", tasks: [] };
      // Push the new column to the columns array in the copy
      updatedBoardData.columns = [...updatedBoardData.columns, newColumn];
      // Update the state with the modified copy
      setBoardData(updatedBoardData);
    }
  };

  // Handler for deleting a column in the form
  const handleDeleteColumn = (index: number) => {
    if (boardData) {
      const filteredColumns = boardData.columns.filter(
        (_column, columnIndex) => columnIndex !== index
      );
      setBoardData({ ...boardData, columns: filteredColumns });
    }
  };

  // Handler for adding a new board to the database
  const handleAddNewBoardToDb = (e: React.FormEvent<HTMLButtonElement>) => {
    e.preventDefault();

    // check if any of the column names are empty before submiting
    const emptyColumnStringChecker = boardData?.columns.some(
      (column) => column.name === ""
    ); 

    //condition to run if the board name is empty
    if (boardData?.name === "") {
      setIsBoardNameEmpty(true);
    }

    //if any of the column names is empty, update the emptyColumnIndex with its index
    if (emptyColumnStringChecker) {
      const emptyColumn = boardData?.columns.findIndex(
        (column) => column.name == ""
      );
      setEmptyColumnIndex(emptyColumn);
    }

    if (boardData?.name !== "" && !emptyColumnStringChecker) {
      //submit to the database after verifying that the board name and none of the column names aren't empty
      if (data) {
        let [boards] = data;
        const addBoard = [...boards.boards, boardData];
        boards = addBoard;
        updateBoardToDb(boards);
      }
    }
  };

  // Handler for editing a board in the database
  const handleEditBoardToDb = (e: React.FormEvent<HTMLButtonElement>) => {
    e.preventDefault();
    const emptyColumnStringChecker = boardData?.columns.some(
      (column) => column.name === ""
    );
    //condition to run if the board name is empty
    if (boardData?.name === "") {
      setIsBoardNameEmpty(true);
    }
    //if any of the column names is empty, update the emptyColumnIndex with its index
    if (emptyColumnStringChecker) {
      const emptyColumn = boardData?.columns.findIndex(
        (column) => column.name == ""
      );
      setEmptyColumnIndex(emptyColumn);
    }
    //submit to the database after verifying that the board name and none of the column names aren't empty
    if (boardData?.name !== "" && !emptyColumnStringChecker) {
      if (data) {
        const [boards] = data;
        const boardsCopy = [...boards.boards]; 
        const activeBoardIndex = boardsCopy.findIndex(
          (board: { name: string }) => board.name === currentBoardTitle
        );
        const updatedBoard = {
          ...boards.boards[activeBoardIndex],
          name: boardData!.name,
          columns: boardData!.columns,
        } ;
        boardsCopy[activeBoardIndex] = updatedBoard;
        updateBoardToDb(boardsCopy);
      }
    }
  };

Finally, update the return statement of the component by pasting the below code snippet into it:

return (
    <Modal isOpen={isOpen} onRequestClose={closeModal}>
      <ModalBody>
        {boardData && (
          <>
            {/* display the variant(title) of the modal */}
            <p className="text-lg font-bold">{modalVariant}</p>
            <div className="py-6">
              <div>
                <label htmlFor="boardName" className="text-sm">
                  Board Name
                </label>
                <div className="pt-2">
                  <input
                    id="boardName"
                    className={`${
                      isBoardNameEmpty ? "border-red-500" : "border-stone-200"
                    } border w-full p-2 rounded text-sm cursor-pointer focus:outline-none`}
                    placeholder="Name"
                    value={boardData.name}
                    onChange={handleBoardNameChange}
                  />
                </div>
                {/* display this error if the board name is empty */}
                {isBoardNameEmpty ? (
                  <p className="text-xs text-red-500">
                    Board name cannot be empty
                  </p>
                ) : (
                  ""
                )}
              </div>

              <div className="mt-6">
                <label htmlFor="" className="text-sm">
                  Board Column
                </label>
                {boardData &&
                  boardData.columns.map(
                    (column: { name: string, id: string }, index: number) => {
                      let { name, id } = column;
                      return (
                        <div key={id} className="pt-2">
                          <div className="flex items-center space-x-2">
                            <input
                              className={`${
                                emptyColumnIndex === index
                                  ? "border-red-500"
                                  : "border-stone-200"
                              } border border-stone-200 focus:outline-none text-sm cursor-pointer w-full p-2 rounded`}
                              placeholder="e.g Doing"
                              onChange={(e) => handleColumnNameChange(index)(e)}
                              value={name!}
                            />
                            <div>
                              <FaTimes
                                onClick={() => handleDeleteColumn(index)}
                              />
                            </div>
                          </div>
                          {/* display this error if the board name is empty */}
                          {emptyColumnIndex === index ? (
                            <p className="text-xs text-red-500">
                              Column name cannot be empty
                            </p>
                          ) : (
                            ""
                          )}
                        </div>
                      );
                    }
                  )}
                <div className="mt-3">
                  <button
                    type="button"
                    onClick={handleAddNewColumn}
                    className="bg-stone-200 rounded-3xl py-2 w-full text-sm font-bold"
                  >
                    <p>+ Add New Column</p>
                  </button>
                </div>
              </div>
              <div className="pt-6">
                <button
                  type="submit"
                  onClick={(e: React.FormEvent<HTMLButtonElement>) => {
                    // function to run depending on the variant of the modals
                    isVariantAdd
                      ? handleAddNewBoardToDb(e)
                      : handleEditBoardToDb(e);
                  }}
                  className="bg-blue-500 rounded-3xl py-2 w-full text-sm font-bold"
                >
                  {/* text to display depending on the variant of the modal */}
                  <p>
                    {isLoading
                      ? "Loading"
                      : `${isVariantAdd ? "Create New Board" : "Save Changes"}`}
                  </p>
                </button>
              </div>
            </div>
          </>
        )}
      </ModalBody>
    </Modal>
  );

In the above GIF, we introduced a "Marketing" board with "Todo" and "Doing" columns to our app. You can also see the real-time update of the boards in the sidebar.

Likewise, you can perform edits on a board:

Here, a new column, "After," was added to the "Roadmap" board.

In the upcoming section, we will implement the "Add new task" and "Edit task" functionalities.

How to add and edit tasks

Once you've completed this section, the "Add New Task" modal should resemble the following:

Similarly, for the "Edit Task" modal:

You'll see that these modals share similarities, so we will implement them using the same approach employed in the previous section.

We'll start by updating the initialState object in our appSlice to manage the state of the "Add and Edit tasks" modal.

   const initialState = {
   //add and edit tasks modal state
   isAddAndEditTaskModal: { isOpen: false, variant: "", title: "", index: -1, name: ""},
   };

The keys title and index will respectively store the title and index of the task being edited, while the name key will retrieve the name of the task's column. We'll explore how to utilize this information to edit a task in the upcoming steps.

Next, include the following functions in the reducers object. These will be the functions that will be called to open and close the modal:

    // Open the Add and Edit task modal with a specified variant (add or edit), title, description, status
    openAddAndEditTaskModal: (state, { payload }) => {
      state.isAddAndEditTaskModal.isOpen = true;
      state.isAddAndEditTaskModal.variant = payload.variant;
      state.isAddAndEditTaskModal.title = payload.title;
      state.isAddAndEditTaskModal.index = payload.index;
     state.isAddAndEditTaskModal.name = payload.name;
    },
    // Close the Add and Edit task modal
    closeAddAndEditTaskModal: (state) => {
      state.isAddAndEditTaskModal.isOpen = false;
      state.isAddAndEditTaskModal.variant = "";
      state.isAddAndEditTaskModal.title = "";
      state.isAddAndEditTaskModal.index = "";
      state.isAddAndEditTaskModal.name = "";
    },

Lastly, include the newly implemented functions and the selector functions in the exports:

   export const {
   openAddAndEditTaskModal,
   closeAddAndEditTaskModal,
   //rest of the imports
   } = features.actions;

   // Selector function to retrieve isOpen state value  
   export const getAddAndEditTaskModalValue = (state: RootState) => state.features.isAddAndEditTaskModal.isOpen;
   // Selector function to retrieve variant state value 
   export const getAddAndEditTaskModalVariantValue = (state: RootState) => state.features.isAddAndEditTaskModal.variant;
   // Selector function to retrieve title state value
   export const getAddAndEditTaskModalTitleValue = (state: RootState) => state.features.isAddAndEditTaskModal.title;
   // Selector function to retrieve index state value
   export const getAddAndEditTaskModalIndexValue = (state: RootState) => state.features.isAddAndEditTaskModal.index;
   // Selector function to retrieve name state value
   export const getAddAndEditTaskModalNameValue = (state: RootState) => state.features.isAddAndEditTaskModal.name;
   //rest of the imports

Now, we'll implement the onClick functions that enable users to interact with the modal and perform task-related actions. These functions will allow users to open the "Add new task" modal from the navbar and the "Edit task" modal by clicking the edit icon within individual task cards.

In the components/Navbar, include the openAddAndEditTaskModal among the imported functions from the appSlice:

 import { setCurrentBoardName, getCurrentBoardName, openAddAndEditTaskModal } from '../../redux/features/appSlice'

Then, modify the "+Add new task" button to incorporate an onClick function that triggers the "Add new task" modal:

    <button 
     type='button'
     onClick={() => dispatch(openAddAndEditTaskModal({variant: 'Add New Task'}))}
     className="bg-blue-500 text-black px-4 py-2 flex rounded-3xl items-center space-x-2">
         <p>+ Add New Task</p>
    </button>

Next, navigate to the BoardTasks component, where we will also implement the trigger for the "Edit task" modal.

Here, include the openAddAndEditTaskModal function among the imported functions from the appSlice:

import { openAddAndEditBoardModal, openAddAndEditTaskModal } from "@/components/redux/features/appSlice";

Then, update the <MdEdit/> React icon to incorporate the onClick function that triggers the "Edit Task" modal:

    <MdEdit
    onClick={() =>
    dispatch(
      openAddAndEditTaskModal({
        variant: "Edit Task", title, index, name
      }),
    )
   }
   className="text-lg cursor-pointer"
   />;

Next, we'll create the Add and Edit Board modal component, also integrating its functionalities.

As depicted in the modal images presented at the start of this section, within the "Add New Task" modal, the title field is intended for the task's title a user wishes to add, and the status field should exclusively contain the accurate names of the columns. Any attempt to input a column name that doesn't exist will result in an error.

In the "Edit Task" modal, the title and status fields will display the current title and status of a task. Altering the title will update the task's title while modifying the status will relocate it to the desired column.

To begin, within your src/app/components directory, create a file named AddAndEditTaskModal.tsx, and firstly, insert the provided code to make the necessary imports, type definitions, and initial data for the add task modal:

 "use client";

import { useEffect, useState } from "react";
import { Modal, ModalBody } from "./Modal";
import { useAppDispatch, useAppSelector } from "@/components/redux/hooks";
import {
  getAddAndEditTaskModalValue,
  getAddAndEditTaskModalVariantValue,
  getAddAndEditTaskModalTitle,
  closeAddAndEditTaskModal,
  getCurrentBoardName,
  getAddAndEditTaskModalIndex,
  getAddAndEditTaskModalName,
} from "@/components/redux/features/appSlice";
import {
  useFetchDataFromDbQuery,
  useUpdateBoardToDbMutation,
} from "@/components/redux/services/apiSlice";
import { id } from '../utils/data'

interface ITaskData {
  id: string,
  title: string;
  status: string;
}
// initial task data for the add task modal
let initialTaskData: ITaskData = {
  id: id(),
  title: "",
  status: "",
};

export default function AddOrEditTaskModal() {
//variable declarations, functions, JSX
}

Next, go to the AddAndEditTaskModal function and paste the following code into it to declare variables and state values. The comments provided explain the future use of each of the declarations.

  let { data } = useFetchDataFromDbQuery();
  let [updateBoardToDb, { isLoading }] = useUpdateBoardToDbMutation();
  const [taskData, setTaskData] = useState<ITaskData>();
  const [isTaskTitleEmpty, setIsTaskTitleEmpty] = useState<boolean>();
  const [isTaskStatusEmpty, setIsTaskStatusEmpty] = useState<boolean>();
  const [statusExists, setStatusExists] = useState<boolean>(true);
  const [columnNames, setColumnNames] = useState<[]>();
  const dispatch = useAppDispatch();
  const isModalOpen = useAppSelector(getAddAndEditTaskModalValue);
  const modalVariant = useAppSelector(getAddAndEditTaskModalVariantValue);
  const isVariantAdd = modalVariant === "Add New Task";
  const closeModal = () => dispatch(closeAddAndEditTaskModal());
  const currentBoardTitle = useAppSelector(getCurrentBoardName);
  // get task title, index and name from redux store
  const currentTaskTitle = useAppSelector(getAddAndEditTaskModalTitle);
  const currentTaskIndex = useAppSelector(getAddAndEditTaskModalIndex);
  const initialTaskColumn = useAppSelector(getAddAndEditTaskModalName);

Here, we’ll implement functions responsible for the modal functionality. Just below the variable definitions above, paste the following functions:

  // Effect to set initial data for the modal based on the variant
  useEffect(() => {
    if (data) {
      const activeBoard = data[0].boards.find(
        (board: { name: string }) => board.name === currentBoardTitle
      );
      if (activeBoard) {
        const { columns } = activeBoard;
        const columnNames = columns.map(
          (column: { name: string }) => column.name
        );

        if (columnNames) {
          setColumnNames(columnNames);
        }

        if (isVariantAdd) {
          setTaskData(initialTaskData);
        }

        else {
          const activeTask = columns
            .map((column: { tasks: [] }) => column.tasks)
            .flat()
            .find((task: { title: string }) => task.title === currentTaskTitle);
          setTaskData(activeTask);
        }
      }
    }
  }, [data, modalVariant]);

  // Effect to clear error messages after a certain time
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setIsTaskStatusEmpty(false);
      setIsTaskStatusEmpty(false);
      setStatusExists(true);
    }, 3000);
    return () => clearTimeout(timeoutId);
  }, [isTaskStatusEmpty, isTaskTitleEmpty, statusExists]);

  // Handler for task title change
  const handleTaskTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (taskData) {
      const newTitle = { ...taskData, title: e.target.value };
      setTaskData(newTitle);
    }
  };

  // Handler for task status change
  const handleTaskStatusChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (taskData) {
      const newTitle = { ...taskData, status: e.target.value };
      setTaskData(newTitle);
    }
  };

  // Handler to add new task to the db
  const handleAddNewTaskToDb = (e: React.FormEvent<HTMLButtonElement>) => {

    e.preventDefault();
    const { title, status } = taskData!;

    if (!title) {
      setIsTaskTitleEmpty(true);
    }

    if (!status) {
      setIsTaskStatusEmpty(true);
    }

    // check if the status input exists among the existing columns
    const doesStatusExists = columnNames?.some(
      (column) => column === taskData?.status
    );

    if (!doesStatusExists) {
      setStatusExists(false);
    }

    // if all conditions are met
    if (title && status && doesStatusExists) {
      if (data) {
        const [boards] = data;
        const boardsCopy = [...boards.boards];
        const activeBoard = boardsCopy.find(
          (board: { name: string }) => board.name === currentBoardTitle
        );
        const activeBoardIndex = boardsCopy.findIndex(
          (board: { name: string }) => board.name === currentBoardTitle
        );
        const { columns } = activeBoard;
        // find the column in the board to update
        const getStatusColumn = columns?.find(
          (column: { name: string }) => column.name === status
        );
        const getStatusColumnIndex = columns?.findIndex(
          (column: { name: string }) => column.name === status
        );
        // desctructure tasks in a column. "Now" for example.
        const { tasks } = getStatusColumn;
        const addNewTask = [...tasks, { id: id(), title, status }]; //add new task
        const updatedStatusColumn = { ...getStatusColumn, tasks: addNewTask };
        //update the columns in a board
        const columnsCopy = [...columns];
        columnsCopy[getStatusColumnIndex] = updatedStatusColumn;
        const updatedBoard = {
          ...boards.boards[activeBoardIndex],
          columns: columnsCopy,
        };
        //update the board in the db
        boardsCopy[activeBoardIndex] = updatedBoard;
        updateBoardToDb(boardsCopy);
      }
    }
  };

  const handleEditTaskToDb = (e: React.FormEvent<HTMLButtonElement>) => {
    e.preventDefault();
    const { title, status } = taskData!;
    if (!title) {
      setIsTaskTitleEmpty(true);
    }
    if (!status) {
      setIsTaskStatusEmpty(true);
    }
    // check if the status input exists among the existing status
    const doesStatusExists = columnNames?.some(
      (column) => column === taskData?.status
    );
    if (!doesStatusExists) {
      setStatusExists(false);
    }
    if (title && status && doesStatusExists) {
      if (data) {
        const [boards] = data;
        const boardsCopy = [...boards.boards];
        const activeBoard = boardsCopy.find(
          (board: { name: string }) => board.name === currentBoardTitle
        );
        const activeBoardIndex = boardsCopy.findIndex(
          (board: { name: string }) => board.name === currentBoardTitle
        );
        const { columns } = activeBoard;
        const getStatusColumnIndex = columns?.findIndex(
          (column: { name: string }) => column.name === status
        );

        // Check if the task status to edit is equal to the column.name
        if (status === initialTaskColumn) {
          const updatedStatusColumn = {
            ...columns[getStatusColumnIndex],
            tasks: columns[getStatusColumnIndex]?.tasks?.map(
              (task: any, index: number) => {
                if (index === currentTaskIndex) {
                  return { title, status };
                }
                return task;
              }
            ),
          };
          const columnsCopy = [...columns];
          columnsCopy[getStatusColumnIndex] = updatedStatusColumn;
          const updatedBoard = {
            ...boards.boards[activeBoardIndex],
            columns: columnsCopy,
          };
          //update the board in the db
          boardsCopy[activeBoardIndex] = updatedBoard;
          updateBoardToDb(boardsCopy);
        } else {
          // Find the column with the name in the task status and append the edited task
          const getStatusColumn = columns?.find(
            (column: { name: string }) => column.name === status
          );
          // delete task from previous column
          const getPrevStatusColumn = columns?.find(
            (column: { name: string }) => column.name === initialTaskColumn
          );
          const getPrevStatusColumnIndex = columns?.findIndex(
            (column: { name: string }) => column.name === initialTaskColumn
          );
          //update the previous column of the task
          const updatedPrevStatusColumn = {
            ...getPrevStatusColumn,
            tasks: getPrevStatusColumn?.tasks.filter(
              (_task: [], index: number) => index !== currentTaskIndex
            ),
          };
          // update the new column of the task
          const updatedStatusColumn = {
            ...getStatusColumn,
            tasks: [...getStatusColumn?.tasks, { title, status }],
          };
          const columnsCopy = [...columns];
          columnsCopy[getStatusColumnIndex] = updatedStatusColumn;
          columnsCopy[getPrevStatusColumnIndex] = updatedPrevStatusColumn;
          const updatedBoard = {
            ...boards.boards[activeBoardIndex],
            columns: columnsCopy,
          };
          //update the board in the db
          boardsCopy[activeBoardIndex] = updatedBoard;
          updateBoardToDb(boardsCopy);
        }
      }
    }
  };

Finally, in this component, paste the code below to implement the JSX of the modal:

return (
    <Modal isOpen={isModalOpen} onRequestClose={closeModal}>
      <ModalBody>
        <p className="font-bold text-lg">{modalVariant}</p>
        <div className="py-6">
          <div>
            <label htmlFor="title" className="text-sm">
              Title
            </label>
            <div className="pt-2">
              <input
                id="title"
                className={`${
                  isTaskTitleEmpty ? "border-red-500" : "border-stone-200"
                } border w-full p-2 rounded text-sm cursor-pointer focus:outline-none`}
                placeholder="Name"
                value={taskData?.title}
                onChange={handleTaskTitleChange}
              />
            </div>
            {isTaskTitleEmpty ? (
              <p className="text-xs text-red-500">Task title cannot be empty</p>
            ) : (
              ""
            )}
          </div>

          <div className="mt-3">
            <label htmlFor="status" className="text-sm">
              Status
            </label>
            <div className="pt-2">
              <input
                id="status"
                className={`${
                  isTaskStatusEmpty || !statusExists
                    ? "border-red-500"
                    : "border-stone-200"
                } border w-full p-2 rounded text-sm cursor-pointer focus:outline-none`}
                placeholder={columnNames?.join(", ")}
                value={taskData?.status}
                onChange={handleTaskStatusChange}
              />
            </div>
            {isTaskStatusEmpty ? (
              <p className="text-xs text-red-500">
                Task status cannot be empty
              </p>
            ) : !statusExists ? (
              <p className="text-xs text-red-500">Column does not exist</p>
            ) : (
              ""
            )}
          </div>
          <div className="pt-6">
            <button
              type="submit"
              onClick={(e: React.FormEvent<HTMLButtonElement>) => {
                // function to run depending on the variant of the modals
                isVariantAdd ? handleAddNewTaskToDb(e) : handleEditTaskToDb(e);
              }}
              className="bg-blue-500 rounded-3xl py-2 w-full text-sm font-bold"
            >
              <p>
                {isLoading
                  ? "Loading"
                  : `${isVariantAdd ? "Create Task" : "Save Changes"}`}
              </p>
            </button>
          </div>
        </div>
      </ModalBody>
    </Modal>
  );

Lastly, import and render the component in your src/app/page.tsx file as seen below:

   //rest of the imports
   import AddAndEditTaskModal from "./components/AddAndEditTaskModal";
     //rest of the code
     return (
    <main className="flex h-full">
      <Sidebar />
      <BoardTasks />
      <AddAndEditBoardModal />
      <AddAndEditTaskModal/>  //render here
    </main>
    );

With this functionality, you can effortlessly add tasks to any desired columns. For instance, let's add a new task titled "Buy tomatoes" to the "Next" column:

Likewise, we'll illustrate the task-editing feature by changing the column of "Launch version two" from "Now" to "Later":

Finally, in the next section, we'll implement the delete functionalities for both boards and tasks.

How to delete boards and tasks

By the end of this section, the "Delete Board" modal should look like this:

Likewise, the "Delete Task" modal:

As you can see, these modals share similarities, so we will use the same methodology as we did for the previous modal implementations.

To begin, let's update the initialState object in our appSlice to manage the state of the "Delete Board and Tasks" modal. Integrate the isDeleteBoardAndTaskModal state into the initialState object as illustrated below:

    const initialState = {
      //rest of the state
      isDeleteBoardAndTaskModal: { isOpen: false, variant: "",  title:'', status: "", index: -1 },

Next, include the following functions in the reducers object. These functions will be invoked to open and close the modal:

    // Open the delete board and task modal with a specified variant (delete board or task)
   openDeleteBoardAndTaskModal: (state, { payload }) => {
      state.isDeleteBoardAndTaskModal.isOpen = true;
      state.isDeleteBoardAndTaskModal.variant = payload.variant;
      state.isDeleteBoardAndTaskModal.title = payload.title;
      state.isDeleteBoardAndTaskModal.status = payload.status;
      state.isDeleteBoardAndTaskModal.index = payload.index;
    },
   // Close the delete board and task modal
   closeDeleteBoardAndTaskModal: (state) => {
      state.isDeleteBoardAndTaskModal.isOpen = false;
      state.isDeleteBoardAndTaskModal.variant = "";
      state.isDeleteBoardAndTaskModal.title = "";
      state.isDeleteBoardAndTaskModal.status = "";
      state.isDeleteBoardAndTaskModal.index = -1;
    },

Lastly, include the newly implemented functions and the selector functions in the exports:

 export const {
    openDeleteBoardAndTaskModal,
    closeDeleteBoardAndTaskModal,
   } = features.actions;

   // Delete task and board
   export const getDeleteBoardAndTaskModalValue = (state: RootState) => state.features.isDeleteBoardAndTaskModal.isOpen;
   // Selector function to retrieve variant state value 
   export const getDeleteBoardAndTaskModalVariantValue = (state: RootState) => state.features.isDeleteBoardAndTaskModal.variant;
   // Selector function to retrieve title state value 
   export const getDeleteBoardAndTaskModalTitle = (state: RootState) => state.features.isDeleteBoardAndTaskModal.title;
   // Selector function to retrieve status state value
   export const getDeleteBoardAndTaskModalStatus = (state: RootState) => state.features.isDeleteBoardAndTaskModal.status;
   // Selector function to retrieve index state value
   export const getDeleteBoardAndTaskModalIndex = (state: RootState) => state.features.isDeleteBoardAndTaskModal.index;

Following that, we'll implement the onClick functions to enable users to interact with the modal and execute delete-related actions. These functions will permit users to open the "Delete board" modal from the dropdown in the navbar and the "Delete task" modal by clicking the delete icon within individual task cards.

In the components/Dropdown.tsx file, add the openDeleteBoardAndTaskModal function to the list of imported functions from the appSlice:

import { openDeleteBoardAndTaskModal } from '@/components/redux/features/appSlice';

Then adjust the "Delete board" button to incorporate the onClick function to open the modal. This action will trigger the “Delete board” modal:

      <div className="hover:bg-gray-300">
         <button
            onClick={() => dispatch(openDeleteBoardAndTaskModal({variant: "Delete this board?"}))}
            className="text-sm px-4 py-2">
            Delete Board
         </button>
      </div>

Move on to the BoardTasks component, and similarly, include the function for deleting tasks and boards among the imports from the appSlice:

      import {
         //other imports
         openDeleteBoardAndTaskModal
      } from "@/components/redux/features/appSlice";

Adjust the delete React icon to include the onClick function to open the modal:

      <MdDelete
         onClick={() =>
            dispatch(
               openDeleteBoardAndTaskModal({
                  variant: "Delete this Task?",
                  status,
                  index,
               }),
            )
         }
         className="text-lg cursor-pointer text-red-500"
      />;

Now we'll start building the markup for the delete board and tasks modal, coupled with the implementation of its functionalities.

In your app/components folder, create a file named DeleteBoardAndTask modal and paste the provided code inside of it:

   import { Modal, ModalBody } from "./Modal";
   import { useAppDispatch, useAppSelector } from "@/components/redux/hooks";
   import {
   closeDeleteBoardAndTaskModal,
   getDeleteBoardAndTaskModalValue,
   getDeleteBoardAndTaskModalVariantValue,
   getDeleteBoardAndTaskModalTitle,
   getDeleteBoardAndTaskModalIndex,
   getDeleteBoardAndTaskModalStatus,
   getCurrentBoardName,
   } from "@/components/redux/features/appSlice";
   import {
   useFetchDataFromDbQuery,
   useUpdateBoardToDbMutation,
   } from "@/components/redux/services/apiSlice";

   export default function DeleteBoardAndTaskModal() {
     //variable declarations, functions, JSX
   }

Next, go to the DeleteBoardAndTaskModal function and paste the following code into it to declare variables and state values. The comments provided explain the future use of each of the declarations.

   const dispatch = useAppDispatch();
   const isModalOpen = useAppSelector(getDeleteBoardAndTaskModalValue);
   const closeModal = () => dispatch(closeDeleteBoardAndTaskModal());
   const currentBoardName = useAppSelector(getCurrentBoardName);
   const modalVariant = useAppSelector(getDeleteBoardAndTaskModalVariantValue);
   const taskTitle = useAppSelector(getDeleteBoardAndTaskModalTitle);
   const taskIndex = useAppSelector(getDeleteBoardAndTaskModalIndex);
   const taskStatus = useAppSelector(getDeleteBoardAndTaskModalStatus);
   let { data } = useFetchDataFromDbQuery();
   const [updateBoardToDb, { isLoading }] = useUpdateBoardToDbMutation();

Here, we’ll implement the function responsible for the modal functionality. Just below the variable definitions above, paste the following function:

   const handleDelete = (e: React.FormEvent<HTMLButtonElement>) => {
    e.preventDefault();
    if (data) {
      if (modalVariant === "Delete this board?") {
        // Implement the logic for deleting the board
        if (currentBoardName) {
          //  Assuming data is available, you need to handle the logic to update the data
          const [boards] = data;
          const updatedBoards = boards.boards.filter(
            (board: { name: string }) => board.name !== currentBoardName
          );
          updateBoardToDb(updatedBoards);
        }
      } else {
        // Implement the logic for deleting a task
        if (taskIndex !== undefined && taskStatus && currentBoardName) {
          const [boards] = data;
          //  Handle the logic to update the tasks
          const updatedBoards = boards.boards.map(
            (board: {
              name: string;
              columns: [{ name: string; tasks: [] }];
            }) => {
            // check the board active board
              if (board.name === currentBoardName) {
                // loop through the columns of the board to find the column in which the task to edit is
                const updatedColumns = board.columns.map((column) => {
                  if (column.name === taskStatus) {
                    // delete the the task
                    const updatedTasks = column.tasks.filter(
                      (_, index: number) => index !== taskIndex
                    );
                    return { ...column, tasks: updatedTasks };
                  }
                  return column;
                });
                return { ...board, columns: updatedColumns };
              }
              return board;
            }
          );
          updateBoardToDb(updatedBoards);
        }
      }
    }
   };

Finally, in this component, paste the code below to implement the JSX of the modal:

   return (
    <Modal isOpen={isModalOpen} onRequestClose={closeModal}>
      <ModalBody>
        <p className="text-red font-bold text-lg">{modalVariant}</p>
        <div className="pt-6">
          <p className="text-sm text-medium-grey leading-6">
            {modalVariant === "Delete this board?"
              ? `Are you sure you want to delete the '${currentBoardName}' board? This action will remove all columns
                and tasks and cannot be reversed.`
              : `Are you sure you want to delete the '${taskTitle}' tasks? This action cannot be reversed.`}
          </p>
        </div>
        <div className="pt-6 flex space-x-2">
          <div className="w-1/2">
            <button
              type="submit"
              onClick={(e: React.FormEvent<HTMLButtonElement>) =>
                handleDelete(e)
              }
              className="bg-red-500 rounded-3xl py-2 w-full text-sm font-bold"
            >
              {" "}
              {isLoading ? "Loading" : "Delete"}
            </button>
          </div>
          <div className="w-1/2">
            <button
              onClick={closeModal}
              className="bg-stone-200 rounded-3xl py-2 w-full text-sm font-bold"
            >
              Cancel
            </button>
          </div>
        </div>
      </ModalBody>
    </Modal>
   );
   }

After making this update, import the component in the page.tsx and render it as seen below:

     //rest of the imports
     import DeleteBoardOrTaskModal from "./components/DeleteBoardAndTaskModal";
     //rest of the code
       return (
    <main className="flex h-full">
      <Sidebar />
      <BoardTasks />
      <AddAndEditBoardModal />
      <AddAndEditTaskModal/>
      <DeleteBoardAndTaskModal/>
    </main>
    );

After rendering the component, you can now delete a board. As an example, we’ll delete the “Marketing” board we previously created:

Likewise, you can delete a task:

In the next section, we’ll explore the implementation of the drag and drop functionality with the react-beautiful-dnd library.

How to Implement Drag and Drop Functionality

At the end of this section, you should be able to move tasks between columns and across columns.

To begin, install the react-beautiful-dnd library with the following command:

npm i react-beautiful-dnd

It’s worth noting that the react-beautiful-dnd library does not work inside the StrictMode wrapper which is enabled by default in the app router. So we have to create a custom hook which will enable us use the react-beautiful-dnd library safely with StrictMode.

Create a file named StrictModeDroppable.tsx inside your src/app/components folder and paste the provided code below inside of it:

import { useEffect, useState } from "react";
import { Droppable, DroppableProps } from "react-beautiful-dnd";

export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    const animation = requestAnimationFrame(() => setEnabled(true));

    return () => {
      cancelAnimationFrame(animation);
      setEnabled(false);
    };
  }, []);

  if (!enabled) {
    return null;
  }

  return <Droppable {...props}>{children}</Droppable>;
};

This way, we have made it compatible with StrictMode, allowing us to safely implement the drag and drop feature.

Next, navigate to the BoardTasks.tsx component and update it with the code below:

Firstly, import needed components from the react-beautiful-dnd library and also from our custom StrictModeDroppable.tsx component:

//import useRef hook
import { useEffect, useState, useRef } from "react";
import { DragDropContext, Draggable } from "react-beautiful-dnd";
// import Droppable from the custom hook
import { StrictModeDroppable as Droppable } from "./StrictModeDroppable";

After updating the imports, go to the BoardTasks function and include the following functions:

// check if it’s the first render
const initialRender = useRef(true);


  const handleDragEnd = async ({ destination, source }: any) => {
    // Check if the destination is not null (i.e., it was dropped in a valid droppable)
    if (!destination) return;


    // get a deep nested copy of the columns state
    const newColumns = columns.map((column) => ({
      ...column,
      tasks: [...column.tasks], // Create a new array for tasks
    }));


    // Find the source and destination columns based on their droppableIds
    const sourceColumnIndex = newColumns.findIndex(
      (col) => col.id === source.droppableId
    );
    const destinationColumnIndex = newColumns.findIndex(
      (col) => col.id === destination.droppableId
    );


    // Task that was dragged
    const itemMoved = newColumns[sourceColumnIndex]?.tasks[source.index];


    // Remove from its source
    newColumns[sourceColumnIndex].tasks.splice(source.index, 1);


    // Insert into its destination
    newColumns[destinationColumnIndex].tasks.splice(
      destination.index,
      0,
      itemMoved
    );


    // Update the state
    setColumns(newColumns);
  };


  useEffect(() => {
    // Check if it's the initial render, to avoid sending the data to the backend on mount
    if (!initialRender.current) {
      // Update the backend with the new order
      try {
        if (data) {
          const [boards] = data;
          const boardsCopy = [...boards.boards];
          const activeBoardIndex = boardsCopy.findIndex(
            (board: { name: string }) => board.name === currentBoardTitle
          );
          const updatedBoard = {
            ...boards.boards[activeBoardIndex],
            columns,
          };
          boardsCopy[activeBoardIndex] = updatedBoard;
          updateBoardToDb(boardsCopy);
        }
      } catch (error) {
        // Handle error
        console.error("Error updating board:", error);
      }
    } else {
      // Set initial render to false after the first render
      initialRender.current = false;
    }
  }, [columns]);

So far here, we implemented a function which will be triggered after a task has been dragged. After each trigger of this function, the columns data is being updated and sent to the Cloud Firestore via the useEffect hook. I added some more comments in the code to help you understand better.

Finally, update the JSX in the return statement as seen below:

 return (
    <div className="overflow-x-auto overflow-y-auto w-full p-6 bg-stone-200">
      {/* If data has not been fetched successfully, display a loading state, else display the column of tasks */}
      {isLoading ? (
        <p className="text-3xl w-full text-center font-bold">
          Loading tasks...
        </p>
      ) : (
        <>
          {/* If columns of tasks isn't empty: display the tasks, else display the prompt to add a new column */}
          {columns.length > 0 ? (
            <DragDropContext onDragEnd={handleDragEnd}>
              <div className="flex space-x-6">
                {columns.map((column, index) => {
                  const { id, name } = column;
                  return (
                    <div key={id} className="w-[17.5rem] shrink-0">
                      <p className="text-black">{`${column.name} (${
                        column.tasks ? column.tasks?.length : 0
                      })`}</p>
                      <Droppable droppableId={id}>
                        {(provided) => (
                          <div
                            ref={provided.innerRef}
                            {...provided.droppableProps}
                            className="h-full"
                          >
                            {column.tasks &&
                              // Display the tasks if there are tasks in the column, if not, display an empty column
                              (column.tasks.length > 0 ? (
                                column.tasks.map((task, index) => {
                                  const { id, title, status } = task;
                                  return (
                                    <Draggable
                                      key={id}
                                      draggableId={id}
                                      index={index}
                                    >
                                      {(provided) => (
                                        <div
                                          ref={provided.innerRef}
                                          {...provided.draggableProps}
                                          {...provided.dragHandleProps}
                                          className="bg-white p-6 rounded-md mt-6 flex items-center justify-between border"
                                        >
                                          <p>{task.title}</p>
                                          <div className="flex items-center space-x-1">
                                            <MdEdit
                                              onClick={() =>
                                                dispatch(
                                                  openAddAndEditTaskModal({
                                                    variant: "Edit Task",
                                                    title,
                                                    index,
                                                    name,
                                                  })
                                                )
                                              }
                                              className="text-lg cursor-pointer"
                                            />
                                            <MdDelete
                                              onClick={() =>
                                                dispatch(
                                                  openDeleteBoardAndTaskModal({
                                                    variant:
                                                      "Delete this task?",
                                                    title,
                                                    status,
                                                    index,
                                                  })
                                                )
                                              }
                                              className="text-lg cursor-pointer text-red-500"
                                            />
                                          </div>
                                        </div>
                                      )}
                                    </Draggable>
                                  );
                                })
                              ) : (
                                <div className="mt-6 h-full rounded-md border-dashed border-4 border-white" />
                              ))}
                            {provided.placeholder}
                          </div>
                        )}
                      </Droppable>
                    </div>
                  );
                })}
                {/* If the number of columns of tasks is less than 7, display an option to add more columns */}
                {columns.length < 7 ? (
                  <div
                    onClick={() =>
                      dispatch(openAddAndEditBoardModal("Edit Board"))
                    }
                    className="rounded-md bg-white w-[17.5rem] mt-12 shrink-0 flex justify-center items-center"
                  >
                    <p className="cursor-pointer font-bold text-black text-2xl">
                      + New Column
                    </p>
                  </div>
                ) : (
                  ""
                )}
              </div>
            </DragDropContext>
          ) : (
            <div className="w-full h-full flex justify-center items-center">
              <div className="flex flex-col items-center">
                <p className="text-black text-sm">
                  This board is empty. Create a new column to get started.
                </p>
                <button className="bg-blue-500 text-black px-4 py-2 flex mt-6 rounded-3xl items-center space-x-2">
                  <p>+ Add New Column</p>
                </button>
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );

In the code snippet above, we wrapped DragDropContext around the columns of tasks with its onDragEnd attribute, which accepts the handleDragEnd function, which will be triggered after a task has been dragged.

Don’t forget that after each trigger of this function, the columns data is being updated and sent to the Cloud Firestore via the useEffect hook.

Each column of task is also wrapped around the Droppable component. This signifies that this is a location you can drop a task. It also accepts a droppableId attribute which we passed the id of each column to it.

Each task card is also wrapped around the Draggable component, this makes them draggable within and among columns.

With these changes, we have easily implemented the drag and drop feature for our app:

Conclusion

This tutorial guided you through implementing authentication using the next-auth library, setting up a Redux store, and integrating Firebase with its RTK Query in Next.js applications.

You also learned to implement CRUD operations in a Kanban task management app, and looked into form validations with JavaScript.

And finally, we covered the implementation of drag-and-drop functionality using the react-beautiful-dnd library.

Across the tutorial, we also leveraged existing libraries to streamline development rather than building everything from scratch.

If you want to see all the code, you can visit the project's GitHub repository here. Feel free to fork the project and open a PR if you feel the need for any improvements. If you’d also like to play around with the live site, you can find it here.

If you'd also like to explore this project with more advanced features, like dark mode, sleeker UI design, and better functionalities, visit it here.

We just published a course on the freeCodeCamp.org YouTube channel that teaches you how to create an Instagram clone using React and Firebase. Burak Orkmez developed this course.

This course is perfect for those who want to dive into the world of front-end and back-end development by building a real-world, interactive application. It's a journey that combines the dynamic capabilities of React for building user interfaces with the robust back-end features provided by Firebase.

The course covers a wide spectrum of development skills, starting with setting up React and Chakra UI for the front-end design. It walks you through the process of creating essential components of a social media platform, including authentication pages, sidebars, home pages, and profile pages. The focus is on crafting a user-friendly and visually appealing interface, reminiscent of Instagram’s iconic design.

On the back-end side, Firebase plays a crucial role. You'll learn how to set up Firebase to handle various back-end services like user authentication, data storage, and real-time updates. This includes implementing features such as signing up with email and password, Google authentication, and creating a robust authentication system.

One of the core aspects of the course is teaching how to build and manage user interactions. This includes the ability for users to follow and unfollow each other, search for user profiles, suggest users, and create, delete, and like posts, all in real time. Additionally, the course covers advanced functionalities like creating and managing comments on posts, rendering post captions, and fetching feed posts.

React, a JavaScript library for building user interfaces, is at the heart of this course. It's used for developing the front-end, ensuring that the Instagram clone is not just functional but also has a sleek, responsive design. Firebase, a platform developed by Google for creating mobile and web applications, serves as the back-end. It provides a suite of tools for managing databases, user authentication, hosting, and more, making it an ideal choice for real-time applications like social media platforms.

By the end of the course, you'll not only have a deeper understanding of React and Firebase but also a fully functional Instagram clone to showcase your newly acquired skills.

Watch the full course on the freeCodeCamp.org YouTube channel (8-hour watch).

In this tutorial, we will explore how to build secure user authentication in Flutter using Firebase for authentication and the Bloc state management pattern for handling application state. By the end, you'll have a solid understanding of how to integrate Firebase authentication and implement a secure login and sign-up process using Bloc.

Prerequisites:

To get the most out of this tutorial, you should have the following:

• A good understanding of Flutter and Dart
• A Firebase account: Create a Firebase account if you don't have one. You can set up a Firebase project through the Firebase Console.

How Firebase Authentication Works

Firebase Authentication is a powerful service that simplifies the process of authenticating users in your app. It supports various authentication methods, including email/password, social media, and more.

One of the key advantages of Firebase Authentication is its built-in security features, such as secure storage of user credentials and encryption of sensitive data.

FlowChart Description

Let's visualize the flow of actions using a flowchart to understand the concept you are going to learn. Take a look at the diagram below to get a better understanding:

Img 1: The flowchart of the app

The image above is a flowchart to visualize the flow of the app let's discuss what each parts represents. The rounded rectangles represent the starting and ending points of the flow; the purple rectangles represent the screens; the light blue rectangles represent the processes that take place; and finally, the rhombus represents decision-making.

• The application starts at the AuthenticationFlowScreen.
• The StreamBuilder listens to authentication state changes.
• If a user is authenticated, it directs to the HomeScreen; otherwise, it leads to the SignupScreen.
• AuthenticationBloc manages user authentication events and states.
• When the user signs up (SignUpUser event is triggered):
• It initiates the authentication loading state (AuthenticationLoadingState).
• Calls signUpUser from AuthService for user registration.
• If successful, it emits AuthenticationSuccessState with user data; otherwise, emits AuthenticationFailureState.
• When the user initiates the sign-out process (SignOut event is triggered):
• It starts the authentication loading state (AuthenticationLoadingState).
• Calls signOutUser from AuthService to sign the user out.
• If an error occurs during sign-out, it logs the error message.

Project Setup

To get started with Firebase Authentication, you must set up Firebase in your Flutter project.

Follow these steps to add Firebase and bloc to your project:

Add Dependencies to Your Project

Open your project in your preferred code editor.

Add the following dependencies to your pubspec.yaml file:

dependencies:
firebase_core: ^2.20.0
firebase_auth: ^4.12.0
flutter_bloc: ^8.1.3

Then save the pubspec.yaml file to fetch the dependencies.

Configure Firebase

Create a new Firebase project through the Firebase Console. Click on authentication in the project, and follow the provided instructions.

For more information, you can go through the Firebase website.

Initialize Firebase

First, open the main.dart file in the lib folder.

Add the following code to the file to initialize Firebase:

void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform
);

The code above shows the code for running the app. There's nothing unusual about this code except that we have added some code to the void main to initialize Firebase.

The User Model

Before creating the Firebase class to communicate with the Firebase service, let's define a UserModel to represent the user data.

Start by creating a user.dart file in your project's lib directory.

Then add the code below in the file:

class UserModel {
final String? id;
final String? email;
final String? displayName;
UserModel({ this.id, this.email, this.displayName, });
}

Now that you have set up Firebase and created a user model, you need to create a service class to communicate with Firebase directly.

The Authentication Service

Create a folder called services, create a file in this folder called authentication.dart You can now add this code to the file.

import 'package:firebase_auth/firebase_auth.dart';

import '../models/user.dart';

class AuthService {
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;


  /// create user
  Future<UserModel?> signUpUser(
    String email,
    String password,
  ) async {
    try {
      final UserCredential userCredential =
          await _firebaseAuth.createUserWithEmailAndPassword(
        email: email.trim(),
        password: password.trim(),
      );
      final User? firebaseUser = userCredential.user;
      if (firebaseUser != null) {
        return UserModel(
          id: firebaseUser.uid,
          email: firebaseUser.email ?? '',
          displayName: firebaseUser.displayName ?? '',
        );
      }
    } on FirebaseAuthException catch (e) {
      print(e.toString());
    }
    return null;
  } 

   ///signOutUser 
   Future<void> signOutUser() async {
      final User? firebaseUser = FirebaseAuth.instance.currentUser;
    if (firebaseUser != null) {
      await FirebaseAuth.instance.signOut();
    }
  }
  // ... (other methods)}
}

The code snippet above is a method to create a user in the app using Firebase. With this method, the signUpUser method takes two string parameters: email and password respectively. Then you call the Firebase method to create a user using the parameters we added.

Now that you know how to create the signup method, you can also create the login method. The class ultimately portrays the communication between Firebase and the app.

The next part is to connect the service to your state management, which we'll see how to do now.

How Bloc State Management Works

Bloc is a popular state management pattern for Flutter that helps manage complex application states predictably and in a testable way. Bloc stands for "Business Logic Component" and it divides the business logic and the UI. Bloc will be the bridge between your app and Firebase.

There's an extension for VScode that creates the boilerplate code for Bloc. You can use the extension to speed up the development process.

Set Up Firebase Authentication Bloc

Bloc consists of events and states. Let's first create the states and events for the Bloc. Then we'll create a AuthenticationBloc that will handle the logic using the events, states, and service we have created.

The AuthenticationState class

The AuthenticationState class is responsible for the authentication process's different states. As we will see in the code, there are initial, loading, success, and failure states to ensure we know what happens during the authentication process.

First, create an authentication_state.dart file in your project's bloc directory.

part of 'authentication_bloc.dart';


abstract class AuthenticationState {
  const AuthenticationState();

  List<Object> get props => [];
}

class AuthenticationInitialState extends AuthenticationState {}

class AuthenticationLoadingState extends AuthenticationState {
 final bool isLoading;

  AuthenticationLoadingState({required this.isLoading});
}

class AuthenticationSuccessState extends AuthenticationState {
  final UserModel user;

  const AuthenticationSuccessState(this.user);
  @override
  List<Object> get props => [user];
}
class AuthenticationFailureState extends AuthenticationState {
  final String errorMessage;

  const AuthenticationFailureState(this.errorMessage);

  @override
  List<Object> get props => [errorMessage];
}

Let's break down the code:

AuthenticationState abstract class:

• AuthenticationState is the base class for different states where the authentication process can be at any time.
• It contains a method props that returns a list of objects. This method is used for equality checking when comparing instances of this class.

AuthenticationInitialState class:

• AuthenticationInitialState represents the initial state of the authentication process.

AuthenticationLoadingState class:

• AuthenticationLoadingState represents a state where the authentication process is in progress, and the UI might show a loading indicator.
• It takes a boolean parameter, isLoading, to indicate whether or not the authentication process is currently loading.

AuthenticationSuccessState class:

• AuthenticationSuccessState represents a state where the authentication process has been completed.
• It includes a user property of type UserModel representing the authenticated user.

AuthenticationFailureState class:

• AuthenticationFailureState represents a state where the authentication process has failed.
• It includes an error message property containing information about the failure.

The AuthenticationEvent class

The AuthenticationEvent is responsible for the events the AuthenticationBloc will perform. In this case, it is the sign-in event. You can write the other events, like sign-up and sign-out, here.

Create a authentication_Event.dart file in your project's bloc directory.

part of 'authentication_bloc.dart';



abstract class AuthenticationEvent {
  const AuthenticationEvent();

  List<Object> get props => [];

}

class SignUpUser extends AuthenticationEvent {
  final String email;
  final String password;

  const SignUpUser(this.email, this.password);

  @override
  List<Object> get props => [email, password];
}


class SignOut extends AuthenticationEvent {}

The AuthenticationEvent class is similar to AuthenticationState. Let's look at the code to see what it's doing:

AuthenticationEvent abstract class:

• This is the base class for different events that trigger authentication state changes.

SignUpUser class:

• This class represents an event where a user is attempting to sign up.
• It takes two parameters, email and password, representing the credentials the user is using to sign up.
• This class's instances will signal the Bloc that a user is trying to sign up, and the Bloc can respond by initiating the sign-up process and transitioning the authentication state accordingly.

SignOut class:

• This class's instances will signal the Bloc that a user is trying to sign out. The bloc can respond by initiating the sign-out process and updating the authentication state accordingly.

The AuthenticationBloc class

The AuthenticationBloc will handle the overall authentication state, from what happens when a user clicks a button to what shows on the screen. It also interacts with the Firebase service we created directly.

First, create a file called authentication_bloc.dart in your project's bloc directory.

Add the following code to define the AuthenticationBloc class:

import 'package:bloc/bloc.dart';
import 'package:meta/meta.dart';

import '../models/user.dart';
import '../services/authentication.dart';

part 'authentication_event.dart';
part 'authentication_state.dart';



class AuthenticationBloc extends Bloc<AuthenticationEvent, AuthenticationState> {
  final AuthService authService = AuthService();

  AuthenticationBloc() : super(AuthenticationInitialState()) {
    on<AuthenticationEvent>((event, emit) {});

    on<SignUpUser>((event, emit) async {
      emit(AuthenticationLoadingState(isLoading: true));
      try {
          final UserModel? user =
          await authService.signUpUser(event.email, event.password);
      if (user != null) {
        emit(AuthenticationSuccessState(user));

      } else {
        emit(const AuthenticationFailureState('create user failed'));
      }
      } catch (e) {
        print(e.toString());
      }
     emit(AuthenticationLoadingState(isLoading: false));
    });

     on<SignOut>((event, emit) async {
      emit(AuthenticationLoadingState(isLoading: true));
      try {
        authService.signOutUser();
      } catch (e) {
        print('error');
        print(e.toString());
      } 
       emit(AuthenticationLoadingState(isLoading: false));
     });
}
}

In this code snippet, we have created an instance of the AuthService class, which handles user authentication operations, such as signing up and signing out.

on<SignUpUser>((event, emit) async { ... } defines a handler for the SignUpUser event. When this event is triggered, the bloc goes through the following steps:

• It emits an AuthenticationLoadingState to indicate that the authentication process is in progress.
• It calls for the signUpUser method of the authService to attempt to create a user account with the provided email and password.
• If the user account creation is successful (that is, the user is not null), it emits an AuthenticationSuccessState with the user data.
• If the user account creation fails, it emits an AuthenticationFailureState with an error message and logs the error.
• Regardless of success or failure, it emits another AuthenticationLoadingState to signal the end of the authentication process.

on<SignOut>((event, emit) async { ... } defines a handler for the SignOut event. When this event is triggered, the bloc goes through the following steps:

• It emits an AuthenticationLoadingState to indicate that the sign-out process is in progress.
• It calls the signOutUser method of the authService to sign the user out.
• If any errors occur during the sign-out process, it logs the error.
• It emits another AuthenticationLoadingState to signal the end of the sign-out process.

The AuthenticationBloc manages the state of the authentication process, including loading, success, and failure states, based on the events triggered by user actions. The authService is responsible for carrying out the actual authentication operations.

With the Bloc set up, we can implement the authentication flow using Bloc.

How to Implement the Authentication Flow with Bloc

To implement the authentication flow, you will create a dedicated Stateless widget to check if a user has logged in already so that we will know what screen to show the user. The page will display different screens based on the user's authentication state.

AuthenticationFlowScreen:

Create a new file called authentication_page.dart in your project's screens directory.

import 'package:bloc_authentication_flow/screens/home.dart';
import 'package:bloc_authentication_flow/screens/sign_up.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

class AuthenticationFlowScreen extends StatelessWidget {
  const AuthenticationFlowScreen({super.key});
  static String id = 'main screen';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<User?>(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return const HomeScreen();
          } else {
            return const SignupScreen();
          }
        },
      ),
    );
  }
}

In the above code, you have a StatelessWidget with a StreamBuilder as the child. The StreamBuilder acts as a judge, using Firebase to check the state changes and if a user has logged in or not. If a user has logged in, it directs them to the home screen, else it goes to the sign-up screen.

Change the home route to AuthenticationFlowScreen to allow the app to check before routing to any page.

   home: const AuthenticationFlowScreen()

Sign-up Screen

First, create a new file called sign_up.dart in the screens directory.

import 'package:bloc_authentication_flow/screens/home.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../bloc/authentication_bloc.dart';

class SignupScreen extends StatefulWidget {
  static String id = 'login_screen';

  const SignupScreen({
    Key? key,
  }) : super(key: key);

  @override
  State<SignupScreen> createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  // Text Controllers
  final emailController = TextEditingController();
  final passwordController = TextEditingController();

  @override
  void dispose() {
    emailController.dispose();
    passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Login to Your Account',
          style: TextStyle(
            color: Colors.deepPurple,
          ),
        ),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 20),
            const Text('Email address'),
            const SizedBox(height: 10),
            TextFormField(
              controller: emailController,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Enter your email',
              ),
            ),
            const SizedBox(height: 10),
            const Text('Password'),
            TextFormField(
              controller: passwordController,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Enter your password',
              ),
              obscureText: false,
            ),
            const SizedBox(height: 10),
            GestureDetector(
              onTap: () {},
              child: const Text(
                'Forgot password?',
                style: TextStyle(
                  color: Colors.deepPurple,
                ),
              ),
            ),
            const SizedBox(height: 20),
            BlocConsumer<AuthenticationBloc, AuthenticationState>(
              listener: (context, state) {
                if (state is AuthenticationSuccessState) {
                  Navigator.pushNamedAndRemoveUntil(
                    context,
                    HomeScreen.id,
                    (route) => false,
                  );
                } else if (state is AuthenticationFailureState) {
                  showDialog(
                      context: context,
                      builder: (context) {
                        return const AlertDialog(
                          content: Text('error'),
                        );
                      });
                }
              },
              builder: (context, state) {
                return SizedBox(
                  height: 50,
                  width: double.infinity,
                  child: ElevatedButton(
                    onPressed: () {
                      BlocProvider.of<AuthenticationBloc>(context).add(
                        SignUpUser(
                          emailController.text.trim(),
                          passwordController.text.trim(),
                        ),
                      );
                    },
                    child:  Text(
                      state is AuthenticationLoadingState
                            ? '.......',
                            : 'Signup',
                      style: TextStyle(
                        fontSize: 20,
                      ),
                    ),
                  ),
                );
              },
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text("Already have an account? "),
                GestureDetector(
                  onTap: () {},
                  child: const Text(
                    'Login',
                    style: TextStyle(
                      color: Colors.deepPurple,
                    ),
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

This code is just a simple Login UI with two textfields and an elevated button. The BlocConsumer widget wraps the Sign up button and listens for changes in the AuthenticationBloc state. When a user presses the button, it dispatches an event to the AuthenticationBloc to initiate the user sign-up process.

Depending on the authentication state, this button may display different feedback or navigate to another screen. It checks for AuthenticationSuccessState, AuthenticationLoadingState, and AuthenticationFailureState states to respond accordingly.

Img 2: A Login screen showing a login process with 2 out of the 3 states.

Home Screen

Create another file called home_screen.dart in the screens directory and add the code below to the file.

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../bloc/authentication_bloc.dart';

class HomeScreen extends StatelessWidget {
  static String id = 'home_screen';
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Hello User',
              style: TextStyle(
                fontSize: 20,
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            BlocConsumer<AuthenticationBloc, AuthenticationState>(
              listener: (context, state) {
                if (state is AuthenticationLoadingState) {
                   const CircularProgressIndicator();
                } else if (state is AuthenticationFailureState){
                    showDialog(context: context, builder: (context){
                          return const AlertDialog(
                            content: Text('error'),
                          );
                        });
                }
              },
              builder: (context, state) {
                return ElevatedButton(
                    onPressed: () {
                      BlocProvider.of<AuthenticationBloc>(context)
                      .add(SignOut());
                    }, child: const Text(
                      'logOut'
                      ));
              },
            ),
          ],
        ),
      ),
    );
  }
}

The code above represents the HomeScreen and it's also a simple page that consists of scaffold, a column, and a text widget but the interesting part is the BlocConsumer which is at the elevated button that says logOut. Let's look closely at that.

The BlocConsumer Listens to state changes from the AuthenticationBloc. It has two parameters - listener and builder.

• listener: Listens to state changes and reacts based on the current state received from the AuthenticationBloc.
• If the state is AuthenticationLoadingState, it shows a CircularProgressIndicator.
• If the state is AuthenticationFailureState, it displays an AlertDialog with the message 'Error'.
• builder: Builds the UI based on the current state received from the AuthenticationBloc.
• It renders an ElevatedButton labeled "Log Out".
• When pressed, it triggers the SignOut event in the AuthenticationBloc via BlocProvider.

With the Bloc authentication flow implemented, you can run your Flutter app and test the registration functionalities. Make sure to handle other authentication-related scenarios, such as user Login and password recovery, as required by your app's specifications. Also, you'll want to handle the errors gracefully to give the user a good experience.

If you want to clone the repo, you can check it out on GitHub here and leave a like.

Conclusion

In this article, we explored building a user authentication flow in Flutter using Firebase for authentication and the Bloc state management pattern for handling application state.

We learned how to set up Firebase in a Flutter project, create Blocs for authentication, and implement the authentication flow using Bloc.

By leveraging the power of Firebase and the predictability of Bloc, you can ensure a secure and seamless user authentication experience in your Flutter apps.

As a front-end developer, you may have used a free hosting platform like Vercel, Netlify, or GitHub pages to deploy your front-end projects.

Personally, I typically use Vercel and Netlify. But I also like trying out different web technologies, and I've used Firebase's authentication and storage features on different projects before. So I decided to use Firebase to deploy a React-TypeScript project of mine, and it went really well.

What is Firebase?

Firebase is a Backend-as-a-Service (BaaS) platform owned by Google that you can use to perform backend operations like authentication, real-time database functionality, and so on.

Firebase gives frontend developers the ability to work with backend features without needing to actually go deep into backend development.

You can also use Firebase to host and deploy projects. It provides a hosting URL after deployment that you can share with others to view your app on their own device just like other hosting and deployment platforms.

Follow these step-by-step procedures to successfully deploy your React projects using Firebase.

Create your React Project

Depending on the method you prefer to use in creating React projects, go ahead and create one. For example, you can do so using CRA: npx create-react-app app-name or using Vite: npm create vite@latest (recommended).

Use cd app-name to navigate to the project directory. Then npm start or npm run dev to start up your development server. Build your desired project, create a GitHub repo, and push the project to GitHub.

Now we're done with part one of the procedure. On to the next part.

How to Configure and Install Firebase

If you don't have an account on Firebase, go to this site to create an account on Firebase or log in if you already have one. If you have a Google account, it will be easy to create an account on Firebase.

After you've successfully logged in, you'll need to create a project on Firebase. Here's how to do that:

Step 1: Firebase Console Dashboard.

Go to your Firebase console dashboard, where you should see the text "Go to console" at the top right-hand side of your page after logging in.

The page that opens up will have a "Create a project" button. Click on that button and it will take you to the page where you'll input your project details (Step 2).

If you've previously used Firebase, that means you already have projects on Firebase. In that case, it will bring up a page like the one below displaying a list of your projects and a box to add a new project.

Firebase console

Step 2: Create a New Project

Click the "Add project" card. A page prompting you to give your project a name will open up.

Creating a project

Step 3: Fill in Project Details

In this example, I named the project "My React APP".

If you're new to Firebase, you'll need to tick the "Accept Firebase terms" checkbox and the second checkbox.

Click the "continue" button. The next page that comes up has a toggle to enable or disable Google Analytics for the project. Disable this toggle as we don't need Google Analytics for this demo.

Click the "Create Project" button and it should start creating your Firebase project.

If this isn't your first time using Firebase, click on the "Continue" button on the page above, disable Google Analytics, and create a new project.

Step 4: Install Firebase and Firebase Tools

The next step is to go to your project terminal on VS code, your Command Line Interface, or any code editor you're using. Ensure you're in the main folder of the project you want to deploy and then install Firebase into the project using this command: npm install firebase.

Next, install the Firebase tools we'll be using for hosting and deployment using this command: npm install -g firebase-tools.

Step 5: Log in to Firebase Using the Terminal

After configuring the Firebase project and installing the necessary dependencies, you'll have to log in to Firebase on the terminal using this command: firebase login.

A prompt requiring you to select Yes or No to a question on whether you should "Allow Firebase to collect CLI and Emulator Suite usage and error reporting information" will appear. Select the "Yes" option.

Step 6: Select Account

A window will open up on the default browser that will require you to select your Firebase account for login.

After successful authentication, a success message will appear on the terminal.

Firebase CLI login

Step 7: Run Project Build

Use the npm run build command to build the project scripts. This command automatically generates a production-ready build of your application by bundling all the necessary JavaScript, CSS, and other assets into a single folder "build" folder in the project directory.

This process is important as it optimizes the code and assets for performance. This reduces the overall size of the application and makes it efficient for deployment.

After the successful completion of part two, we've come to the next integral part of this whole deployment process.

How to Initialize Firebase

Now we need to initialize Firebase, so we'll walk through the steps to do that.

Step 1: Initialize Firebase

Initialize Firebase for this project by using this command on the terminal: firebase init. It will let you know that you're about to initialize a Firebase project in the directory.

Some prompts that will come up after this command are: "Are you ready to proceed?", to which you will type "Y" for "Yes".

The next prompt is: "Which Firebase features do you want to set up for this directory?". Use the arrow down key on your keyboard to point to the "Hosting:Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys" option. Press the space bar and then hit enter.

Step 2: Project Setup

This step connects your project directory with the Firebase project. When prompted to select a project, choose the "Use an existing project" option.
Then when prompted to "select a default Firebase project for the directory", select the particular Firebase project you created in part 1 of this process.

You might see some other project options if you have more than one Firebase project on your Firebase console.

Connecting project to Firebase.

Step 3: Setup Hosting

This process will bring up some prompts you'll have to answer.

The first one is: "What do you want to use as your public directory?", to which you'll choose or type in "build".

Next, when asked if you want to "Configure as a single-page app (rewrite all urls to /index.html)", select the "Y" or "Yes" option.

When asked to "Set up automatic builds and deploys with GitHub?", choose the "Yes" option. Also, when prompted with the "File build/index.html already exists. Overwrite?" question, choose "No".

Step 4: Authorize Firebase with GitHub

You will have to authorize Firebase with your GitHub account. A window will open up on your browser that will require you to authorize Firebase into your GitHub, and input your GitHub password. After a successful authentication, you'll get a success message on your terminal with your GitHub username.

Firebase Hosting setup

If you've been following along successfully and gotten to this stage, you've done well so far. Now we're halfway to deploying our project.

How to Choose a GitHub Repository and Set Up GitHub Workflow

Step 1: Select GitHub Repo

First, you'll need to type in the GitHub repository you'd like to use to set up a GitHub workflow for Firebase deployments.

The format to do this is "username/repository". Remember in part 1 of this process, you built a project and pushed it to GitHub. That GitHub repo is what you'll use.

For example, let's say your GitHub username is "CoderDev" and the repository of the project is "Firebase-Deployment". You'll type "CoderDev/Firebase-Deployment" into the terminal. It should look like this:

Step 2: GitHub secret token

After setting up a GitHub workflow, it will create a service account with Firebase Hosting admin permissions and will upload the service account JSON to GitHub as a secret token.

You can also view this secret token on GitHub. To do this, go to the repository of the project and switch to the "Settings" tab. On the left-hand panel of the settings page, click on the "Secrets and variables" dropdown and select the "Actions" option. It will display your secret token like this:

Secret token

Step 3: Set up Workflow

You'll be prompted with the question "Set up the workflow to run a build script before every deploy?". Choose "Yes" for this.

You'd also be asked, "What script should be run before every deploy? (npm ci && npm run build) npm run build". Type this into the terminal: npm ci && npm run build. This will create a workflow file in the project directory.

You'll now see the "firebase-hosting-pull-request.yml" file inside a ".github/workflows" folder in your project folder structure.

First GitHub Workflow File

Step 4: Automatic deployment

Next, you'll be asked if you want to "Set up automatic deployment to your site's live channel when a PR is merged". Select "Yes".

When asked to enter the name of the GitHub branch associated with your site's live channel, type or select "main". This will create another workflow file "firebase-hosting-merge.yml" inside the ".github/workflows" folder.

Second GitHub Workflow File

Step 5: Generate Folders

The two operations performed above will generate two folders in your project directory. One named "firebase.json" is where the configuration information will be written in, and the other named ".firebaserc" is where the project information will be written in.

Creating Folders

That's all you have to do to initialize Firebase in your project.

These processes are a bit lengthy, but the good news is that all that's left to do is deploy to Firebase.

How to Deploy to Firebase

Run the Deployment Command

Run the deployment command firebase deploy. Wait for it to deploy. After it is done, a success message will be displayed on your terminal with a hosting URL. That is the project's live link with a "web.app" domain extension.

Firebase Deployment

That's it! We're done deploying our React project with Firebase.

Now anytime you add, commit, and push new changes to that GitHub repo, it will automatically build the app and redeploy it to Firebase so that changes will be reflected in the live site.

This automatic build and redeploy is possible because earlier, in the Firebase initialization process, we selected the 'yes' option to set up automatic builds and deploy with GitHub.

We also selected the "Yes" option to set up the workflow to run build script before every deploy and specified the scripts that should be run before every deploy.

To view how this deployment is carried out after every push to the repo, go to that project's GitHub repo. Switch to the "Actions" tab to see how the app is being built and deployed.

Build and deployment action from GitHub.

You might encounter some errors while deploying. The good thing is that right there on that GitHub actions page, you can trace to see where the error is coming from in the app.

Let's say you're working with TypeScript in the project, and you declared a function and didn't use it, or you called a hook and didn't use it. Your app may function as it should on the browser.

But while deploying, this might be an issue or cause a warning and you'll need to fix it, commit, and push again to the repo to fix the error. Once you've done this and the deployment is successful, the action page should look like this.

Fixing deployment issue

Conclusion

Deploying your project using Firebase might at first seem like a long process. But if you follow the steps in this article, you should be good to go.

You can easily deploy your application to Firebase Hosting and take advantage of its powerful capabilities such as automatic processes, simplified deployment process, and continuous integration with GitHub by following the easy steps in this article.

If you wish to learn more about all the features Firebase has to offer to developers, go to the Firebase Official Documentation and explore.

If you want your application to have this functionality, you'd usually have to build your server and its logic. But we now live in an age of technological innovation, and tools have been created to help you minimize your development time.

This tool is called Firebase Remote Config — a cloud service that enables you change different functionalities of your app without releasing updates or asking users to update the app.

Overview

You can access the Remote Config feature in your project’s Firebase console. It is usually under the Release & Monitor section on the left sidebar.

There are two ways in which you can define your remote configurations:

1. Using Firebase.
2. Using a template file that is in JSON format.

We will focus on the first option, as the second option is a less intuitive approach.

Firebase Remote Config lets you define one or more keys during configuration. Keys can be of the following type:

• String
• Number
• Boolean
• JSON

These keys are used as the configurations for your application. For example, if you have a feature in your application that you would like to control through remote configurations, you could define a Boolean key titled enableFeatureX.

Each key you set has a few other settings that may be useful to you. For example, you can define a default value for a key (for example, false can be the default value of a Boolean key) or make it use a value that you have defined in your application.

Another cool thing you can do, by clicking on the Add new button in the image above, is to set the value of a key based on certain factors. You'll see these options when you click on the button:

• Conditional value.
• Experiment.
• Personalization.

Once you are done adding a key, make sure to publish your changes so they will be deployed.

The Conditional Value Option

You can configure how a value will be set to specific users based on various conditions.

Here, you can decide on what you want to test and how. You will discover several options when you click on the “Applies if” dropdown.

To illustrate the use of this feature, let’s say that you want to target iOS users in the US. You can do that using the “Applies if” dropdown and choosing Platform and then iOS.

After that, you can press the "and" button to add a condition for Country/Region and choose United States.

Make sure to also name your condition, otherwise, the Create condition button won’t be enabled.

Notice how the last field in defining a new condition window tells you how many users will be affected by this condition? That's a pretty cool feature.

The Experiment Option

This option lets you change the behavior of a value in your remote configurations before taking effect on all your users.

You can follow these steps to configure the experiment option:

• In the first step, you have to fill in the name and description of your experiment.
• Then, you have choose which application to target and how many users will be affected (percentage-wise) in the second step.
• The third step is to set up the metrics to measure this experiment. There are two types — the primary metrics and additional metrics.
• Lastly, you can decide on the number of A/B test groups for this experiment.

The Personalization Option

Last but not least is the option to tailor a specific value of your remote configurations to a user based on their own behavior.

You can define values the algorithm may supply to the user based on their behavior. These will be chosen by an objective you define (Step 2). This objective can range from the engagement time of the user to the amount of clicks they perform. In Step 3, you define a condition that will target users so that they will become personalized. Lastly, in Step 4, you add the name and description of this personalization.

Each option has much more to offer than what I have described here, so if you want to learn more, you can use one of the reference links at the bottom. Now that we understand what Remote Config is, let’s see how we can add it to our application.

How to Setup Firebase Remote Config

Before you can do anything related to applying remote configurations, you need to make sure you've added Firebase to your Android project. This has been documented here.

After you have done that, follow these steps:

Step #1 - Add the Firebase remote configuration library to your project inside your application build.gradle file

 implementation 'com.google.firebase:firebase-config-ktx'

There is an option to also import the Firebase Analytics module, but it is not required for remote configurations. It is used in other areas of remote configurations, such as defining a condition based on a specific event happening.

Step #2 - Use the RemoteConfig Object

After syncing your project, you can access the RemoteConfig object with this command:

val remoteConfig: FirebaseRemoteConfig = Firebase.remoteConfig

Step #3 - Define fetch interval

You can define how often your remote configurations will be fetched and updated. When you are still developing your application, setting this number to be relatively low is more ideal.

val remoteConfigSettings = remoteConfigSettings {                             minimumFetchIntervalInSeconds = 2000
}

If you set the **minimumFetchIntervalInSeconds** to be too low, Firebase will throw a FirebaseRemoteConfigFetchThrottledException, so use a low number only when you are testing things.

Step #4 - Set the configuration for the remote configuration

You can set the remote configuration using the code below:

remoteConfig.setConfigSettingsAsync(remoteConfigSettings)

Step #5 - Set default values

You can have application default values for your remote configurations. These can be created as an XML file inside the XML directory inside the res folder. Here’s what the code looks like:

:remoteConfig.setDefaultsAsync(R.xml.remote_config_defaults)

This XML file must have an underlying element of a map to wrap all your default values. For example, let’s imagine we have defined a key in remote configurations called my_key, whose value is 1. The XML for the default values will look like this:

<?xml version="1.0" encoding="utf-8"?>
<defaultsMap>
   <entry>      
      <key>my_key</key>     
      <value>1</value>   
    </entry>
</defaultsMap>

Remote configurations need to be fetched and activated. The fetch action fetches and stores your Remote Configurations inside the Remote Config object. The activation part is to make these values available to your application. That’s why there are two API methods:

• fetch (and later use activate)

remoteConfig.fetch().addOnCompleteListener { task ->               if                if (task.isSuccessful) {     
              //Remote Configurations fetch successfully          
           }         
        }.addOnFailureListener { error ->             
                //Remote Configurations fetch failure            
       }
-------------------------
remoteConfig.activate().addOnCompleteListener { task ->  
if (task.isSuccessful) {
        //Remote Configurations activation success   
        }  
   }.addOnFailureListener { error -> 
               //Remote Configurations activation failure
  }

• fetchAndActivate

remoteConfig.fetchAndActivate().addOnCompleteListener { task ->                                if (task.isSuccessful) {     
                //Remote Configurations fetched and activated successfully                }        
       }.addOnFailureListener { error ->           
       //Remote Configurations fetched and activated failure    
     }

Step #6 - Access configurations

Now that our remote configurations have been fetched and activated, we can access and use them in our application. We can do so by accessing the remoteConfig object and using one of the getter methods per the type of the value we set:

val myRemoteConfigValue: String = remoteConfig.getString("my_key")

Conclusion

Since your application will rely on remote configurations for its operation (or parts of it), it is crucial to decide how the application will behave if it does not arrive or takes too long to receive a response.

In essence, there are two ways to handle loading the remote configurations:

1. Your application boots up and waits for the remote configurations to be activated.
2. Your application boots up and does not wait for the remote configuration to be activated. Opting instead to use the remote configurations on the second application run.

It's important to understand that there is no option that is preferable over the other. It all depends on what your use case is and how you would like the user's experience to be when using your application. The first option guarantees that once your application is loaded, all the remote configurations that you have defined will be set and the user's experience will be smooth after the initial load time. If you have critical features that rely on the remote configurations, you will have to go with this option.

On the other hand, if your remote configurations concern a specific feature of your application that doesn't necessarily need to happen on the first initial launch, you might consider going for second option. That way, your application does not need to wait for the remote configurations to be received from Firebase and the logic inside your application can happen later.

There are good and bad implications for each of these methods, and it’s up to you to decide which is better suited for your application. If you choose the first option, you may add a loading screen that times out after a certain period. If you choose option two, it is recommended to create a default mechanism for features in your application and how they should work when the configuration has not yet been received.

There is more than we have discussed in this article, and I encourage you to investigate deeper things. I recently used Firebase Remote Configurations in an application I created that helps users schedule appointments.

You can check it out on the Google Play store.

And you can see the source code here:

If you want to read other articles I have written, you can find them below:

References

• Getting Started With Firebase For Android
• Remote Config Use Cases
• Remote Config Loading Strategies
• Remote Config Personalization

We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to build a Google Drive clone with Next.js, TypeScript, Tailwind CSS, and Firebase 9. The course will give you the hands-on experience to create a powerful full stack application from scratch.

In this comprehensive course developed by the talented Nishant Singh, you will learn how to build a Google Drive clone that covers both the front-end and back-end aspects of web development. The course will guide you through the implementation of essential features such as file and folder uploading, authentication, and much more. By the end of the course, you will have a fully functional Google Drive clone that you can showcase in your portfolio.

The course focuses on several core technologies that are widely used in modern web development. Each of these technologies plays a crucial role in building the Google Drive clone.

Next.js: Next.js is a popular React framework that enables server-side rendering, automatic code splitting, and easy routing. It's the foundation of our project, allowing us to create dynamic and performant web applications.

TypeScript: TypeScript adds static typing to JavaScript, making your code more predictable and reducing the chances of runtime errors. By incorporating TypeScript into our project, we ensure a higher level of code quality and maintainability.

Tailwind CSS: Tailwind CSS is a utility-first CSS framework that simplifies styling by providing a set of pre-designed classes. It allows us to create a responsive and visually appealing user interface with minimal effort.

Firebase 9: Firebase is a comprehensive platform for building web and mobile applications. In this course, we'll leverage Firebase 9, which offers real-time database capabilities, authentication services, and cloud storage. Firebase simplifies backend development and allows us to focus on creating user-friendly features.

The course is broken up into the following sections:

• Base Setup
• Authentication
• Building the Topbar
• Upload Files Component I
• Initialising Firebase
• Upload Files Component ||
• Uploading Files to Storage
• Displaying Files
• Creating Folders
• Nested Folders and Files
• Adding Google Auth
• Sharing Files and Folders using Email

So get ready to build your own Google Drive clone and enhance your web development skills! You can watch the full course on the freeCodeCamp.org YouTube channel (3-hour watch).

Authentication techniques are continually evolving as social media sites continue to grow in popularity. The ability to log into web apps using social network accounts is a helpful advance in this area.

This article discusses how you can enhance the user login process for web applications by employing social media authentication through Firebase. It goes into the benefits, setup methods, and integration approaches while offering helpful guidelines.

Here's what we'll cover:

1. Why Use Social Media Authentication?
2. Prerequisites
3. What is Firebase and Why Use it for Authentication?
4. How to Set Up Firebase for Social Media Authentication
5. How to Set Up Your React App
6. How to Integrate Social Media Authentication in Your App
7. Offering Both Social Media and Email/Password Authentication
8. Conclusion

Why Use Social Media Authentication?

I'm sure you've grown weary of the usual username-password routine when logging into a new platform. It often entails creating a new password on the spot or resorting to insecure password conventions that could grant unauthorized access to your many accounts.

Fortunately, social media authentication offers some advantages:

1. Effortless User Experience: Social media login choices simplify the registration process, making it convenient for users to initiate their app usage.
2. Heightened Security: Social media platforms implement strong security measures that can bolster the safety of your app's users.
3. Elimination of Password Hassles: Through social media authentication, users are relieved from the burden of remembering numerous passwords, reducing the inconvenience of managing credentials.
4. Reduced Account Abandonment: Social media login prompts users to join and interact with your app, minimizing the chances of them leaving the registration process unfinished.
5. Access to Trustworthy User Information: Social media platforms provide substantial user information, which can be harnessed to personalize the experience offered by your app.
6. Streamlined Account Recovery: In instances of forgotten passwords, social media authentication presents a straightforward approach for users to regain entry to their accounts.

In summary, social media authentication offers a convenient and secure method for users to join and use your app. It leads to an improved user experience, and decreased account abandonment, and grants you access to valuable user insights.

Prerequisites

This article is intended for those with a solid grasp of the following concepts:

• HTML, CSS, and JavaScript
• React and React Routing
• Fundamental familiarity with using Firebase

What is Firebase and Why Use it for Authentication?

Firebase serves as a comprehensive platform, providing developers with backend services and tools to create web and mobile applications.

One of its key offerings is an authentication service that streamlines the process of integrating authentication features into apps.

With Firebase, implementing authentication becomes more straightforward, thanks to its provision of pre-built user interface components, developer-friendly APIs, and support for various authentication methods.

How to Set Up Firebase for Social Media Authentication

Step 1: Create a Firebase Project

1. Go to the Firebase Console and sign in with your Google account.
2. Click the "Add Project" button.
3. Enter a name for your project and select a location for your data storage.
4. Click the "Create" button.

Firebase console homepage

Step 2: Register a Web app

This feature enables you to register your web applications to access the features of Firebase via web apps.

1. In the Firebase Console, click the "Web" (</>) icon.
2. Click the "Add App" button.
3. Enter a name for your app and select the "Web" app type.
4. Click the "Register" button.

After you have created a Firebase project and registered a web app, you can start using Firebase for social media authentication.

Step 3: Discover Social Media Sign-In Methods

To do this, once your project is created, you'll need to navigate to the "Authentication" section on the left-hand menu.

Showing the Authentication sidebar

Under the "Sign-in method" tab, you'll find a list of authentication providers from which you can choose one:

Displaying various Authentication methods

Step 4: Configure Social Media Providers

How to configure Google auth:

To configure Google auth, simply add a support email, and you’re all set.

Adding a support mail for google auth

How to configure GitHub auth:

To configure GitHub auth, you'll need a Client ID and Client Secret. To get these, sign in to your GitHub account and go to Settings > Developer settings.

Github settings panel

Then, navigate to OAuth and create a new OAuth application.

Creating a github OAuth application

In order to get the Authorization callback, go back to your Firebase console and copy the URL in the GitHub setup.

GitHub callback URL

Note: To complete this process, you’d need to have your app already hosted or at least a URL to where your app is going to be hosted.

Next, you’ll be routed to a page where your app has been registered and you have your Client ID and Secret.

GitHub Client ID and secret Generated

Copy those details and use them to register GitHub as an auth service on Firebase.

Filling GitHub details on Firebase

How to configure Twitter auth:

Similar to Github, start by logging into your Twitter developer account. If you don’t have one, sign up with the Twitter Developer Portal. It looks something like this:

Twitter Developer Signup

After filling in the details, you’ll be routed to the homepage.

Twitter Dev homepage

Click on your default app, and set up user authentication.

Twitter OAuth app setup

Don’t forget to get the callback URL from Firebase and set the Website URL to the URL where your app is hosted.

After setting it up, navigate to your project’s keys and tokens and generate new ones.

Generating new App Key and Secret

Paste those details back in Firebase to set up Twitter auth.

And with that, your three social media platforms have be set up for authentication.

All Auth's set up

How to Set Up Your React App

Now we need to get your React app set up. You'll start by creating a new React app using Vite.

Create a folder on your computer and open that folder with your preferred IDE. Open that IDE’s terminal and run this command:

npm create vite@latest

When the details load, select React and wait for the installation to complete.

Creating a React App with Vite

You’ll be left with a handful of files and some boilerplate code that you can get rid of.

Next, run npm run dev in the terminal to start a development server on port http://localhost:5173/.

React app running in browser

To use Firebase in your app, you must first define a Firebase config file. This file contains all the necessary data used to identify your Firebase app.