Production Deployment Fixes and Enhancements (#3)

# Merge Request: Production Deployment Fixes and Enhancements

## Summary

This MR includes critical fixes for production deployment, authentication improvements, file upload serving, and monitoring capabilities. All changes have been tested and are ready for production.

## 🐛 Critical Fixes

### 1. Authentication & Session Management
- **Fixed TypeScript error in session callback** (`lib/auth.ts`)
  - Removed `return null` that caused build failures
  - Session callback now always returns a valid session object
- **Fixed login redirect loop** (`app/login/page.tsx`)
  - Changed from `router.push()` to `window.location.href` for full page reload
  - Ensures session cookie is available before middleware checks
- **Created proper middleware** (`proxy.ts`)
  - Next.js 16 requires `proxy.ts` instead of `middleware.ts`
  - Fixed authentication checks in Edge runtime
  - Explicitly specifies cookie name for `getToken`

### 2. Build & Deployment
- **Fixed Prisma initialization** (`lib/prisma.ts`)
  - Made Prisma client initialization lazy to fix build without DATABASE_URL
  - Uses Proxy pattern for on-demand initialization
  - Prevents build failures when DATABASE_URL not set

### 3. File Upload & Serving
- **Fixed photo upload serving** (`app/api/uploads/[filename]/route.ts`)
  - Created dedicated API route to serve uploaded files
  - Files now served via `/api/uploads/[filename]` instead of static `/uploads/`
  - Ensures files are accessible regardless of filesystem location
  - Added file existence verification and proper error handling
- **Updated upload routes** to use new API endpoint
  - `app/api/photos/upload/route.ts` - Updated to use `/api/uploads/` URLs
  - `app/api/photos/upload-multiple/route.ts` - Updated to use `/api/uploads/` URLs
- **Fixed photo display components**
  - `components/PhotoThumbnail.tsx` - Uses regular `img` tag for uploads
  - `components/PhotoImage.tsx` - Uses regular `img` tag for uploads
  - Avoids Next.js Image component issues with dynamically uploaded files

### 4. Middleware & Route Protection
- **Updated proxy middleware** (`proxy.ts`)
  - Added `/uploads` and `/api/uploads` to public routes
  - Added comprehensive activity logging
  - Improved error handling and logging

## ✨ New Features

### Activity Logging
- **Created activity logging utility** (`lib/activity-log.ts`)
  - Structured logging for user actions
  - Tracks: page visits, photo uploads, guess submissions
  - Includes user info, IP, timestamps, and action details
- **Added activity logging to key routes**
  - `proxy.ts` - Logs all page visits and API calls
  - `app/api/photos/upload/route.ts` - Logs photo uploads
  - `app/api/photos/[photoId]/guess/route.ts` - Logs guess submissions

### Monitoring
- **Activity monitoring commands**
  - Watch logs: `sudo journalctl -u app-backend -f | grep -E "\[ACTIVITY\]|\[PHOTO_UPLOAD\]|\[GUESS_SUBMIT\]"`
  - Filter by user, action type, or time range

## 📝 Documentation Updates

- **README.md**
  - Added deployment notes section
  - Added file upload details and troubleshooting
  - Added activity monitoring commands
  - Added database query examples
  - Updated troubleshooting section

- **ARCHITECTURE.md**
  - Updated middleware references (proxy.ts instead of middleware.ts)
  - Added activity logging documentation
  - Updated photo upload flow with file upload details
  - Added file serving architecture
  - Updated guess submission flow

- **CLEANUP.md** (new)
  - Created cleanup checklist for future improvements
  - Documents debug code and verbose logging
  - Provides recommendations for optimization

## 🔧 Technical Changes

### Files Modified
- `lib/auth.ts` - Fixed session callback return type
- `app/login/page.tsx` - Fixed redirect to use full page reload
- `proxy.ts` - Created/updated middleware with activity logging
- `lib/prisma.ts` - Made initialization lazy
- `app/api/photos/upload/route.ts` - Updated file serving, added logging
- `app/api/photos/upload-multiple/route.ts` - Updated file serving
- `components/PhotoThumbnail.tsx` - Fixed image display
- `components/PhotoImage.tsx` - Fixed image display

### Files Created
- `app/api/uploads/[filename]/route.ts` - File serving API route
- `lib/activity-log.ts` - Activity logging utility
- `CLEANUP.md` - Cleanup checklist

## ✅ Testing

- [x] Authentication flow tested (login, session persistence)
- [x] Photo upload tested (file and URL uploads)
- [x] Photo display tested (uploaded files visible to all users)
- [x] Guess submission tested
- [x] Build tested (no TypeScript errors)
- [x] Middleware tested (route protection working)
- [x] Activity logging verified

## 🚀 Deployment Notes

### Environment Variables Required
- `NODE_ENV=production`
- `NEXTAUTH_URL` - Production domain
- `NEXTAUTH_SECRET` - Secret key
- `AUTH_TRUST_HOST=true` (if using reverse proxy)
- `DATABASE_URL` - Production database connection

### Post-Deployment
1. Verify `public/uploads/` directory exists and has write permissions
2. Test photo upload and verify files are accessible
3. Monitor activity logs to ensure logging is working
4. Verify authentication flow works correctly

### Monitoring
- Watch activity logs: `sudo journalctl -u app-backend -f | grep -E "\[ACTIVITY\]|\[PHOTO_UPLOAD\]|\[GUESS_SUBMIT\]"`
- Check for errors: `sudo journalctl -u app-backend --since "1 hour ago" | grep -i error`

## 🔄 Breaking Changes

**None** - All changes are backward compatible. Existing photos with `/uploads/` URLs may need to be updated to `/api/uploads/` if files are not accessible, but the system will continue to work.

## 📋 Migration Notes

### For Existing Photos
- Photos uploaded before this change use `/uploads/` URLs
- New photos use `/api/uploads/` URLs
- Old photos will continue to work if files exist in `public/uploads/`
- Consider migrating old photo URLs if needed (optional)

## 🎯 Next Steps (Future)

See `CLEANUP.md` for recommended cleanup tasks:
- Reduce verbose logging in production
- Add log levels (DEBUG, INFO, WARN, ERROR)
- Protect debug endpoints
- Optimize activity logging

---

**Ready for Production:** ✅ Yes
**Breaking Changes:** ❌ No
**Requires Migration:** ⚠️ Optional (old photo URLs)

Reviewed-on: #3

lib/activity-log.ts

@@ -0,0 +1,52 @@
+/**
+ * Activity logging utility for tracking user actions
+ */
+
+export interface ActivityLog {
+  timestamp: string
+  userId?: string
+  userEmail?: string
+  userRole?: string
+  action: string
+  path: string
+  method: string
+  ip?: string
+  details?: Record<string, unknown>
+}
+
+export function logActivity(
+  action: string,
+  path: string,
+  method: string,
+  user?: { id: string; email: string; role: string } | null,
+  details?: Record<string, unknown>,
+  request?: Request
+) {
+  const timestamp = new Date().toISOString()
+  const ip = request?.headers.get("x-forwarded-for") || 
+             request?.headers.get("x-real-ip") || 
+             "unknown"
+  
+  const log: ActivityLog = {
+    timestamp,
+    userId: user?.id,
+    userEmail: user?.email,
+    userRole: user?.role,
+    action,
+    path,
+    method,
+    ip: ip.split(",")[0].trim(), // Get first IP if multiple
+    details
+  }
+  
+  // Format: [ACTION] timestamp | method path | User: email (role) | IP: ip | Details: {...}
+  const userInfo = user 
+    ? `${user.email} (${user.role})` 
+    : "UNAUTHENTICATED"
+  
+  const detailsStr = details ? ` | Details: ${JSON.stringify(details)}` : ""
+  
+  console.log(`[${action}] ${timestamp} | ${method} ${path} | User: ${userInfo} | IP: ${ip.split(",")[0].trim()}${detailsStr}`)
+  
+  return log
+}

lib/auth.ts

@@ -3,7 +3,14 @@ import Credentials from "next-auth/providers/credentials"
 import { prisma } from "./prisma"
 import bcrypt from "bcryptjs"
 
+const nextAuthSecret = process.env.NEXTAUTH_SECRET
+if (!nextAuthSecret) {
+  throw new Error("NEXTAUTH_SECRET is not set. Define it to enable authentication.")
+}
+
 export const { handlers, auth, signIn, signOut } = NextAuth({
+  trustHost: true,
+  debug: process.env.NODE_ENV !== "production",
   providers: [
     Credentials({
       name: "Credentials",
@@ -12,33 +19,38 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
         password: { label: "Password", type: "password" }
       },
       async authorize(credentials) {
-        if (!credentials?.email || !credentials?.password) {
+        try {
+          if (!credentials?.email || !credentials?.password) {
+            return null
+          }
+
+          const email = credentials.email as string
+          const password = credentials.password as string
+
+          const user = await prisma.user.findUnique({
+            where: { email }
+          })
+
+          if (!user || !user.passwordHash) {
+            return null
+          }
+
+          const isValid = await bcrypt.compare(password, user.passwordHash)
+
+          if (!isValid) {
+            return null
+          }
+
+          return {
+            id: user.id,
+            email: user.email,
+            name: user.name,
+            role: user.role,
+          }
+        } catch (err) {
+          console.error("Auth authorize error:", err)
           return null
         }
-
-        const email = credentials.email as string
-        const password = credentials.password as string
-
-        const user = await prisma.user.findUnique({
-          where: { email }
-        })
-
-        if (!user || !user.passwordHash) {
-          return null
-        }
-
-        const isValid = await bcrypt.compare(password, user.passwordHash)
-
-        if (!isValid) {
-          return null
-        }
-
-        return {
-          id: user.id,
-          email: user.email,
-          name: user.name,
-          role: user.role,
-        }
       }
     })
   ],
@@ -47,14 +59,61 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
       if (user) {
         token.id = user.id
         token.role = (user as { role: string }).role
+        token.email = user.email
+        token.name = user.name
+        console.log("JWT callback: user added to token", { userId: user.id, email: user.email })
+      } else {
+        console.log("JWT callback: no user, token exists", { 
+          hasToken: !!token,
+          tokenKeys: token ? Object.keys(token) : [],
+          tokenId: token?.id,
+          tokenEmail: token?.email,
+          tokenName: token?.name,
+          tokenRole: token?.role
+        })
       }
       return token
     },
     async session({ session, token }) {
-      if (session.user) {
-        session.user.id = token.id as string
-        session.user.role = token.role as string
+      console.log("Session callback: called", {
+        hasToken: !!token,
+        hasSession: !!session,
+        tokenId: token?.id,
+        tokenEmail: token?.email,
+        stackTrace: new Error().stack?.split('\n').slice(1, 4).join('\n')
+      })
+      // Always ensure session.user exists when token exists
+      if (token && (token.id || token.email)) {
+        session.user = {
+          ...session.user,
+          id: token.id as string,
+          email: (token.email as string) || session.user?.email || "",
+          name: (token.name as string) || session.user?.name || "",
+          role: token.role as string,
+        }
+        console.log("Session callback: session created", { 
+          userId: token.id, 
+          email: token.email,
+          hasUser: !!session.user,
+          userKeys: session.user ? Object.keys(session.user) : [],
+          userRole: token.role,
+          sessionUser: session.user,
+          sessionExpires: session.expires,
+          fullSession: JSON.stringify(session, null, 2)
+        })
+      } else {
+        console.warn("Session callback: token missing or invalid", { 
+          hasToken: !!token,
+          tokenKeys: token ? Object.keys(token) : [],
+          hasSession: !!session,
+          sessionKeys: session ? Object.keys(session) : [],
+          sessionUser: session?.user,
+          tokenId: token?.id,
+          tokenEmail: token?.email
+        })
+        // Return session even if token is invalid - NextAuth will handle validation
       }
+      // Explicitly return session to ensure it's returned
       return session
     }
   },
@@ -63,6 +122,18 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
   },
   session: {
     strategy: "jwt",
+    maxAge: 30 * 24 * 60 * 60, // 30 days
   },
-  secret: process.env.NEXTAUTH_SECRET,
+  cookies: {
+    sessionToken: {
+      name: `__Secure-authjs.session-token`,
+      options: {
+        httpOnly: true,
+        sameSite: "lax",
+        path: "/",
+        secure: true, // Always secure in production (HTTPS required)
+      },
+    },
+  },
+  secret: nextAuthSecret,
 })

lib/prisma.ts

@@ -6,41 +6,61 @@ const globalForPrisma = globalThis as unknown as {
   prisma: PrismaClient | undefined
 }
 
-const connectionString = process.env.DATABASE_URL
-
-if (!connectionString) {
-  throw new Error('DATABASE_URL environment variable is not set')
-}
-
-// Handle Prisma Postgres URLs (prisma+postgres://) vs standard PostgreSQL URLs
-let pool: Pool
-if (connectionString.startsWith('prisma+postgres://')) {
-  // For Prisma managed Postgres, extract the actual postgres URL from the API key
-  try {
-    const urlMatch = connectionString.match(/api_key=([^"&]+)/)
-    if (urlMatch) {
-      const apiKey = decodeURIComponent(urlMatch[1])
-      const decoded = JSON.parse(Buffer.from(apiKey, 'base64').toString())
-      if (decoded.databaseUrl) {
-        pool = new Pool({ connectionString: decoded.databaseUrl })
-      } else if (decoded.shadowDatabaseUrl) {
-        pool = new Pool({ connectionString: decoded.shadowDatabaseUrl })
-      } else {
-        throw new Error('Could not extract database URL from Prisma Postgres connection string')
-      }
-    } else {
-      throw new Error('Invalid Prisma Postgres connection string format')
-    }
-  } catch (error) {
-    console.error('Error parsing Prisma Postgres URL:', error)
-    throw new Error('Failed to parse Prisma Postgres connection string. Consider using a standard PostgreSQL connection string.')
+// Lazy initialization function - only initializes when prisma is first accessed
+function getPrismaClient(): PrismaClient {
+  if (globalForPrisma.prisma) {
+    return globalForPrisma.prisma
   }
-} else {
-  // Standard PostgreSQL connection
-  pool = new Pool({ connectionString })
+
+  const connectionString = process.env.DATABASE_URL
+
+  if (!connectionString) {
+    throw new Error('DATABASE_URL environment variable is not set')
+  }
+
+  // Handle Prisma Postgres URLs (prisma+postgres://) vs standard PostgreSQL URLs
+  let pool: Pool
+  if (connectionString.startsWith('prisma+postgres://')) {
+    // For Prisma managed Postgres, extract the actual postgres URL from the API key
+    try {
+      const urlMatch = connectionString.match(/api_key=([^"&]+)/)
+      if (urlMatch) {
+        const apiKey = decodeURIComponent(urlMatch[1])
+        const decoded = JSON.parse(Buffer.from(apiKey, 'base64').toString())
+        if (decoded.databaseUrl) {
+          pool = new Pool({ connectionString: decoded.databaseUrl })
+        } else if (decoded.shadowDatabaseUrl) {
+          pool = new Pool({ connectionString: decoded.shadowDatabaseUrl })
+        } else {
+          throw new Error('Could not extract database URL from Prisma Postgres connection string')
+        }
+      } else {
+        throw new Error('Invalid Prisma Postgres connection string format')
+      }
+    } catch (error) {
+      console.error('Error parsing Prisma Postgres URL:', error)
+      throw new Error('Failed to parse Prisma Postgres connection string. Consider using a standard PostgreSQL connection string.')
+    }
+  } else {
+    // Standard PostgreSQL connection
+    pool = new Pool({ connectionString })
+  }
+
+  const adapter = new PrismaPg(pool)
+  const prisma = new PrismaClient({ adapter })
+
+  if (process.env.NODE_ENV !== 'production') {
+    globalForPrisma.prisma = prisma
+  }
+
+  return prisma
 }
 
-const adapter = new PrismaPg(pool)
-export const prisma = globalForPrisma.prisma ?? new PrismaClient({ adapter })
-
-if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
+// Export a proxy that lazily initializes Prisma on first access
+export const prisma = new Proxy({} as PrismaClient, {
+  get(_target, prop) {
+    const client = getPrismaClient()
+    const value = client[prop as keyof PrismaClient]
+    return typeof value === 'function' ? value.bind(client) : value
+  }
+})