160 lines
4.4 KiB
Markdown
160 lines
4.4 KiB
Markdown
# 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](https://console.cloud.google.com/)
|
|
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:
|
|
|
|
```bash
|
|
# 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:**
|
|
```bash
|
|
docker-compose -f docker-compose.dev.yml up -d
|
|
```
|
|
|
|
2. **Test auth endpoints:**
|
|
```bash
|
|
# 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:**
|
|
```javascript
|
|
// 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:**
|
|
```javascript
|
|
const token = localStorage.getItem('authToken');
|
|
fetch('/api/vips', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`
|
|
}
|
|
});
|
|
```
|
|
|
|
3. **Add login button:**
|
|
```javascript
|
|
<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:
|
|
```bash
|
|
# 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! 🚀
|