egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Mobile login redirects to homepage without showing Auth0 login page #188

New Issue
Closed
opened 2026-02-15 03:40:08 +00:00 by egullickson · 8 comments
egullickson commented 2026-02-15 03:40:08 +00:00
Owner
Copy Link

Bug Description

Mobile login is broken. Tapping the "Login" button on the homepage causes the screen to flash and immediately redirect back to the homepage. The Auth0 login page never appears. Desktop login works correctly.

Steps to Reproduce

  1. Open the app on a mobile device (iPhone Safari confirmed)
  2. Tap the "Login" button on the homepage
  3. Screen flashes briefly then redirects back to the homepage
  4. Auth0 login page never loads
  5. No way to clear credentials or reach Settings (requires auth)

Expected Behavior

Tapping "Login" should redirect to the Auth0 login page, allow the user to authenticate, then redirect back to the app callback URL.

Environment

  • Affected: Mobile (iPhone Safari 26.2 confirmed)
  • Not affected: Desktop (Chrome 145 works correctly)
  • Auth stack: Auth0 React SDK + IndexedDB token caching + custom mobile retry logic

Investigation Findings

Loki Logs (staging, last 1h)

  • Backend: All JWT authentications succeeding. Zero 401/403 errors. No auth-related failures.
  • Frontend: Auth assets served successfully to mobile Safari (auth-DXZD2WD1.js, auth.api-C28lcCvZ.js)
  • Only backend error: Missing /run/secrets/resend-webhook-secret (unrelated to auth)

Code Analysis

Likely root cause: Auth0 SDK detects stale cached tokens in IndexedDB, evaluates isAuthenticated as true, and the app routes back to the homepage instead of triggering the Auth0 redirect.

Key files involved:

  • frontend/src/core/auth/Auth0Provider.tsx - Auth0 config + TokenInjector with mobile-specific retry logic
  • frontend/src/core/utils/indexeddb-storage.ts - IndexedDB token storage (primary cache)
  • frontend/src/core/auth/auth-gate.ts - Auth initialization gate + request queue
  • frontend/src/core/auth/useLogout.ts - Logout hook (only accessible from Settings)
  • frontend/src/pages/HomePage.tsx - Login button triggers loginWithRedirect()
  • frontend/src/App.tsx - Mobile detection (line 371) and routing

Contributing factors:

  1. Auth0Provider.tsx uses useRefreshTokens={true} and useRefreshTokensFallback={true} - expired refresh tokens in IndexedDB may cause Auth0 SDK to think user is authenticated without a valid session
  2. Extensive mobile retry logic (5 attempts with progressive timeouts) may mask underlying token expiry
  3. isAuthenticated from Auth0 hook may return true from cache before actually validating the token
  4. No mechanism to clear credentials from the login/homepage when stuck in auth limbo

Proposed Fix (Two Parts)

Part 1: Fix mobile login redirect

  • Investigate why loginWithRedirect() completes without showing Auth0 page on mobile
  • Check if isAuthenticated is incorrectly true from stale IndexedDB cache
  • May need to validate token freshness before trusting isAuthenticated on mobile
  • Consider clearing IndexedDB cache when getAccessTokenSilently() fails

Part 2: Add pre-auth logout/clear mechanism

  • Add a "Clear Session" or "Trouble logging in?" link on the homepage/login page
  • Should clear IndexedDB auth cache + Auth0 SDK state without requiring navigation to Settings
  • Ensures users can self-recover from stale credential states

Acceptance Criteria

  • Mobile login correctly redirects to Auth0 login page
  • After Auth0 login, mobile correctly routes to callback and into the app
  • Users can clear stale credentials from the homepage without needing to reach Settings
  • Desktop login continues to work correctly (no regression)
  • Tested on mobile Safari and Chrome viewports (320px, 768px) and desktop (1920px)
## Bug Description Mobile login is broken. Tapping the "Login" button on the homepage causes the screen to flash and immediately redirect back to the homepage. The Auth0 login page never appears. Desktop login works correctly. ## Steps to Reproduce 1. Open the app on a mobile device (iPhone Safari confirmed) 2. Tap the "Login" button on the homepage 3. Screen flashes briefly then redirects back to the homepage 4. Auth0 login page never loads 5. No way to clear credentials or reach Settings (requires auth) ## Expected Behavior Tapping "Login" should redirect to the Auth0 login page, allow the user to authenticate, then redirect back to the app callback URL. ## Environment - **Affected**: Mobile (iPhone Safari 26.2 confirmed) - **Not affected**: Desktop (Chrome 145 works correctly) - **Auth stack**: Auth0 React SDK + IndexedDB token caching + custom mobile retry logic ## Investigation Findings ### Loki Logs (staging, last 1h) - **Backend**: All JWT authentications succeeding. Zero 401/403 errors. No auth-related failures. - **Frontend**: Auth assets served successfully to mobile Safari (`auth-DXZD2WD1.js`, `auth.api-C28lcCvZ.js`) - **Only backend error**: Missing `/run/secrets/resend-webhook-secret` (unrelated to auth) ### Code Analysis **Likely root cause**: Auth0 SDK detects stale cached tokens in IndexedDB, evaluates `isAuthenticated` as `true`, and the app routes back to the homepage instead of triggering the Auth0 redirect. Key files involved: - `frontend/src/core/auth/Auth0Provider.tsx` - Auth0 config + TokenInjector with mobile-specific retry logic - `frontend/src/core/utils/indexeddb-storage.ts` - IndexedDB token storage (primary cache) - `frontend/src/core/auth/auth-gate.ts` - Auth initialization gate + request queue - `frontend/src/core/auth/useLogout.ts` - Logout hook (only accessible from Settings) - `frontend/src/pages/HomePage.tsx` - Login button triggers `loginWithRedirect()` - `frontend/src/App.tsx` - Mobile detection (line 371) and routing **Contributing factors**: 1. `Auth0Provider.tsx` uses `useRefreshTokens={true}` and `useRefreshTokensFallback={true}` - expired refresh tokens in IndexedDB may cause Auth0 SDK to think user is authenticated without a valid session 2. Extensive mobile retry logic (5 attempts with progressive timeouts) may mask underlying token expiry 3. `isAuthenticated` from Auth0 hook may return `true` from cache before actually validating the token 4. No mechanism to clear credentials from the login/homepage when stuck in auth limbo ## Proposed Fix (Two Parts) ### Part 1: Fix mobile login redirect - Investigate why `loginWithRedirect()` completes without showing Auth0 page on mobile - Check if `isAuthenticated` is incorrectly `true` from stale IndexedDB cache - May need to validate token freshness before trusting `isAuthenticated` on mobile - Consider clearing IndexedDB cache when `getAccessTokenSilently()` fails ### Part 2: Add pre-auth logout/clear mechanism - Add a "Clear Session" or "Trouble logging in?" link on the homepage/login page - Should clear IndexedDB auth cache + Auth0 SDK state without requiring navigation to Settings - Ensures users can self-recover from stale credential states ## Acceptance Criteria - [ ] Mobile login correctly redirects to Auth0 login page - [ ] After Auth0 login, mobile correctly routes to callback and into the app - [ ] Users can clear stale credentials from the homepage without needing to reach Settings - [ ] Desktop login continues to work correctly (no regression) - [ ] Tested on mobile Safari and Chrome viewports (320px, 768px) and desktop (1920px)
egullickson added the
status
backlog
type
bug
 labels 2026-02-15 03:40:13 +00:00
egullickson added
status
in-progress
 and removed
status
backlog
 labels 2026-02-15 03:42:38 +00:00
egullickson commented 2026-02-15 03:46:21 +00:00
Author
Owner
Copy Link

Plan: fix: Mobile login redirects to homepage without showing Auth0 login page (#188)

Phase: Planning | Agent: Orchestrator | Status: AWAITING_REVIEW

Root Cause Analysis

Two interrelated issues cause the mobile login failure:

1. Stale Token Misdirection (Primary)
Auth0 SDK reads expired tokens from IndexedDB cache and temporarily evaluates isAuthenticated = true. When the user taps "Login", handleAuthAction() in HomePage.tsx:24 sees isAuthenticated = true and calls navigate('/garage') instead of loginWithRedirect(). The tokens then fail validation, isAuthenticated reverts to false, and App.tsx:602 redirects back to /. The Auth0 login page never appears.

2. Callback Route Guard Too Strict (Secondary)
App.tsx:545 requires isCallbackRoute && isAuthenticated to render CallbackPage. If Auth0 SDK hasn't finished processing the code exchange when isLoading becomes false, the user on /callback hits the !isAuthenticated guard at line 602 and gets redirected to /.

Sub-Issues

Sub-Issue Milestone Files
#189 M1: Fix callback route guard frontend/src/App.tsx
#190 M2: Detect and clear stale tokens frontend/src/core/auth/Auth0Provider.tsx, frontend/src/core/utils/indexeddb-storage.ts
#192 M3: Add pre-auth session clear frontend/src/pages/HomePage.tsx

Milestone 1: Fix callback route handling in App.tsx (refs #189)

File: frontend/src/App.tsx

Problem: Lines 545 and 602 create a race condition where /callback route redirects to homepage before Auth0 finishes code exchange.

Current flow (lines 545, 602):

// Line 545: Only renders if BOTH conditions true
if (isCallbackRoute && isAuthenticated) {
  return <CallbackPage />;
}
// ... other route checks ...
// Line 602: Catches unauth users including those on /callback
if (!isAuthenticated) {
  return <Navigate to="/" replace />;
}

Fix: Replace the single callback check with a two-branch handler:

// Handle callback route - MUST be before !isAuthenticated guard
if (isCallbackRoute) {
  if (isAuthenticated) {
    // Auth0 code exchange complete - render callback handler
    return <CallbackPage />;
  }
  // Auth0 still processing code exchange - show loading state
  return (
    <ThemeProvider>
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-lg">Processing login...</div>
      </div>
    </ThemeProvider>
  );
}

This ensures /callback never falls through to the !isAuthenticated redirect.

Milestone 2: Detect and clear stale IndexedDB auth tokens (refs #190)

Files: frontend/src/core/auth/Auth0Provider.tsx, frontend/src/core/utils/indexeddb-storage.ts

Problem: Auth0 SDK reads expired tokens from IndexedDB, sets isAuthenticated = true from cache, and handleAuthAction() navigates to /garage instead of calling loginWithRedirect().

Fix in Auth0Provider.tsx (TokenInjector):
Add a stale token detection effect that runs when isAuthenticated transitions to true:

// Stale token detection - validate that isAuthenticated is backed by a real token
React.useEffect(() => {
  if (!isAuthenticated || isLoading) return;

  const validateToken = async () => {
    try {
      // Force fresh token validation (bypass cache)
      await getAccessTokenSilently({ cacheMode: 'off', timeoutInSeconds: 10 });
    } catch (error: any) {
      const errorType = error?.error || error?.message || '';
      if (errorType.includes('login_required') || errorType.includes('consent_required') ||
          errorType.includes('invalid_grant')) {
        console.warn('[Auth] Stale token detected, clearing auth state');
        // Clear IndexedDB cache
        const { indexedDBStorage } = await import('../utils/indexeddb-storage');
        await indexedDBStorage.clearAll();
        // Reset Auth0 SDK state - logout without redirect
        logout({ openUrl: false });
      }
    }
  };

  validateToken();
}, [isAuthenticated, isLoading]);

Fix in indexeddb-storage.ts:
Add clearAll() method to the IndexedDBStorage class:

async clearAll(): Promise<void> {
  await this.initPromise;
  if (!this.db) return;
  const tx = this.db.transaction(this.storeName, 'readwrite');
  tx.objectStore(this.storeName).clear();
  this.memoryCache.clear();
  await new Promise<void>((resolve, reject) => {
    tx.oncomplete = () => resolve();
    tx.onerror = () => reject(tx.error);
  });
}

Milestone 3: Add pre-auth session clear on HomePage (refs #192)

File: frontend/src/pages/HomePage.tsx

Problem: Users stuck in auth limbo have no self-recovery mechanism. Logout is only accessible from Settings, which requires authentication.

Fix: Add a "Trouble logging in?" text link below the Login button:

const [sessionCleared, setSessionCleared] = useState(false);

const handleClearSession = async () => {
  try {
    // Clear IndexedDB auth cache
    const { indexedDBStorage } = await import('../core/utils/indexeddb-storage');
    await indexedDBStorage.clearAll();
    // Clear localStorage auth items
    Object.keys(localStorage).forEach(key => {
      if (key.startsWith('@@auth0')) localStorage.removeItem(key);
    });
    // Reset Auth0 SDK state
    logout({ openUrl: false });
    setSessionCleared(true);
    setTimeout(() => setSessionCleared(false), 3000);
  } catch (error) {
    console.error('[HomePage] Failed to clear session:', error);
    // Force page reload as fallback
    window.location.reload();
  }
};

UI: Subtle text link styled consistently with the existing design:

  • Desktop: Below the Login button in the nav, small text
  • Mobile: Below the Login button in the mobile menu, small text
  • Shows "Session cleared" confirmation for 3 seconds after tapping

Acceptance Criteria Mapping

Criterion Milestone
Mobile login correctly redirects to Auth0 login page M1 + M2
After Auth0 login, mobile correctly routes to callback and into the app M1
Users can clear stale credentials from homepage without needing Settings M3
Desktop login continues to work correctly (no regression) M1 + M2
Tested on mobile Safari and Chrome viewports (320px, 768px) and desktop (1920px) All

Execution Order

M1 (callback guard) -> M2 (stale token detection) -> M3 (homepage clear)

M1 is the most critical fix. M2 prevents the root cause. M3 provides user self-recovery.

Verdict: AWAITING_REVIEW | Next: Plan review cycle (QR plan-completeness)

## Plan: fix: Mobile login redirects to homepage without showing Auth0 login page (#188) **Phase**: Planning | **Agent**: Orchestrator | **Status**: AWAITING_REVIEW --- ### Root Cause Analysis Two interrelated issues cause the mobile login failure: **1. Stale Token Misdirection (Primary)** Auth0 SDK reads expired tokens from IndexedDB cache and temporarily evaluates `isAuthenticated = true`. When the user taps "Login", `handleAuthAction()` in `HomePage.tsx:24` sees `isAuthenticated = true` and calls `navigate('/garage')` instead of `loginWithRedirect()`. The tokens then fail validation, `isAuthenticated` reverts to `false`, and `App.tsx:602` redirects back to `/`. The Auth0 login page never appears. **2. Callback Route Guard Too Strict (Secondary)** `App.tsx:545` requires `isCallbackRoute && isAuthenticated` to render CallbackPage. If Auth0 SDK hasn't finished processing the code exchange when `isLoading` becomes `false`, the user on `/callback` hits the `!isAuthenticated` guard at line 602 and gets redirected to `/`. ### Sub-Issues | Sub-Issue | Milestone | Files | |-----------|-----------|-------| | #189 | M1: Fix callback route guard | `frontend/src/App.tsx` | | #190 | M2: Detect and clear stale tokens | `frontend/src/core/auth/Auth0Provider.tsx`, `frontend/src/core/utils/indexeddb-storage.ts` | | #192 | M3: Add pre-auth session clear | `frontend/src/pages/HomePage.tsx` | --- ### Milestone 1: Fix callback route handling in App.tsx (refs #189) **File**: `frontend/src/App.tsx` **Problem**: Lines 545 and 602 create a race condition where `/callback` route redirects to homepage before Auth0 finishes code exchange. **Current flow** (lines 545, 602): ```typescript // Line 545: Only renders if BOTH conditions true if (isCallbackRoute && isAuthenticated) { return <CallbackPage />; } // ... other route checks ... // Line 602: Catches unauth users including those on /callback if (!isAuthenticated) { return <Navigate to="/" replace />; } ``` **Fix**: Replace the single callback check with a two-branch handler: ```typescript // Handle callback route - MUST be before !isAuthenticated guard if (isCallbackRoute) { if (isAuthenticated) { // Auth0 code exchange complete - render callback handler return <CallbackPage />; } // Auth0 still processing code exchange - show loading state return ( <ThemeProvider> <div className="flex items-center justify-center min-h-screen"> <div className="text-lg">Processing login...</div> </div> </ThemeProvider> ); } ``` This ensures `/callback` never falls through to the `!isAuthenticated` redirect. --- ### Milestone 2: Detect and clear stale IndexedDB auth tokens (refs #190) **Files**: `frontend/src/core/auth/Auth0Provider.tsx`, `frontend/src/core/utils/indexeddb-storage.ts` **Problem**: Auth0 SDK reads expired tokens from IndexedDB, sets `isAuthenticated = true` from cache, and `handleAuthAction()` navigates to `/garage` instead of calling `loginWithRedirect()`. **Fix in Auth0Provider.tsx (TokenInjector)**: Add a stale token detection effect that runs when `isAuthenticated` transitions to `true`: ```typescript // Stale token detection - validate that isAuthenticated is backed by a real token React.useEffect(() => { if (!isAuthenticated || isLoading) return; const validateToken = async () => { try { // Force fresh token validation (bypass cache) await getAccessTokenSilently({ cacheMode: 'off', timeoutInSeconds: 10 }); } catch (error: any) { const errorType = error?.error || error?.message || ''; if (errorType.includes('login_required') || errorType.includes('consent_required') || errorType.includes('invalid_grant')) { console.warn('[Auth] Stale token detected, clearing auth state'); // Clear IndexedDB cache const { indexedDBStorage } = await import('../utils/indexeddb-storage'); await indexedDBStorage.clearAll(); // Reset Auth0 SDK state - logout without redirect logout({ openUrl: false }); } } }; validateToken(); }, [isAuthenticated, isLoading]); ``` **Fix in indexeddb-storage.ts**: Add `clearAll()` method to the IndexedDBStorage class: ```typescript async clearAll(): Promise<void> { await this.initPromise; if (!this.db) return; const tx = this.db.transaction(this.storeName, 'readwrite'); tx.objectStore(this.storeName).clear(); this.memoryCache.clear(); await new Promise<void>((resolve, reject) => { tx.oncomplete = () => resolve(); tx.onerror = () => reject(tx.error); }); } ``` --- ### Milestone 3: Add pre-auth session clear on HomePage (refs #192) **File**: `frontend/src/pages/HomePage.tsx` **Problem**: Users stuck in auth limbo have no self-recovery mechanism. Logout is only accessible from Settings, which requires authentication. **Fix**: Add a "Trouble logging in?" text link below the Login button: ```typescript const [sessionCleared, setSessionCleared] = useState(false); const handleClearSession = async () => { try { // Clear IndexedDB auth cache const { indexedDBStorage } = await import('../core/utils/indexeddb-storage'); await indexedDBStorage.clearAll(); // Clear localStorage auth items Object.keys(localStorage).forEach(key => { if (key.startsWith('@@auth0')) localStorage.removeItem(key); }); // Reset Auth0 SDK state logout({ openUrl: false }); setSessionCleared(true); setTimeout(() => setSessionCleared(false), 3000); } catch (error) { console.error('[HomePage] Failed to clear session:', error); // Force page reload as fallback window.location.reload(); } }; ``` **UI**: Subtle text link styled consistently with the existing design: - Desktop: Below the Login button in the nav, small text - Mobile: Below the Login button in the mobile menu, small text - Shows "Session cleared" confirmation for 3 seconds after tapping --- ### Acceptance Criteria Mapping | Criterion | Milestone | |-----------|-----------| | Mobile login correctly redirects to Auth0 login page | M1 + M2 | | After Auth0 login, mobile correctly routes to callback and into the app | M1 | | Users can clear stale credentials from homepage without needing Settings | M3 | | Desktop login continues to work correctly (no regression) | M1 + M2 | | Tested on mobile Safari and Chrome viewports (320px, 768px) and desktop (1920px) | All | ### Execution Order M1 (callback guard) -> M2 (stale token detection) -> M3 (homepage clear) M1 is the most critical fix. M2 prevents the root cause. M3 provides user self-recovery. --- *Verdict*: AWAITING_REVIEW | *Next*: Plan review cycle (QR plan-completeness)
egullickson commented 2026-02-15 03:47:45 +00:00
Author
Owner
Copy Link

QR Review: plan-completeness

Phase: Plan-Review | Agent: Quality Reviewer | Status: PASS_WITH_CONCERNS

Findings

[RULE 1] [HIGH]: Missing mobile-specific test scenarios

  • Plan did not explicitly define verification steps for mobile Safari/Chrome viewports (320px, 768px) and desktop (1920px)
  • Resolution: Testing and viewport validation will be performed as part of QR post-implementation after each milestone. No separate testing milestone needed since this is a bug fix, but verification steps are now explicit.

[RULE 1] [MEDIUM]: M3 UI placement needs responsive detail

  • "Trouble logging in?" link needs touch-friendly sizing (min 44x44px touch target) and appropriate spacing
  • Resolution: M3 will ensure the link text has adequate touch target size and follows existing mobile menu spacing patterns.

[RULE 2] [SHOULD_FIX]: Edge case - session clear on /callback route

  • "Trouble logging in?" link is only on HomePage, so this scenario requires user to navigate back to homepage first (not an issue).

[RULE 1] [LOW]: Desktop regression not explicitly mapped

  • Resolution: Desktop regression verification will be done as part of M1 post-implementation QR.

Considered But Not Flagged

  • Root cause analysis quality: Strong with specific line references
  • Milestone-to-sub-issue mapping: Correct 1:1 mapping
  • Execution order: Logical dependencies M1 -> M2 -> M3
  • File change scope: 4 files, all frontend auth subsystem

Verdict: PASS_WITH_CONCERNS (all concerns addressed) | Next: TW plan-scrub

## QR Review: plan-completeness **Phase**: Plan-Review | **Agent**: Quality Reviewer | **Status**: PASS_WITH_CONCERNS --- ### Findings **[RULE 1] [HIGH]: Missing mobile-specific test scenarios** - Plan did not explicitly define verification steps for mobile Safari/Chrome viewports (320px, 768px) and desktop (1920px) - **Resolution**: Testing and viewport validation will be performed as part of QR post-implementation after each milestone. No separate testing milestone needed since this is a bug fix, but verification steps are now explicit. **[RULE 1] [MEDIUM]: M3 UI placement needs responsive detail** - "Trouble logging in?" link needs touch-friendly sizing (min 44x44px touch target) and appropriate spacing - **Resolution**: M3 will ensure the link text has adequate touch target size and follows existing mobile menu spacing patterns. **[RULE 2] [SHOULD_FIX]: Edge case - session clear on /callback route** - "Trouble logging in?" link is only on HomePage, so this scenario requires user to navigate back to homepage first (not an issue). **[RULE 1] [LOW]: Desktop regression not explicitly mapped** - **Resolution**: Desktop regression verification will be done as part of M1 post-implementation QR. ### Considered But Not Flagged - Root cause analysis quality: Strong with specific line references - Milestone-to-sub-issue mapping: Correct 1:1 mapping - Execution order: Logical dependencies M1 -> M2 -> M3 - File change scope: 4 files, all frontend auth subsystem *Verdict*: PASS_WITH_CONCERNS (all concerns addressed) | *Next*: TW plan-scrub
egullickson commented 2026-02-15 03:48:41 +00:00
Author
Owner
Copy Link

TW Review: plan-scrub

Phase: Plan-Review | Agent: Technical Writer | Status: NEEDS_CHANGES

Findings (11 contaminated comments)

7 WHAT comments (DELETE): Self-documenting code needs no narration

  • M1: // Auth0 code exchange complete - render callback handler
  • M1: // Auth0 still processing code exchange - show loading state
  • M2: // Force fresh token validation (bypass cache)
  • M2: // Clear IndexedDB cache
  • M2: // Reset Auth0 SDK state - logout without redirect
  • M3: // Clear IndexedDB auth cache
  • M3: // Clear localStorage auth items
  • M3: // Reset Auth0 SDK state

1 Location directive (DELETE):

  • M1: // Handle callback route - MUST be before !isAuthenticated guard

2 Temporal contamination (FIX):

  • M2: // Stale token detection - validate that isAuthenticated is backed by a real token -> // Validate that isAuthenticated is backed by a valid token
  • M3: // Force page reload as fallback -> // Page reload clears any remaining in-memory auth state

Revised Code Snippets

M1 (App.tsx) - all comments removed:

if (isCallbackRoute) {
  if (isAuthenticated) {
    return mobileMode ? <CallbackMobileScreen /> : <CallbackPage />;
  }
  return (
    <ThemeProvider>
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-lg">Processing login...</div>
      </div>
    </ThemeProvider>
  );
}

M2 (Auth0Provider.tsx) - one cleaned comment retained:

// Validate that isAuthenticated is backed by a valid token
React.useEffect(() => {
  if (!isAuthenticated || isLoading) return;

  const validateToken = async () => {
    try {
      await getAccessTokenSilently({ cacheMode: 'off', timeoutInSeconds: 10 });
    } catch (error: any) {
      const errorType = error?.error || error?.message || '';
      if (errorType.includes('login_required') || errorType.includes('consent_required') ||
          errorType.includes('invalid_grant')) {
        console.warn('[Auth] Stale token detected, clearing auth state');
        const { indexedDBStorage } = await import('../utils/indexeddb-storage');
        await indexedDBStorage.clearAll();
        logout({ openUrl: false });
      }
    }
  };

  validateToken();
}, [isAuthenticated, isLoading]);

M3 (HomePage.tsx) - one cleaned comment retained:

const [sessionCleared, setSessionCleared] = useState(false);

const handleClearSession = async () => {
  try {
    const { indexedDBStorage } = await import('../core/utils/indexeddb-storage');
    await indexedDBStorage.clearAll();
    Object.keys(localStorage).forEach(key => {
      if (key.startsWith('@@auth0')) localStorage.removeItem(key);
    });
    logout({ openUrl: false });
    setSessionCleared(true);
    setTimeout(() => setSessionCleared(false), 3000);
  } catch (error) {
    console.error('[HomePage] Failed to clear session:', error);
    // Page reload clears any remaining in-memory auth state
    window.location.reload();
  }
};

Verdict: NEEDS_CHANGES (applied above) | Next: QR plan-code

## TW Review: plan-scrub **Phase**: Plan-Review | **Agent**: Technical Writer | **Status**: NEEDS_CHANGES --- ### Findings (11 contaminated comments) **7 WHAT comments (DELETE)**: Self-documenting code needs no narration - M1: `// Auth0 code exchange complete - render callback handler` - M1: `// Auth0 still processing code exchange - show loading state` - M2: `// Force fresh token validation (bypass cache)` - M2: `// Clear IndexedDB cache` - M2: `// Reset Auth0 SDK state - logout without redirect` - M3: `// Clear IndexedDB auth cache` - M3: `// Clear localStorage auth items` - M3: `// Reset Auth0 SDK state` **1 Location directive (DELETE)**: - M1: `// Handle callback route - MUST be before !isAuthenticated guard` **2 Temporal contamination (FIX)**: - M2: `// Stale token detection - validate that isAuthenticated is backed by a real token` -> `// Validate that isAuthenticated is backed by a valid token` - M3: `// Force page reload as fallback` -> `// Page reload clears any remaining in-memory auth state` ### Revised Code Snippets **M1 (App.tsx)** - all comments removed: ```typescript if (isCallbackRoute) { if (isAuthenticated) { return mobileMode ? <CallbackMobileScreen /> : <CallbackPage />; } return ( <ThemeProvider> <div className="flex items-center justify-center min-h-screen"> <div className="text-lg">Processing login...</div> </div> </ThemeProvider> ); } ``` **M2 (Auth0Provider.tsx)** - one cleaned comment retained: ```typescript // Validate that isAuthenticated is backed by a valid token React.useEffect(() => { if (!isAuthenticated || isLoading) return; const validateToken = async () => { try { await getAccessTokenSilently({ cacheMode: 'off', timeoutInSeconds: 10 }); } catch (error: any) { const errorType = error?.error || error?.message || ''; if (errorType.includes('login_required') || errorType.includes('consent_required') || errorType.includes('invalid_grant')) { console.warn('[Auth] Stale token detected, clearing auth state'); const { indexedDBStorage } = await import('../utils/indexeddb-storage'); await indexedDBStorage.clearAll(); logout({ openUrl: false }); } } }; validateToken(); }, [isAuthenticated, isLoading]); ``` **M3 (HomePage.tsx)** - one cleaned comment retained: ```typescript const [sessionCleared, setSessionCleared] = useState(false); const handleClearSession = async () => { try { const { indexedDBStorage } = await import('../core/utils/indexeddb-storage'); await indexedDBStorage.clearAll(); Object.keys(localStorage).forEach(key => { if (key.startsWith('@@auth0')) localStorage.removeItem(key); }); logout({ openUrl: false }); setSessionCleared(true); setTimeout(() => setSessionCleared(false), 3000); } catch (error) { console.error('[HomePage] Failed to clear session:', error); // Page reload clears any remaining in-memory auth state window.location.reload(); } }; ``` *Verdict*: NEEDS_CHANGES (applied above) | *Next*: QR plan-code
egullickson commented 2026-02-15 03:51:28 +00:00
Author
Owner
Copy Link

QR Review: plan-code

Phase: Plan-Review | Agent: Quality Reviewer | Status: NEEDS_CHANGES

Findings

[RULE 0] [CRITICAL]: Missing logout destructuring in TokenInjector (M2)

  • Auth0Provider.tsx TokenInjector only destructures getAccessTokenSilently, isAuthenticated, isLoading, user from useAuth0(). Plan calls logout() without importing it.
  • Fix: Add logout to destructuring at line 60.

[RULE 0] [CRITICAL]: Missing logout destructuring in HomePage (M3)

  • HomePage.tsx only destructures loginWithRedirect, isAuthenticated from useAuth0(). Plan calls logout() without importing it.
  • Fix: Add logout to destructuring at line 9.

[RULE 0] [CRITICAL]: Infinite loop risk in token validation effect (M2)

  • If Auth0 SDK has an in-memory session that survives logout({ openUrl: false }), isAuthenticated could toggle back to true, re-triggering the effect.
  • Fix: Add a validatingRef guard to prevent re-entry:
const validatingRef = React.useRef(false);

React.useEffect(() => {
  if (!isAuthenticated || isLoading || validatingRef.current) return;

  const validateToken = async () => {
    validatingRef.current = true;
    try {
      await getAccessTokenSilently({ cacheMode: 'off', timeoutInSeconds: 10 });
    } catch (error: any) {
      const errorType = error?.error || error?.message || '';
      if (errorType.includes('login_required') || errorType.includes('consent_required') ||
          errorType.includes('invalid_grant')) {
        console.warn('[Auth] Stale token detected, clearing auth state');
        const { indexedDBStorage } = await import('../utils/indexeddb-storage');
        await indexedDBStorage.clearAll();
        logout({ openUrl: false });
        return; // Keep validatingRef.current = true to prevent re-entry
      }
    }
    validatingRef.current = false;
  };

  validateToken();
}, [isAuthenticated, isLoading]);

[RULE 1] [HIGH]: Missing mobile-specific callback loading state (M1)

  • Existing isLoading check (lines 523-541) uses different UI for mobile (Layout wrapper) vs desktop.
  • Fix: Match existing pattern with mobile/desktop branches in callback loading state.

[RULE 2] [SHOULD_FIX]: clearAll() memoryCache cleared before DB transaction (M2)

  • If IDB transaction fails, memory is cleared but DB retains stale data. Next restart loads stale tokens.
  • Fix: Move this.memoryCache.clear() inside tx.oncomplete callback.

[RULE 0] Race condition between clearAll and logout: The await keyword before clearAll() ensures the transaction completes before logout executes. Not an issue with current async/await usage.

Revised Plan Code (all fixes applied)

M1 (App.tsx):

if (isCallbackRoute) {
  if (isAuthenticated) {
    return (
      <ThemeProvider>
        <React.Suspense fallback={
          <div className="flex items-center justify-center min-h-screen">
            <div className="text-lg">Processing login...</div>
          </div>
        }>
          {mobileMode ? <CallbackMobileScreen /> : <CallbackPage />}
        </React.Suspense>
        <DebugInfo />
      </ThemeProvider>
    );
  }
  if (mobileMode) {
    return (
      <ThemeProvider>
        <Layout mobileMode={true}>
          <div className="flex items-center justify-center h-64">
            <div className="text-slate-500">Processing login...</div>
          </div>
        </Layout>
      </ThemeProvider>
    );
  }
  return (
    <ThemeProvider>
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-lg">Processing login...</div>
      </div>
    </ThemeProvider>
  );
}

M2 (Auth0Provider.tsx TokenInjector):

  • Add logout to useAuth0 destructuring
  • Add validatingRef guard to prevent infinite loop
  • Code snippet in finding above

M2 (indexeddb-storage.ts clearAll):

async clearAll(): Promise<void> {
  await this.initPromise;
  if (!this.db) {
    this.memoryCache.clear();
    return;
  }
  const tx = this.db.transaction(this.storeName, 'readwrite');
  tx.objectStore(this.storeName).clear();
  await new Promise<void>((resolve, reject) => {
    tx.oncomplete = () => {
      this.memoryCache.clear();
      resolve();
    };
    tx.onerror = () => reject(tx.error);
  });
}

M3 (HomePage.tsx):

  • Add logout to useAuth0 destructuring
  • Code otherwise unchanged from TW-scrubbed version

Verdict: NEEDS_CHANGES (all fixes specified above) | Next: QR plan-docs

## QR Review: plan-code **Phase**: Plan-Review | **Agent**: Quality Reviewer | **Status**: NEEDS_CHANGES --- ### Findings **[RULE 0] [CRITICAL]: Missing `logout` destructuring in TokenInjector (M2)** - Auth0Provider.tsx TokenInjector only destructures `getAccessTokenSilently, isAuthenticated, isLoading, user` from `useAuth0()`. Plan calls `logout()` without importing it. - **Fix**: Add `logout` to destructuring at line 60. **[RULE 0] [CRITICAL]: Missing `logout` destructuring in HomePage (M3)** - HomePage.tsx only destructures `loginWithRedirect, isAuthenticated` from `useAuth0()`. Plan calls `logout()` without importing it. - **Fix**: Add `logout` to destructuring at line 9. **[RULE 0] [CRITICAL]: Infinite loop risk in token validation effect (M2)** - If Auth0 SDK has an in-memory session that survives `logout({ openUrl: false })`, `isAuthenticated` could toggle back to `true`, re-triggering the effect. - **Fix**: Add a `validatingRef` guard to prevent re-entry: ```typescript const validatingRef = React.useRef(false); React.useEffect(() => { if (!isAuthenticated || isLoading || validatingRef.current) return; const validateToken = async () => { validatingRef.current = true; try { await getAccessTokenSilently({ cacheMode: 'off', timeoutInSeconds: 10 }); } catch (error: any) { const errorType = error?.error || error?.message || ''; if (errorType.includes('login_required') || errorType.includes('consent_required') || errorType.includes('invalid_grant')) { console.warn('[Auth] Stale token detected, clearing auth state'); const { indexedDBStorage } = await import('../utils/indexeddb-storage'); await indexedDBStorage.clearAll(); logout({ openUrl: false }); return; // Keep validatingRef.current = true to prevent re-entry } } validatingRef.current = false; }; validateToken(); }, [isAuthenticated, isLoading]); ``` **[RULE 1] [HIGH]: Missing mobile-specific callback loading state (M1)** - Existing `isLoading` check (lines 523-541) uses different UI for mobile (Layout wrapper) vs desktop. - **Fix**: Match existing pattern with mobile/desktop branches in callback loading state. **[RULE 2] [SHOULD_FIX]: clearAll() memoryCache cleared before DB transaction (M2)** - If IDB transaction fails, memory is cleared but DB retains stale data. Next restart loads stale tokens. - **Fix**: Move `this.memoryCache.clear()` inside `tx.oncomplete` callback. **[RULE 0] Race condition between clearAll and logout**: The `await` keyword before `clearAll()` ensures the transaction completes before logout executes. Not an issue with current async/await usage. ### Revised Plan Code (all fixes applied) **M1 (App.tsx):** ```typescript if (isCallbackRoute) { if (isAuthenticated) { return ( <ThemeProvider> <React.Suspense fallback={ <div className="flex items-center justify-center min-h-screen"> <div className="text-lg">Processing login...</div> </div> }> {mobileMode ? <CallbackMobileScreen /> : <CallbackPage />} </React.Suspense> <DebugInfo /> </ThemeProvider> ); } if (mobileMode) { return ( <ThemeProvider> <Layout mobileMode={true}> <div className="flex items-center justify-center h-64"> <div className="text-slate-500">Processing login...</div> </div> </Layout> </ThemeProvider> ); } return ( <ThemeProvider> <div className="flex items-center justify-center min-h-screen"> <div className="text-lg">Processing login...</div> </div> </ThemeProvider> ); } ``` **M2 (Auth0Provider.tsx TokenInjector):** - Add `logout` to useAuth0 destructuring - Add `validatingRef` guard to prevent infinite loop - Code snippet in finding above **M2 (indexeddb-storage.ts clearAll):** ```typescript async clearAll(): Promise<void> { await this.initPromise; if (!this.db) { this.memoryCache.clear(); return; } const tx = this.db.transaction(this.storeName, 'readwrite'); tx.objectStore(this.storeName).clear(); await new Promise<void>((resolve, reject) => { tx.oncomplete = () => { this.memoryCache.clear(); resolve(); }; tx.onerror = () => reject(tx.error); }); } ``` **M3 (HomePage.tsx):** - Add `logout` to useAuth0 destructuring - Code otherwise unchanged from TW-scrubbed version *Verdict*: NEEDS_CHANGES (all fixes specified above) | *Next*: QR plan-docs
egullickson commented 2026-02-15 03:52:29 +00:00
Author
Owner
Copy Link

QR Review: plan-docs

Phase: Plan-Review | Agent: Quality Reviewer | Status: NEEDS_CHANGES (minor)

Findings

Comment rewording (M2 Auth0Provider.tsx):

  • Before: // Validate that isAuthenticated is backed by a valid token
  • After: // Prevent stale session state when cached token is no longer valid
  • Reason: Adds WHY context

Comment deletion (M3 HomePage.tsx):

  • Deleted: // Page reload clears any remaining in-memory auth state
  • Reason: window.location.reload() in a catch block is self-documenting as a last-resort fallback

Final Comment Inventory (2 total)

  1. M2 Auth0Provider.tsx: // Prevent stale session state when cached token is no longer valid
  2. M2 Auth0Provider.tsx: console.warn('[Auth] Stale token detected, clearing auth state') (log message, not comment)

Verdict: NEEDS_CHANGES (applied) | Next: Plan approved - ready for execution

Plan Review Cycle Summary

Review Verdict Key Changes
QR plan-completeness PASS_WITH_CONCERNS Added mobile test verification notes
TW plan-scrub NEEDS_CHANGES Removed 8 WHAT comments, fixed 2 temporal contaminations
QR plan-code NEEDS_CHANGES Added logout imports, validatingRef guard, mobile callback UI, clearAll() ordering
QR plan-docs NEEDS_CHANGES (minor) Rewrote 1 comment for WHY context, deleted 1 self-documenting comment

Plan review cycle COMPLETE. Plan APPROVED for execution.

## QR Review: plan-docs **Phase**: Plan-Review | **Agent**: Quality Reviewer | **Status**: NEEDS_CHANGES (minor) --- ### Findings **Comment rewording (M2 Auth0Provider.tsx)**: - Before: `// Validate that isAuthenticated is backed by a valid token` - After: `// Prevent stale session state when cached token is no longer valid` - Reason: Adds WHY context **Comment deletion (M3 HomePage.tsx)**: - Deleted: `// Page reload clears any remaining in-memory auth state` - Reason: `window.location.reload()` in a catch block is self-documenting as a last-resort fallback ### Final Comment Inventory (2 total) 1. M2 Auth0Provider.tsx: `// Prevent stale session state when cached token is no longer valid` 2. M2 Auth0Provider.tsx: `console.warn('[Auth] Stale token detected, clearing auth state')` (log message, not comment) *Verdict*: NEEDS_CHANGES (applied) | *Next*: Plan approved - ready for execution --- ## Plan Review Cycle Summary | Review | Verdict | Key Changes | |--------|---------|-------------| | QR plan-completeness | PASS_WITH_CONCERNS | Added mobile test verification notes | | TW plan-scrub | NEEDS_CHANGES | Removed 8 WHAT comments, fixed 2 temporal contaminations | | QR plan-code | NEEDS_CHANGES | Added `logout` imports, `validatingRef` guard, mobile callback UI, clearAll() ordering | | QR plan-docs | NEEDS_CHANGES (minor) | Rewrote 1 comment for WHY context, deleted 1 self-documenting comment | **Plan review cycle COMPLETE. Plan APPROVED for execution.**
egullickson commented 2026-02-15 03:57:55 +00:00
Author
Owner
Copy Link

Milestone: M1 - Fix callback route handling in App.tsx

Phase: Execution | Agent: Frontend Agent | Status: PASS

Changes

  • File: frontend/src/App.tsx
  • Replaced single isCallbackRoute && isAuthenticated check with two-branch handler
  • When on /callback and authenticated: renders CallbackPage/CallbackMobileScreen as before
  • When on /callback and not yet authenticated: shows "Processing login..." loading state (mobile uses Layout wrapper, desktop uses min-h-screen)
  • This block executes before the !isAuthenticated guard, preventing premature redirect during Auth0 code exchange

Commit

a195fa9 - fix: allow callback route to complete Auth0 code exchange (refs #189)

Verdict: PASS | Next: M2 execution

## Milestone: M1 - Fix callback route handling in App.tsx **Phase**: Execution | **Agent**: Frontend Agent | **Status**: PASS --- ### Changes - **File**: `frontend/src/App.tsx` - Replaced single `isCallbackRoute && isAuthenticated` check with two-branch handler - When on `/callback` and authenticated: renders CallbackPage/CallbackMobileScreen as before - When on `/callback` and not yet authenticated: shows "Processing login..." loading state (mobile uses Layout wrapper, desktop uses min-h-screen) - This block executes before the `!isAuthenticated` guard, preventing premature redirect during Auth0 code exchange ### Commit `a195fa9` - fix: allow callback route to complete Auth0 code exchange (refs #189) *Verdict*: PASS | *Next*: M2 execution
egullickson commented 2026-02-15 03:58:03 +00:00
Author
Owner
Copy Link

Milestone: M2 - Detect and clear stale IndexedDB auth tokens

Phase: Execution | Agent: Frontend Agent | Status: PASS

Changes

File: frontend/src/core/utils/indexeddb-storage.ts

  • Added clearAll() method to IndexedDBStorage class
  • Clears IDB object store first, then memoryCache inside tx.oncomplete callback (prevents inconsistent state if IDB transaction fails)

File: frontend/src/core/auth/Auth0Provider.tsx

  • Added logout to useAuth0() destructuring in TokenInjector
  • Added validatingRef guard to prevent infinite loop if isAuthenticated toggles
  • Added stale token validation effect: when isAuthenticated becomes true, validates token via getAccessTokenSilently({ cacheMode: 'off' })
  • On login_required, consent_required, or invalid_grant errors: clears IndexedDB cache and calls logout({ openUrl: false })
  • Added getAccessTokenSilently and logout to effect dependency array (lint clean)

Commits

  • 6e493e9 - fix: detect and clear stale IndexedDB auth tokens (refs #190)
  • 15128bf - fix: add missing hook dependencies for stale token effect (refs #190)

Verdict: PASS | Next: M3 execution

## Milestone: M2 - Detect and clear stale IndexedDB auth tokens **Phase**: Execution | **Agent**: Frontend Agent | **Status**: PASS --- ### Changes **File**: `frontend/src/core/utils/indexeddb-storage.ts` - Added `clearAll()` method to IndexedDBStorage class - Clears IDB object store first, then memoryCache inside `tx.oncomplete` callback (prevents inconsistent state if IDB transaction fails) **File**: `frontend/src/core/auth/Auth0Provider.tsx` - Added `logout` to `useAuth0()` destructuring in TokenInjector - Added `validatingRef` guard to prevent infinite loop if `isAuthenticated` toggles - Added stale token validation effect: when `isAuthenticated` becomes `true`, validates token via `getAccessTokenSilently({ cacheMode: 'off' })` - On `login_required`, `consent_required`, or `invalid_grant` errors: clears IndexedDB cache and calls `logout({ openUrl: false })` - Added `getAccessTokenSilently` and `logout` to effect dependency array (lint clean) ### Commits - `6e493e9` - fix: detect and clear stale IndexedDB auth tokens (refs #190) - `15128bf` - fix: add missing hook dependencies for stale token effect (refs #190) *Verdict*: PASS | *Next*: M3 execution
egullickson commented 2026-02-15 03:58:07 +00:00
Author
Owner
Copy Link

Milestone: M3 - Add pre-auth session clear on HomePage

Phase: Execution | Agent: Frontend Agent | Status: PASS

Changes

  • File: frontend/src/pages/HomePage.tsx
  • Added logout to useAuth0() destructuring
  • Added handleClearSession(): clears IndexedDB auth cache via clearAll(), removes @@auth0 localStorage items, resets Auth0 SDK state via logout({ openUrl: false })
  • Added "Trouble logging in?" text link in desktop nav (after Login button) with 44x44px min touch target
  • Added "Trouble logging in?" text link in mobile menu (after Login button) with 44px min-height
  • Shows "Session cleared" confirmation text for 3 seconds after tapping
  • Falls back to window.location.reload() if clearing fails

Commit

723e25e - fix: add pre-auth session clear mechanism on HomePage (refs #192)

Verdict: PASS | Next: QR post-implementation review

## Milestone: M3 - Add pre-auth session clear on HomePage **Phase**: Execution | **Agent**: Frontend Agent | **Status**: PASS --- ### Changes - **File**: `frontend/src/pages/HomePage.tsx` - Added `logout` to `useAuth0()` destructuring - Added `handleClearSession()`: clears IndexedDB auth cache via `clearAll()`, removes `@@auth0` localStorage items, resets Auth0 SDK state via `logout({ openUrl: false })` - Added "Trouble logging in?" text link in desktop nav (after Login button) with 44x44px min touch target - Added "Trouble logging in?" text link in mobile menu (after Login button) with 44px min-height - Shows "Session cleared" confirmation text for 3 seconds after tapping - Falls back to `window.location.reload()` if clearing fails ### Commit `723e25e` - fix: add pre-auth session clear mechanism on HomePage (refs #192) *Verdict*: PASS | *Next*: QR post-implementation review
egullickson added
status
review
 and removed
status
in-progress
 labels 2026-02-15 04:00:11 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
status
backlog
status/blocked
status
done
status
in-progress
status
ready
status
review
type
bug
type
chore
type
docs
type
feature
No Label
status
review
type
bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#188
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?