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](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=<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

```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)