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 initTry it Yourself »
Discussion
Loading…