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. #5

Merged

ilia merged 51 commits from dev into main 2026-01-05 19:42:46 -05:00

Conversation 0 Commits 51 Files Changed 34 +2006 -201

ilia commented 2026-01-04 22:18:52 -05:00

Owner

Copy Link

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.

# 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.

ilia added 49 commits 2026-01-04 22:18:52 -05:00

fix: Resolve linting and TypeScript errors ... 90c5a9a4df

- Replace 'any' types with proper Prisma types
- Use PhotoUncheckedCreateInput for photo creation
- Use Prisma.PhotoWhereInput for where clauses
- Add proper type assertions for photo fields
- Fix Photo import error by using Prisma namespace

fix: Resolve TypeScript and linting errors for CI ... f4461b277c

- Remove Prisma namespace imports (not available in Prisma 7)
- Use type assertions with eslint-disable for Prisma type issues
- Fix console.error calls to avoid format string warnings
- Sanitize file extensions to address path traversal warnings
- Add comments explaining server-side filename generation safety

fix: Improve navigation component styling and functionality ... 21fc9f33fb

- Add relative positioning to navigation elements for better stacking context
- Ensure side menu closes when navigating to Upload and Leaderboard links
- Adjust z-index values for side menu and overlay to improve layering

chore: Update CI configuration to include DATABASE_URL for Prisma Client generation ... c16b38522c

- Add DATABASE_URL environment variable to ensure Prisma can generate types using the same connection string as the build step

fix: Enhance CI workflow to improve skip logic and compatibility ... 44cd5f5e0b

- Default to not skipping CI unless specified
- Set outputs in both modern and legacy formats for broader runner compatibility
- Refactor skip condition checks for consistency across jobs

fix: Refine CI skip logic for improved clarity and compatibility ... 4200975c78

- 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

chore: Update CI workflow to include Prisma Client generation and improve skip logic ... cbf49bf306

- 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

chore: Remove outdated Prisma typings and update client output path ... 24889c0373

- Delete fallback TypeScript typings for Prisma client to streamline type generation
- Update Prisma client output path for better compatibility with current project structure

chore: Clean up TypeScript configuration by removing outdated Prisma client path ... 67914fcdc9

- Remove the obsolete path mapping for Prisma client in tsconfig.json to streamline the configuration

chore: Update CI workflow to include a trigger comment ... 49715f558f

- Add a comment to clarify the CI trigger mechanism for better understanding

chore: Update Prisma client output path for improved project structure ... 62cbcb8c26

- Set the output path for the Prisma client to align with the current project directory structure, enhancing compatibility and organization.

chore: Add postinstall script for Prisma client generation and remove outdated client symlink ... 2169e5d184

- 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

feat: Add global error boundary component ... 04185b3d62

- 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.

Merge remote-tracking branch 'gitea/main' into dev 6f280a796e

Merge pull request 'feat: Add global error boundary component' (#2) from buildfix into dev ... 8e3a583123

Reviewed-on: #2

chore: Update package.json to manage @tailwindcss/postcss dependency ... 70c4c6ea9e

- Added @tailwindcss/postcss to dependencies for improved styling capabilities.
- Removed it from devDependencies to streamline package management.

feat: Enhance authentication error handling and secret validation ... af2faf8f41

- 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.

feat: Enable host trust for authentication and update example environment configuration ... 888ffef8e3

- Set AUTH_TRUST_HOST to true in env.example for improved security.
- Updated NextAuth configuration to trust the host during authentication.

feat: Enhance session management in authentication ... c0a1ed146f

- 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.

feat: Implement session debugging and cookie management in API ... ea7da85d5e

- 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.

feat: Improve session handling and cookie management in API ... 9457f08580

- 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.

feat: Enhance session logging in authentication ... fcd1d372b7

- 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.

feat: Enhance logging and session handling in PhotosPage ... f2efa772d6

- 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.

feat: Improve session validation and logging in PhotosPage ... a465e39a4d

- 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.

feat: Enhance JWT callback logging in authentication ... 7a191257e3

- 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.

test b7c789b536

feat: Add debug logging for authentication process in session route ... 83c30b5bd1

- 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.

refactor: Simplify session.user handling in authentication ... 98fe3513dd

- 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.

refactor: Update login redirection method for session handling ... f9bfa5febb

- 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.

feat: Add middleware for authentication and role-based access control ... 395869c6c0

- 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.

refactor: Replace middleware implementation with proxy function ... 014bb983ad

- 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.

refactor: Rename middleware function to proxy for clarity ... b25e1cab2d

- Updated the function name from middleware to proxy to better reflect its purpose in handling requests.
- Ensured consistency in naming conventions across the codebase.

refactor: Implement lazy initialization for Prisma client ... b060459f60

- 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.

refactor: Enhance token handling and debug logging in proxy function ... 76cd2782ec

- 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.

refactor: Update proxy and image components to support uploads ... 7ced408041

- 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.

feat: Implement user activity logging and upload handling ... 91adbab487

- 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.

docs: Update architecture and README for file uploads and activity logging ... 889acd0bbd

- 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.

refactor: Update activity log details type for improved type safety ... 01480586ff

- 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`.

Implements a comprehensive structured logging system to replace verbose console.* calls throughout the codebase, addressing all cleanup tasks from CLEANUP.md. (#4) ... 08914dc469

# Structured Logging System Implementation

## Summary
Implements a comprehensive structured logging system to replace verbose console.* calls throughout the codebase, addressing all cleanup tasks from CLEANUP.md.

## What Changed

### Core Features
- ✅ **Structured Logging System** - New `lib/logger.ts` with DEBUG, INFO, WARN, ERROR levels
- ✅ **Environment-Based Control** - `LOG_LEVEL` env var controls verbosity (DEBUG/INFO/WARN/ERROR/NONE)
- ✅ **JSON Logging Option** - `LOG_FORMAT=json` for structured JSON output
- ✅ **Shared Constants** - Extracted session cookie name to `lib/constants.ts`

### Code Refactoring
- ✅ Replaced all `console.*` calls in API routes with structured logger
- ✅ Refactored `activity-log.ts` to use new logger system
- ✅ Reduced verbose logging in auth, photos page, and upload routes
- ✅ Updated proxy.ts to use structured logging
- ✅ Removed unused legacy `/api/photos` route (replaced by `/api/photos/upload`)

### Security Improvements
- ✅ Protected `/api/debug/session` endpoint with admin-only access
- ✅ Added proper error logging with structured context

### Documentation
- ✅ Documented multiple upload routes usage
- ✅ Enhanced watch-activity.sh script documentation
- ✅ Updated README.md with upload endpoint information
- ✅ Added configuration documentation to next.config.ts

### Testing
- ✅ Added 23 tests for logger system
- ✅ Added 8 tests for refactored activity-log
- ✅ All 43 tests passing

## Benefits

1. **Production-Ready Logging** - Environment-based control, defaults to INFO in production
2. **Reduced Verbosity** - DEBUG logs only show in development or when explicitly enabled
3. **Structured Output** - JSON format option for log aggregation tools
4. **Better Organization** - Shared constants, consistent logging patterns
5. **Improved Security** - Debug endpoint now requires admin access

## Testing

### Manual Testing
- ✅ Server builds successfully
- ✅ All tests pass (43/43)
- ✅ Type checking passes
- ✅ Linting passes
- ✅ Production server runs with logs visible
- ✅ Log levels work correctly (DEBUG shows all, INFO shows activity, etc.)

### Test Coverage
- Logger system: 100% coverage
- Activity log: 100% coverage
- All existing tests still pass

## Configuration

### Environment Variables
```bash
# Control log verbosity (DEBUG, INFO, WARN, ERROR, NONE)
LOG_LEVEL=INFO

# Use structured JSON logging
LOG_FORMAT=json
```

### Defaults
- Development: `LOG_LEVEL=DEBUG` (shows all logs)
- Production: `LOG_LEVEL=INFO` (shows activity and above)

## Migration Notes

- No breaking changes (legacy route was unused)
- All existing functionality preserved
- Logs are now structured and filterable
- Debug endpoint now requires admin authentication
- Legacy `/api/photos` endpoint removed (use `/api/photos/upload` instead)

## Checklist

- [x] All console.* calls replaced in API routes
- [x] Logger system implemented with tests
- [x] Activity logging refactored
- [x] Debug endpoint protected
- [x] Documentation updated
- [x] All tests passing
- [x] Type checking passes
- [x] Linting passes
- [x] Build succeeds
- [x] Manual testing completed

## Related Issues
Addresses cleanup tasks from CLEANUP.md:
- Task 1: Verbose logging in production ✅
- Task 2: Activity logging optimization ✅
- Task 3: Upload verification logging ✅
- Task 4: Middleware debug logging ✅
- Task 5: Legacy upload route documentation ✅
- Task 6: Multiple upload routes documentation ✅
- Task 7: Cookie name constant extraction ✅
- Task 8: Next.js config documentation ✅
- Task 9: ARCHITECTURE.md (already correct) ✅
- Task 10: Watch activity script documentation ✅

Reviewed-on: #4

Add rebuild scripts and HelpModal component ... bc4a6b93b6

- 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.

refactor: Simplify cookie management in authentication handling ... 1e7a47ad31

- 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.

Enhance logging and monitoring capabilities ... f4155cf820

- 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.

Add deploy-and-watch script for server deployment and log monitoring ... 79e6656b02

- 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.

Enhance server startup and log monitoring scripts ... 1aff435ca1

- 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.

Mark reset-password and photo routes as dynamic to prevent build-time data collection da4d7e6f6e

Mark additional API routes as dynamic to prevent build-time data collection df9e61554a

Mark NextAuth route as dynamic to prevent build-time data collection e5be9476a4

refactor: Improve authentication handling and cookie management ... 9c4db74fd1

- 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.

refactor: Enhance cookie handling and error management in authentication ... 19d5b7ef99

- 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.

ilia added 1 commit 2026-01-04 22:24:36 -05:00

Add HelpModal tests for keyboard interactions and content display ... 929a096304

- 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.

ilia added 1 commit 2026-01-04 22:52:22 -05:00

Merge main into dev: resolve all conflicts, keep dev improvements b39242c571

ilia merged commit df865dca41 into main 2026-01-05 19:42:46 -05:00

ilia deleted branch dev 2026-01-05 19:42:46 -05:00

ilia referenced this issue from a commit 2026-01-05 19:42:47 -05:00

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. (#5)

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

ilia

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ilia/mirror_match#5

No description provided.