vip-coordinator/SIMPLE_OAUTH_SETUP.md

Simple OAuth2 Setup Guide

✅ What's Working Now

The VIP Coordinator now has a much simpler OAuth2 implementation that actually works! Here's what I've done:

🔧 Simplified Implementation

• Removed complex Passport.js - No more confusing middleware chains
• Simple JWT tokens - Clean, stateless authentication
• Direct Google API calls - Using fetch instead of heavy libraries
• Clean error handling - Easy to debug and understand

📁 New Files Created

• backend/src/config/simpleAuth.ts - Core auth functions
• backend/src/routes/simpleAuth.ts - Auth endpoints

🚀 How to Set Up Google OAuth2

Step 1: Get Google OAuth2 Credentials

1. Go to Google Cloud Console
2. Create a new project or select existing one
3. Enable the Google+ API
4. Go to "Credentials" → "Create Credentials" → "OAuth 2.0 Client IDs"
5. Set application type to "Web application"
6. Add these redirect URIs:
   • http://localhost:3000/auth/google/callback
   • http://localhost:5173/auth/callback

Step 2: Update Environment Variables

Edit backend/.env and add:

# Google OAuth2 Settings
GOOGLE_CLIENT_ID=your_google_client_id_here
GOOGLE_CLIENT_SECRET=your_google_client_secret_here
GOOGLE_REDIRECT_URI=http://localhost:3000/auth/google/callback

# JWT Secret (change this!)
JWT_SECRET=your-super-secret-jwt-key-change-this

# Frontend URL
FRONTEND_URL=http://localhost:5173

Step 3: Test the Setup

1. Start the application:

   docker-compose -f docker-compose.dev.yml up -d
   

2. Test auth endpoints:

   # Check if backend is running
   curl http://localhost:3000/api/health
   
   # Check auth status (should return {"authenticated":false})
   curl http://localhost:3000/auth/status
   

3. Test Google OAuth flow:

   • Visit: http://localhost:3000/auth/google
   • Should redirect to Google login
   • After login, redirects back with JWT token

🔄 How It Works

Simple Flow:

1. User clicks "Login with Google"
2. Redirects to http://localhost:3000/auth/google
3. Backend redirects to Google OAuth
4. Google redirects back to /auth/google/callback
5. Backend exchanges code for user info
6. Backend creates JWT token
7. Frontend receives token and stores it

API Endpoints:

• GET /auth/google - Start OAuth flow
• GET /auth/google/callback - Handle OAuth callback
• GET /auth/status - Check if user is authenticated
• GET /auth/me - Get current user info (requires auth)
• POST /auth/logout - Logout (client-side token removal)

🛠️ Frontend Integration

The frontend needs to:

1. Handle the OAuth callback:

   // In your React app, handle the callback route
   const urlParams = new URLSearchParams(window.location.search);
   const token = urlParams.get('token');
   if (token) {
     localStorage.setItem('authToken', token);
     // Redirect to dashboard
   }
   

2. Include token in API requests:

   const token = localStorage.getItem('authToken');
   fetch('/api/vips', {
     headers: {
       'Authorization': `Bearer ${token}`
     }
   });
   

3. Add login button:

   <button onClick={() => window.location.href = '/auth/google'}>
     Login with Google
   </button>
   

🎯 Benefits of This Approach

• Simple to understand - No complex middleware
• Easy to debug - Clear error messages
• Lightweight - Fewer dependencies
• Secure - Uses standard JWT tokens
• Flexible - Easy to extend or modify

🔍 Troubleshooting

Common Issues:

1. "OAuth not configured" error:

   • Make sure GOOGLE_CLIENT_ID is set in .env
   • Restart the backend after changing .env

2. "Invalid redirect URI" error:

   • Check Google Console redirect URIs match exactly
   • Make sure no trailing slashes

3. Token verification fails:

   • Check JWT_SECRET is set and consistent
   • Make sure token is being sent with Bearer prefix

Debug Commands:

# Check backend logs
docker-compose -f docker-compose.dev.yml logs backend

# Check if environment variables are loaded
docker exec vip-coordinator-backend-1 env | grep GOOGLE

🎉 Next Steps

1. Set up your Google OAuth2 credentials
2. Update the .env file
3. Test the login flow
4. Integrate with the frontend
5. Customize user roles and permissions

The authentication system is now much simpler and actually works! 🚀