Keycloak Theming

Deze pagina beschrijft hoe de Keycloak inlogpagina’s gestyled worden vanuit cowent-frontend, en hoe de gebouwde theme in cowent-keycloak terechtkomt.

Architectuur

De theming is opgezet met Keycloakify v11 — een tooling die React-componenten omzet naar een Keycloak-compatibel JAR-bestand. Dat JAR-bestand wordt in Keycloak geladen als een custom theme.


cowent-frontend/
└── apps/
    └── keycloak-theme/      ← React + Vite + Keycloakify
            ↓ CI bouwt JAR en pakt in als Docker image
ghcr.io/cowent-software/keycloak-theme:main  ← gepusht naar GHCR

cowent-keycloak/
└── Dockerfile               ← haalt JAR op via COPY --from de theme image

Waarom een aparte app in cowent-frontend?

De theme-code en UI-componenten leven bij de rest van de frontend
packages/ui (gedeelde componentenbibliotheek) kan direct hergebruikt worden
Design tokens (kleuren, typografie) zijn automatisch gesynchroniseerd
Keycloakify vereist Vite — Next.js werkt hier niet voor. De app draait dus naast de Next.js apps in het monorepo

Overzicht deploy-flow


cowent-frontend (merge naar main)
  ↓
CI bouwt keycloak-theme JAR
  ↓
CI pusht ghcr.io/cowent-software/keycloak-theme:main
  ↓
cowent-keycloak (merge naar main of handmatige trigger)
  ↓
Dockerfile doet COPY --from theme image
  ↓
Keycloak image met cowent-theme gepusht naar GHCR