vip-coordinator/PORT_3000_SETUP_GUIDE.md

🚀 Port 3000 Direct Access Setup Guide

Your Optimal Setup (Based on Google's AI Analysis)

Google's AI correctly identified that the OAuth redirect to localhost:3000 is the issue. Here's the simplest solution:

Option A: Expose Port 3000 Directly (Recommended)

1. Router/Firewall Configuration

Configure your router to forward both ports:

Internet → Router → Your Server
Port 443/80  → Frontend (port 5173)  ✅ Already working
Port 3000    → Backend (port 3000)   ⚠️ ADD THIS

2. Google Cloud Console Update

Authorized JavaScript origins:

https://bsa.madeamess.online
https://bsa.madeamess.online:3000

Authorized redirect URIs:

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

3. Environment Variables (Already Updated)

✅ I've already updated your .env file:

GOOGLE_REDIRECT_URI=https://bsa.madeamess.online:3000/auth/google/callback
FRONTEND_URL=https://bsa.madeamess.online

4. SSL Certificate for Port 3000

You'll need SSL on port 3000. Options:

Option A: Reverse proxy for port 3000 too

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

# Backend (add this)
server {
    listen 3000 ssl;
    server_name bsa.madeamess.online;
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;
    
    location / {
        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 B: Direct Docker port mapping with SSL termination

# In docker-compose.dev.yml
services:
  backend:
    ports:
      - "3000:3000"
    environment:
      - SSL_CERT_PATH=/certs/cert.pem
      - SSL_KEY_PATH=/certs/key.pem

Option B: Alternative - Use Standard HTTPS Port

If you don't want to expose port 3000, use a subdomain:

1. Create Subdomain

Point api.bsa.madeamess.online to your server

2. Update Environment Variables

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

3. Configure Reverse Proxy

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

Testing Your Setup

1. Restart Containers

cd /home/kyle/Desktop/vip-coordinator
docker-compose -f docker-compose.dev.yml restart

2. Test Backend Accessibility

# Should work from internet
curl https://bsa.madeamess.online:3000/auth/setup
# Should return: {"setupCompleted":true,"firstAdminCreated":false,"oauthConfigured":true}

3. Test OAuth URL Generation

curl https://bsa.madeamess.online:3000/auth/google/url
# Should return Google OAuth URL with correct redirect_uri

4. Test Complete OAuth Flow

1. Visit https://bsa.madeamess.online (frontend)
2. Click "Continue with Google"
3. Google redirects to https://bsa.madeamess.online:3000/auth/google/callback
4. Backend processes OAuth and redirects back to frontend with token
5. User is authenticated ✅

Why This Works Better

✅ Direct backend access - Google can reach your OAuth callback ✅ Simpler configuration - No complex reverse proxy routing ✅ Easier debugging - Clear separation of frontend/backend ✅ Standard OAuth flow - Follows OAuth 2.0 best practices

Security Considerations

🔒 SSL Required: Port 3000 must use HTTPS for OAuth 🔒 Firewall Rules: Only expose necessary ports 🔒 CORS Configuration: Already configured for your domain

Quick Commands

# 1. Restart containers with new config
docker-compose -f docker-compose.dev.yml restart

# 2. Test backend
curl https://bsa.madeamess.online:3000/auth/setup

# 3. Check OAuth URL
curl https://bsa.madeamess.online:3000/auth/google/url

# 4. Test frontend
curl https://bsa.madeamess.online

Expected Flow After Setup

1. User visits: https://bsa.madeamess.online (frontend)
2. Clicks login: Frontend calls https://bsa.madeamess.online:3000/auth/google/url
3. Redirects to Google: User authenticates with Google
4. Google redirects back: https://bsa.madeamess.online:3000/auth/google/callback
5. Backend processes: Creates JWT token
6. Redirects to frontend: https://bsa.madeamess.online/auth/callback?token=...
7. Frontend receives token: User is logged in ✅

This setup will resolve the OAuth callback issue you're experiencing!