Build a React Todo App with Firebase (Auth + Firestore) — Full Guide

Build a Todo App with React + Firebase (Auth & Firestore)

By YourName · Updated: 2026-03-01

Quick project: React UI + Firebase Authentication + Firestore realtime DB. Perfect for a portfolio demo.

1) Create Firebase project

• Go to Firebase console → New project → enable Authentication (Email) and Firestore.
• Copy Firebase config to your React app.

2) Minimal firebase init (src/firebase.js)

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

const firebaseConfig = {
  apiKey: "REPLACE",
  authDomain: "PROJECT.firebaseapp.com",
  projectId: "PROJECT_ID"
};

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

3) Add todos (example)

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

const todosCol = collection(db, 'todos');
const q = query(todosCol, orderBy('createdAt', 'desc'));

// add
await addDoc(todosCol, { text: 'Buy milk', userId: uid, createdAt: Date.now() });

// realtime listener
onSnapshot(q, snapshot => {
  const items = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
  setTodos(items);
});

4) Secure rules (Firestore)

// minimal rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /todos/{docId} {
      allow read, write: if request.auth != null && request.auth.uid == resource.data.userId;
    }
  }
}

---