# Google Calendar Integration with Supabase Edge Functions This guide walks you through setting up Google Calendar integration directly in Supabase Edge Functions, without needing n8n or OAuth. ## Architecture ``` Access Hub App → Supabase Edge Function → Google Calendar API ↓ JWT Authentication ↓ Service Account JSON ``` ## Setup Steps ### 1. Create Google Service Account 1. Go to [Google Cloud Console](https://console.cloud.google.com/) 2. Create a new project or select existing one 3. Navigate to **IAM & Admin** → **Service Accounts** 4. Click **Create Service Account** 5. Fill in details: - Name: `access-hub-calendar` - Description: `Service account for Access Hub calendar integration` 6. Click **Create and Continue** (skip granting roles) 7. Click **Done** ### 2. Enable Google Calendar API 1. In Google Cloud Console, go to **APIs & Services** → **Library** 2. Search for "Google Calendar API" 3. Click **Enable** ### 3. Create Service Account Key 1. Go to your service account page 2. Click the **Keys** tab 3. Click **Add Key** → **Create New Key** 4. Select **JSON** format 5. Click **Create** - download the JSON file Keep this file secure! It contains your private key. ### 4. Share Calendar with Service Account 1. Go to [Google Calendar](https://calendar.google.com/) 2. Hover over the calendar you want to use 3. Click the **three dots (⋮)** → **Settings and sharing** 4. Scroll to **Share with specific people** 5. Click **+ Add people** 6. Enter the service account email from your JSON: `xxx@xxx.iam.gserviceaccount.com` 7. Set permissions to **Make changes to events** 8. Click **Send** ### 5. Add Database Column Run this SQL in your Supabase SQL Editor: ```sql ALTER TABLE platform_settings ADD COLUMN IF NOT EXISTS google_service_account_json TEXT; ``` ### 6. Deploy Edge Function ```bash # Deploy the new function supabase functions deploy create-google-meet-event --verify-jwt ``` Or use the deployment script: ```bash ./deploy-edge-functions.sh ``` ### 7. Configure in Admin Panel 1. Go to **Settings** → **Integrasi** 2. Find the **Google Calendar** section 3. Enter your **Calendar ID** (e.g., `your-email@gmail.com`) 4. Paste the **Service Account JSON** (entire content from the JSON file) 5. Click **Simpan Semua Pengaturan** 6. Click **Test Google Calendar Connection** If successful, you'll see a test event created in your Google Calendar with a Google Meet link. ## How It Works ### Authentication Flow 1. Edge Function reads service account JSON 2. Creates a JWT signed with the private key 3. Exchanges JWT for an access token 4. Uses access token to call Google Calendar API ### Event Creation When a consultation slot is confirmed: 1. `create-google-meet-event` function is called 2. Creates a Google Calendar event with Meet link 3. Returns the Meet link to be stored in the database ## API Reference ### Request ```typescript POST /functions/v1/create-google-meet-event { slot_id: string; // Unique slot identifier date: string; // YYYY-MM-DD start_time: string; // HH:MM:SS end_time: string; // HH:MM:SS client_name: string; // Client's full name client_email: string; // Client's email topic: string; // Consultation topic notes?: string; // Optional notes } ``` ### Response ```typescript { success: true; meet_link: string; // https://meet.google.com/xxx-xxx-xxx event_id: string; // Google Calendar event ID html_link: string; // Link to event in Google Calendar } ``` ## Testing ### Test via Admin Panel Use the **Test Google Calendar Connection** button in the Integrasi settings. ### Test via Curl ```bash curl -X POST https://your-project.supabase.co/functions/v1/create-google-meet-event \ -H "Authorization: Bearer YOUR_ANON_KEY" \ -H "Content-Type: application/json" \ -d '{ "slot_id": "test-123", "date": "2025-12-25", "start_time": "14:00:00", "end_time": "15:00:00", "client_name": "Test Client", "client_email": "test@example.com", "topic": "Test Topic" }' ``` ## Security Notes 1. **Never commit** the service account JSON to version control 2. **Store securely** in database (consider encryption for production) 3. **Rotate keys** if compromised 4. **Limit permissions** to only Calendar API 5. **Use separate service accounts** for different environments ## Troubleshooting ### Error: "Google Service Account JSON belum dikonfigurasi" - Make sure you've saved the JSON in the admin settings - Check the database column exists: `google_service_account_json` ### Error: 403 Forbidden - Verify calendar is shared with service account email - Check service account has "Make changes to events" permission ### Error: 401 Unauthorized - Verify service account JSON is valid - Check Calendar API is enabled in Google Cloud Console ### Error: "Failed to parse service account JSON" - Make sure you pasted the entire JSON content - Check for any truncation or formatting issues ### Error: "Gagal membuat event di Google Calendar" - Check the error message for details - Verify Calendar API is enabled - Check service account has correct permissions ## Comparison: n8n vs Edge Function | Feature | n8n Integration | Edge Function | |---------|----------------|---------------| | Setup Complexity | Medium | Low | | OAuth Required | No (Service Account) | No (Service Account) | | External Dependencies | n8n instance | None | | Cost | Requires n8n hosting | Included in Supabase | | Maintenance | n8n updates | Supabase updates | | Performance | Extra hop | Direct API call | | **Recommended** | For complex workflows | ✅ **For simple integrations** | ## Next Steps 1. ✅ Create service account 2. ✅ Share calendar with service account 3. ✅ Run database migration 4. ✅ Deploy edge function 5. ✅ Configure in admin panel 6. ✅ Test connection 7. ✅ Integrate with consultation booking flow ## Files Modified/Created - `supabase/functions/create-google-meet-event/index.ts` - New edge function - `supabase/migrations/20250323_add_google_service_account.sql` - Database migration - `src/components/admin/settings/IntegrasiTab.tsx` - Admin UI for configuration --- **Need Help?** Check the Supabase Edge Functions logs in your dashboard for detailed error messages.