fix(auth): resolve OAuth cookie handling for Vercel deployment

- Update CORS config to allow requests with no origin (Vercel rewrites)
- Add dynamic cookie options with proper SameSite/Secure flags
- Improve JWT cookie extractor with debug logging
- Simplify frontend auth callback cookie setting
- Add CookieOptions type for lint compliance

The OAuth flow now properly handles cross-domain authentication
when backend and frontend are on different Vercel deployments.

Author: PhuocHoan

backend/api/index.ts

@@ -15,8 +15,30 @@ async function bootstrap(): Promise<INestApplication> {
 
       app.use(cookieParser());
 
+      // Configure CORS for both direct requests and Vercel proxy rewrites
+      const frontendUrl = process.env.FRONTEND_URL || 'http://localhost:5173';
+      const allowedOrigins = [
+        frontendUrl,
+        'http://localhost:5173',
+        'http://localhost:5174',
+        'http://localhost:5175',
+      ];
+
       app.enableCors({
-        origin: process.env.FRONTEND_URL || 'http://localhost:5173',
+        origin: (origin, callback) => {
+          // Allow requests with no origin (Vercel rewrites, mobile apps, curl)
+          if (!origin) {
+            callback(null, true);
+            return;
+          }
+          if (allowedOrigins.includes(origin)) {
+            callback(null, true);
+          } else {
+            // In production, log unallowed origins for debugging
+            console.warn(`CORS blocked origin: ${origin}`);
+            callback(new Error('Not allowed by CORS'));
+          }
+        },
         credentials: true,
       });
 

backend/src/auth/auth.controller.ts

@@ -36,17 +36,28 @@ import type {
   MessageResult,
   SafeUser,
 } from './auth.service';
-import type { Response, Request } from 'express';
+import type { Response, Request, CookieOptions } from 'express';
 
 // Cookie configuration for secure token storage
-const COOKIE_OPTIONS = {
-  httpOnly: true,
-  secure: process.env.NODE_ENV === 'production',
-  sameSite: 'lax' as const,
-  maxAge: 24 * 60 * 60 * 1000,
-  path: '/',
+const getCookieOptions = (isOAuthRedirect = false): CookieOptions => {
+  const isProduction = process.env.NODE_ENV === 'production';
+
+  return {
+    httpOnly: true,
+    secure: isProduction,
+    // For OAuth redirects across domains, we need 'none' with secure
+    // For same-origin requests, 'lax' is preferred
+    sameSite:
+      isProduction && isOAuthRedirect ? ('none' as const) : ('lax' as const),
+    maxAge: 24 * 60 * 60 * 1000, // 24 hours
+    path: '/',
+    // In production, don't set domain to allow cookie to work with Vercel proxy
+    ...(isProduction && { domain: undefined }),
+  };
 };
 
+const COOKIE_OPTIONS = getCookieOptions(false);
+
 @Controller('auth')
 export class AuthController {
   constructor(
@@ -120,13 +131,19 @@ export class AuthController {
     );
     const frontendUrl = this.configService.get<string>('FRONTEND_URL');
 
-    // For cross-domain OAuth (backend and frontend on different domains),
-    // we pass the token in URL. The frontend callback page will extract it
-    // and store it securely, then clear from URL.
-    // This is safe because:
-    // 1. Token is short-lived
-    // 2. Redirect happens immediately after Google callback
-    // 3. Frontend immediately clears token from URL and stores in cookie
+    // Set HTTP-only cookie as backup (useful if callback URL is proxied through frontend)
+    const oauthCookieOptions = getCookieOptions(true);
+    res.cookie('access_token', result.access_token, oauthCookieOptions);
+
+    // Also pass token in URL for frontend to set cookie on its domain
+    // This is necessary because:
+    // 1. Backend and frontend are on different Vercel deployments (different domains)
+    // 2. The cookie we set here is on backend domain, not frontend domain
+    // 3. Frontend sets cookie on its domain so it's sent with /api/* requests
+    // The token in URL is secure because:
+    // - It's passed via server redirect, not exposed to client scripts until callback loads
+    // - Frontend immediately clears it from URL after extraction
+    // - Token has limited lifetime
     res.redirect(`${frontendUrl}/auth/callback?token=${result.access_token}`);
   }
 
@@ -148,9 +165,11 @@ export class AuthController {
     );
     const frontendUrl = this.configService.get<string>('FRONTEND_URL');
 
-    // For cross-domain OAuth (backend and frontend on different domains),
-    // we pass the token in URL. The frontend callback page will extract it
-    // and store it securely, then clear from URL.
+    // Set HTTP-only cookie as backup (useful if callback URL is proxied through frontend)
+    const oauthCookieOptions = getCookieOptions(true);
+    res.cookie('access_token', result.access_token, oauthCookieOptions);
+
+    // Also pass token in URL for frontend to set cookie on its domain
     res.redirect(`${frontendUrl}/auth/callback?token=${result.access_token}`);
   }
 

backend/src/auth/strategies/jwt.strategy.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@nestjs/common';
+import { Injectable, Logger } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { PassportStrategy } from '@nestjs/passport';
 
@@ -13,16 +13,29 @@ interface JwtPayload {
 
 // Custom extractor that tries cookie first, then falls back to Bearer token
 const cookieExtractor = (req: Request): string | null => {
+  const logger = new Logger('JwtCookieExtractor');
+
   // First try to get token from HTTP-only cookie
   const cookies = req.cookies as Record<string, string> | undefined;
   if (cookies?.access_token) {
+    logger.debug('Token found in cookie');
     return cookies.access_token;
   }
+
   // Fallback to Authorization header (for API clients, testing, etc.)
   const authHeader = req.headers.authorization;
   if (authHeader?.startsWith('Bearer ')) {
+    logger.debug('Token found in Authorization header');
     return authHeader.substring(7);
   }
+
+  // Log cookie header for debugging (only in development)
+  if (process.env.NODE_ENV !== 'production') {
+    logger.debug(`Cookie header: ${req.headers.cookie ?? 'none'}`);
+    logger.debug(`Cookies parsed: ${JSON.stringify(cookies ?? {})}`);
+  }
+
+  logger.debug('No token found in cookie or Authorization header');
   return null;
 };
 

frontend/src/pages/auth/auth-callback-page.tsx

@@ -5,19 +5,26 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { useAuth } from '@/contexts/use-auth';
 
-// Cookie utility for setting the auth token
-function setAuthCookie(token: string) {
-  const isProduction = window.location.hostname !== 'localhost';
-  const cookieOptions = [
-    `access_token=${token}`,
-    'path=/',
-    `max-age=${24 * 60 * 60}`, // 24 hours
-    isProduction ? 'secure' : '',
-    'samesite=lax',
-  ]
-    .filter(Boolean)
-    .join('; ');
-  document.cookie = cookieOptions;
+/**
+ * Set auth cookie with proper SameSite and Secure flags.
+ * This cookie will be sent with requests to /api/* which are proxied to backend.
+ */
+function setAuthCookie(token: string): void {
+  const isSecure = window.location.protocol === 'https:';
+  const maxAge = 24 * 60 * 60; // 24 hours in seconds
+
+  // Build cookie string with proper attributes
+  // - path=/: Available for all paths
+  // - max-age: 24 hours in seconds
+  // - SameSite=Lax: Allows cookie on top-level navigations (OAuth redirects)
+  // - Secure: Only sent over HTTPS (required in production)
+  let cookieString = `access_token=${token}; path=/; max-age=${maxAge}; SameSite=Lax`;
+
+  if (isSecure) {
+    cookieString += '; Secure';
+  }
+
+  document.cookie = cookieString;
 }
 
 export function AuthCallbackPage() {
@@ -29,31 +36,32 @@ export function AuthCallbackPage() {
   useEffect(() => {
     const handleCallback = async () => {
       try {
-        // Check if token is in URL (cross-domain OAuth flow)
+        // Check if token is in URL (OAuth callback from backend)
         const token = searchParams.get('token');
 
         if (token) {
           // Set token as cookie on frontend domain
+          // This cookie will be forwarded by Vercel rewrites to backend
           setAuthCookie(token);
 
           // Clear token from URL for security (without triggering navigation)
           window.history.replaceState({}, '', '/auth/callback');
         }
 
-        // Refresh user state from server (which will use the cookie)
+        // Small delay to ensure cookie is set before making API call
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        // Refresh user state from server (cookie is sent automatically via withCredentials)
         const user = await refreshUser();
 
-        // If user doesn't have a role, redirect to select-role
+        // Redirect based on user role status
         if (!user?.role) {
-          // Force full page reload to ensure clean state
           window.location.href = '/select-role';
         } else {
-          // Force full page reload to ensure clean state
           window.location.href = '/dashboard';
         }
       } catch {
         setError('Authentication failed. Please try again.');
-        // Redirect to login after a short delay
         setTimeout(() => {
           void navigate('/login');
         }, 2000);