Add Google Calendar integration via Supabase Edge Functions
- Create new create-google-meet-event edge function - Use service account authentication (no OAuth needed) - Add google_service_account_json field to platform_settings - Add admin UI for service account JSON configuration - Include test connection button in Integrasi tab - Add comprehensive setup documentation - Keep n8n workflows as alternative option Features: - Direct Google Calendar API integration - JWT authentication with service account - Auto-create Google Meet links - No external dependencies needed - Simple configuration via admin panel 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
219
docs/google-calendar-edge-function-setup.md
Normal file
219
docs/google-calendar-edge-function-setup.md
Normal file
@@ -0,0 +1,219 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user