Release candidate

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "10.0.0-rc.18",
+    "version": "10.0.0-rc.23",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",
@@ -65,7 +65,6 @@
         "react": "*"
     },
     "dependencies": {
-        "evt": "^2.5.7",
         "minimal-polyfills": "^2.2.3",
         "react-markdown": "^5.0.3",
         "tsafe": "^1.6.6"
@@ -121,6 +120,7 @@
         "vite": "^5.2.11",
         "vitest": "^0.29.8",
         "yauzl": "^2.10.0",
-        "zod": "^3.17.10"
+        "zod": "^3.17.10",
+        "evt": "^2.5.7"
     }
 }

src/account/i18n/i18n.tsx

@@ -1,11 +1,9 @@
 import "minimal-polyfills/Object.fromEntries";
-//NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
 import { useEffect, useState, useRef } from "react";
 import fallbackMessages from "./baseMessages/en";
 import { getMessages } from "./baseMessages";
 import { assert } from "tsafe/assert";
 import type { KcContext } from "../kcContext/KcContext";
-import { Markdown } from "keycloakify/tools/Markdown";
 
 export const fallbackLanguageTag = "en";
 
@@ -53,16 +51,31 @@ export type GenericI18n<MessageKey extends string> = {
      */
     msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
     /**
+     * This is meant to be used when the key argument is variable, something that might have been configured by the user
+     * in the Keycloak admin for example.
+     *
      * Examples assuming currentLanguageTag === "en"
-     * advancedMsg("${access-denied} foo bar") === <span>${msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *     "foo": "Foo {0} {1}",
+     *     "bar": "Bar {0}"
+     *   }
+     * }
+     *
+     * advancedMsg("${access-denied} foo bar") === <span>{msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
      * advancedMsg("${access-denied}") === advancedMsg("access-denied") === msg("access-denied") === <span>Access denied</span>
      * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === <span>not-a-message-key</span>
+     * advancedMsg("${bar}", "<strong>c</strong>")
+     *    === <span>{msgStr("bar", "<strong>XXX</strong>")}<span>
+     *    === <span>Bar &lt;strong&gt;XXX&lt;/strong&gt;</span> (The html in the arg is partially escaped for security reasons, it might be untrusted)
+     * advancedMsg("${foo} xx ${bar}", "a", "b", "c")
+     *    === <span>{msgStr("foo", "a", "b")} xx {msgStr("bar")}<span>
+     *    === <span>Foo a b xx Bar {0}</span> (The substitution are only applied in the first message)
      */
     advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
     /**
-     * Examples assuming currentLanguageTag === "en"
-     * advancedMsg("${access-denied} foo bar") === msg("access-denied") + " foo bar" === "Access denied foo bar"
-     * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === "not-a-message-key"
+     * See advancedMsg() but instead of returning a JSX.Element it returns a string.
      */
     advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
 };
@@ -133,8 +146,8 @@ function createI18nTranslationFunctions<MessageKey extends string>(params: {
 }): Pick<GenericI18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
     const { fallbackMessages, messages } = params;
 
-    function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): string | JSX.Element | undefined {
-        const { key, args, doRenderMarkdown } = props;
+    function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): string | JSX.Element | undefined {
+        const { key, args, doRenderAsHtml } = props;
 
         const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
 
@@ -163,51 +176,67 @@ function createI18nTranslationFunctions<MessageKey extends string>(params: {
                     return;
                 }
 
-                messageWithArgsInjected = messageWithArgsInjected.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg);
+                messageWithArgsInjected = messageWithArgsInjected.replace(
+                    new RegExp(`\\{${i + startIndex}\\}`, "g"),
+                    arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+                );
             });
 
             return messageWithArgsInjected;
         })();
 
-        return doRenderMarkdown ? (
-            <Markdown allowDangerousHtml renderers={{ paragraph: "span" }}>
-                {messageWithArgsInjectedIfAny}
-            </Markdown>
+        return doRenderAsHtml ? (
+            <span
+                // NOTE: The message is trusted. The arguments are not but are escaped.
+                dangerouslySetInnerHTML={{
+                    __html: messageWithArgsInjectedIfAny
+                }}
+            />
         ) : (
             messageWithArgsInjectedIfAny
         );
     }
 
-    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): JSX.Element | string {
-        const { key, args, doRenderMarkdown } = props;
+    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
+        const { key, args, doRenderAsHtml } = props;
 
-        const match = key.match(/^\$\{([^{]+)\}$/);
+        if (!/\$\{[^}]+\}/.test(key)) {
+            const resolvedMessage = resolveMsg({ key, args, doRenderAsHtml });
 
-        const keyUnwrappedFromCurlyBraces = match === null ? key : match[1];
+            if (resolvedMessage === undefined) {
+                return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: key }} /> : key;
+            }
 
-        const out = resolveMsg({
-            key: keyUnwrappedFromCurlyBraces,
-            args,
-            doRenderMarkdown
+            return resolvedMessage;
+        }
+
+        let isFirstMatch = true;
+
+        const resolvedComplexMessage = key.replace(/\$\{([^}]+)\}/g, (...[, key_i]) => {
+            const replaceBy = resolveMsg({ key: key_i, args: isFirstMatch ? args : [], doRenderAsHtml: false }) ?? key_i;
+
+            isFirstMatch = false;
+
+            return replaceBy;
         });
 
-        return (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
+        return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: resolvedComplexMessage }} /> : resolvedComplexMessage;
     }
 
     return {
-        msgStr: (key, ...args) => resolveMsg({ key, args, doRenderMarkdown: false }) as string,
-        msg: (key, ...args) => resolveMsg({ key, args, doRenderMarkdown: true }) as JSX.Element,
+        msgStr: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: false }) as string,
+        msg: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: true }) as JSX.Element,
         advancedMsg: (key, ...args) =>
             resolveMsgAdvanced({
                 key,
                 args,
-                doRenderMarkdown: true
+                doRenderAsHtml: true
             }) as JSX.Element,
         advancedMsgStr: (key, ...args) =>
             resolveMsgAdvanced({
                 key,
                 args,
-                doRenderMarkdown: false
+                doRenderAsHtml: false
             }) as string
     };
 }

src/account/pages/Totp.tsx

@@ -3,7 +3,6 @@ import type { PageProps } from "keycloakify/account/pages/PageProps";
 import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
-import { MessageKey } from "keycloakify/account/i18n/i18n";
 
 export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -15,7 +14,7 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
 
     const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
 
-    const { msg, msgStr } = i18n;
+    const { msg, msgStr, advancedMsg } = i18n;
 
     const algToKeyUriAlg: Record<(typeof kcContext)["totp"]["policy"]["algorithm"], string> = {
         HmacSHA1: "SHA1",
@@ -78,9 +77,7 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                             <li>
                                 <p>{msg("totpStep1")}</p>
 
-                                <ul id="kc-totp-supported-apps">
-                                    {totp.supportedApplications?.map(app => <li key={app}>{msg(app as MessageKey)}</li>)}
-                                </ul>
+                                <ul id="kc-totp-supported-apps">{totp.supportedApplications?.map(app => <li key={app}>{advancedMsg(app)}</li>)}</ul>
                             </li>
 
                             {mode && mode == "manual" ? (

src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -2,8 +2,6 @@
 (()=>{
 <#assign pageId="PAGE_ID_xIgLsPgGId9D8e">
 const out = ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
-out["msg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
-out["advancedMsg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
 out["messagesPerField"]= {
     <#assign fieldNames = [ FIELD_NAMES_eKsIY4ZsZ4xeM ]>
     <#attempt>
@@ -31,17 +29,7 @@ out["messagesPerField"]= {
                         <#recover>
                             <#assign doExistErrorOnUsernameOrPassword = true>
                         </#attempt>
-                        <#if doExistErrorOnUsernameOrPassword>
-                            return text;
-                        <#else>
-                            <#assign doExistMessageForField = "">
-                            <#attempt>
-                                <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
-                            <#recover>
-                                <#assign doExistMessageForField = true>
-                            </#attempt>
-                            return <#if doExistMessageForField>text<#else>undefined</#if>;
-                        </#if>
+                        return <#if doExistErrorOnUsernameOrPassword>text<#else>undefined</#if>
                     <#else>
                         <#assign doExistMessageForField = "">
                         <#attempt>
@@ -109,22 +97,18 @@ out["messagesPerField"]= {
                         </#attempt>
                         <#if doExistErrorOnUsernameOrPassword>
                             <#attempt>
-                                return "${kcSanitize(msg('invalidUserMessage'))?no_esc}";
+                                return decodeHtmlEntities("${msg('invalidUserMessage')?js_string}");
                             <#recover>
                                 return "Invalid username or password.";
                             </#attempt>
                         <#else>
-                            <#attempt>
-                                return "${messagesPerField.get('${fieldName}')?no_esc}";
-                            <#recover>
-                                return "";
-                            </#attempt>
+                            return "";
                         </#if>
                     <#else>
                         <#attempt>
-                            return "${messagesPerField.get('${fieldName}')?no_esc}";
+                            return decodeHtmlEntities("${messagesPerField.get('${fieldName}')?js_string}");
                         <#recover>
-                            return "invalid field";
+                            return "Invalid field";
                         </#attempt>
                     </#if>
                 }
@@ -181,8 +165,37 @@ try {
     out["url"]["resourcesCommonPath"] = out["url"]["resourcesPath"] + "/" + "RESOURCES_COMMON_cLsLsMrtDkpVv";
 } catch(error) { }
 
+<#if profile?? && profile.attributes??>
+    out["lOCALIZATION_REALM_OVERRIDES_USER_PROFILE_PROPERTY_KEY_aaGLsPgGIdeeX"] = {
+        <#list profile.attributes as attribute>
+            <#if attribute.annotations?? && attribute.displayName??>
+                "${attribute.displayName}": decodeHtmlEntities("${advancedMsg(attribute.displayName)?js_string}"),
+            </#if>
+            <#if attribute.annotations.inputHelperTextBefore??>
+                "${attribute.annotations.inputHelperTextBefore}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextBefore)?js_string}"),
+            </#if>
+            <#if attribute.annotations.inputHelperTextAfter??>
+                "${attribute.annotations.inputHelperTextAfter}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextAfter)?js_string}"),
+            </#if>
+            <#if attribute.annotations.inputTypePlaceholder??>
+                "${attribute.annotations.inputTypePlaceholder}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputTypePlaceholder)?js_string}"),
+            </#if>
+        </#list>
+    };
+</#if>
+
 return out;
 
+function decodeHtmlEntities(htmlStr){
+    var element = decodeHtmlEntities.element;
+    if (!element) {
+        element = document.createElement("textarea");
+        decodeHtmlEntities.element = element;
+    }
+    element.innerHTML = htmlStr;
+    return element.value;
+}
+
 })();
 <#function ftl_object_to_js_code_declaring_an_object object path>
 
@@ -253,26 +266,36 @@ return out;
                         !["name", "displayName", "displayNameHtml", "internationalizationEnabled", "registrationEmailAsUsername" ]?seq_contains(key)
                     ) || (
                         "applications.ftl" == pageId &&
-                        is_subpath(path, ["applications", "applications"]) &&
                         ( 
                             key == "realm" || 
                             key == "container" 
-                        )
+                        ) &&
+                        is_subpath(path, ["applications", "applications"])
                     ) || (
-                        are_same_path(path, ["user"]) &&
-                        key == "delegateForUpdate"
+                        key == "delegateForUpdate" &&
+                        are_same_path(path, ["user"])
                     ) || (
                         <#-- Security audit forwarded by Garth (Gmail) -->
-                        are_same_path(path, ["client", "attributes"]) &&
-                        key == "saml.signing.private.key"
+                        key == "saml.signing.private.key" &&
+                        are_same_path(path, ["client", "attributes"])
                     ) || (
                         <#-- See: https://github.com/keycloakify/keycloakify/issues/534 -->
-                        are_same_path(path, ["login"]) &&
-                        key == "password"
+                        key == "password" &&
+                        are_same_path(path, ["login"])
                     ) || (
                         <#-- Remove realmAttributes added by https://github.com/jcputney/keycloak-theme-additional-info-extension for peace of mind. -->
-                        are_same_path(path, []) &&
-                        key == "realmAttributes"
+                        key == "realmAttributes" &&
+                        are_same_path(path, [])
+                    ) || (
+                        <#-- attributesByName adds a lot of noise to the output and is not needed -->
+                        key == "attributesByName" &&
+                        (
+                            are_same_path(path, ["profile"]) || 
+                            are_same_path(path, ["register"])
+                        )
+                    ) || (
+                        key == "attributes" &&
+                        are_same_path(path, ["register"])
                     )
                 >
                     <#local out_seq += ["/*" + path?join(".") + "." + key + " excluded*/"]>

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -10,7 +10,8 @@ import {
     type ThemeType,
     nameOfTheGlobal,
     basenameOfTheKeycloakifyResourcesDir,
-    resources_common
+    resources_common,
+    nameOfTheLocalizationRealmOverridesUserProfileProperty
 } from "../../shared/constants";
 import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPath";
 
@@ -135,8 +136,11 @@ export function generateFtlFilesCodeFactory(params: {
         .replace("KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx", buildOptions.themeVersion)
         .replace("KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr", themeType)
         .replace("KEYCLOAKIFY_THEME_NAME_cXxKd3xEer", themeName)
-        .replace("RESOURCES_COMMON_cLsLsMrtDkpVv", resources_common);
-
+        .replace("RESOURCES_COMMON_cLsLsMrtDkpVv", resources_common)
+        .replace(
+            "lOCALIZATION_REALM_OVERRIDES_USER_PROFILE_PROPERTY_KEY_aaGLsPgGIdeeX",
+            nameOfTheLocalizationRealmOverridesUserProfileProperty
+        );
     const ftlObjectToJsCodeDeclaringAnObjectPlaceholder =
         '{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }';
 

src/bin/keycloakify/generateSrcMainResources/generateMessageProperties.ts

@@ -184,18 +184,47 @@ function toUTF16(codePoint: number): string {
     }
 }
 
-// Escapes special characters and converts unicode to UTF-16 encoding
+// Escapes special characters for use in a .properties file
 function escapeString(str: string): string {
     let escapedStr = "";
     for (const char of [...str]) {
         const codePoint = char.codePointAt(0);
         if (!codePoint) continue;
-        if (char === "'") {
-            escapedStr += "''"; // double single quotes
-        } else if (codePoint > 0x7f) {
-            escapedStr += toUTF16(codePoint); // non-ascii characters
-        } else {
-            escapedStr += char;
+
+        switch (char) {
+            case "\n":
+                escapedStr += "\\n";
+                break;
+            case "\r":
+                escapedStr += "\\r";
+                break;
+            case "\t":
+                escapedStr += "\\t";
+                break;
+            case "\\":
+                escapedStr += "\\\\";
+                break;
+            case ":":
+                escapedStr += "\\:";
+                break;
+            case "=":
+                escapedStr += "\\=";
+                break;
+            case "#":
+                escapedStr += "\\#";
+                break;
+            case "!":
+                escapedStr += "\\!";
+                break;
+            case "'":
+                escapedStr += "''";
+                break;
+            default:
+                if (codePoint > 0x7f) {
+                    escapedStr += toUTF16(codePoint); // Non-ASCII characters
+                } else {
+                    escapedStr += char; // ASCII character needs no escape
+                }
         }
     }
     return escapedStr;

src/bin/shared/constants.ts

@@ -1,4 +1,6 @@
 export const nameOfTheGlobal = "kcContext";
+export const nameOfTheLocalizationRealmOverridesUserProfileProperty =
+    "__localizationRealmOverridesUserProfile";
 export const keycloak_resources = "keycloak-resources";
 export const resources_common = "resources-common";
 export const lastKeycloakVersionWithAccountV1 = "21.1.2";

src/bin/start-keycloak/appBuild.ts

@@ -0,0 +1,129 @@
+import * as child_process from "child_process";
+import { Deferred } from "evt/tools/Deferred";
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
+import type { BuildOptions } from "../shared/buildOptions";
+import * as fs from "fs";
+import { join as pathJoin } from "path";
+
+export type BuildOptionsLike = {
+    reactAppRootDirPath: string;
+    keycloakifyBuildDirPath: string;
+    bundler: "vite" | "webpack";
+    npmWorkspaceRootDirPath: string;
+    reactAppBuildDirPath: string;
+};
+
+assert<BuildOptions extends BuildOptionsLike ? true : false>();
+
+export async function appBuild(params: {
+    buildOptions: BuildOptionsLike;
+}): Promise<{ isAppBuildSuccess: boolean }> {
+    const { buildOptions } = params;
+
+    const { bundler } = buildOptions;
+
+    const { command, args, cwd } = (() => {
+        switch (bundler) {
+            case "vite":
+                return {
+                    command: "npx",
+                    args: ["vite", "build"],
+                    cwd: buildOptions.reactAppRootDirPath
+                };
+            case "webpack": {
+                for (const dirPath of [
+                    buildOptions.reactAppRootDirPath,
+                    buildOptions.npmWorkspaceRootDirPath
+                ]) {
+                    try {
+                        const parsedPackageJson = JSON.parse(
+                            fs
+                                .readFileSync(pathJoin(dirPath, "package.json"))
+                                .toString("utf8")
+                        );
+
+                        const [scriptName] =
+                            Object.entries(parsedPackageJson.scripts).find(
+                                ([, scriptValue]) => {
+                                    assert(is<string>(scriptValue));
+                                    if (
+                                        scriptValue.includes("webpack") &&
+                                        scriptValue.includes("--mode production")
+                                    ) {
+                                        return true;
+                                    }
+
+                                    if (
+                                        scriptValue.includes("react-scripts") &&
+                                        scriptValue.includes("build")
+                                    ) {
+                                        return true;
+                                    }
+
+                                    if (
+                                        scriptValue.includes("react-app-rewired") &&
+                                        scriptValue.includes("build")
+                                    ) {
+                                        return true;
+                                    }
+
+                                    if (
+                                        scriptValue.includes("craco") &&
+                                        scriptValue.includes("build")
+                                    ) {
+                                        return true;
+                                    }
+
+                                    if (
+                                        scriptValue.includes("ng") &&
+                                        scriptValue.includes("build")
+                                    ) {
+                                        return true;
+                                    }
+
+                                    return false;
+                                }
+                            ) ?? [];
+
+                        if (scriptName === undefined) {
+                            continue;
+                        }
+
+                        return {
+                            command: "npm",
+                            args: ["run", scriptName],
+                            cwd: dirPath
+                        };
+                    } catch {
+                        continue;
+                    }
+                }
+
+                throw new Error(
+                    "Keycloakify was unable to determine which script is responsible for building the app."
+                );
+            }
+        }
+    })();
+
+    const dResult = new Deferred<{ isSuccess: boolean }>();
+
+    const child = child_process.spawn(command, args, { cwd });
+
+    child.stdout.on("data", data => {
+        if (data.toString("utf8").includes("gzip:")) {
+            return;
+        }
+
+        process.stdout.write(data);
+    });
+
+    child.stderr.on("data", data => process.stderr.write(data));
+
+    child.on("exit", code => dResult.resolve({ isSuccess: code === 0 }));
+
+    const { isSuccess } = await dResult.pr;
+
+    return { isAppBuildSuccess: isSuccess };
+}

src/bin/start-keycloak/keycloakifyBuild.ts

@@ -0,0 +1,41 @@
+import { skipBuildJarsEnvName } from "../shared/constants";
+import * as child_process from "child_process";
+import { Deferred } from "evt/tools/Deferred";
+import { assert } from "tsafe/assert";
+import type { BuildOptions } from "../shared/buildOptions";
+
+export type BuildOptionsLike = {
+    reactAppRootDirPath: string;
+    keycloakifyBuildDirPath: string;
+    bundler: "vite" | "webpack";
+    npmWorkspaceRootDirPath: string;
+};
+
+assert<BuildOptions extends BuildOptionsLike ? true : false>();
+
+export async function keycloakifyBuild(params: {
+    doSkipBuildJars: boolean;
+    buildOptions: BuildOptionsLike;
+}): Promise<{ isKeycloakifyBuildSuccess: boolean }> {
+    const { buildOptions, doSkipBuildJars } = params;
+
+    const dResult = new Deferred<{ isSuccess: boolean }>();
+
+    const child = child_process.spawn("npx", ["keycloakify", "build"], {
+        cwd: buildOptions.reactAppRootDirPath,
+        env: {
+            ...process.env,
+            ...(doSkipBuildJars ? { [skipBuildJarsEnvName]: "true" } : {})
+        }
+    });
+
+    child.stdout.on("data", data => process.stdout.write(data));
+
+    child.stderr.on("data", data => process.stderr.write(data));
+
+    child.on("exit", code => dResult.resolve({ isSuccess: code === 0 }));
+
+    const { isSuccess } = await dResult.pr;
+
+    return { isKeycloakifyBuildSuccess: isSuccess };
+}

src/bin/start-keycloak/start-keycloak.ts

@@ -2,11 +2,7 @@ import { readBuildOptions } from "../shared/buildOptions";
 import type { CliCommandOptions as CliCommandOptions_common } from "../main";
 import { promptKeycloakVersion } from "../shared/promptKeycloakVersion";
 import { readMetaInfKeycloakThemes } from "../shared/metaInfKeycloakThemes";
-import {
-    accountV1ThemeName,
-    skipBuildJarsEnvName,
-    containerName
-} from "../shared/constants";
+import { accountV1ThemeName, containerName } from "../shared/constants";
 import { SemVer } from "../tools/SemVer";
 import type { KeycloakVersionRange } from "../shared/KeycloakVersionRange";
 import { getJarFileBasename } from "../shared/getJarFileBasename";
@@ -18,11 +14,12 @@ import chalk from "chalk";
 import chokidar from "chokidar";
 import { waitForDebounceFactory } from "powerhooks/tools/waitForDebounce";
 import { getThisCodebaseRootDirPath } from "../tools/getThisCodebaseRootDirPath";
-import { Deferred } from "evt/tools/Deferred";
 import { getAbsoluteAndInOsFormatPath } from "../tools/getAbsoluteAndInOsFormatPath";
 import cliSelect from "cli-select";
 import * as runExclusive from "run-exclusive";
 import { extractArchive } from "../tools/extractArchive";
+import { appBuild } from "./appBuild";
+import { keycloakifyBuild } from "./keycloakifyBuild";
 
 export type CliCommandOptions = CliCommandOptions_common & {
     port: number;
@@ -85,18 +82,33 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     const buildOptions = readBuildOptions({ cliCommandOptions });
 
-    exit_if_theme_not_built: {
-        if (fs.existsSync(buildOptions.keycloakifyBuildDirPath)) {
-            break exit_if_theme_not_built;
+    {
+        const { isAppBuildSuccess } = await appBuild({
+            buildOptions
+        });
+
+        if (!isAppBuildSuccess) {
+            console.log(
+                chalk.red(
+                    `App build failed, exiting. Try running 'yarn build-keycloak-theme' and see what's wrong.`
+                )
+            );
+            process.exit(1);
         }
 
-        console.log(
-            [
-                `${chalk.red("The theme has not been built.")}`,
-                `Please run ${chalk.bold("npx vite && npx keycloakify build")} first.`
-            ].join(" ")
-        );
-        process.exit(1);
+        const { isKeycloakifyBuildSuccess } = await keycloakifyBuild({
+            doSkipBuildJars: false,
+            buildOptions
+        });
+
+        if (!isKeycloakifyBuildSuccess) {
+            console.log(
+                chalk.red(
+                    `Keycloakify build failed, exiting. Try running 'yarn build-keycloak-theme' and see what's wrong.`
+                )
+            );
+            process.exit(1);
+        }
     }
 
     const metaInfKeycloakThemes = readMetaInfKeycloakThemes({
@@ -191,12 +203,6 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     console.log(`Using Keycloak ${chalk.bold(jarFileBasename)}`);
 
-    try {
-        child_process.execSync(`docker rm --force ${containerName}`, {
-            stdio: "ignore"
-        });
-    } catch {}
-
     const realmJsonFilePath = await (async () => {
         if (cliCommandOptions.realmJsonFilePath !== undefined) {
             console.log(
@@ -255,40 +261,71 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     const jarFilePath = pathJoin(buildOptions.keycloakifyBuildDirPath, jarFileBasename);
 
-    let doLinkAccountV1Theme = false;
+    const { doUseBuiltInAccountV1Theme } = await (async () => {
+        let doUseBuiltInAccountV1Theme = false;
 
-    await extractArchive({
-        archiveFilePath: jarFilePath,
-        onArchiveFile: async ({ relativeFilePathInArchive, readFile, writeFile }) => {
-            for (const themeName of buildOptions.themeNames) {
-                if (
-                    relativeFilePathInArchive ===
-                    pathJoin("theme", themeName, "account", "theme.properties")
-                ) {
+        await extractArchive({
+            archiveFilePath: jarFilePath,
+            onArchiveFile: async ({ relativeFilePathInArchive, readFile, earlyExit }) => {
+                for (const themeName of buildOptions.themeNames) {
                     if (
-                        (await readFile())
-                            .toString("utf8")
-                            .includes(`parent=${accountV1ThemeName}`)
+                        relativeFilePathInArchive ===
+                        pathJoin("theme", themeName, "account", "theme.properties")
                     ) {
-                        doLinkAccountV1Theme = true;
-                    }
+                        if (
+                            (await readFile())
+                                .toString("utf8")
+                                .includes("parent=keycloak")
+                        ) {
+                            doUseBuiltInAccountV1Theme = true;
+                        }
 
-                    await writeFile({
-                        filePath: pathJoin(
-                            buildOptions.keycloakifyBuildDirPath,
-                            "src",
-                            "main",
-                            "resources",
-                            "theme",
-                            themeName,
-                            "account",
-                            "theme.properties"
-                        )
-                    });
+                        earlyExit();
+                    }
                 }
             }
-        }
-    });
+        });
+
+        return { doUseBuiltInAccountV1Theme };
+    })();
+
+    const accountThemePropertyPatch = !doUseBuiltInAccountV1Theme
+        ? undefined
+        : () => {
+              for (const themeName of buildOptions.themeNames) {
+                  const filePath = pathJoin(
+                      buildOptions.keycloakifyBuildDirPath,
+                      "src",
+                      "main",
+                      "resources",
+                      "theme",
+                      themeName,
+                      "account",
+                      "theme.properties"
+                  );
+
+                  const sourceCode = fs.readFileSync(filePath);
+
+                  const modifiedSourceCode = Buffer.from(
+                      sourceCode
+                          .toString("utf8")
+                          .replace(`parent=${accountV1ThemeName}`, "parent=keycloak"),
+                      "utf8"
+                  );
+
+                  assert(Buffer.compare(modifiedSourceCode, sourceCode) !== 0);
+
+                  fs.writeFileSync(filePath, modifiedSourceCode);
+              }
+          };
+
+    accountThemePropertyPatch?.();
+
+    try {
+        child_process.execSync(`docker rm --force ${containerName}`, {
+            stdio: "ignore"
+        });
+    } catch {}
 
     const spawnArgs = [
         "docker",
@@ -310,7 +347,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                 : []),
             ...[
                 ...buildOptions.themeNames,
-                ...(doLinkAccountV1Theme ? [accountV1ThemeName] : [])
+                ...(doUseBuiltInAccountV1Theme ? [] : [accountV1ThemeName])
             ]
                 .map(themeName => ({
                     localDirPath: pathJoin(
@@ -362,15 +399,6 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
             console.log(
                 [
-                    "",
-                    `${chalk.green("Your theme is accessible at:")}`,
-                    `${chalk.green("➜")} ${chalk.cyan.bold(
-                        "https://my-theme.keycloakify.dev/"
-                    )}`,
-                    "",
-                    "You can login with the following credentials:",
-                    `- username: ${chalk.cyan.bold("testuser")}`,
-                    `- password: ${chalk.cyan.bold("password123")}`,
                     "",
                     `Keycloak Admin console: ${chalk.cyan.bold(
                         `http://localhost:${cliCommandOptions.port}`
@@ -378,8 +406,18 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                     `- user:     ${chalk.cyan.bold("admin")}`,
                     `- password: ${chalk.cyan.bold("admin")}`,
                     "",
+                    "",
+                    `${chalk.green("Your theme is accessible at:")}`,
+                    `${chalk.green("➜")} ${chalk.cyan.bold(
+                        `https://my-theme.keycloakify.dev${cliCommandOptions.port === 8080 ? "" : `?port=${cliCommandOptions.port}`}`
+                    )}`,
+                    "",
+                    "You can login with the following credentials:",
+                    `- username: ${chalk.cyan.bold("testuser")}`,
+                    `- password: ${chalk.cyan.bold("password123")}`,
+                    "",
                     `Watching for changes in ${chalk.bold(
-                        `.${pathSep}${pathRelative(process.cwd(), srcDirPath)}`
+                        `.${pathSep}${pathRelative(process.cwd(), buildOptions.reactAppRootDirPath)}`
                     )}`
                 ].join("\n")
             );
@@ -389,79 +427,54 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
     }
 
     {
-        const runBuildKeycloakTheme = runExclusive.build(async () => {
+        const runFullBuild = runExclusive.build(async () => {
             console.log(chalk.cyan("Detected changes in the theme. Rebuilding ..."));
 
-            {
-                const dResult = new Deferred<{ isSuccess: boolean }>();
+            const { isAppBuildSuccess } = await appBuild({
+                buildOptions
+            });
 
-                const child = child_process.spawn("npx", ["vite", "build"], {
-                    cwd: buildOptions.reactAppRootDirPath
-                });
-
-                child.stdout.on("data", data => {
-                    if (data.toString("utf8").includes("gzip:")) {
-                        return;
-                    }
-
-                    process.stdout.write(data);
-                });
-
-                child.stderr.on("data", data => process.stderr.write(data));
-
-                child.on("exit", code => dResult.resolve({ isSuccess: code === 0 }));
-
-                const { isSuccess } = await dResult.pr;
-
-                if (!isSuccess) {
-                    return;
-                }
+            if (!isAppBuildSuccess) {
+                return;
             }
 
-            {
-                const dResult = new Deferred<{ isSuccess: boolean }>();
+            const { isKeycloakifyBuildSuccess } = await keycloakifyBuild({
+                doSkipBuildJars: true,
+                buildOptions
+            });
 
-                const child = child_process.spawn("npx", ["keycloakify", "build"], {
-                    cwd: buildOptions.reactAppRootDirPath,
-                    env: {
-                        ...process.env,
-                        [skipBuildJarsEnvName]: "true"
-                    }
-                });
-
-                child.stdout.on("data", data => process.stdout.write(data));
-
-                child.stderr.on("data", data => process.stderr.write(data));
-
-                child.on("exit", code => {
-                    if (code !== 0) {
-                        console.log(chalk.yellow("Theme not updated, build failed"));
-                        return;
-                    }
-
-                    console.log(chalk.green("Rebuild done"));
-                });
-
-                child.on("exit", code => dResult.resolve({ isSuccess: code === 0 }));
-
-                const { isSuccess } = await dResult.pr;
-
-                if (!isSuccess) {
-                    return;
-                }
+            if (!isKeycloakifyBuildSuccess) {
+                return;
             }
+
+            accountThemePropertyPatch?.();
+
+            console.log(chalk.green("Theme rebuilt and updated in Keycloak."));
         });
 
         const { waitForDebounce } = waitForDebounceFactory({ delay: 400 });
 
         chokidar
-            .watch([srcDirPath, pathJoin(getThisCodebaseRootDirPath(), "src")], {
-                ignoreInitial: true
-            })
-            .on("all", async () => {
+            .watch(
+                [
+                    srcDirPath,
+                    buildOptions.publicDirPath,
+                    pathJoin(buildOptions.reactAppRootDirPath, "package.json"),
+                    pathJoin(buildOptions.reactAppRootDirPath, "vite.config.ts"),
+                    pathJoin(buildOptions.reactAppRootDirPath, "vite.config.js"),
+                    pathJoin(buildOptions.reactAppRootDirPath, "index.html"),
+                    pathJoin(getThisCodebaseRootDirPath(), "src")
+                ],
+                {
+                    ignoreInitial: true
+                }
+            )
+            .on("all", async (...[, filePath]) => {
+                console.log(`Detected changes in ${filePath}`);
+
                 await waitForDebounce();
 
-                runBuildKeycloakTheme();
+                runFullBuild();
             });
     }
 }

src/bin/tools/extractArchive.ts

@@ -4,13 +4,16 @@ import yauzl from "yauzl";
 import stream from "stream";
 import { Deferred } from "evt/tools/Deferred";
 import { dirname as pathDirname, sep as pathSep } from "path";
+import { existsAsync } from "./fs.existsAsync";
 
 export async function extractArchive(params: {
     archiveFilePath: string;
     onArchiveFile: (params: {
         relativeFilePathInArchive: string;
         readFile: () => Promise<Buffer>;
+        /** NOTE: Will create the directory if it does not exist */
         writeFile: (params: { filePath: string; modifiedData?: Buffer }) => Promise<void>;
+        earlyExit: () => void;
     }) => Promise<void>;
 }) {
     const { archiveFilePath, onArchiveFile } = params;
@@ -41,7 +44,13 @@ export async function extractArchive(params: {
     ): Promise<void> => {
         const { filePath, modifiedData } = params;
 
-        await fs.mkdir(pathDirname(filePath), { recursive: true });
+        {
+            const dirPath = pathDirname(filePath);
+
+            if (!(await existsAsync(dirPath))) {
+                await fs.mkdir(dirPath, { recursive: true });
+            }
+        }
 
         if (modifiedData !== undefined) {
             await fs.writeFile(filePath, modifiedData);
@@ -104,11 +113,22 @@ export async function extractArchive(params: {
                 break handle_file;
             }
 
+            let hasEarlyExitBeenCalled = false;
+
             await onArchiveFile({
                 relativeFilePathInArchive: entry.fileName.split("/").join(pathSep),
                 readFile: () => readFile(entry),
-                writeFile: params => writeFile(entry, params)
+                writeFile: params => writeFile(entry, params),
+                earlyExit: () => {
+                    hasEarlyExitBeenCalled = true;
+                }
             });
+
+            if (hasEarlyExitBeenCalled) {
+                zipFile.close();
+                dDone.resolve();
+                return;
+            }
         }
 
         zipFile.readEntry();

src/login/i18n/i18n.tsx

@@ -1,11 +1,9 @@
 import "minimal-polyfills/Object.fromEntries";
-//NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
 import { useEffect, useState, useRef } from "react";
 import fallbackMessages from "./baseMessages/en";
 import { getMessages } from "./baseMessages";
 import { assert } from "tsafe/assert";
 import type { KcContext } from "../kcContext/KcContext";
-import { Markdown } from "keycloakify/tools/Markdown";
 
 export const fallbackLanguageTag = "en";
 
@@ -14,6 +12,7 @@ export type KcContextLike = {
         currentLanguageTag: string;
         supported: { languageTag: string; url: string; label: string }[];
     };
+    __localizationRealmOverridesUserProfile?: Record<string, string>;
 };
 
 assert<KcContext extends KcContextLike ? true : false>();
@@ -53,16 +52,31 @@ export type GenericI18n<MessageKey extends string> = {
      */
     msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
     /**
+     * This is meant to be used when the key argument is variable, something that might have been configured by the user
+     * in the Keycloak admin for example.
+     *
      * Examples assuming currentLanguageTag === "en"
-     * advancedMsg("${access-denied} foo bar") === <span>${msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *     "foo": "Foo {0} {1}",
+     *     "bar": "Bar {0}"
+     *   }
+     * }
+     *
+     * advancedMsg("${access-denied} foo bar") === <span>{msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
      * advancedMsg("${access-denied}") === advancedMsg("access-denied") === msg("access-denied") === <span>Access denied</span>
      * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === <span>not-a-message-key</span>
+     * advancedMsg("${bar}", "<strong>c</strong>")
+     *    === <span>{msgStr("bar", "<strong>XXX</strong>")}<span>
+     *    === <span>Bar &lt;strong&gt;XXX&lt;/strong&gt;</span> (The html in the arg is partially escaped for security reasons, it might be untrusted)
+     * advancedMsg("${foo} xx ${bar}", "a", "b", "c")
+     *    === <span>{msgStr("foo", "a", "b")} xx {msgStr("bar")}<span>
+     *    === <span>Foo a b xx Bar {0}</span> (The substitution are only applied in the first message)
      */
     advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
     /**
-     * Examples assuming currentLanguageTag === "en"
-     * advancedMsg("${access-denied} foo bar") === msg("access-denied") + " foo bar" === "Access denied foo bar"
-     * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === "not-a-message-key"
+     * See advancedMsg() but instead of returning a JSX.Element it returns a string.
      */
     advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
 };
@@ -100,7 +114,8 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
                             ...(await getMessages(currentLanguageTag)),
                             ...((keycloakifyExtraMessages as any)[currentLanguageTag] ?? {}),
                             ...(extraMessages[currentLanguageTag] ?? {})
-                        } as any
+                        } as any,
+                        __localizationRealmOverridesUserProfile: kcContext.__localizationRealmOverridesUserProfile
                     }),
                     currentLanguageTag,
                     getChangeLocalUrl: newLanguageTag => {
@@ -130,11 +145,12 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
 function createI18nTranslationFunctions<MessageKey extends string>(params: {
     fallbackMessages: Record<MessageKey, string>;
     messages: Record<MessageKey, string>;
+    __localizationRealmOverridesUserProfile: Record<string, string> | undefined;
 }): Pick<GenericI18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
-    const { fallbackMessages, messages } = params;
+    const { fallbackMessages, messages, __localizationRealmOverridesUserProfile } = params;
 
-    function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): string | JSX.Element | undefined {
-        const { key, args, doRenderMarkdown } = props;
+    function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): string | JSX.Element | undefined {
+        const { key, args, doRenderAsHtml } = props;
 
         const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
 
@@ -163,51 +179,82 @@ function createI18nTranslationFunctions<MessageKey extends string>(params: {
                     return;
                 }
 
-                messageWithArgsInjected = messageWithArgsInjected.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg);
+                messageWithArgsInjected = messageWithArgsInjected.replace(
+                    new RegExp(`\\{${i + startIndex}\\}`, "g"),
+                    arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+                );
             });
 
             return messageWithArgsInjected;
         })();
 
-        return doRenderMarkdown ? (
-            <Markdown allowDangerousHtml renderers={{ paragraph: "span" }}>
-                {messageWithArgsInjectedIfAny}
-            </Markdown>
+        return doRenderAsHtml ? (
+            <span
+                // NOTE: The message is trusted. The arguments are not but are escaped.
+                dangerouslySetInnerHTML={{
+                    __html: messageWithArgsInjectedIfAny
+                }}
+            />
         ) : (
             messageWithArgsInjectedIfAny
         );
     }
 
-    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): JSX.Element | string {
-        const { key, args, doRenderMarkdown } = props;
+    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
+        const { key, args, doRenderAsHtml } = props;
 
-        const match = key.match(/^\$\{([^{]+)\}$/);
+        if (__localizationRealmOverridesUserProfile !== undefined && key in __localizationRealmOverridesUserProfile) {
+            const resolvedMessage = __localizationRealmOverridesUserProfile[key];
 
-        const keyUnwrappedFromCurlyBraces = match === null ? key : match[1];
+            return doRenderAsHtml ? (
+                <span
+                    // NOTE: The message is trusted. The arguments are not but are escaped.
+                    dangerouslySetInnerHTML={{
+                        __html: resolvedMessage
+                    }}
+                />
+            ) : (
+                resolvedMessage
+            );
+        }
 
-        const out = resolveMsg({
-            key: keyUnwrappedFromCurlyBraces,
-            args,
-            doRenderMarkdown
+        if (!/\$\{[^}]+\}/.test(key)) {
+            const resolvedMessage = resolveMsg({ key, args, doRenderAsHtml });
+
+            if (resolvedMessage === undefined) {
+                return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: key }} /> : key;
+            }
+
+            return resolvedMessage;
+        }
+
+        let isFirstMatch = true;
+
+        const resolvedComplexMessage = key.replace(/\$\{([^}]+)\}/g, (...[, key_i]) => {
+            const replaceBy = resolveMsg({ key: key_i, args: isFirstMatch ? args : [], doRenderAsHtml: false }) ?? key_i;
+
+            isFirstMatch = false;
+
+            return replaceBy;
         });
 
-        return (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
+        return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: resolvedComplexMessage }} /> : resolvedComplexMessage;
     }
 
     return {
-        msgStr: (key, ...args) => resolveMsg({ key, args, doRenderMarkdown: false }) as string,
-        msg: (key, ...args) => resolveMsg({ key, args, doRenderMarkdown: true }) as JSX.Element,
+        msgStr: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: false }) as string,
+        msg: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: true }) as JSX.Element,
         advancedMsg: (key, ...args) =>
             resolveMsgAdvanced({
                 key,
                 args,
-                doRenderMarkdown: true
+                doRenderAsHtml: true
             }) as JSX.Element,
         advancedMsgStr: (key, ...args) =>
             resolveMsgAdvanced({
                 key,
                 args,
-                doRenderMarkdown: false
+                doRenderAsHtml: false
             }) as string
     };
 }

src/login/kcContext/KcContext.ts

@@ -1,4 +1,8 @@
-import type { ThemeType, LoginThemePageId } from "keycloakify/bin/shared/constants";
+import type {
+    ThemeType,
+    LoginThemePageId,
+    nameOfTheLocalizationRealmOverridesUserProfileProperty
+} from "keycloakify/bin/shared/constants";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import type { MessageKey } from "../i18n/i18n";
@@ -140,6 +144,7 @@ export declare namespace KcContext {
             tabId: string;
             ssoLoginInOtherTabsUrl: string;
         };
+        __localizationRealmOverridesUserProfile?: Record<string, string>;
     };
 
     export type SamlPostForm = Common & {
@@ -581,7 +586,6 @@ export declare namespace KcContext {
 
 export type UserProfile = {
     attributes: Attribute[];
-    attributesByName: Record<string, Attribute>;
     html5DataAnnotations?: Record<string, string>;
 };
 
@@ -750,3 +754,11 @@ export type PasswordPolicies = {
     /** Whether the password can be the email address */
     notEmail?: boolean;
 };
+
+assert<
+    KcContext.Common extends Partial<
+        Record<typeof nameOfTheLocalizationRealmOverridesUserProfileProperty, unknown>
+    >
+        ? true
+        : false
+>();

src/login/kcContext/createGetKcContext.ts

@@ -39,9 +39,9 @@ export function createGetKcContext<
         if (mockPageId !== undefined && realKcContext === undefined) {
             //TODO maybe trow if no mock fo custom page
 
-            warn_that_mock_is_enbaled: {
+            warn_that_mock_is_enabled: {
                 if (isStorybook) {
-                    break warn_that_mock_is_enbaled;
+                    break warn_that_mock_is_enabled;
                 }
 
                 console.log(
@@ -118,7 +118,6 @@ export function createGetKcContext<
                     const { attributes } = kcContextDefaultMock.profile;
 
                     id<KcContext.Register>(kcContext).profile.attributes = [];
-                    id<KcContext.Register>(kcContext).profile.attributesByName = {};
 
                     const partialAttributes = [
                         ...((
@@ -153,9 +152,6 @@ export function createGetKcContext<
                         id<KcContext.Register>(kcContext).profile.attributes.push(
                             augmentedAttribute
                         );
-                        id<KcContext.Register>(kcContext).profile.attributesByName[
-                            augmentedAttribute.name
-                        ] = augmentedAttribute;
                     });
 
                     partialAttributes
@@ -174,9 +170,6 @@ export function createGetKcContext<
                             id<KcContext.Register>(kcContext).profile.attributes.push(
                                 partialAttribute as any
                             );
-                            id<KcContext.Register>(kcContext).profile.attributesByName[
-                                name
-                            ] = partialAttribute as any;
                         });
                 }
             }

src/login/kcContext/kcContextMocks.ts

@@ -75,10 +75,6 @@ const attributes: Attribute[] = [
     }
 ];
 
-const attributesByName = Object.fromEntries(
-    attributes.map(attribute => [attribute.name, attribute])
-) as any;
-
 const resourcesPath = `${BASE_URL}${keycloak_resources}/login/resources`;
 
 export const kcContextCommonMock: KcContext.Common = {
@@ -221,7 +217,8 @@ export const kcContextCommonMock: KcContext.Common = {
     },
     scripts: [],
     isAppInitiatedAction: false,
-    properties: {}
+    properties: {},
+    __localizationRealmOverridesUserProfile: {}
 };
 
 const loginUrl = {
@@ -268,8 +265,7 @@ export const kcContextMocks = [
         recaptchaRequired: false,
         pageId: "register.ftl",
         profile: {
-            attributes,
-            attributesByName
+            attributes
         },
         scripts: [
             //"https://www.google.com/recaptcha/api.js"
@@ -420,8 +416,7 @@ export const kcContextMocks = [
         ...kcContextCommonMock,
         pageId: "login-update-profile.ftl",
         profile: {
-            attributes,
-            attributesByName
+            attributes
         }
     }),
     id<KcContext.LoginIdpLinkConfirm>({
@@ -477,20 +472,14 @@ export const kcContextMocks = [
         ...kcContextCommonMock,
         pageId: "idp-review-user-profile.ftl",
         profile: {
-            attributes,
-            attributesByName
+            attributes
         }
     }),
     id<KcContext.UpdateEmail>({
         ...kcContextCommonMock,
         pageId: "update-email.ftl",
         profile: {
-            attributes: attributes.filter(attribute => attribute.name === "email"),
-            attributesByName: Object.fromEntries(
-                attributes
-                    .filter(attribute => attribute.name === "email")
-                    .map(attribute => [attribute.name, attribute])
-            )
+            attributes: attributes.filter(attribute => attribute.name === "email")
         }
     }),
     id<KcContext.SelectAuthenticator>({

src/login/lib/useDownloadTerms.ts

@@ -4,11 +4,13 @@ import { fallbackLanguageTag } from "keycloakify/login/i18n/i18n";
 import { useConst } from "keycloakify/tools/useConst";
 import { useConstCallback } from "keycloakify/tools/useConstCallback";
 import { assert } from "tsafe/assert";
-import { Evt } from "evt";
-import { useRerenderOnStateChange } from "evt/hooks/useRerenderOnStateChange";
+import {
+    createStatefulObservable,
+    useRerenderOnChange
+} from "keycloakify/tools/StatefulObservable";
 import { KcContext } from "../kcContext";
 
-const evtTermsMarkdown = Evt.create<string | undefined>(undefined);
+const obsTermsMarkdown = createStatefulObservable<string | undefined>(() => undefined);
 
 export type KcContextLike = {
     pageId: string;
@@ -45,15 +47,15 @@ export function useDownloadTerms(params: {
         if (kcContext.pageId === "terms.ftl" || kcContext.termsAcceptanceRequired) {
             downloadTermMarkdownMemoized(
                 kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag
-            ).then(thermMarkdown => (evtTermsMarkdown.state = thermMarkdown));
+            ).then(thermMarkdown => (obsTermsMarkdown.current = thermMarkdown));
         }
     }, []);
 }
 
 export function useTermsMarkdown() {
-    useRerenderOnStateChange(evtTermsMarkdown);
+    useRerenderOnChange(obsTermsMarkdown);
 
-    const termsMarkdown = evtTermsMarkdown.state;
+    const termsMarkdown = obsTermsMarkdown.current;
 
     return { termsMarkdown };
 }

src/login/pages/LoginConfigTotp.tsx

@@ -3,7 +3,6 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
-import { MessageKey } from "keycloakify/login/i18n/i18n";
 
 export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pageId: "login-config-totp.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -15,7 +14,7 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
 
     const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
 
-    const { msg, msgStr } = i18n;
+    const { msg, msgStr, advancedMsg } = i18n;
 
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginTotpTitle")}>
@@ -26,7 +25,7 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
 
                         <ul id="kc-totp-supported-apps">
                             {totp.supportedApplications.map(app => (
-                                <li>{msg(app as MessageKey)}</li>
+                                <li>{advancedMsg(app)}</li>
                             ))}
                         </ul>
                     </li>

src/login/pages/WebauthnAuthenticate.tsx

@@ -1,6 +1,5 @@
 import { useEffect, Fragment } from "react";
 import { clsx } from "keycloakify/tools/clsx";
-import type { MessageKey } from "keycloakify/login/i18n/i18n";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import { assert } from "tsafe/assert";
@@ -29,7 +28,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
         shouldDisplayAuthenticators
     } = kcContext;
 
-    const { msg, msgStr } = i18n;
+    const { msg, msgStr, advancedMsg } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
         scriptTags: [
@@ -198,7 +197,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                                                         id="kc-webauthn-authenticator-label"
                                                         className={getClassName("kcSelectAuthListItemHeadingClass")}
                                                     >
-                                                        {msg(authenticator.label as MessageKey)}
+                                                        {advancedMsg(authenticator.label)}
                                                     </div>
                                                     {authenticator.transports.displayNameProperties?.length && (
                                                         <div

src/tools/StatefulObservable/README.md

@@ -0,0 +1,16 @@
+`StatefulObservable` is a construct that allow to avoid having to depend on [EVT](https://evt.land).
+
+A `StatefulObservable` can be converted to an evt with:
+
+```ts
+import { statefulObservableToStatefulEvt } from "powerhooks/tools/StatefulObservable/statefulObservableToStatefulEvt";
+
+const evtXyz = statefulObservableToStatefulEvt({
+    statefulObservable: $xyz
+    //Optionally you can pass a Ctx
+});
+```
+
+WARNING: Unlike `StatefulEvt`, `StatefulObservable` do not post when we first attach.
+If the current value was not yet evaluated `next()` is called on the initial value returned by the function that
+returns it.

src/tools/StatefulObservable/StatefulObservable.ts

@@ -0,0 +1,58 @@
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
+
+export type StatefulObservable<T> = {
+    current: T;
+    subscribe: (next: (data: T) => void) => Subscription;
+};
+
+export type Subscription = {
+    unsubscribe(): void;
+};
+
+export function createStatefulObservable<T>(
+    getInitialValue: () => T
+): StatefulObservable<T> {
+    const nextFunctions: ((data: T) => void)[] = [];
+
+    const { get, set } = (() => {
+        let wrappedState: [T] | undefined = undefined;
+
+        function set(data: T) {
+            wrappedState = [data];
+
+            nextFunctions.forEach(next => next(data));
+        }
+
+        return {
+            get: () => {
+                if (wrappedState === undefined) {
+                    set(getInitialValue());
+                    assert(!is<undefined>(wrappedState));
+                }
+                return wrappedState[0];
+            },
+            set
+        };
+    })();
+
+    return Object.defineProperty(
+        {
+            current: null as any as T,
+            subscribe: (next: (data: T) => void) => {
+                nextFunctions.push(next);
+
+                return {
+                    unsubscribe: () =>
+                        nextFunctions.splice(nextFunctions.indexOf(next), 1)
+                };
+            }
+        },
+        "current",
+        {
+            enumerable: true,
+            get,
+            set
+        }
+    );
+}

src/tools/StatefulObservable/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useObservable";
+export * from "./useRerenderOnChange";

src/tools/StatefulObservable/hooks/useObservable.ts

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import type { Subscription } from "../StatefulObservable";
+
+/**
+ * Equivalent of https://docs.evt.land/api/react-hooks
+ */
+export function useObservable(
+    effect: (params: {
+        registerSubscription: (subscription: Subscription) => void;
+    }) => void,
+    deps: React.DependencyList
+): void {
+    useEffect(() => {
+        const subscriptions: Subscription[] = [];
+
+        effect({
+            registerSubscription: subscription => subscriptions.push(subscription)
+        });
+
+        return () => {
+            subscriptions.forEach(subscription => subscription.unsubscribe());
+            subscriptions.length = 0;
+        };
+    }, deps);
+}

src/tools/StatefulObservable/hooks/useRerenderOnChange.ts

@@ -0,0 +1,19 @@
+import { useObservable } from "./useObservable";
+import { useState } from "react";
+import type { StatefulObservable } from "../StatefulObservable";
+
+/**
+ * Equivalent of https://docs.evt.land/api/react-hooks
+ * */
+export function useRerenderOnChange($: StatefulObservable<unknown>): void {
+    //NOTE: We use function in case the state is a function
+    const [, setCurrent] = useState(() => $.current);
+
+    useObservable(
+        ({ registerSubscription }) => {
+            const subscription = $.subscribe(current => setCurrent(() => current));
+            registerSubscription(subscription);
+        },
+        [$]
+    );
+}

src/tools/StatefulObservable/index.ts

@@ -0,0 +1,2 @@
+export * from "./StatefulObservable";
+export * from "./hooks";