Better support for environement variables

package.json

@@ -20,7 +20,7 @@
   "keywords": [],
   "dependencies": {
     "evt": "^2.5.7",
-    "keycloakify": "^9.5.6",
+    "keycloakify": "^9.5.8",
     "oidc-spa": "^4.2.1",
     "powerhooks": "^1.0.8",
     "react": "^18.2.0",

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({

vite.config.ts

@@ -12,9 +12,11 @@ export default defineConfig({
     react(), 
     commonjs(), 
     keycloakify({
+      // See: https://docs.keycloakify.dev/build-options#themename
       themeName: "keycloakify-starter",
+      // See: https://docs.keycloakify.dev/environnement-variables
       extraThemeProperties: [
-        "foo=bar"
+        "MY_ENV_VARIABLE=${env.MY_ENV_VARIABLE:}"
       ],
       // This is a hook that will be called after the build is done
       // but before the jar is created.  

yarn.lock

@@ -5886,10 +5886,10 @@ jwt-decode@^3.1.2:
   resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
   integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
 
-keycloakify@^9.5.6:
-  version "9.5.6"
-  resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-9.5.6.tgz#28a43c8384cc03d0aa495a59706d2604d839d765"
-  integrity sha512-GPsc3OrYRQWG9D5HKSLriAl9+Nc7NNPwTbSPG/0il9lwzgBc675BZb8v8Dyx1H/LbIZ3K6+ftMhcdEYTyCSU1A==
+keycloakify@^9.5.8:
+  version "9.5.8"
+  resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-9.5.8.tgz#aa6b3cb12f35bd6ec022d15e45ad6b46f4a920ed"
+  integrity sha512-8qPiQOQu+b+/Ql04pq8Tlv924ReBS9YJDC28IXRih/XLuM1M0tOU7L6WW/fcNpzWmXZ4X1j2vHxiPjqEoWyo1g==
   dependencies:
     "@babel/generator" "^7.22.9"
     "@babel/parser" "^7.22.7"