Skip to content

Admin Panel Authentication Synchronization Fix

Problem

The admin panel was experiencing frequent authentication losses compared to the frontend, despite both applications supposedly using the same authentication pattern. Users would get logged out regularly while working in the admin panel, while the frontend maintained authentication properly.

Root Cause Analysis

After comparing the authentication implementations between tracker-frontend and tracker-admin, several key differences were identified:

1. Inconsistent Wake-Up Detection

  • Frontend: Comprehensive WakeUpDetector with multiple event listeners and sophisticated wake-up handling
  • Admin Panel: Simple useTokenRefresh hook with limited activity detection

2. Conflicting Token Refresh Logic

  • Admin Panel: Had a custom useTokenRefresh hook that potentially conflicted with the built-in token refresh logic in the API client
  • Frontend: Used only the built-in SessionManager and WakeUpDetector

3. Different Initialization Patterns

  • Frontend: Used a 500ms delay in auth initialization to ensure UI renders properly, with fallback timeout handling
  • Admin Panel: No delay, which could cause timing issues

4. Inconsistent Error Handling

  • Frontend: More robust error handling in response interceptors
  • Admin Panel: Less comprehensive error handling

Solution

Changes Made

1. Updated Admin Panel useAuth Hook (tracker-admin/src/hooks/useAuth.ts)

  • Removed dependency on useTokenRefresh hook
  • Added 500ms delay in auth initialization (matching frontend)
  • Added fallback timeout handling (3 seconds)
  • Improved logging with "admin panel" prefixes for better debugging
  • Simplified initialization logic to match frontend pattern

2. Enhanced Admin Panel API Client (tracker-admin/src/api/client.ts)

  • Updated WakeUpDetector logging to include "admin panel" prefixes
  • Enhanced response interceptor error handling to match frontend pattern
  • Improved error message consistency

3. Removed Conflicting Hook

  • Deleted tracker-admin/src/hooks/useTokenRefresh.ts to eliminate conflicts
  • This hook was potentially interfering with the built-in token refresh mechanisms

Key Improvements

Unified Wake-Up Detection

Both applications now use the same comprehensive wake-up detection:

  • Visibility change detection (tab switching, browser minimize/restore)
  • Window focus detection (browser window activation)
  • User activity tracking (mouse, keyboard, scroll, touch)
  • 5-minute sleep threshold detection

Consistent Session Management

Both applications now use identical SessionManager functionality:

  • Session restoration using refresh cookies
  • Proactive token refresh for expiring tokens
  • Proper error handling and fallback mechanisms

Synchronized Error Handling

Both applications now handle authentication errors consistently:

  • 401 errors trigger automatic token refresh
  • Failed refresh attempts redirect to login
  • Proper error queuing during refresh operations

Testing

To verify the fix:

  1. Open both applications in separate tabs:
  2. Frontend: http://localhost:3100

  3. Admin Panel: http://localhost:3000

  4. Test wake-up scenarios:

  5. Switch between tabs frequently
  6. Minimize/restore browser window
  7. Leave tabs inactive for 5+ minutes then return

  8. Use both applications simultaneously

  9. Monitor console logs for authentication-related messages:

  10. Look for "admin panel" prefixed messages
  11. Verify token refresh operations

  12. Check for session restoration attempts

  13. Verify persistent authentication:

  14. Both applications should maintain authentication
  15. No unexpected logouts during normal usage
  16. Smooth token refresh without user interruption

Expected Behavior

After this fix, the admin panel should:

  • Maintain authentication as reliably as the frontend
  • Automatically refresh tokens when needed
  • Handle tab wake-up scenarios properly
  • Provide consistent user experience across both applications

Monitoring

Watch for these console log patterns to confirm proper operation:

Admin panel tab wake-up detected, checking session...
Admin panel session restored successfully from refresh cookie
Admin panel user authenticated successfully: user@example.com
Admin panel received new token from backend middleware

Files Modified

  • tracker-admin/src/hooks/useAuth.ts - Updated authentication initialization
  • tracker-admin/src/api/client.ts - Enhanced wake-up detection and error handling
  • tracker-admin/src/hooks/useTokenRefresh.ts - DELETED (conflicting implementation)