Cal Corum ae4a92f0e0 CLAUDE: Fix Safari/iPad WebSocket connection issues

- Changed cookie SameSite policy from Lax to None with Secure=true
  for Safari ITP compatibility
- Fixed Nuxt composable context issue: moved useRuntimeConfig() from
  connect() callback to composable setup phase (required in Nuxt 4)
- Added GET /logout endpoint for easy browser-based logout
- Improved loading overlay with clear status indicators and action
  buttons (Retry, Re-Login, Dismiss)
- Added error handling with try-catch in WebSocket connect()
- Documented issue and fixes in .claude/SAFARI_WEBSOCKET_ISSUE.md

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-28 12:03:57 -06:00

2.5 KiB

Raw Blame History

Safari/iPad WebSocket Connection Issue

Problem Summary

WebSocket connections intermittently fail on iPad Safari while working reliably on desktop browsers.

Pattern:

Works initially after login
Randomly fails (minutes to hours later)
"Fixes itself" during debugging (suggesting cache/timing issues)
Desktop browsers never have this problem

Root Causes Identified

Safari's ITP treats SameSite=Lax differently than Chrome/Firefox. Safari may not send cookies with fetch/XHR even on same-origin.

Fix: Changed to SameSite=None; Secure=true in backend/app/utils/cookies.py

2. Nuxt Composable Context Issue (Fixed 2025-11-28)

useRuntimeConfig() was being called inside connect() function, which is invoked from:

onMounted hooks (valid context)
setInterval callbacks (INVALID context)

In Nuxt 4, composables MUST be called during component setup, not inside callbacks.

Fix: Moved useRuntimeConfig() to composable setup phase in useWebSocket.ts

3. Potential Safari-Specific Issues (Not Yet Fixed)

Safari ITP: Can expire cookies unpredictably
iOS Memory Management: Safari may clear JS state when backgrounded
Cached Old Code: Safari may aggressively cache outdated JS bundles

Files Modified

backend/app/utils/cookies.py - Cookie SameSite policy
frontend-sba/composables/useWebSocket.ts - Composable context fix
backend/app/api/routes/auth.py - Added GET /logout endpoint

Prevention Strategies

Short-term (Implemented)

Stuck state detector every 5 seconds
Multiple retry mechanisms in websocket.client.ts plugin
Error logging in connect() function

Long-term (Consider Implementing)

Token in WebSocket URL: Pass short-lived auth token as query param (fallback if cookies fail)
Connection health indicator: Visible UI showing connection state, not just loading spinner
Automatic logout/re-login flow: If connection fails repeatedly, redirect to login

Debugging Steps

Check backend logs: tail -f logs/backend.log | grep -E "auth|Cookie|WebSocket"
Check browser console for [WebSocket] prefixed logs
Verify cookies exist: Safari Settings > Advanced > Website Data > gameplay-demo.manticorum.com
Force cache clear: Close Safari completely, reopen

History

Date	Issue	Fix	Result
2025-11-28	SameSite=Lax not working on Safari	Changed to SameSite=None	Worked initially
2025-11-28	useRuntimeConfig in callback	Moved to setup phase	Connected

2.5 KiB Raw Blame History