iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Get Started / SDK

Standing up a Firebase project end-to-end: console setup, web SDK init, auth, Firestore, and security rules in under 10 minutes.

Firebase — get started

EXAMPLE
// ===== 1. Console: create a project =====
// console.firebase.google.com -> Add project -> Name -> (Optional) Analytics
// Project ID becomes the subdomain in URLs.

// ===== 2. Add a Web App =====
// Project Overview -> </> (Add app) -> Register -> copy the firebaseConfig snippet.

// ===== 3. npm install =====
//   npm install firebase

// ===== 4. Initialise (modular SDK, v9+) =====
// src/lib/firebase.js
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged, signOut } from 'firebase/auth';
import { getFirestore, doc, getDoc, setDoc, collection, addDoc, onSnapshot, serverTimestamp, query, where, orderBy } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FB_API_KEY,
  authDomain: import.meta.env.VITE_FB_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FB_PROJECT_ID,
  appId: import.meta.env.VITE_FB_APP_ID,
};

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

// ===== 5. Auth (Google sign-in, the easiest first step) =====
// Console -> Authentication -> Sign-in method -> Google -> Enable.

export async function loginGoogle() {
  const cred = await signInWithPopup(auth, new GoogleAuthProvider());
  return cred.user;
}

export function watchUser(cb) {
  return onAuthStateChanged(auth, (user) => cb(user ?? null));
}

export function logout() {
  return signOut(auth);
}

// ===== 6. Firestore: read / write =====
// Console -> Firestore Database -> Create database -> Start in test mode (DEV ONLY)

// Doc CRUD:
export async function loadProfile(uid) {
  const snap = await getDoc(doc(db, 'profiles', uid));
  return snap.exists() ? snap.data() : null;
}

export async function saveProfile(uid, data) {
  await setDoc(doc(db, 'profiles', uid), { ...data, updated_at: serverTimestamp() }, { merge: true });
}

// Collection append + live subscription:
export async function postMessage(uid, text) {
  await addDoc(collection(db, 'messages'), { uid, text, created_at: serverTimestamp() });
}

export function watchMessages(cb) {
  const q = query(collection(db, 'messages'), orderBy('created_at', 'desc'));
  return onSnapshot(q, (snap) => cb(snap.docs.map(d => ({ id: d.id, ...d.data() }))));
}

// ===== 7. Security rules: lock the data BEFORE shipping =====
// Console -> Firestore -> Rules
// Default test mode is OPEN; do NOT keep it.

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

    match /profiles/{uid} {
      allow read:  if request.auth != null && request.auth.uid == uid;
      allow write: if request.auth != null && request.auth.uid == uid;
    }

    match /messages/{id} {
      allow read: if request.auth != null;
      allow create: if request.auth != null
                    && request.resource.data.uid == request.auth.uid
                    && request.resource.data.text is string
                    && request.resource.data.text.size() <= 500;
      // never allow client-side update/delete on append-only feeds
    }
  }
}

// ===== 8. Local emulators (run before hitting cloud) =====
// npm i -g firebase-tools
// firebase init emulators  (pick Auth + Firestore)
// firebase emulators:start
// In code, connect to localhost via connectAuthEmulator / connectFirestoreEmulator (env-flagged).

// ===== Patterns to internalise =====
// - Keep firebaseConfig client-visible — it is NOT a secret. Security lives in rules.
// - Always ship with locked-down rules; 'test mode' is for development only
// - Use serverTimestamp() on writes; never new Date() (client clock drift)
// - Use onSnapshot for live UI; getDoc/getDocs for one-shot reads
// - Run rules in the emulator with unit tests before each deploy

// ===== Pitfalls =====
// - Shipping with 'allow read, write: if true' -> public DB; bots will find it
// - Storing secrets in firebaseConfig -> nope; this is a public identifier
// - Forgetting indexes for compound queries -> console asks you to create one
// - Realtime listeners not unsubscribed -> memory leaks + cost
// - No quotas / alerts -> a bug loop can run up a serious bill overnight

Why it matters

Firebase ships UI to production faster than nearly any alternative. Wire auth, Firestore, and security rules together on day one; run the emulator for unit tests; and never trust the default test-mode rules. The console + a tiny SDK shim is genuinely all you need for a first version.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
# Install Node SDK
npm install firebase
# Install CLI
npm install -g firebase-tools
firebase login
firebase init
Try it Yourself »

Discussion

Loading…