Skip to content

Auth: Web dashboard — AuthContext + API interceptor #127

@EricGrill

Description

@EricGrill

Auth System — Web Step 1

Add auth state management to the React web dashboard.

New files:

  • web/src/contexts/AuthContext.tsx — user state, tokens, login/logout/refresh
  • web/src/hooks/useAuth.ts — typed access to AuthContext
  • web/src/hooks/useRequireAuth.ts — redirect to /login if unauthenticated

API interceptor (web/src/api.ts):

  • Attach Authorization: Bearer <token> to all requests
  • Intercept 401 → attempt silent refresh → retry or redirect to login
  • Access token stored in React ref (memory only, never localStorage)
  • Refresh token in HttpOnly cookie (set by backend)

On app mount:

  • Attempt silent refresh (cookie sent automatically)
  • Success → user logged in without seeing login screen
  • Failure → redirect to /login

Farm context integration:

  • On login, auto-select farm if user has exactly one
  • Filter farm picker to user's assigned farms

Depends on: Backend auth endpoints
Design doc: docs/AUTH.md

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions