129 lines
2.8 KiB
Markdown
129 lines
2.8 KiB
Markdown
# 🐛 Debugging Flutter Web Auth 401 Errors
|
|
|
|
## Problem
|
|
User is logged into the Flutter web app as manager, but getting 401 errors when accessing transaction sync pages.
|
|
|
|
## Quick Fixes to Try
|
|
|
|
### Fix 1: Check Token in Browser Console (QUICKEST)
|
|
|
|
Open browser DevTools console (F12) and run:
|
|
|
|
```javascript
|
|
// Check if token exists
|
|
console.log('Token:', localStorage.getItem('flutter.auth_token'));
|
|
|
|
// If no token, check alternative storage
|
|
console.log('All keys:', Object.keys(localStorage));
|
|
```
|
|
|
|
**If token is missing or null:**
|
|
- Logout and login again
|
|
- Token might have been cleared
|
|
|
|
---
|
|
|
|
### Fix 2: Force Logout and Re-login
|
|
|
|
1. Click **Logout** button
|
|
2. **Login again** with manager credentials
|
|
3. Try accessing Auto-Sync page again
|
|
|
|
This will refresh your authentication token.
|
|
|
|
---
|
|
|
|
### Fix 3: Check Browser Console for Errors
|
|
|
|
1. Open DevTools (F12)
|
|
2. Go to **Console** tab
|
|
3. Look for errors when clicking Auto-Sync
|
|
4. Share any red errors you see
|
|
|
|
---
|
|
|
|
### Fix 4: Verify Token in Network Tab
|
|
|
|
1. Open DevTools (F12)
|
|
2. Go to **Network** tab
|
|
3. Click "Auto-Sync" button
|
|
4. Click on the failed request
|
|
5. Check **Headers** section
|
|
6. Look for `Authorization: Bearer ...`
|
|
|
|
**If Authorization header is missing:**
|
|
- Token not being sent
|
|
- Logout and login again
|
|
|
|
---
|
|
|
|
## Common Causes
|
|
|
|
### 1. Token Expired
|
|
- **Solution**: Logout and login again
|
|
- Tokens expire after 24 hours
|
|
|
|
### 2. SharedPreferences Issue (Flutter Web)
|
|
- **Problem**: Web storage might not persist
|
|
- **Solution**: Use browser's localStorage directly
|
|
|
|
### 3. CORS Issue
|
|
- **Check**: Backend CORS config
|
|
- **Already configured** to allow all origins
|
|
|
|
### 4. Token Not Saved After Login
|
|
- **Check**: Did login succeed?
|
|
- **Solution**: Login again and verify
|
|
|
|
---
|
|
|
|
## Temporary Workaround
|
|
|
|
Use the standalone API tester:
|
|
```
|
|
https://chitfund.deepteklabs.com/test/api-tester.html
|
|
```
|
|
|
|
This will work independently and confirm if backend is working.
|
|
|
|
---
|
|
|
|
## Debug Steps
|
|
|
|
### Step 1: Check Token Storage
|
|
```javascript
|
|
// In browser console
|
|
console.log('Token:', localStorage.getItem('flutter.auth_token'));
|
|
```
|
|
|
|
### Step 2: If Token Exists, Check Format
|
|
```javascript
|
|
// Should start with "eyJ"
|
|
const token = localStorage.getItem('flutter.auth_token');
|
|
if (token) {
|
|
console.log('Token starts with eyJ:', token.startsWith('eyJ'));
|
|
console.log('Token length:', token.length);
|
|
}
|
|
```
|
|
|
|
### Step 3: Manual Test
|
|
```javascript
|
|
// Test API call with token
|
|
const token = localStorage.getItem('flutter.auth_token');
|
|
fetch('https://chitfund.deepteklabs.com/api/transaction-sync/review-queue', {
|
|
headers: {
|
|
'Authorization': 'Bearer ' + token,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => console.log('API Response:', data));
|
|
```
|
|
|
|
---
|
|
|
|
## Solution: Enhanced ApiService for Web
|
|
|
|
If issue persists, we need to modify the ApiService to handle web better.
|
|
|