Mobile login was broken: tapping "Login" caused a flash-redirect back to the homepage without ever showing the Auth0 login page. Two root causes identified and fixed:
Callback route guard too strict (M1): App.tsx required isCallbackRoute && isAuthenticated to render CallbackPage. During Auth0 code exchange on mobile, isAuthenticated is briefly false, causing /callback to fall through to the !isAuthenticated redirect. Fixed by showing a loading state on /callback while Auth0 processes.
Stale token misdirection (M2): Auth0 SDK reads expired tokens from IndexedDB cache and temporarily evaluates isAuthenticated = true. The homepage then navigates to /garage instead of calling loginWithRedirect(). Fixed by validating tokens when isAuthenticated becomes true and clearing stale state when validation fails.
No self-recovery mechanism (M3): Users stuck in auth limbo had no way to clear credentials (logout is in Settings, which requires auth). Added "Trouble logging in?" link on the homepage that clears IndexedDB auth cache, localStorage auth items, and Auth0 SDK state.
Files Changed
File
Change
frontend/src/App.tsx
Callback route shows loading state during code exchange instead of redirecting
frontend/src/core/auth/Auth0Provider.tsx
Stale token validation with validatingRef guard in TokenInjector
frontend/src/core/utils/indexeddb-storage.ts
Added clearAll() method with abort/error handlers
frontend/src/pages/HomePage.tsx
"Trouble logging in?" session clear link (mobile + desktop)
Mobile Safari: Tap Login on homepage, verify Auth0 login page appears
Mobile Safari: After Auth0 login, verify callback completes and routes to /garage
Mobile Safari: Tap "Trouble logging in?", verify "Session cleared" confirmation
Desktop Chrome: Verify login flow still works correctly (no regression)
Viewport 320px: Verify "Trouble logging in?" link visible and touch-friendly
Viewport 768px: Verify mobile layout and callback loading state
Viewport 1920px: Verify desktop layout and callback flow
Fixes #188
Fixes #189
Fixes #190
Fixes #192
## Summary
Mobile login was broken: tapping "Login" caused a flash-redirect back to the homepage without ever showing the Auth0 login page. Two root causes identified and fixed:
1. **Callback route guard too strict (M1)**: `App.tsx` required `isCallbackRoute && isAuthenticated` to render CallbackPage. During Auth0 code exchange on mobile, `isAuthenticated` is briefly `false`, causing `/callback` to fall through to the `!isAuthenticated` redirect. Fixed by showing a loading state on `/callback` while Auth0 processes.
2. **Stale token misdirection (M2)**: Auth0 SDK reads expired tokens from IndexedDB cache and temporarily evaluates `isAuthenticated = true`. The homepage then navigates to `/garage` instead of calling `loginWithRedirect()`. Fixed by validating tokens when `isAuthenticated` becomes `true` and clearing stale state when validation fails.
3. **No self-recovery mechanism (M3)**: Users stuck in auth limbo had no way to clear credentials (logout is in Settings, which requires auth). Added "Trouble logging in?" link on the homepage that clears IndexedDB auth cache, localStorage auth items, and Auth0 SDK state.
## Files Changed
| File | Change |
|------|--------|
| `frontend/src/App.tsx` | Callback route shows loading state during code exchange instead of redirecting |
| `frontend/src/core/auth/Auth0Provider.tsx` | Stale token validation with `validatingRef` guard in TokenInjector |
| `frontend/src/core/utils/indexeddb-storage.ts` | Added `clearAll()` method with abort/error handlers |
| `frontend/src/pages/HomePage.tsx` | "Trouble logging in?" session clear link (mobile + desktop) |
## Quality Checks
- Type-check: PASS
- Lint: warnings only (all pre-existing)
- Tests: 12 passed, 14 failed (all failures pre-existing - TextEncoder, import.meta, unrelated UI)
## Test Plan
- [ ] Mobile Safari: Tap Login on homepage, verify Auth0 login page appears
- [ ] Mobile Safari: After Auth0 login, verify callback completes and routes to /garage
- [ ] Mobile Safari: Tap "Trouble logging in?", verify "Session cleared" confirmation
- [ ] Desktop Chrome: Verify login flow still works correctly (no regression)
- [ ] Viewport 320px: Verify "Trouble logging in?" link visible and touch-friendly
- [ ] Viewport 768px: Verify mobile layout and callback loading state
- [ ] Viewport 1920px: Verify desktop layout and callback flow
loadCacheFromDB used store.getAll() which returns raw values, not
key-value pairs. The item.key check always failed, so memoryCache
was empty after every page reload. Auth0 SDK state stored before
redirect was lost on mobile Safari (no bfcache).
Also fixed set()/remove() to await IDB persistence so Auth0 state
is fully written before loginWithRedirect() navigates away.
Added 10s timeout on callback loading state as safety net.
Co-Authored-By: Claude Opus 4.6 <[email protected]>
Add allKeys() to IndexedDBStorage to eliminate Auth0 CacheKeyManifest
fallback, revert set()/remove() to non-blocking persist, add auth error
display on callback route, remove leaky force-auth-check interceptor,
and migrate debug console calls to centralized logger.
Co-Authored-By: Claude Opus 4.6 <[email protected]>
Root cause: React fires child effects before parent effects. App's URL
sync effect called history.replaceState() on /callback, stripping the
?code= and &state= query params before Auth0Provider's useEffect could
read them via hasAuthParams(). The SDK fell through to checkSession()
instead of handleRedirectCallback(), silently failing with no error.
Guard both URL sync effects to skip on /callback, /signup, /verify-email.
Co-Authored-By: Claude Opus 4.6 <[email protected]>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Fixes #188
Fixes #189
Fixes #190
Fixes #192
Summary
Mobile login was broken: tapping "Login" caused a flash-redirect back to the homepage without ever showing the Auth0 login page. Two root causes identified and fixed:
Callback route guard too strict (M1):
App.tsxrequiredisCallbackRoute && isAuthenticatedto render CallbackPage. During Auth0 code exchange on mobile,isAuthenticatedis brieflyfalse, causing/callbackto fall through to the!isAuthenticatedredirect. Fixed by showing a loading state on/callbackwhile Auth0 processes.Stale token misdirection (M2): Auth0 SDK reads expired tokens from IndexedDB cache and temporarily evaluates
isAuthenticated = true. The homepage then navigates to/garageinstead of callingloginWithRedirect(). Fixed by validating tokens whenisAuthenticatedbecomestrueand clearing stale state when validation fails.No self-recovery mechanism (M3): Users stuck in auth limbo had no way to clear credentials (logout is in Settings, which requires auth). Added "Trouble logging in?" link on the homepage that clears IndexedDB auth cache, localStorage auth items, and Auth0 SDK state.
Files Changed
frontend/src/App.tsxfrontend/src/core/auth/Auth0Provider.tsxvalidatingRefguard in TokenInjectorfrontend/src/core/utils/indexeddb-storage.tsclearAll()method with abort/error handlersfrontend/src/pages/HomePage.tsxQuality Checks
Test Plan