Skip to content

fix: Migrate all client fetch calls to fetchWithAuth — prevent silent 401 failures #150

@LarytheLord

Description

@LarytheLord

What

Replace all raw `fetch()` calls in client components with `fetchWithAuth()` from `lib/fetch-with-auth.ts`. This utility auto-redirects to `/login` when the server returns 401 (session expired), instead of showing a confusing error or silently failing.

Why

We found 23+ client-side fetch calls that don't handle 401 responses. When a user's session expires, they see broken UI or generic errors instead of being redirected to login. This was the root cause of the "Claim Quest doesn't work" bug.

The Fix (Already Built)

```typescript
// lib/fetch-with-auth.ts (already exists)
import { fetchWithAuth } from '@/lib/fetch-with-auth';

// Before (broken):
const response = await fetch('/api/quests/assignments', { ... });

// After (handles 401):
const response = await fetchWithAuth('/api/quests/assignments', { ... });
```

Files to Update

Every file below has at least one `await fetch(` that needs to become `await fetchWithAuth(`:

Dashboard Pages

  • `app/dashboard/quests/[id]/page.tsx` — 4 fetch calls (quest detail, assignments, claim, submit)
  • `app/dashboard/profile/page.tsx` — 1 fetch call
  • `app/dashboard/company/profile/page.tsx` — 1 fetch call
  • `app/dashboard/company/quests/[id]/page.tsx` — 4 fetch calls
  • `app/dashboard/company/quests/[id]/edit/page.tsx` — 2 fetch calls
  • `app/dashboard/company/create-quest/page.tsx` — 1 fetch call

Admin Pages

  • `app/admin/qa-queue/page.tsx` — 3 fetch calls
  • `app/admin/quests/page.tsx` — 3 fetch calls

DO NOT change these (they're public/pre-auth):

  • `app/register/page.tsx` — registration (no session yet)
  • `app/register-company/page.tsx` — registration
  • `app/forgot-password/page.tsx` — password reset
  • `app/adventurer/[username]/page.tsx` — public Guild Card

How to Do It

  1. Open each file listed above
  2. Add `import { fetchWithAuth } from '@/lib/fetch-with-auth';` at the top
  3. Replace `await fetch(` with `await fetchWithAuth(` for each authenticated API call
  4. Remove any existing manual 401 handling (the utility handles it now)
  5. Run `npx tsc --noEmit` to verify

Acceptance Criteria

  • All listed files use `fetchWithAuth` for authenticated API calls
  • Public/pre-auth pages still use regular `fetch`
  • Type-check passes
  • No behavior change for successful requests (only 401 handling improves)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingcontributor-friendlyWell-documented issue suitable for new contributorsgood first issueGood for newcomerspriorityHigh priority for project goals

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions