Skip to content

SECURE_OAUTH_IMPLEMENTATION.md

Latest commit

 

History

History
171 lines (133 loc) · 4.68 KB

SECURE_OAUTH_IMPLEMENTATION.md

File metadata and controls

171 lines (133 loc) · 4.68 KB

🔒 Secure Server-Side Google OAuth Implementation

🎯 Why This Method is Better

Security Advantages:

✅ No tokens in frontend - Tokens never exposed to JavaScript ✅ HttpOnly cookies only - Protected from XSS attacks
✅ Server-side validation - All OAuth handled by backend ✅ CSRF protection - State parameter validation ✅ No localStorage usage - Eliminates XSS token theft risk

Previous Method Issues (Fixed):

❌ Tokens in localStorage (XSS vulnerable) ❌ Client-side token handling ❌ Cross-origin cookie complications

🔄 Complete OAuth Flow

1. User clicks "Sign in with Google" 
   ↓
2. Frontend redirects to: /api/v1/user/auth/google
   ↓  
3. Backend generates Google OAuth URL with state parameter
   ↓
4. Backend redirects user to Google OAuth consent screen
   ↓
5. User consents on Google
   ↓
6. Google redirects to: /api/v1/user/auth/google/callback?code=...&state=...
   ↓
7. Backend validates state, exchanges code for tokens
   ↓
8. Backend gets user info from Google
   ↓
9. Backend creates/updates user in database
   ↓
10. Backend generates JWT tokens
    ↓
11. Backend sets secure HttpOnly cookies
    ↓
12. Backend redirects to frontend: /?auth=success
    ↓
13. Frontend detects auth success, checks authentication status
    ↓
14. User is logged in! 🎉

⚙️ Setup Instructions

Step 1: Google Cloud Console Configuration

  1. Go to Google Cloud Console
  2. Navigate to: APIs & Services → Credentials
  3. Edit your OAuth 2.0 Client ID
  4. Update Authorized redirect URIs: 
    http://localhost:9000/api/v1/user/auth/google/callback
https://your-backend-domain.com/api/v1/user/auth/google/callback
  5. Update Authorized JavaScript origins: 
    http://localhost:9000
https://your-backend-domain.com
https://your-frontend-domain.com

Step 2: Backend Environment Variables

Set these in your backend hosting service:

# Required URLs
BACKEND_URL=https://feedback-a91d.onrender.com
FRONTEND_URL=https://feedback-red-seven.vercel.app

# Google OAuth
GOOGLE_CLIENT_ID=your_client_id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your_client_secret

# Session security
SESSION_SECRET=your_super_secure_session_secret

# Other existing variables...
NODE_ENV=production
MONGODB_URI=your_mongo_connection
CORS_ORIGIN=https://feedback-red-seven.vercel.app
ACCESS_TOKEN_SECRET=your_jwt_secret
REFRESH_TOKEN_SECRET=your_refresh_secret

Step 3: Install New Dependencies

cd Backend
npm install express-session

Step 4: Update Frontend Component

Replace the old Google auth button with the new server-side version:

// In your Login/SignUp pages, replace:
import GoogleSignInButton from '../components/GoogleSignInButton';

// With:
import ServerSideGoogleAuth from '../components/ServerSideGoogleAuth';

// And use:
<ServerSideGoogleAuth text="Sign in with Google" />

🧪 Testing the Flow

Local Testing:

  1. Start backend: cd Backend && npm run dev
  2. Start frontend: cd Frontend && npm run dev
  3. Test OAuth: Click "Sign in with Google"
  4. Check logs: Monitor both backend and frontend console

Production Testing:

  1. Deploy backend with new environment variables
  2. Deploy frontend with new component
  3. Update Google Console redirect URIs
  4. Test full OAuth flow

🔍 Debugging

Common Issues:

  1. "redirect_uri_mismatch"

    • Check Google Console redirect URIs match exactly
    • Include both HTTP (dev) and HTTPS (prod) URLs

  2. "invalid_state"

    • Session not persisting between requests
    • Check session middleware configuration

  3. "Error 400: invalid_request"

    • Check Google Client ID/Secret are correct
    • Verify BACKEND_URL/FRONTEND_URL are set

  4. Infinite redirect loop

    • Check authentication status endpoint works
    • Verify cookies are being set/read properly

Debug Endpoints:

Test these URLs directly:

# Backend health
GET https://your-backend.com/api/v1/health

# Auth status  
GET https://your-backend.com/api/v1/user/current-user

# OAuth initiation (should redirect to Google)
GET https://your-backend.com/api/v1/user/auth/google

🎯 Benefits Achieved

✅ Maximum Security - No frontend token exposure ✅ Simple Implementation - Single button click ✅ Reliable Cookies - HttpOnly, secure, same-site ✅ CSRF Protection - State parameter validation
✅ Clean Architecture - Clear separation of concerns

This implementation follows OAuth 2.0 best practices and provides the highest level of security for your application! 🔒