# cloakwise-io/keycloak-custom-theme architecture

> Architecture diagram of the GitHub repository cloakwise-io/keycloak-custom-theme, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/cloakwise-io/keycloak-custom-theme
- Repository: https://github.com/cloakwise-io/keycloak-custom-theme

## Overview

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: [`src/login/pages`](https://github.com/cloakwise-io/keycloak-custom-theme/tree/main/src/login/pages) (Login page flows), [`src/components/ui`](https://github.com/cloakwise-io/keycloak-custom-theme/tree/main/src/components/ui) (UI components), [`src/login/KcPage.tsx`](https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/login/KcPage.tsx) (Login page router), [`src/main.tsx`](https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/main.tsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Theme runtime"]
  node_entry["React entry<br/>[main.tsx]"]
  node_generated["Context dispatcher<br/>[kc.gen.tsx]"]
  node_context["Login context<br/>[KcContext.ts]"]
  node_router["Login page router<br/>[KcPage.tsx]"]
end

subgraph group_flows["Login and account flows"]
  node_pageflows["Login page flows"]
  node_profile["Profile form fields"]
  node_i18n["Translations<br/>[i18n.ts]"]
end

subgraph group_presentation["Theme presentation"]
  node_template["Page template<br/>[Template.tsx]"]
  node_templateparts["Template components"]
  node_layout["Auth page layout"]
  node_overrides["Login overrides"]
end

subgraph group_controls["Reusable controls"]
  node_ui["UI components"]
  node_utils["Style utilities<br/>[utils.ts]"]
end

node_user(("Browser user"))
node_keycloak{{"Keycloak"}}

node_user -->|"opens theme"| node_entry
node_keycloak -->|"provides context"| node_entry
node_entry -->|"renders"| node_generated
node_generated -->|"loads login"| node_router
node_router -->|"uses types"| node_context
node_router -->|"routes pages"| node_pageflows
node_pageflows -->|"renders within"| node_template
node_pageflows -->|"uses messages"| node_i18n
node_pageflows -->|"renders fields"| node_profile
node_profile -->|"uses controls"| node_ui
node_pageflows -->|"renders controls"| node_ui
node_template -->|"uses components"| node_templateparts
node_layout -->|"uses controls"| node_overrides
node_overrides -->|"uses controls"| node_ui
node_ui -->|"combines classes"| node_utils
node_pageflows -->|"posts forms"| node_keycloak
node_user -->|"submits actions"| node_keycloak

click node_entry "https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/main.tsx"
click node_generated "https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/kc.gen.tsx"
click node_context "https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/login/KcContext.ts"
click node_router "https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/login/KcPage.tsx"
click node_pageflows "https://github.com/cloakwise-io/keycloak-custom-theme/tree/main/src/login/pages"
click node_profile "https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/login/UserProfileFormFields.tsx"
click node_i18n "https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/login/i18n.ts"
click node_template "https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/login/Template.tsx"
click node_templateparts "https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/login/TemplateComponents.tsx"
click node_layout "https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/components/overrides/auth-page-layout.tsx"
click node_overrides "https://github.com/cloakwise-io/keycloak-custom-theme/tree/main/src/components/overrides"
click node_ui "https://github.com/cloakwise-io/keycloak-custom-theme/tree/main/src/components/ui"
click node_utils "https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/lib/utils.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_generated,node_context,node_router,node_user toneBlue
class node_pageflows,node_profile,node_i18n toneAmber
class node_template,node_templateparts,node_layout,node_overrides toneMint
class node_ui,node_utils toneRose
class node_keycloak toneIndigo
```

## Components

### Theme runtime

- [React entry](https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/main.tsx): `src/main.tsx`
- [Context dispatcher](https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/kc.gen.tsx): `src/kc.gen.tsx`
- [Login context](https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/login/KcContext.ts): `src/login/KcContext.ts`
- [Login page router](https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/login/KcPage.tsx): `src/login/KcPage.tsx`

### Login and account flows

- [Login page flows](https://github.com/cloakwise-io/keycloak-custom-theme/tree/main/src/login/pages): `src/login/pages`
- [Profile form fields](https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/login/UserProfileFormFields.tsx): `src/login/UserProfileFormFields.tsx`
- [Translations](https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/login/i18n.ts): `src/login/i18n.ts`

### Theme presentation

- [Page template](https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/login/Template.tsx): `src/login/Template.tsx`
- [Template components](https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/login/TemplateComponents.tsx): `src/login/TemplateComponents.tsx`
- [Auth page layout](https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/components/overrides/auth-page-layout.tsx): `src/components/overrides/auth-page-layout.tsx`
- [Login overrides](https://github.com/cloakwise-io/keycloak-custom-theme/tree/main/src/components/overrides): `src/components/overrides`

### Reusable controls

- [UI components](https://github.com/cloakwise-io/keycloak-custom-theme/tree/main/src/components/ui): `src/components/ui`
- [Style utilities](https://github.com/cloakwise-io/keycloak-custom-theme/blob/main/src/lib/utils.ts): `src/lib/utils.ts`

### Other components

- **Browser user**
- **Keycloak**

## Connections

- 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