#8 feat: Hide Supabase URLs from customer-facing interfaces

https://ztklqodcdjeqpsvhlpud.supabase.co/functions/v1/oauth-shoprenter-callback

Customer Browser
    ↓
https://api.shopcall.ai/oauth/shoprenter/callback
    ↓
[Reverse Proxy / API Gateway]
    ↓
https://ztklqodcdjeqpsvhlpud.supabase.co/functions/v1/oauth-shoprenter-callback

// api-proxy-worker.js
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  
  // Map api.shopcall.ai paths to Supabase URLs
  const supabaseUrl = 'https://ztklqodcdjeqpsvhlpud.supabase.co'
  const targetPath = url.pathname.replace('/oauth/', '/functions/v1/oauth-')
                                  .replace('/api/', '/functions/v1/')
  
  const targetUrl = `${supabaseUrl}${targetPath}${url.search}`
  
  // Create new request with modified URL
  const modifiedRequest = new Request(targetUrl, {
    method: request.method,
    headers: request.headers,
    body: request.body,
    redirect: 'follow'
  })
  
  // Forward request to Supabase
  const response = await fetch(modifiedRequest)
  
  // Return response to client
  return response
}

api.shopcall.ai/oauth/* → Supabase OAuth functions
api.shopcall.ai/api/* → Supabase Edge Functions
api.shopcall.ai/webhooks/* → Supabase webhook handlers

# OLD
VITE_API_URL=https://ztklqodcdjeqpsvhlpud.supabase.co/functions/v1

# NEW
VITE_API_URL=https://api.shopcall.ai/api

# OLD
https://ztklqodcdjeqpsvhlpud.supabase.co/functions/v1/oauth-shoprenter-callback

# NEW
https://api.shopcall.ai/oauth/shoprenter/callback

// OLD
const redirectUri = `${Deno.env.get('SUPABASE_URL')}/functions/v1/oauth-shoprenter-callback`

// NEW
const redirectUri = `https://api.shopcall.ai/oauth/shoprenter/callback`

// vercel/api/oauth/shoprenter/callback.ts
export default async function handler(req, res) {
  const supabaseUrl = process.env.SUPABASE_URL
  const targetUrl = `${supabaseUrl}/functions/v1/oauth-shoprenter-callback${req.url}`
  
  const response = await fetch(targetUrl, {
    method: req.method,
    headers: req.headers,
    body: req.body
  })
  
  return response
}

## Problem Description Currently, our Supabase infrastructure URLs are exposed to customers during OAuth flows and API interactions. This reveals our backend technology stack, which is not ideal for: 1. **Branding**: Customers should only see `shopcall.ai` branding 2. **Security**: Obscuring backend infrastructure is a security best practice 3. **Professionalism**: Direct Supabase URLs appear less polished 4. **Flexibility**: Makes it harder to migrate infrastructure in the future ## Current Exposed URLs ### ShopRenter OAuth Redirect URI ``` https://ztklqodcdjeqpsvhlpud.supabase.co/functions/v1/oauth-shoprenter-callback ``` **Where it's visible:** - Browser address bar during OAuth redirect (~1 second) - ShopRenter app registration settings - Network inspector/DevTools ### Other Potential Exposures - API endpoint calls from frontend (`VITE_API_URL`) - Webhook callback URLs - Any Edge Function invocations --- ## Proposed Solution Implement a **reverse proxy** using our own domain to mask Supabase URLs. ### Architecture ``` Customer Browser ↓ https://api.shopcall.ai/oauth/shoprenter/callback ↓ [Reverse Proxy / API Gateway] ↓ https://ztklqodcdjeqpsvhlpud.supabase.co/functions/v1/oauth-shoprenter-callback ``` --- ## Implementation Options ### **Option 1: Cloudflare Workers (Recommended)** **Advantages:** - ✅ Free tier available (100k requests/day) - ✅ Global edge network (low latency) - ✅ Easy to configure with Cloudflare DNS - ✅ Built-in SSL/TLS - ✅ Simple proxy setup - ✅ Minimal additional infrastructure **Setup:** 1. Create Cloudflare Worker script 2. Route `api.shopcall.ai/*` to Worker 3. Worker proxies requests to Supabase URLs 4. Update OAuth redirect URIs to use `api.shopcall.ai` **Cost**: Free (up to 100k requests/day), then $5/month --- ### **Option 2: Vercel Edge Functions** **Advantages:** - ✅ Free tier (100k requests/month) - ✅ Integrated with domain management - ✅ Easy deployment - ✅ TypeScript support **Setup:** 1. Create Next.js API routes or Edge Functions 2. Configure `api.shopcall.ai` subdomain 3. Proxy all requests to Supabase 4. Update OAuth callback URLs **Cost**: Free (up to 100k requests/month) --- ### **Option 3: Nginx Reverse Proxy on VPS** **Advantages:** - ✅ Full control - ✅ No vendor lock-in - ✅ Unlimited requests **Disadvantages:** - ❌ Requires VPS management - ❌ Manual SSL certificate setup - ❌ Single point of failure (no CDN) - ❌ More complex to maintain **Cost**: $5-20/month for VPS --- ### **Option 4: Supabase Custom Domain (If Available)** **Check if Supabase supports:** - Custom domains for Edge Functions - CNAME configuration for `api.shopcall.ai` **Advantages:** - ✅ No additional infrastructure - ✅ Direct integration **Disadvantages:** - ❌ May not be available in all Supabase plans - ❌ Less flexibility --- ## Recommended Approach: Cloudflare Workers I recommend **Cloudflare Workers** as the best balance of: - Cost-effectiveness (free tier) - Performance (global edge network) - Simplicity (minimal setup) - Reliability (high uptime) ### Implementation Plan #### Phase 1: Set Up Cloudflare Worker **1. Create Worker Script** ```javascript // api-proxy-worker.js addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)) }) async function handleRequest(request) { const url = new URL(request.url) // Map api.shopcall.ai paths to Supabase URLs const supabaseUrl = 'https://ztklqodcdjeqpsvhlpud.supabase.co' const targetPath = url.pathname.replace('/oauth/', '/functions/v1/oauth-') .replace('/api/', '/functions/v1/') const targetUrl = `${supabaseUrl}${targetPath}${url.search}` // Create new request with modified URL const modifiedRequest = new Request(targetUrl, { method: request.method, headers: request.headers, body: request.body, redirect: 'follow' }) // Forward request to Supabase const response = await fetch(modifiedRequest) // Return response to client return response } ``` **2. Configure Routes** ``` api.shopcall.ai/oauth/* → Supabase OAuth functions api.shopcall.ai/api/* → Supabase Edge Functions api.shopcall.ai/webhooks/* → Supabase webhook handlers ``` **3. Update DNS** - Add CNAME record: `api.shopcall.ai` → Cloudflare Worker - Enable SSL/TLS #### Phase 2: Update Application Configuration **1. Update Frontend Environment Variables** ```bash # OLD VITE_API_URL=https://ztklqodcdjeqpsvhlpud.supabase.co/functions/v1 # NEW VITE_API_URL=https://api.shopcall.ai/api ``` **2. Update OAuth Redirect URIs** ```bash # OLD https://ztklqodcdjeqpsvhlpud.supabase.co/functions/v1/oauth-shoprenter-callback # NEW https://api.shopcall.ai/oauth/shoprenter/callback ``` **3. Update Edge Functions** ```typescript // OLD const redirectUri = `${Deno.env.get('SUPABASE_URL')}/functions/v1/oauth-shoprenter-callback` // NEW const redirectUri = `https://api.shopcall.ai/oauth/shoprenter/callback` ``` #### Phase 3: Update External Services **1. Update ShopRenter App Registration** - Change redirect URI to `https://api.shopcall.ai/oauth/shoprenter/callback` - Update webhook URLs to `https://api.shopcall.ai/webhooks/*` **2. Update Shopify & WooCommerce (when implemented)** - Use `api.shopcall.ai` URLs for all integrations #### Phase 4: Testing & Validation **1. Test OAuth Flows** - [ ] ShopRenter OAuth initiation - [ ] ShopRenter OAuth callback - [ ] Verify redirect works correctly - [ ] Check browser address bar shows `api.shopcall.ai` **2. Test API Endpoints** - [ ] Products fetch - [ ] Orders fetch - [ ] Customers fetch - [ ] Manual sync trigger **3. Test Webhooks** - [ ] ShopRenter uninstall webhook - [ ] Verify HMAC validation still works **4. Security Validation** - [ ] Verify SSL/TLS certificates - [ ] Test CORS headers - [ ] Check rate limiting (if applicable) --- ## Alternative Quick Fix (Temporary) If Cloudflare setup is delayed, we can use **Vercel serverless functions** as a quick temporary solution: ```typescript // vercel/api/oauth/shoprenter/callback.ts export default async function handler(req, res) { const supabaseUrl = process.env.SUPABASE_URL const targetUrl = `${supabaseUrl}/functions/v1/oauth-shoprenter-callback${req.url}` const response = await fetch(targetUrl, { method: req.method, headers: req.headers, body: req.body }) return response } ``` --- ## Timeline Estimate - **Phase 1**: Cloudflare Worker setup - 2 hours - **Phase 2**: Update application config - 1 hour - **Phase 3**: Update external services - 1 hour - **Phase 4**: Testing & validation - 2 hours **Total**: ~6 hours (1 day) --- ## Success Criteria ✅ Customers never see `supabase.co` in their browser ✅ All OAuth redirects use `api.shopcall.ai` ✅ All API calls route through custom domain ✅ Webhooks use custom domain ✅ No performance degradation ✅ SSL/TLS certificates valid ✅ All integrations continue working correctly --- ## Security Considerations 1. **No Security Degradation**: Reverse proxy must maintain all security headers 2. **SSL/TLS**: Ensure end-to-end encryption 3. **Rate Limiting**: Consider adding rate limiting at proxy level 4. **Logging**: Log proxy requests for debugging 5. **CORS**: Configure CORS headers correctly --- ## Cost Analysis | Solution | Setup Cost | Monthly Cost | Scalability | |----------|-----------|--------------|-------------| | Cloudflare Workers | Free | Free (up to 100k req/day) | Excellent | | Vercel Edge | Free | Free (up to 100k req/month) | Good | | VPS + Nginx | $50 (time) | $5-20 | Manual scaling | | Supabase Custom Domain | Free | Included | Excellent | **Recommendation**: Start with Cloudflare Workers (free, scalable, professional) --- ## Related Issues - Issue #5 - ShopRenter integration (this will use the new URLs) - Future Shopify integration (will benefit from this) - Future WooCommerce integration (will benefit from this) --- ## Priority **Medium-High**: Not blocking core functionality, but important for: - Professional appearance - Security best practices - Customer trust - Infrastructure flexibility --- ## Notes - This change is **transparent to end users** (they just see our branding) - **No data privacy concerns** (Supabase is still secure) - **Easy to implement** with modern edge computing platforms - **Future-proof** - makes backend migrations easier - Can be implemented **incrementally** (OAuth first, then APIs)