99 lines
3.1 KiB
Markdown
99 lines
3.1 KiB
Markdown
# 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:
|
|
```javascript
|
|
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
|