129 lines
4.0 KiB
Markdown
129 lines
4.0 KiB
Markdown
# 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
|