Tous les projets
Design systemFrontendSécurité

Design system et socle d'authentification partagés

Un monorepo de 3 paquets publiés : UI, session SSO et BFF partagés entre les applications.

Chiffres clés

paquets publiés
3
fichiers de tests (~4 000 lignes)
28
pour la livraison
11 jours

Contexte

Dans l'écosystème applicatif d'une PME, les composants d'interface étaient copiés d'une application à l'autre et finissaient par diverger. L'authentification était dupliquée dans chaque projet.

Mon rôle

Conception, architecture, développement et publication des paquets, en autonomie complète.

Solution

Un monorepo pnpm réunit 3 paquets publiés, consommés par les applications métier. Le paquet UI définit le thème Tailwind 4 en CSS, avec tokens OKLCH et mode sombre, et fournit 23 primitives shadcn sur Base UI. S'y ajoutent des composants composés : AppShell, DataTable, SignaturePad, PeriodPicker.

Le paquet Core porte le client HTTP et un client de session SSO indépendant du framework : aucun jeton n'est exposé au JavaScript et le CSRF est géré. Le paquet BFF implémente le flux OIDC confidentiel, le back-channel logout et des sessions chiffrées au repos.

Fonctionnalités clés

  • Thème Tailwind 4 défini en CSS

    Tokens de couleur OKLCH et mode sombre, partagés entre les applications.

  • 23 primitives shadcn sur Base UI

    Une base de composants cohérente, maintenue en un seul endroit.

  • Session SSO sans jeton côté JavaScript

    Un client de session indépendant du framework, protégé contre le CSRF, avec des adaptateurs React.

  • BFF OIDC prêt à l'emploi

    Flux OIDC confidentiel, back-channel logout, cache JWKS et sessions chiffrées au repos.

Défis d'ingénierie

  1. 1

    Compatible React Server Components

    La directive "use client" est réduite au strict minimum, pour s'intégrer aux applications Next.js en App Router.

  2. 2

    Aucune logique métier dans les paquets

    Le métier vit dans les applications, ce qui garde le socle réutilisable.

  3. 3

    Double publication ESM et CJS

    Le BFF est publié dans les deux formats, et les paquets sont validés à partir de leur tarball.

  4. 4

    CI et release sans secret

    Build, lint, typecheck et tests en CI, puis publication déclenchée par un tag.

Stack technique

Frontend
React 19TypeScript 5.9Tailwind 4Base UIshadcnTanStack Table
Sécurité
OIDCBFF
Qualité
Vitest
Infra
pnpm workspacestsdownGitHub ActionsGitHub Packages

Un projet de cette envergure ?

Parlons de votre contexte : je vous dis franchement ce qui est faisable, et en combien de temps.

Discutons de votre projet
Demander un devis