# 🐛 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.