Initial commit - Current state of vip-coordinator

OAUTH_FRONTEND_ONLY_SETUP.md

@@ -0,0 +1,216 @@
+# OAuth2 Setup for Frontend-Only Port (5173)
+
+## 🎯 Configuration Overview
+
+Since you're only forwarding port 5173, the OAuth flow has been configured to work entirely through the frontend:
+
+**Current Setup:**
+- **Frontend**: `https://bsa.madeamess.online:5173` (publicly accessible)
+- **Backend**: `http://localhost:3000` (internal only)
+- **OAuth Redirect**: `https://bsa.madeamess.online:5173/auth/google/callback`
+
+## 🔧 Google Cloud Console Configuration
+
+**Update your OAuth2 client with this redirect URI:**
+```
+https://bsa.madeamess.online:5173/auth/google/callback
+```
+
+**Authorized JavaScript Origins:**
+```
+https://bsa.madeamess.online:5173
+```
+
+## 🔄 How the OAuth Flow Works
+
+### 1. **Frontend Initiates OAuth**
+```javascript
+// Frontend calls backend to get OAuth URL
+const response = await fetch('/api/auth/google/url');
+const { url } = await response.json();
+window.location.href = url; // Redirect to Google
+```
+
+### 2. **Google Redirects to Frontend**
+```
+https://bsa.madeamess.online:5173/auth/google/callback?code=AUTHORIZATION_CODE
+```
+
+### 3. **Frontend Exchanges Code for Token**
+```javascript
+// Frontend sends code to backend
+const response = await fetch('/api/auth/google/exchange', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({ code: authorizationCode })
+});
+
+const { token, user } = await response.json();
+// Store token in localStorage or secure cookie
+```
+
+## 🛠️ Backend API Endpoints
+
+### **GET /api/auth/google/url**
+Returns the Google OAuth URL for frontend to redirect to.
+
+**Response:**
+```json
+{
+  "url": "https://accounts.google.com/o/oauth2/v2/auth?client_id=..."
+}
+```
+
+### **POST /api/auth/google/exchange**
+Exchanges authorization code for JWT token.
+
+**Request:**
+```json
+{
+  "code": "authorization_code_from_google"
+}
+```
+
+**Response:**
+```json
+{
+  "token": "jwt_token_here",
+  "user": {
+    "id": "user_id",
+    "email": "user@example.com",
+    "name": "User Name",
+    "picture": "profile_picture_url",
+    "role": "coordinator"
+  }
+}
+```
+
+### **GET /api/auth/status**
+Check authentication status.
+
+**Headers:**
+```
+Authorization: Bearer jwt_token_here
+```
+
+**Response:**
+```json
+{
+  "authenticated": true,
+  "user": { ... }
+}
+```
+
+## 📝 Frontend Implementation Example
+
+### **Login Component**
+```javascript
+const handleGoogleLogin = async () => {
+  try {
+    // Get OAuth URL from backend
+    const response = await fetch('/api/auth/google/url');
+    const { url } = await response.json();
+    
+    // Redirect to Google
+    window.location.href = url;
+  } catch (error) {
+    console.error('Login failed:', error);
+  }
+};
+```
+
+### **OAuth Callback Handler**
+```javascript
+// In your callback route component
+useEffect(() => {
+  const urlParams = new URLSearchParams(window.location.search);
+  const code = urlParams.get('code');
+  const error = urlParams.get('error');
+  
+  if (error) {
+    console.error('OAuth error:', error);
+    return;
+  }
+  
+  if (code) {
+    exchangeCodeForToken(code);
+  }
+}, []);
+
+const exchangeCodeForToken = async (code) => {
+  try {
+    const response = await fetch('/api/auth/google/exchange', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ code })
+    });
+    
+    const { token, user } = await response.json();
+    
+    // Store token securely
+    localStorage.setItem('authToken', token);
+    
+    // Redirect to dashboard
+    navigate('/dashboard');
+  } catch (error) {
+    console.error('Token exchange failed:', error);
+  }
+};
+```
+
+### **API Request Helper**
+```javascript
+const apiRequest = async (url, options = {}) => {
+  const token = localStorage.getItem('authToken');
+  
+  return fetch(url, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${token}`,
+      ...options.headers
+    }
+  });
+};
+```
+
+## 🚀 Testing the Setup
+
+### 1. **Test OAuth URL Generation**
+```bash
+curl http://localhost:3000/api/auth/google/url
+```
+
+### 2. **Test Full Flow**
+1. Visit: `https://bsa.madeamess.online:5173`
+2. Click login button
+3. Should redirect to Google
+4. After Google login, should redirect back to: `https://bsa.madeamess.online:5173/auth/google/callback?code=...`
+5. Frontend should exchange code for token
+6. User should be logged in
+
+### 3. **Test API Access**
+```bash
+# Get a token first, then:
+curl -H "Authorization: Bearer YOUR_JWT_TOKEN" http://localhost:3000/api/auth/status
+```
+
+## ✅ Current Status
+
+**✅ Containers Running:**
+- Backend: http://localhost:3000
+- Frontend: http://localhost:5173 
+- Database: PostgreSQL on port 5432
+- Redis: Running on port 6379
+
+**✅ OAuth Configuration:**
+- Redirect URI: `https://bsa.madeamess.online:5173/auth/google/callback`
+- Frontend URL: `https://bsa.madeamess.online:5173`
+- Backend endpoints ready for frontend integration
+
+**🔄 Next Steps:**
+1. Update Google Cloud Console with the redirect URI
+2. Implement frontend OAuth handling
+3. Test the complete flow
+
+The OAuth system is now properly configured to work through your frontend-only port setup! 🎉