# Firebase Setup Guide for Vibn ## ✅ What's Already Done - ✅ Firebase packages installed (`firebase`, `firebase-admin`) - ✅ Firebase CLI installed globally - ✅ Firebase config files created (`config.ts`, `admin.ts`, `collections.ts`) - ✅ Firestore security rules created (`firestore.rules`) - ✅ Firestore indexes configured (`firestore.indexes.json`) - ✅ Storage security rules created (`storage.rules`) - ✅ Firebase project linked (`.firebaserc`) - ✅ Deployment scripts added to `package.json` ## 🔧 Manual Steps Required ### Step 1: Get Service Account Credentials 1. Go to [Firebase Console](https://console.firebase.google.com/u/0/project/gen-lang-client-0980079410) 2. Click ⚙️ **Settings** → **Project settings** 3. Go to **Service accounts** tab 4. Click **"Generate new private key"** 5. Download the JSON file ### Step 2: Update `.env.local` Add these to `/Users/markhenderson/ai-proxy/vibn-frontend/.env.local`: ```bash # Firebase Client Config (already provided by Firebase) NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyBxFmm_0y1mwd_k1YgF3pQlbxi_Z3gu4k0 NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=gen-lang-client-0980079410.firebaseapp.com NEXT_PUBLIC_FIREBASE_PROJECT_ID=gen-lang-client-0980079410 NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=gen-lang-client-0980079410.firebasestorage.app NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=487105246327 NEXT_PUBLIC_FIREBASE_APP_ID=1:487105246327:web:01578a6b7ee79e39fa8272 NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=G-S9MKR6G6HG # Firebase Admin Config (from service account JSON) FIREBASE_PROJECT_ID=gen-lang-client-0980079410 FIREBASE_CLIENT_EMAIL= FIREBASE_PRIVATE_KEY="" ``` **Note:** The `FIREBASE_PRIVATE_KEY` should include the quotes and the `\n` characters. ### Step 3: Enable Firebase Services (if not already done) In Firebase Console: #### Enable Firestore: 1. Click **"Firestore Database"** in left sidebar 2. Click **"Create database"** 3. Choose **Production mode** 4. Select **Canada (northamerica-northeast1)** or closest region 5. Click **"Enable"** #### Enable Storage: 1. Click **"Storage"** in left sidebar 2. Click **"Get started"** 3. Choose **Production mode** 4. Use same region as Firestore 5. Click **"Done"** #### Enable Authentication (if not done): 1. Click **"Authentication"** in left sidebar 2. Click **"Get started"** 3. Enable **Email/Password** 4. Enable **Google** 5. Enable **GitHub** (paste your OAuth credentials) ### Step 4: Login to Firebase CLI ```bash firebase login ``` This will open a browser for authentication. ### Step 5: Deploy Security Rules and Indexes ```bash # Deploy Firestore rules and Storage rules npm run firebase:deploy:rules # Deploy Firestore indexes npm run firebase:deploy:indexes ``` ### Step 6: Add Custom Domain to Firebase Auth (Optional) In Firebase Console: 1. Go to **Authentication** → **Settings** → **Authorized domains** 2. Click **"Add domain"** 3. Add: `vibnai.com` 4. Add: `app.vibnai.com` (if using subdomain) ### Step 7: Update GitHub OAuth Callback (if using custom domain) In your GitHub OAuth App settings: 1. Update **Authorization callback URL** to match your domain 2. For development: `http://localhost:3000` 3. For production: `https://vibnai.com` or `https://app.vibnai.com` ## 🚀 Available Commands ```bash # Development npm run dev # Start Next.js dev server # Firebase Emulators (for local testing) npm run firebase:emulators # Start local Firebase emulators # Firebase Deployment npm run firebase:deploy:rules # Deploy security rules only npm run firebase:deploy:indexes # Deploy Firestore indexes only npm run firebase:deploy # Deploy everything (rules + indexes) ``` ## 📊 Data Models Your Firestore database will have these collections: ### `users` - User profile data - Authentication info - Workspace association ### `projects` - Project metadata - Product details - GitHub/ChatGPT connections ### `sessions` - Coding session tracking - Token usage - Cost tracking ### `analyses` - AI analysis results - Tech stack detection - Feature summaries ## 🔐 Security - ✅ All sensitive data is in `.env.local` (not committed) - ✅ Firestore rules enforce user-based access control - ✅ Storage rules protect user files - ✅ Firebase Admin SDK only used server-side - ✅ Client SDK only uses public config ## 🧪 Testing Locally To test with Firebase emulators (no real data): ```bash npm run firebase:emulators ``` Then in your code, add this before initializing Firebase: ```typescript if (process.env.NODE_ENV === 'development') { connectAuthEmulator(auth, 'http://localhost:9099'); connectFirestoreEmulator(db, 'localhost', 8080); connectStorageEmulator(storage, 'localhost', 9199); } ``` ## 📝 Next Steps 1. Complete the manual steps above 2. Test Firebase connection locally 3. Create your first user via Firebase Auth 4. Test creating a project via your frontend 5. Deploy rules and indexes to production 6. Set up custom domain (when ready) ## 🆘 Troubleshooting **"Firebase Admin not initialized"** - Make sure `.env.local` has all the required variables - Check that `FIREBASE_PRIVATE_KEY` includes the quotes and `\n` characters - Restart your dev server after updating env vars **"Permission denied" in Firestore** - Deploy security rules: `npm run firebase:deploy:rules` - Make sure user is authenticated - Check that `userId` matches in the document **"Index not found"** - Deploy indexes: `npm run firebase:deploy:indexes` - Wait 2-5 minutes for indexes to build - Check Firebase Console → Firestore → Indexes ## 📚 Resources - [Firebase Documentation](https://firebase.google.com/docs) - [Firestore Security Rules](https://firebase.google.com/docs/firestore/security/get-started) - [Firebase Auth with Next.js](https://firebase.google.com/docs/auth/web/start) - [Custom Domain Setup](https://firebase.google.com/docs/auth/web/custom-domain)