vip-coordinator/OAUTH_FRONTEND_ONLY_SETUP.md

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

// 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

// 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:

{
  "url": "https://accounts.google.com/o/oauth2/v2/auth?client_id=..."
}

POST /api/auth/google/exchange

Exchanges authorization code for JWT token.

Request:

{
  "code": "authorization_code_from_google"
}

Response:

{
  "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:

{
  "authenticated": true,
  "user": { ... }
}

📝 Frontend Implementation Example

Login Component

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

// 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

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

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

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