Firebase primer
A minimal setup guide for wiring Firebase Auth and Firestore into a fresh Next.js project. No magic — just the pieces that matter.
1. Create the project
Go to the Firebase Console, hit Add project, and enable Google Analytics if you want usage dashboards. Once created, register a Web app from the project overview. Copy the config object — you will need it in step 2.
2. Install and init
npm install firebaseCreate lib/firebase.ts. Call initializeApp with the config from step 1. Export auth and db singletons so every component shares the same instance.
3. Auth provider
Enable Email/Password and Google in Authentication → Sign-in method. Wrap your app in a React context that listens to onAuthStateChanged. Store the user object in state and expose it via a useAuth hook.
4. Firestore rules
Start with locked-down rules. Allow reads only when request.auth != null. Writes should check request.auth.uid matches the document owner. Deploy from the Rules tab before shipping.
5. First query
Use getDocs with a collection reference for one-shot reads. For real-time updates, call onSnapshot inside a useEffect and return the unsubscribe function. Always handle the loading and empty states.
Next step: Read the Firebase Auth flow recipe for a complete sign-up/sign-in implementation with protected routes.