[DRAFT] Implement Web Authentication UI

[al-imam]

Summary

• Implement web authentication UI with login and desktop auth pages
• Add authentication API client integration
• Update landing page and add authentication routing
• Add environment configuration for authentication

Files Changed

• Added desktop authentication page
• Added login page with authentication flow
• Added authentication API client for backend communication
• Updated landing page hero section
• Updated environment configuration and dependencies

Authentication Flow Architecture

flowchart LR
  subgraph C["Clients"]
    W["Web App<br/>(Next.js)"]
    D["Desktop App<br/>(Tauri)"]
  end

  subgraph S["Oiper Server (Hono)"]
    WS["Web Auth<br/>/v1/auth/web/*"]
    DS["Desktop Auth<br/>/v1/auth/desktop/*"]
    API["Protected API<br/>/v1/*"]
    WH["Webhooks<br/>/v1/webhooks/workos"]
    DB[("PostgreSQL + Prisma")]
  end

  WO["WorkOS<br/>AuthKit"]

  W -->|"1) Start login (Email/Password or Google)"| WS
  WS -->|"2) Build Auth URL + PKCE + state"| WO
  WO -->|"3) Callback with auth code"| WS
  WS -->|"4) Set sealed session cookie"| W
  W -->|"5) Session/refresh/logout (cookie + CSRF)"| WS
  WS -->|"6) Return web access JWT"| W
  W -->|"7) Bearer JWT API calls"| API

  D -->|"A) POST /desktop/start (device + PKCE challenge)"| DS
  DS -->|"B) Return verification_url"| D
  D -->|"C) Open external browser"| W
  W -->|"D) POST /desktop/confirm (while signed in)"| DS
  DS -->|"E) Generate one-time handoff code"| W
  W -->|"F) Deep link: oiper://auth/callback?request_id&handoff_code&state"| D
  D -->|"G) POST /desktop/exchange (handoff_code + code_verifier)"| DS
  DS -->|"H) Issue desktop access + rotating refresh token"| D
  D -->|"I) Save refresh token in OS secure storage"| D
  D -->|"J) Bearer desktop access token API calls"| API

  WS -->|"User/audit writes"| DB
  DS -->|"Desktop request/session writes"| DB
  API -->|"Application data reads/writes"| DB

  WO -->|"session.revoked webhook"| WH
  WH -->|"Revoke active desktop sessions"| DB

  classDef client fill:#E0F2FE,stroke:#0284C7,stroke-width:2,color:#0C4A6E;
  classDef server fill:#FEF3C7,stroke:#D97706,stroke-width:2,color:#7C2D12;
  classDef idp fill:#EDE9FE,stroke:#7C3AED,stroke-width:2,color:#4C1D95;
  classDef data fill:#DCFCE7,stroke:#16A34A,stroke-width:2,color:#14532D;

  class W,D client;
  class WS,DS,API,WH server;
  class WO idp;
  class DB data;

Loading

Test plan

• Test web authentication flow
• Test login page functionality
• Test desktop authentication page
• Test API integration
• Test authentication routing

Related PRs

• oiper-desktop: Implement Desktop Authentication System #32
• oiper-server: Implement Authentication API #1