All work

Notiiv

Consolidating repeated authentication and API handling across apps

Context
Company project
Scope
Shared BFF and Query infrastructure, operational interfaces, and authentication, sharing, and webview edge conditions
Stack
React, Next.js, TypeScript, TanStack Query, Zod, React Hook Form, Vitest, WebAuthn, BFF Proxy, i18n, DeepLink, pnpm workspace, Turborepo

The same authentication boundary was maintained in several apps

Notiiv includes an admin console, owner dashboard, status app, and support site. I maintained shared BFF and Query infrastructure and improved operational interfaces and browser boundaries.

Separate proxies duplicated path checks, cookie injection, refresh, and error handling. Fixing one app could leave another behind. A single rigid proxy would introduce a different problem: app-specific login responses and uploads would become entangled with shared infrastructure.

Operators also encountered mismatched FAQ previews, spreadsheet-dependent customer entry, webview download restrictions, and PDF page navigation during zoom.

Separate shared request handling from product policy

One pipeline, app-owned response policy

I consolidated path validation, URL construction, authentication injection, and refresh-and-retry handling in createSimpleBffProxy. The owner app moved away from its separate request and response pipeline.

Login and signup responses still use an app-owned hook to move returned tokens into cookies. Public paths do not receive an old session token or trigger refresh. JSON and upload routes share the pipeline with different body, content-type, and timeout limits.

A protected request receiving 401 and a failed login returning 401 require different behavior. Cookie injection and refresh also depend on each other, so invalid option combinations fail when the proxy is created instead of leaving stale sessions to trigger navigation loops.

Verify that rejection prevents upstream effects

Path and origin tests check both the response and whether the backend was called: invalid segments return 400, disallowed prefixes return 404, and cross-origin state changes return 403 without forwarding.

The redirect helper rejects protocol-relative external targets as well as obvious external URLs. Merely starting with a slash is insufficient. QueryClient factories retain per-app overrides, and Zod distinguishes TypeScript assumptions from actual API response validity.

Improve the task operators need to finish

I aligned FAQ preview and support rendering, improved editor error and focus states, and connected unsaved-change protection to form state so successful saves could still navigate.

Direct customer input, empty-row checks, phone formatting, and optimistic image deletion support operational tasks without requiring every small entry to pass through a spreadsheet.

Treat shared pages and mobile browsers as distinct conditions

Calendar sharing moved from inferring dates from titles to explicit backend follow-up events displayed on the share card and exported together. Handling includes time zones, invalid dates, escaping, and long lines.

Webview guidance and browser fallbacks cover unsupported downloads and APIs. PDF interaction separates zoom from page swipes and accounts for Korean IME keyboard-event differences.

Shared boundaries with app-level verification

What changed

The owner app now uses the shared proxy while retaining login and signup response policy. QueryClient, runtime parsing, and share paths also have shared boundaries. Authored changes cover operational entry and preview behavior alongside browser-specific failures.

Regression checks for authentication boundaries

Proxy tests verify rejection status and upstream-call prevention. Refresh and owner-route tests cover authentication behavior after consolidation, keeping input validation, token renewal, and response handling on a shared verification baseline.

Trace

4 Frontend Apps
One product monorepo
13 packages
Shared API, Query, Schema, and UI foundation
Shared BFF
Shared request validation, authentication, and refresh
Actual Notiiv support screen
Notiiv · Customer support