How cloakwise-io/keycloak-custom-theme works
This is a React/TypeScript Keycloak login theme: Keycloak supplies a page context, the app dispatches it to a themed login page, and the page renders a localized authentication or account-action form that submits to Keycloak. The tree and README document broad login, registration, identity-provider, passkey, profile, and account flows. Sampled source confirms the app entry, generated dispatcher, profile form composition, and passkey submission; unsampled page wiring is represented only at the documented routing level.
Main entry points: pages Login page flows · ui UI components · KcPage.tsx Login page router · main.tsx React entry
Components 15
Theme runtime
- React entry
src/main.tsx - Context dispatcher
src/kc.gen.tsx - Login context
src/login/KcContext.ts - Login page router
src/login/KcPage.tsx
Login and account flows
- Login page flows
src/login/pages - Profile form fields
src/login/UserProfileFormFields.tsx - Translations
src/login/i18n.ts
Theme presentation
- Page template
src/login/Template.tsx - Template components
src/login/TemplateComponents.tsx - Auth page layout
src/components/overrides/auth-page-layout.tsx - Login overrides
src/components/overrides
Reusable controls
- UI components
src/components/ui - Style utilities
src/lib/utils.ts
Other components
- Browser user
- Keycloak
Connections 17
- Browser user → React entry: opens theme
- Keycloak → React entry: provides context
- React entry → Context dispatcher: renders
- Context dispatcher → Login page router: loads login
- Login page router → Login context: uses types
- Login page router → Login page flows: routes pages
- Login page flows → Page template: renders within
- Login page flows → Translations: uses messages
- Login page flows → Profile form fields: renders fields
- Profile form fields → UI components: uses controls
- Login page flows → UI components: renders controls
- Page template → Template components: uses components
- Auth page layout → Login overrides: uses controls
- Login overrides → UI components: uses controls
- UI components → Style utilities: combines classes
- Login page flows → Keycloak: posts forms
- Browser user → Keycloak: submits actions