Better support for environement variables

src/keycloak-theme/account/kcContext.ts

@@ -10,7 +10,10 @@ export const { getKcContext } = createGetKcContext<KcContextExtension>({
 			pageId: "my-extra-page-2.ftl",
 			someCustomValue: "foo bar"
 		}
-	]
+	],
+	mockProperties: {
+		MY_ENV_VARIABLE: "Mocked value"
+	}
 });
 
 export const { kcContext } = getKcContext({

src/keycloak-theme/login/Template.tsx

@@ -1,6 +1,6 @@
 // Copy pasted from: https://github.com/InseeFrLab/keycloakify/blob/main/src/login/Template.tsx
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { assert } from "keycloakify/tools/assert";
 import { clsx } from "keycloakify/tools/clsx";
 import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
@@ -47,6 +47,10 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
     useState(()=> { document.title = i18n.msgStr("loginTitle", kcContext.realm.displayName); });
 
+    useEffect(() => {
+        console.log(`Value of MY_ENV_VARIABLE on the Keycloak server: "${kcContext.properties.MY_ENV_VARIABLE}"`);
+    }, []);
+
     if (!isReady) {
         return null;
     }

src/keycloak-theme/login/kcContext.ts

@@ -1,8 +1,7 @@
 import { createGetKcContext } from "keycloakify/login";
 
 export type KcContextExtension =
-	// WARNING: It's important to keep in sync the extraThemeProperties declared in the package.json and this type definition.
-	| { pageId: "login.ftl"; extraThemeProperties: { foo: string; }; }
+	| { pageId: "login.ftl";  }
 	| { pageId: "my-extra-page-1.ftl"; }
 	| { pageId: "my-extra-page-2.ftl"; someCustomValue: string; }
 	// NOTE: register.ftl is deprecated in favor of register-user-profile.ftl
@@ -30,7 +29,7 @@ export const { getKcContext } = createGetKcContext<KcContextExtension>({
 		},
 		{
 			pageId: "my-extra-page-2.ftl",
-			someCustomValue: "foo bar baz"
+			someCustomValue: "foo bar baz",
 		},
 		{
 			//NOTE: You will either use register.ftl (legacy) or register-user-profile.ftl, not both
@@ -88,7 +87,12 @@ export const { getKcContext } = createGetKcContext<KcContextExtension>({
 			},
 
 		}
-	]
+	],
+	// Defined in vite.config.ts
+	// See: https://docs.keycloakify.dev/environnement-variables
+	mockProperties: {
+		MY_ENV_VARIABLE: "Mocked value"
+	}
 });
 
 export const { kcContext } = getKcContext({