# 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! 🎉