# Fix authentication issues and improve developer experience
## Summary
This MR fixes critical authentication issues that prevented login on localhost and improves the developer experience with consolidated rebuild scripts and a working help modal keyboard shortcut.
## Problems Fixed
### 1. Authentication Issues
- **UntrustedHost Error**: NextAuth v5 was rejecting localhost requests with "UntrustedHost: Host must be trusted" error
- **Cookie Prefix Errors**: Cookies were being set with `__Host-` and `__Secure-` prefixes on HTTP (localhost), causing browser rejection
- **MissingCSRF Error**: CSRF token cookies were not being set correctly due to cookie configuration issues
### 2. Help Modal Keyboard Shortcut
- **Shift+? not working**: The help modal keyboard shortcut was not detecting the question mark key correctly
### 3. Developer Experience
- **Multiple rebuild scripts**: Had several overlapping rebuild scripts that were confusing
- **Unused code**: Removed unused `useSecureCookies` variable and misleading comments
## Changes Made
### Authentication Fixes (`lib/auth.ts`)
- Set `trustHost: true` to fix UntrustedHost error (required for NextAuth v5)
- Added explicit cookie configuration for HTTP (localhost) to prevent prefix errors:
- Cookies use `secure: false` for HTTP
- Cookie names without prefixes for HTTP
- Let Auth.js defaults handle HTTPS (with prefixes and Secure flag)
- Removed unused `useSecureCookies` variable
- Simplified debug logging
### Help Modal Fix (`components/HelpModal.tsx`)
- Fixed keyboard shortcut detection to properly handle Shift+? (Shift+/)
- Updated help text to show correct shortcut (Shift+? instead of Ctrl+?)
### Developer Scripts
- **Consolidated rebuild scripts**: Merged `CLEAN_REBUILD.sh`, `FIX_AND_RESTART.sh`, and `start-server.sh` into single `rebuild.sh`
- **Added REBUILD.md**: Documentation for rebuild process
- Removed redundant script files
### Code Cleanup
- Removed unused `useSecureCookies` variable from `lib/auth.ts`
- Removed misleading comment from `app/api/auth/[...nextauth]/route.ts`
- Cleaned up verbose debug logging
## Technical Details
### Cookie Configuration
The fix works by explicitly configuring cookies for HTTP environments:
- **HTTP (localhost)**: Cookies without prefixes, `secure: false`
- **HTTPS (production)**: Let Auth.js defaults handle (prefixes + Secure flag)
This prevents NextAuth v5 from auto-detecting HTTPS from proxy headers and incorrectly adding cookie prefixes.
### Keyboard Shortcut
The question mark key requires Shift+/ on most keyboards. The fix now properly detects:
- `event.shiftKey && event.key === "/"`
- `event.key === "?"` (fallback)
- `event.code === "Slash" && event.shiftKey` (additional fallback)
## Testing
- ✅ Login works on localhost (http://localhost:3000)
- ✅ No cookie prefix errors in browser console
- ✅ No UntrustedHost errors in server logs
- ✅ Help modal opens/closes with Shift+?
- ✅ Rebuild script works in both dev and prod modes
## Files Changed
### Modified
- `lib/auth.ts` - Authentication configuration fixes
- `components/HelpModal.tsx` - Keyboard shortcut fix
- `app/api/auth/[...nextauth]/route.ts` - Removed misleading comment
### Added
- `rebuild.sh` - Consolidated rebuild script
- `REBUILD.md` - Rebuild documentation
## Migration Notes
No database migrations or environment variable changes required. The fix works with existing configuration.
## Related Issues
Fixes authentication issues preventing local development and testing.
Reviewed-on: #5
- Created a new test suite for the HelpModal component to verify its behavior with keyboard shortcuts.
- Added tests to ensure the modal does not render initially, opens with Shift+?, closes with Escape, and does not open with Ctrl+?.
- Included checks for toggling the modal state and verifying the display of help content when the modal is open.
- Updated HelpModal component to use HTML entities for apostrophes in text content for better rendering.
- Updated `proxy.ts` to explicitly define cookie names based on the request protocol, improving clarity in cookie management.
- Refactored `auth.ts` to always throw an error for missing `NEXTAUTH_SECRET` at runtime, ensuring critical configuration is validated consistently.
- Updated `proxy.ts` to simplify cookie name handling in `getToken`, allowing automatic detection of secure cookie prefixes.
- Refactored `auth.ts` to implement a lazy check for `NEXTAUTH_SECRET`, ensuring validation only occurs when necessary and preventing build-time errors.
- Updated `rebuild.sh` to include error handling for directory changes and improved server startup checks, providing clearer feedback on server status.
- Enhanced `watch-activity.sh` to wait for the log file creation with a timeout and added user guidance for ensuring server activity logging.
- Improved user feedback in both scripts to facilitate easier debugging and monitoring of server and log file states.
- Introduced a new `deploy-and-watch.sh` script to automate server deployment and monitor activity logs.
- The script initiates the server rebuild in the background and waits for the log file to be created, providing user feedback during the process.
- If the log file is not created within a specified timeout, it alerts the user and suggests manual log monitoring options.
- Added a new section in `REBUILD.md` for watching activity logs with usage instructions for different modes.
- Updated `rebuild.sh` to dynamically set the log file path and provide clearer log viewing instructions.
- Enhanced `watch-activity.sh` to support monitoring both systemd journal logs and specified log files, with improved error handling and user guidance.
- Removed unnecessary comments and code related to secure cookie management in `auth.ts`, as Auth.js now correctly handles cookies.
- Streamlined the authentication route in `route.ts` by directly exporting handlers without additional wrappers.
- Introduced `rebuild.sh` script for streamlined application rebuild and server management in both production and development modes.
- Created `REBUILD.md` documentation for quick start instructions and detailed steps for rebuilding the application.
- Added `HelpModal` component to provide users with in-app guidance on how to play the MirrorMatch game, including features, tips, and keyboard shortcuts.
- Updated `layout.tsx` to include the `HelpModal` for user accessibility.
- Adjusted authentication handling in `auth.ts` to ensure proper cookie management based on environment settings.
- Changed the type of `details` in the ActivityLog interface and logActivity function from `Record<string, any>` to `Record<string, unknown>` to enhance type safety and clarity.
- Updated the proxy function in Prisma client to use `keyof PrismaClient` for property access, improving type inference and reducing reliance on `any`.
- Revised architecture documentation to reflect changes in file upload handling, including new API routes and activity logging features.
- Updated README with deployment notes, file upload instructions, and monitoring activity logs.
- Clarified the use of `proxy.ts` for route protection in Next.js 16 and detailed the logging of user activities for both authenticated and unauthenticated requests.
- Enhanced the proxy function to log user activity for both authenticated and unauthenticated requests, capturing details such as IP address, user agent, and referer.
- Introduced a new utility for logging activities, allowing for structured tracking of user actions across various routes.
- Updated photo upload and guess submission routes to log relevant user activity, improving visibility into user interactions.
- Added a script to watch user activity logs in real-time for easier monitoring.
- Modified the proxy function to allow access to the "/uploads" route alongside existing public routes.
- Enhanced PhotoImage and PhotoThumbnail components to handle local uploads by treating them similarly to external URLs.
- Updated comments to clarify the changes made regarding uploads and public folder handling.
- Explicitly specified the cookie name for token retrieval to align with NextAuth configuration.
- Improved debug logging to include cookie presence checks and detailed cookie information for better troubleshooting.
- Updated comments for clarity on the changes made to token handling and logging.
- Introduced a lazy initialization function for the Prisma client to optimize resource usage by only initializing when first accessed.
- Enhanced error handling for parsing Prisma Postgres connection strings, providing clearer error messages and logging for debugging.
- Updated the export to use a Proxy for lazy loading, improving performance and maintaining the existing interface.
- Updated the function name from middleware to proxy to better reflect its purpose in handling requests.
- Ensured consistency in naming conventions across the codebase.
- Deleted the old middleware file and integrated its functionality into the proxy function for streamlined authentication and role-based access control.
- Updated debug logging to enhance visibility into token presence and user details during the authentication process.
- Adjusted middleware configuration to match all request paths while excluding static files and specific assets.
- Implemented a new middleware to handle authentication checks and enforce role-based access for protected routes.
- Added debug logging to track token presence and user details for improved troubleshooting.
- Configured middleware to match all request paths except for static files and specific assets.
- Replaced router.push with window.location.href to ensure a full page reload after login, allowing the session cookie to be read correctly before authentication checks.
- Updated comments to clarify the reason for this change in the login flow.
- Removed unnecessary check for session.user existence, ensuring it is always populated with token data.
- Updated comments to clarify session return behavior when token validation fails, allowing NextAuth to manage invalid tokens.
- Introduced console logs to track the authentication call and its results, including session presence and user details.
- Enhanced error logging to capture and display authentication errors for improved debugging.
- Added additional details to the JWT callback logging, including token ID, email, name, and role for improved debugging and context during authentication.
- Enhanced visibility into token state when no user is present, aiding in troubleshooting authentication issues.
- Added additional logging to track session and user details, enhancing debugging capabilities.
- Implemented checks for both session existence and user presence, redirecting to the login page as necessary.
- Improved session information output for better context during page rendering.
- Added detailed logging for session information in the PhotosPage component to aid in debugging.
- Included console logs for session presence and user details, as well as a log for redirection to the login page when no session is found.
- Updated session callback in auth.ts to include additional session details for improved context during authentication.
- Updated session callback to include user role in the logging output for better context during session creation.
- Improved logging for missing or invalid tokens by adding token ID and email to the warning message.
- Removed conditional logging for non-production environments to ensure consistent logging across all environments.
- Enhanced the GET request handler to better manage session tokens from both request headers and Next.js cookie store.
- Added detailed error handling for authentication failures and improved logging for debugging purposes.
- Updated cookie management to provide clearer insights into session token presence and accessibility.
- Ensured secure cookie handling is enforced in production environments.
- Added a new API route for session management that retrieves session information and cookie data.
- Enhanced error handling to provide detailed error messages in case of failures.
- Updated login page to support callback URLs for redirection after successful login.
- Introduced debug logging for session creation and token validation in non-production environments.
- Added email and name to the token during the sign-in process for improved user context.
- Updated session callback to ensure session.user is populated with token data, including id, email, name, and role, while maintaining existing session data.
- Added a warning for non-production environments when the token is missing or invalid.
- Added validation for NEXTAUTH_SECRET to ensure it is set before authentication.
- Wrapped the authorization logic in a try-catch block to handle potential errors gracefully and log them for debugging.
- Introduced a minimal global error boundary to handle errors during prerendering.
- Provides a simple UI for error display and a retry action without relying on contexts.
# Photo Management and Game Features
## Summary
This PR adds comprehensive photo management features, duplicate detection, attempt limits, penalty system improvements, and admin photo deletion capabilities to the MirrorMatch application.
## Features Added
### 1. Duplicate Photo Detection
- **File-based duplicates**: Calculates SHA256 hash of uploaded files to detect duplicate content
- **URL-based duplicates**: Checks for duplicate photo URLs
- Prevents users from uploading the same photo multiple times
- Returns HTTP 409 (Conflict) with clear error messages
### 2. Maximum Attempts Per Photo
- Uploaders can set a maximum number of guesses allowed per user for each photo
- Default: unlimited (null or 0)
- UI displays remaining attempts counter
- API enforces attempt limits before allowing guesses
- Shows warning message when max attempts reached
### 3. Penalty System Improvements
- **Simplified UI**: Removed checkbox - penalty automatically enabled when penalty points > 0
- **Score protection**: Scores cannot go below 0, even with large penalties
- If penalty would result in negative score, only deducts available points and sets to 0
### 4. Admin Photo Deletion
- Admins can delete photos from:
- Photos list page (hover to reveal delete icon)
- Individual photo detail page (delete button in header)
- Deletes associated guesses automatically
- Deletes local uploaded files from filesystem
- Confirmation dialog before deletion
- Proper error handling and user feedback
### 5. Navigation Improvements
- Logout button always visible in side menu (hamburger menu)
- Improved side menu layout with fixed footer for logout button
- Better mobile responsiveness
### 6. Self-Guess Prevention
- Users cannot guess on their own uploaded photos
- Shows informative message with answer for photo owners
## Technical Changes
### Database Schema
- Added `fileHash` field (String?) to Photo model for duplicate detection
- Added `maxAttempts` field (Int?) to Photo model for attempt limits
- Added indexes on `url` and `fileHash` for performance
### API Routes
- `POST /api/photos/upload-multiple`: Enhanced with duplicate checking and maxAttempts
- `POST /api/photos/[photoId]/guess`: Added maxAttempts enforcement and score floor protection
- `DELETE /api/photos/[photoId]`: New route for admin photo deletion
### Components
- `DeletePhotoButton`: New reusable component for photo deletion
- Updated upload form to remove penalty checkbox
- Enhanced photo display pages with attempt counters and admin controls
## Database Migrations
- Run `npm run db:push` to apply schema changes
- Run `npm run db:generate` to regenerate Prisma client
## Testing
- Test duplicate detection with same file and different filenames
- Test duplicate detection with same URL
- Test max attempts enforcement
- Test penalty system with various point values
- Test score floor (cannot go below 0)
- Test admin photo deletion
- Test self-guess prevention
## Breaking Changes
None - all changes are backward compatible. Existing photos will have `null` for `maxAttempts` (unlimited) and `fileHash` (for URL uploads).
Reviewed-on: #1
- Introduce a postinstall script to automatically generate the Prisma client after installation
- Remove the outdated symlink for the Prisma client to streamline project structure and avoid confusion
- Delete fallback TypeScript typings for Prisma client to streamline type generation
- Update Prisma client output path for better compatibility with current project structure
- Add step to generate Prisma Client with DATABASE_URL for consistent type generation
- Clean up skip logic by removing unnecessary comments and legacy output formats
- Ensure CI skip checks are clear and maintain compatibility across runners
- Default to 'false' for skip output to enhance runner compatibility
- Update skip condition checks to use boolean values for consistency
- Ensure CI is only skipped when explicitly indicated in branch name or commit message
