vibn-frontend/FIREBASE_SETUP.md

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
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:

# 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=<paste client_email from service account JSON>
FIREBASE_PRIVATE_KEY="<paste private_key from service account JSON>"

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

firebase login

This will open a browser for authentication.

Step 5: Deploy Security Rules and Indexes

# 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

# 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):

npm run firebase:emulators

Then in your code, add this before initializing Firebase:

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
• Firestore Security Rules
• Firebase Auth with Next.js
• Custom Domain Setup