vip-coordinator/REVERSE_PROXY_OAUTH_SETUP.md

🌐 Reverse Proxy OAuth Setup Guide

Your Current Setup

• Internet → Router (ports 80/443) → Reverse Proxy → Frontend (port 5173)
• Backend (port 3000) is only accessible locally
• OAuth callback fails because Google can't reach the backend

The Problem

Google OAuth needs to redirect to your backend (/auth/google/callback), but your reverse proxy only forwards to the frontend. The backend port 3000 isn't exposed to the internet.

Solution: Configure Reverse Proxy for Both Frontend and Backend

Option 1: Single Domain with Path-Based Routing (Recommended)

Configure your reverse proxy to route both frontend and backend on the same domain:

# Example Nginx configuration
server {
    listen 443 ssl;
    server_name bsa.madeamess.online;
    
    # Frontend routes (everything except /auth and /api)
    location / {
        proxy_pass http://localhost:5173;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # Backend API routes
    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # Backend auth routes (CRITICAL for OAuth)
    location /auth/ {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Option 2: Subdomain Routing

If you prefer separate subdomains:

# Frontend
server {
    listen 443 ssl;
    server_name bsa.madeamess.online;
    
    location / {
        proxy_pass http://localhost:5173;
        # ... headers
    }
}

# Backend API
server {
    listen 443 ssl;
    server_name api.bsa.madeamess.online;
    
    location / {
        proxy_pass http://localhost:3000;
        # ... headers
    }
}

Update Environment Variables

For Option 1 (Path-based - Recommended):

# backend/.env
GOOGLE_CLIENT_ID=308004695553-6k34bbq22frc4e76kejnkgq8mncepbbg.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=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
GOOGLE_REDIRECT_URI=https://bsa.madeamess.online/auth/google/callback
FRONTEND_URL=https://bsa.madeamess.online

For Option 2 (Subdomain):

# backend/.env
GOOGLE_CLIENT_ID=308004695553-6k34bbq22frc4e76kejnkgq8mncepbbg.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=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
GOOGLE_REDIRECT_URI=https://api.bsa.madeamess.online/auth/google/callback
FRONTEND_URL=https://bsa.madeamess.online

Update Google Cloud Console

For Option 1 (Path-based):

Authorized JavaScript origins:

https://bsa.madeamess.online

Authorized redirect URIs:

https://bsa.madeamess.online/auth/google/callback

For Option 2 (Subdomain):

Authorized JavaScript origins:

https://bsa.madeamess.online
https://api.bsa.madeamess.online

Authorized redirect URIs:

https://api.bsa.madeamess.online/auth/google/callback

Frontend Configuration Update

If using Option 2 (subdomain), update your frontend to call the API subdomain:

// In your frontend code, change API calls from:
fetch('/auth/google/url')

// To:
fetch('https://api.bsa.madeamess.online/auth/google/url')

Testing Your Setup

1. Test Backend Accessibility

# Should work from internet
curl https://bsa.madeamess.online/auth/setup
# or for subdomain:
curl https://api.bsa.madeamess.online/auth/setup

2. Test OAuth URL Generation

curl https://bsa.madeamess.online/auth/google/url
# Should return a Google OAuth URL

3. Test Complete Flow

1. Visit https://bsa.madeamess.online
2. Click "Continue with Google"
3. Complete Google login
4. Should redirect back and authenticate

Common Issues and Solutions

Issue: "Invalid redirect URI"

• Cause: Google Console redirect URI doesn't match exactly
• Fix: Ensure exact match including https:// and no trailing slash

Issue: "OAuth not configured"

• Cause: Backend environment variables not updated
• Fix: Update .env file and restart containers

Issue: Frontend can't reach backend

• Cause: Reverse proxy not configured for /auth and /api routes
• Fix: Add backend routing to your reverse proxy config

Issue: CORS errors

• Cause: Frontend and backend on different origins
• Fix: Update CORS configuration in backend:

// In backend/src/index.ts
app.use(cors({
  origin: [
    'https://bsa.madeamess.online',
    'http://localhost:5173' // for local development
  ],
  credentials: true
}));

Recommended: Path-Based Routing

I recommend Option 1 (path-based routing) because:

• ✅ Single domain simplifies CORS
• ✅ Easier SSL certificate management
• ✅ Simpler frontend configuration
• ✅ Better for SEO and user experience

Quick Setup Commands

# 1. Update environment variables
cd /home/kyle/Desktop/vip-coordinator
# Edit backend/.env with your domain

# 2. Restart containers
docker-compose -f docker-compose.dev.yml restart

# 3. Test the setup
curl https://bsa.madeamess.online/auth/setup

Your OAuth should work once you configure your reverse proxy to forward /auth and /api routes to the backend (port 3000)!