All projects
Design systemFrontendSecurity

Shared design system and authentication foundation

A monorepo of 3 published packages: UI, SSO session and BFF shared across apps.

Key figures

published packages
3
test files (~4,000 lines)
28
to delivery
11 days

Context

Across an SME's application ecosystem, UI components were copied from one app to the next and gradually drifted apart. Authentication was duplicated in every project as well.

My role

Design, architecture, development and publishing of the packages, fully autonomously.

Solution

A pnpm monorepo brings together 3 published packages, consumed by the business applications. The UI package defines the Tailwind 4 theme in CSS, with OKLCH tokens and dark mode, and ships 23 shadcn primitives built on Base UI. Composite components come on top: AppShell, DataTable, SignaturePad, PeriodPicker.

The Core package holds the HTTP client and a framework-agnostic SSO session client: no token is ever exposed to JavaScript and CSRF is handled. The BFF package implements the confidential OIDC flow, back-channel logout and sessions encrypted at rest.

Key features

  • Tailwind 4 theme defined in CSS

    OKLCH colour tokens and dark mode, shared across applications.

  • 23 shadcn primitives on Base UI

    A consistent component foundation, maintained in one place.

  • SSO session with no token in JavaScript

    A framework-agnostic session client with CSRF protection and React adapters.

  • Ready-to-use OIDC BFF

    Confidential OIDC flow, back-channel logout, JWKS caching and sessions encrypted at rest.

Engineering challenges

  1. 1

    React Server Components compatible

    The "use client" directive is kept to a strict minimum, so the packages fit into Next.js App Router apps.

  2. 2

    No business logic in the packages

    Business rules live in the applications, which keeps the foundation reusable.

  3. 3

    Dual ESM and CJS publishing

    The BFF ships in both module formats, and the packages are validated from their tarballs.

  4. 4

    Secret-free CI and releases

    Build, lint, typecheck and tests in CI, then publishing triggered by a tag.

Tech stack

Frontend
React 19TypeScript 5.9Tailwind 4Base UIshadcnTanStack Table
Security
OIDCBFF
Quality
Vitest
Infrastructure
pnpm workspacestsdownGitHub ActionsGitHub Packages

A project of this scale?

Let's talk about your context: I'll tell you frankly what is feasible, and how long it takes.

Let's talk about your project
Request a quote