Skip to content

Firebase Quick Reference

Essential Firebase operations for web apps

Setup

typescript
// src/lib/firebase.ts
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
};

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

Authentication

Sign Up

typescript
import { createUserWithEmailAndPassword } from 'firebase/auth';

const signUp = async (email: string, password: string) => {
  const userCredential = await createUserWithEmailAndPassword(auth, email, password);
  return userCredential.user;
};

Sign In

typescript
import { signInWithEmailAndPassword } from 'firebase/auth';

const signIn = async (email: string, password: string) => {
  const userCredential = await signInWithEmailAndPassword(auth, email, password);
  return userCredential.user;
};

Sign Out

typescript
import { signOut } from 'firebase/auth';

const logOut = async () => {
  await signOut(auth);
};

Auth State Listener

typescript
import { onAuthStateChanged } from 'firebase/auth';

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    if (user) {
      setUser(user);
    } else {
      setUser(null);
    }
    setLoading(false);
  });

  return () => unsubscribe();
}, []);

Current User

typescript
import { auth } from './firebase';

const user = auth.currentUser;
const userId = user?.uid;
const email = user?.email;

Firestore

Add Document

typescript
import { collection, addDoc, serverTimestamp } from 'firebase/firestore';

const addNote = async (title: string, content: string) => {
  const docRef = await addDoc(collection(db, 'notes'), {
    title,
    content,
    userId: auth.currentUser?.uid,
    createdAt: serverTimestamp(),
    updatedAt: serverTimestamp(),
  });
  return docRef.id;
};

Get All Documents

typescript
import { collection, query, where, getDocs, orderBy } from 'firebase/firestore';

const getNotes = async (userId: string) => {
  const q = query(
    collection(db, 'notes'),
    where('userId', '==', userId),
    orderBy('createdAt', 'desc')
  );

  const snapshot = await getDocs(q);
  return snapshot.docs.map(doc => ({
    id: doc.id,
    ...doc.data()
  }));
};

Get Single Document

typescript
import { doc, getDoc } from 'firebase/firestore';

const getNote = async (noteId: string) => {
  const docRef = doc(db, 'notes', noteId);
  const docSnap = await getDoc(docRef);

  if (docSnap.exists()) {
    return { id: docSnap.id, ...docSnap.data() };
  }
  return null;
};

Update Document

typescript
import { doc, updateDoc, serverTimestamp } from 'firebase/firestore';

const updateNote = async (noteId: string, title: string, content: string) => {
  const docRef = doc(db, 'notes', noteId);
  await updateDoc(docRef, {
    title,
    content,
    updatedAt: serverTimestamp(),
  });
};

Delete Document

typescript
import { doc, deleteDoc } from 'firebase/firestore';

const deleteNote = async (noteId: string) => {
  await deleteDoc(doc(db, 'notes', noteId));
};

Real-time Listener

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

useEffect(() => {
  const q = query(
    collection(db, 'notes'),
    where('userId', '==', userId)
  );

  const unsubscribe = onSnapshot(q, (snapshot) => {
    const notes = snapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
    setNotes(notes);
  });

  return () => unsubscribe();
}, [userId]);

Security Rules

Basic User Isolation

javascript
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /notes/{noteId} {
      allow read, write: if request.auth != null
                         && request.auth.uid == resource.data.userId;
      allow create: if request.auth != null
                    && request.auth.uid == request.resource.data.userId;
    }
  }
}

Common Errors

ErrorMeaningFix
auth/user-not-foundNo account with this emailCheck email or register
auth/wrong-passwordPassword incorrectCheck password
auth/email-already-in-useEmail registeredLogin instead
auth/weak-passwordPassword too shortUse 6+ characters
permission-deniedSecurity rules blockedCheck rules + userId

Firebase CLI

bash
# Install
npm install -g firebase-tools

# Login
firebase login

# Initialize
firebase init

# Deploy
firebase deploy

# Deploy specific
firebase deploy --only hosting
firebase deploy --only firestore:rules

# Emulators
firebase emulators:start

Hosting

json
// firebase.json
{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Keep this handy for Firebase operations!

Built for learning | Open source on GitHub