- 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>
220 lines
6.3 KiB
Markdown
220 lines
6.3 KiB
Markdown
# 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.
|