Firebase Authentication Setup Guide

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

Prerequisites

A Google account
Access to the Firebase Console

Step 1: Create a Firebase Project

Go to the Firebase Console
Click "Create a project"
Enter project name (e.g., "tabungin-app")
Choose whether to enable Google Analytics (optional)
Click "Create project"

Step 2: Enable Authentication

In your Firebase project, go to Authentication in the left sidebar
Click on the Sign-in method tab
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

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

Step 4: Configure Web App Environment

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

Fill in your Firebase configuration in .env.local:

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)

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

Fill in your Firebase Admin configuration in .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

In Firebase Console, go to Authentication > Settings
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

Start the development servers:
```
# From the root directory
npm run dev
```
Open your browser to http://localhost:5173
Try signing up with email/password
Try signing in with Google

Troubleshooting

Common Issues

"Firebase configuration not found"
- Check that all environment variables are set correctly
- Restart the development server after changing .env.local
"Popup blocked" error
- Allow popups for localhost in your browser
- Try using a different browser
"Network request failed"
- Check your internet connection
- Verify Firebase project is active
"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:

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

4.0 KiB Raw Blame History