# Firebase Authentication Setup Guide

This guide will help you set up Firebase authentication for the Tabungin application.

## Prerequisites

1. A Google account
2. Access to the [Firebase Console](https://console.firebase.google.com/)

## Step 1: Create a Firebase Project

1. Go to the [Firebase Console](https://console.firebase.google.com/)
2. Click "Create a project"
3. Enter project name (e.g., "tabungin-app")
4. Choose whether to enable Google Analytics (optional)
5. Click "Create project"

## Step 2: Enable Authentication

1. In your Firebase project, go to **Authentication** in the left sidebar
2. Click on the **Sign-in method** tab
3. Enable the following providers:
   - **Email/Password**: Click on it and toggle "Enable"
   - **Google**: Click on it, toggle "Enable", and set your project's public-facing name

## Step 3: Get Web App Configuration

1. Go to **Project Settings** (gear icon in the left sidebar)
2. In the "General" tab, scroll down to "Your apps"
3. Click "Add app" and select the web icon (`</>`)
4. Register your app with a nickname (e.g., "Tabungin Web")
5. Copy the Firebase configuration object

## Step 4: Configure Web App Environment

1. Copy the `.env.example` file to `.env.local` in the `apps/web` directory:
   ```bash
   cd apps/web
   cp .env.example .env.local
   ```

2. Fill in your Firebase configuration in `.env.local`:
   ```env
   VITE_FIREBASE_API_KEY=your_api_key_here
   VITE_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   VITE_FIREBASE_APP_ID=your_app_id
   VITE_API_URL=http://localhost:3000
   ```

## Step 5: Set up Firebase Admin SDK (for API)

1. In Firebase Console, go to **Project Settings** > **Service accounts**
2. Click "Generate new private key"
3. Download the JSON file and keep it secure
4. Copy the `.env.example` file to `.env` in the `apps/api` directory:
   ```bash
   cd apps/api
   cp .env.example .env
   ```

5. Fill in your Firebase Admin configuration in `.env`:
   ```env
   FIREBASE_PROJECT_ID=your_project_id
   FIREBASE_CLIENT_EMAIL=firebase-adminsdk-xxxxx@your_project_id.iam.gserviceaccount.com
   FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYOUR_PRIVATE_KEY_HERE\n-----END PRIVATE KEY-----\n"
   ```

## Step 6: Configure Authorized Domains

1. In Firebase Console, go to **Authentication** > **Settings**
2. In the "Authorized domains" tab, add your development domain:
   - `localhost` (should already be there)
   - Add your production domain when ready

## Step 7: Test the Setup

1. Start the development servers:
   ```bash
   # From the root directory
   npm run dev
   ```

2. Open your browser to `http://localhost:5173`
3. Try signing up with email/password
4. Try signing in with Google

## Troubleshooting

### Common Issues

1. **"Firebase configuration not found"**
   - Check that all environment variables are set correctly
   - Restart the development server after changing `.env.local`

2. **"Popup blocked" error**
   - Allow popups for localhost in your browser
   - Try using a different browser

3. **"Network request failed"**
   - Check your internet connection
   - Verify Firebase project is active

4. **"Invalid API key"**
   - Double-check the API key in your `.env.local`
   - Make sure you copied it correctly from Firebase Console

### Debug Mode

The application includes detailed logging for authentication issues. Check the browser console for specific error messages.

## Security Notes

- Never commit `.env` or `.env.local` files to version control
- Keep your Firebase private key secure
- Use different Firebase projects for development and production
- Regularly rotate your Firebase keys in production

## Production Deployment

When deploying to production:

1. Create a separate Firebase project for production
2. Update environment variables with production values
3. Add your production domain to Firebase authorized domains
4. Use Firebase hosting or your preferred hosting service