Building

package.json

@@ -33,7 +33,7 @@
         "@types/react": "18.0.9",
         "@types/react-dom": "18.0.4",
         "react-scripts": "5.0.0",
-        "typescript": "^4.9.5"
+        "typescript": "~4.8.0"
     },
     "eslintConfig": {
         "extends": [

src/keycloakTheme/KcApp.css

@@ -6,3 +6,11 @@
 .my-font {
 	font-family: 'Work Sans';
 }
+
+.my-root-class {
+	background: white;
+}
+
+.my-root-class body {
+	background: url(./assets/background.svg) no-repeat center center fixed;
+}

src/keycloakTheme/KcApp.tsx

@@ -1,24 +1,31 @@
 import "./KcApp.css";
 import { lazy, Suspense } from "react";
 import type { KcContext } from "./kcContext";
-import { useI18n, type I18n } from "./i18n";
+import { useI18n } from "./i18n";
-import Fallback, { defaultKcProps, type PageProps } from "keycloakify";
+import Fallback, { defaultKcProps, type KcProps, type PageProps } from "keycloakify";
+// Here we have overloaded the default template, however you could use the default one with:  
+//import Template from "keycloakify/lib/Template";
 import Template from "./Template";
-import { KcContextBase } from "keycloakify/lib/getKcContext";
-import type { I18nBase } from "keycloakify/lib/i18n";
-import type { TemplateProps } from "keycloakify";
 
-const Login = lazy(()=> import("keycloakify/lib/pages/Login"));
+const Login = lazy(() => import("keycloakify/lib/pages/Login"));
 const Register = lazy(() => import("./pages/Register"));
 const Terms = lazy(() => import("./pages/Terms"));
 const MyExtraPage1 = lazy(() => import("./pages/MyExtraPage1"));
 const MyExtraPage2 = lazy(() => import("./pages/MyExtraPage2"));
 
-type Props = {
+// This is like editing the theme.properties 
-    kcContext: KcContext;
+// https://github.com/keycloak/keycloak/blob/11.0.3/themes/src/main/resources/theme/keycloak/login/theme.properties
+const kcProps: KcProps = {
+    ...defaultKcProps,
+    // NOTE: The classes are defined in ./KcApp.css
+    "kcHeaderWrapperClass": "my-color my-font",
+    "kcHtmlClass": [...defaultKcProps.kcHtmlClass, "my-root-class"],
 };
 
-export default function App({ kcContext }: Props) {
+export default function App(props: { kcContext: KcContext; }) {
+
+    const { kcContext } = props;
+
     const i18n = useI18n({ kcContext });
 
     //NOTE: Locales not yet downloaded
@@ -26,52 +33,23 @@ export default function App({ kcContext }: Props) {
         return null;
     }
 
-    const props = {
+    const pageProps: Omit<PageProps<any, typeof i18n>, "kcContext"> = {
         i18n,
         Template,
-        ...defaultKcProps,
+        doFetchDefaultThemeResources: true,
-        // NOTE: The classes are defined in ./KcApp.css
+        ...kcProps,
-        "kcHeaderWrapperClass": "my-color my-font"
+    };
-    } satisfies Omit<PageProps<any, I18n>, "kcContext">;
-
-
 
     return (
         <Suspense>
             {(() => {
                 switch (kcContext.pageId) {
-                    case "login.ftl": return <Login {...{kcContext, ...props }} />;
+                    case "login.ftl": return <Login {...{ kcContext, ...pageProps }} />;
-                    case "register.ftl": return <Register {...{ kcContext, ...props }} />;
+                    case "register.ftl": return <Register {...{ kcContext, ...pageProps }} />;
-                    case "terms.ftl": return <Terms {...{ kcContext, ...props }} />;
+                    case "terms.ftl": return <Terms {...{ kcContext, ...pageProps }} />;
-                    case "my-extra-page-1.ftl": return <MyExtraPage1 {...{ kcContext, ...props }} />;
+                    case "my-extra-page-1.ftl": return <MyExtraPage1 {...{ kcContext, ...pageProps }} />;
-                    case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, ...props }} />;
+                    case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, ...pageProps }} />;
-                    default:
+                    default: return <Fallback {...{ kcContext, ...pageProps }} />;
-
-                        //console.log(xxxx);
-
-                        //const x: KcContextBase = kcContext;
-                        //console.log(Template2, x);
-
-                        //const y: I18nBase = i18n;
-
-                        //const zz: TemplateProps<KcContextBase, I18nBase> = null as any as TemplateProps<KcContext, I18n>;
-                        //const z: TemplateProps<KcContextBase, I18nBase> = null as any as TemplateProps<typeof kcContext, I18n>;
-                        type XX = typeof kcContext;
-                        const Template2: (props: TemplateProps<KcContextBase, I18nBase>) => JSX.Element | null= null as any as (( props: TemplateProps<XX, I18n>)=> JSX.Element | null);
-
-
-                        //const Template3= (props: TemplateProps<typeof kcContext, I18n>)=> <Template {...props}/>;
-
-                        /*
-                        const xxxx: PageProps<KcContextBase, I18nBase> = {
-                            "kcContext": kcContext,
-                            ...defaultKcProps,
-                            "Template": Template3,
-                            "i18n": i18n
-                        };
-                        */
-
-                        return <Fallback {...{ kcContext, ...props }} Template={Template3}  />;
                 }
             })()}
         </Suspense>