WIP

src/KcApp/KcApp.tsx

@@ -3,7 +3,10 @@ import type { KcContext } from "./kcContext";
 import KcAppBase, { defaultKcProps } from "keycloakify";
 import { useI18n } from "./i18n";
 
+const Register = lazy(() => import("./Register"));
 const Terms = lazy(() => import("./Terms"));
+const MyExtraPage1 = lazy(() => import("./MyExtraPage1"));
+const MyExtraPage2 = lazy(() => import("./MyExtraPage2"));
 
 export type Props = {
     kcContext: KcContext;

src/KcApp/MyExtraPage1.tsx

@@ -0,0 +1,14 @@
+import { memo } from "react";
+import type { KcProps } from "keycloakify";
+import type { KcContext } from "./kcContext";
+import type { I18n } from "./i18n";
+
+type KcContext_MyExtraPage1 = Extract<KcContext, { pageId: "my-extra-page-1.ftl"; }>;
+
+const MyExtraPage1 = memo(({ kcContext, i18n, ...props }: { kcContext: KcContext_MyExtraPage1; i18n: I18n; } & KcProps) => {
+
+    return <>It is up to you to implement this page</>
+
+});
+
+export default MyExtraPage1;

src/KcApp/MyExtraPage2.tsx

@@ -0,0 +1,16 @@
+import { memo } from "react";
+import type { KcProps } from "keycloakify";
+import type { KcContext } from "./kcContext";
+import type { I18n } from "./i18n";
+
+type KcContext_MyExtraPage2 = Extract<KcContext, { pageId: "my-extra-page-2.ftl"; }>;
+
+const MyExtraPage2 = memo(({ kcContext, i18n, ...props }: { kcContext: KcContext_MyExtraPage2; i18n: I18n; } & KcProps) => {
+
+    console.log(`TODO: Do something with: ${kcContext.someCustomValue}`);
+
+    return <>It is up to you to implement this page</>
+
+});
+
+export default MyExtraPage2;