LinkDesk/frontend/docs/fix-login-issue.md

Fix Login Issue - Expired JWT Tokens

Problem

You're seeing this error when trying to log in:

INFO:     127.0.0.1:58687 - "POST /auth/refresh HTTP/1.1" 401 Unauthorized
🔐 JWT decode error: Signature has expired.

This happens because the JWT refresh token stored in your browser's localStorage has expired.

Quick Fix - Option 1: Use the Clear Tokens Page

1. Open your browser and navigate to: frontend/clear-tokens.html
2. Click the "Clear Expired Tokens" button
3. Navigate to http://localhost:5173/login
4. Log in with your credentials

Quick Fix - Option 2: Clear Tokens Manually

Open your browser's Developer Console (F12) and run:

localStorage.removeItem('access_token')
localStorage.removeItem('refresh_token')
location.reload()

Quick Fix - Option 3: Clear Browser Data

1. Open Developer Tools (F12)
2. Go to Application tab (Chrome) or Storage tab (Firefox)
3. Find Local Storage → http://localhost:5173
4. Delete access_token and refresh_token
5. Refresh the page

What Was Fixed

1. Enhanced Token Validation

Added validateTokens() method to the auth store that:

• Decodes JWT tokens to check expiration
• Automatically clears tokens that are more than 7 days expired
• Prevents the app from trying to use invalid tokens

2. Improved Error Handling

Updated the API interceptor to:

• Better handle expired refresh tokens
• Prevent infinite retry loops
• Only redirect to login when appropriate
• Add logging for debugging

3. Startup Token Validation

Modified main.ts to:

• Validate tokens before initializing auth
• Clear expired tokens automatically on app startup
• Prevent 401 errors during initialization

Code Changes

frontend/src/stores/auth.ts

• Added validateTokens() method
• Improved error logging in refreshAccessToken()
• Better error handling in initializeAuth()

frontend/src/services/api.ts

• Enhanced response interceptor
• Added check to prevent retrying refresh endpoint
• Better error logging
• Improved redirect logic

frontend/src/main.ts

• Added token validation on app startup
• Calls validateTokens() before initializeAuth()

Prevention

The updated code now:

1. Validates tokens on startup - Clears expired tokens automatically
2. Better error handling - Logs errors instead of silently failing
3. Prevents retry loops - Won't retry the refresh endpoint itself
4. Graceful degradation - Clears tokens and redirects to login on failure

Testing

After clearing tokens, test the following:

1. ✅ Can log in with valid credentials
2. ✅ Access token is stored in localStorage
3. ✅ Refresh token is stored in localStorage
4. ✅ Can navigate to protected routes
5. ✅ Token refresh works when access token expires
6. ✅ Logout clears tokens properly

Future Improvements

Consider implementing:

1. Token expiration warnings - Notify users before tokens expire
2. Automatic token refresh - Refresh tokens proactively before expiration
3. Remember me - Longer-lived refresh tokens for persistent sessions
4. Session management - Server-side session tracking