fix(deps): update garronej_modules_update

Merge branch 'main' of https://github.com/InseeFrLab/keycloakify
Fix link script command
2023-03-18 09:11:03 +00:00 · 2023-03-16 13:33:01 +01:00 · 2023-03-16 13:31:56 +01:00 · 2023-03-15 12:45:58 +01:00 · 2023-03-15 12:45:43 +01:00 · 2023-03-15 10:07:01 +01:00
55 changed files with 2623 additions and 1980 deletions
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@ -28,7 +28,7 @@ jobs:
    needs: test_lint
    strategy:
      matrix:
-        node: [ '14', '15' ,'16', '17' ]
+        node: [ '14','16' ]
        os: [ windows-latest, ubuntu-latest ]
    name: Test with Node v${{ matrix.node }} on ${{ matrix.os }}
    steps:
@ -136,4 +136,4 @@ jobs:
      env:
        NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
        VERSION: ${{ needs.check_if_version_upgraded.outputs.to_version }}
-        IS_PRE_RELEASE: ${{ needs.check_if_version_upgraded.outputs.is_pre_release }}
+        IS_PRE_RELEASE: ${{ needs.check_if_version_upgraded.outputs.is_pre_release }}
--- a/.prettierignore
+++ b/.prettierignore
@ -6,4 +6,5 @@ node_modules/
 /src/test/apps/
 /src/tools/types/
 /sample_react_project
-/build_keycloak/
+/build_keycloak/
+/src/lib/i18n/generated_messages/
--- a/README.md
+++ b/README.md
@ -8,9 +8,6 @@
    <a href="https://github.com/garronej/keycloakify/actions">
      <img src="https://github.com/garronej/keycloakify/workflows/ci/badge.svg?branch=main">
    </a>
-    <a href="https://bundlephobia.com/package/keycloakify">
-      <img src="https://img.shields.io/bundlephobia/minzip/keycloakify">
-    </a>
    <a href="https://www.npmjs.com/package/keycloakify">
      <img src="https://img.shields.io/npm/dm/keycloakify">
    </a>
@ -27,15 +24,9 @@
        <a href="https://www.keycloakify.dev">Home</a>
        -
        <a href="https://docs.keycloakify.dev">Documentation</a>
-    </p>
-    <p align="center"> ---- Project starter / Demo setup ---- </p>
-    <p align="center">
-        <a href="https://github.com/garronej/keycloakify-starter">CSS Level customization</a>
        -
-        <a href="https://github.com/garronej/keycloakify-advanced-starter">Component Level customization</a>
+        <a href="https://github.com/codegouvfr/keycloakify-starter">Starter project</a>
    </p>
-    <p align="center"> ---- </p>
-
 </p>

 <p align="center">
@ -49,6 +40,19 @@

 # Changelog highlights

+## 6.13
+
+-   Build work behind corporate proxies, [see issue](https://github.com/InseeFrLab/keycloakify/issues/257).
+
+## 6.12
+
+Massive improvement in the developer experience:
+
+-   There is now only one starter repo: https://github.com/codegouvfr/keycloakify-starter
+-   A lot of comments have been added in the code of the starter to make it easier to get started.
+-   The doc has been updated: https://docs.keycloakify.dev
+-   A lot of improvements in the type system.
+
 ## 6.11.4

 -   You no longer need to have Maven installed to build the theme. Thanks to @lordvlad, [see PR](https://github.com/InseeFrLab/keycloakify/pull/239).
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
    "name": "keycloakify",
-    "version": "6.11.9",
-    "description": "Keycloak theme generator for Reacts app",
+    "version": "6.13.2",
+    "description": "Create Keycloak themes using React",
    "repository": {
        "type": "git",
        "url": "git://github.com/garronej/keycloakify.git"
@ -15,11 +15,13 @@
        "copy-files": "copyfiles -u 1 src/**/*.ftl",
        "pretest": "yarn build:test",
        "test": "node dist_test/test/bin && node dist_test/test/lib",
-        "generate-messages": "node dist/bin/generate-i18n-messages.js",
-        "link_in_test_app": "node dist/bin/link_in_test_app.js",
        "_format": "prettier '**/*.{ts,tsx,json,md}'",
        "format": "yarn _format --write",
-        "format:check": "yarn _format --list-different"
+        "format:check": "yarn _format --list-different",
+        "generate-messages": "ts-node --skipProject src/scripts/generate-i18n-messages.ts",
+        "link-in-app": "ts-node --skipProject src/scripts/link-in-app.ts",
+        "link-in-starter": "yarn link-in-app keycloakify-starter",
+        "tsc-watch": "tsc -p src/bin -w & tsc -p src/lib -w "
    },
    "bin": {
        "keycloakify": "dist/bin/keycloakify/index.js",
@ -40,6 +42,7 @@
    "license": "MIT",
    "files": [
        "src/",
+        "!src/scripts",
        "dist/",
        "!dist/tsconfig.tsbuildinfo"
    ],
@ -59,9 +62,9 @@
    },
    "devDependencies": {
        "@babel/core": "^7.0.0",
-        "@types/memoizee": "^0.4.7",
+        "@types/make-fetch-happen": "^10.0.1",
        "@types/minimist": "^1.2.2",
-        "@types/node": "^17.0.25",
+        "@types/node": "^18.14.1",
        "@types/react": "18.0.9",
        "copyfiles": "^2.4.1",
        "husky": "^4.3.8",
@ -70,24 +73,22 @@
        "properties-parser": "^0.3.1",
        "react": "18.1.0",
        "rimraf": "^3.0.2",
-        "@emotion/react": "^11.10.4",
-        "typescript": "^4.2.3"
+        "scripting-tools": "^0.19.13",
+        "ts-node": "^10.9.1",
+        "typescript": "^4.9.5"
    },
    "dependencies": {
        "@octokit/rest": "^18.12.0",
        "cheerio": "^1.0.0-rc.5",
        "cli-select": "^1.1.2",
-        "evt": "^2.4.13",
-        "memoizee": "^0.4.15",
+        "evt": "^2.4.18",
+        "make-fetch-happen": "^11.0.3",
        "minimal-polyfills": "^2.2.2",
        "minimist": "^1.2.6",
        "path-browserify": "^1.0.1",
-        "powerhooks": "^0.26.2",
        "react-markdown": "^5.0.3",
        "rfc4648": "^1.5.2",
-        "scripting-tools": "^0.19.13",
-        "tsafe": "^1.4.3",
-        "tss-react": "4.4.1-rc.0",
+        "tsafe": "^1.6.0",
        "zod": "^3.17.10"
    }
 }
--- a/renovate.json
+++ b/renovate.json
@ -13,11 +13,11 @@
    "packageRules": [
        {
            "packagePatterns": ["*"],
-            "excludePackagePatterns": ["powerhooks", "tsafe", "evt"],
+            "excludePackagePatterns": ["tsafe", "evt"],
            "enabled": false
        },
        {
-            "packagePatterns": ["powerhooks", "tsafe", "evt"],
+            "packagePatterns": ["tsafe", "evt"],
            "matchUpdateTypes": ["minor", "patch"],
            "automerge": true,
            "automergeType": "branch",
--- a/src/bin/keycloakify/BuildOptions.ts
+++ b/src/bin/keycloakify/BuildOptions.ts
@ -7,7 +7,7 @@ import { typeGuard } from "tsafe/typeGuard";
 import { symToStr } from "tsafe/symToStr";

 const bundlers = ["mvn", "keycloakify", "none"] as const;
-type Bundler = typeof bundlers[number];
+type Bundler = (typeof bundlers)[number];
 type ParsedPackageJson = {
    name: string;
    version: string;
@ -38,7 +38,7 @@ const zParsedPackageJson = z.object({
        .optional()
 });

-assert<Equals<ReturnType<typeof zParsedPackageJson["parse"]>, ParsedPackageJson>>();
+assert<Equals<ReturnType<(typeof zParsedPackageJson)["parse"]>, ParsedPackageJson>>();

 /** Consolidated build option gathered form CLI arguments and config in package.json */
 export type BuildOptions = BuildOptions.Standalone | BuildOptions.ExternalAssets;
--- a/src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl
+++ b/src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl
@ -174,6 +174,10 @@ ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
                    ) ||  (
                        ["masterAdminClient", "delegateForUpdate", "defaultRole"]?seq_contains(key) &&
                        are_same_path(path, ["realm"])
+                    ) || (
+                        "error.ftl" == pageId &&
+                        are_same_path(path, ["realm"]) &&
+                        !["name", "displayName", "displayNameHtml", "internationalizationEnabled", "registrationEmailAsUsername" ]?seq_contains(key)
                    )
                >
                    <#local out_seq += ["/*If you need '" + key + "' on " + pageId + ", please submit an issue to the Keycloakify repo*/"]>
--- a/src/bin/keycloakify/generateFtl/generateFtl.ts
+++ b/src/bin/keycloakify/generateFtl/generateFtl.ts
@ -68,7 +68,7 @@ export namespace BuildOptionsLike {
    assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
 }

-export type PageId = typeof pageIds[number];
+export type PageId = (typeof pageIds)[number];

 export function generateFtlFilesCodeFactory(params: {
    indexHtmlCode: string;
--- a/src/bin/keycloakify/generateStartKeycloakTestingContainer.ts
+++ b/src/bin/keycloakify/generateStartKeycloakTestingContainer.ts
@ -30,15 +30,18 @@ export function generateStartKeycloakTestingContainer(params: {
        buildOptions: { themeName }
    } = params;

+    const keycloakThemePath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName).replace(/\\/g, "/");
+
    fs.writeFileSync(
        pathJoin(keycloakThemeBuildingDirPath, generateStartKeycloakTestingContainer.basename),
+
        Buffer.from(
            [
                "#!/usr/bin/env bash",
                "",
                `docker rm ${containerName} || true`,
                "",
-                `cd ${keycloakThemeBuildingDirPath}`,
+                `cd "${keycloakThemeBuildingDirPath.replace(/\\/g, "/")}"`,
                "",
                "docker run \\",
                "   -p 8080:8080 \\",
@ -46,14 +49,7 @@ export function generateStartKeycloakTestingContainer(params: {
                "   -e KEYCLOAK_ADMIN=admin \\",
                "   -e KEYCLOAK_ADMIN_PASSWORD=admin \\",
                "   -e JAVA_OPTS=-Dkeycloak.profile=preview \\",
-                `   -v ${pathJoin(
-                    keycloakThemeBuildingDirPath,
-                    "src",
-                    "main",
-                    "resources",
-                    "theme",
-                    themeName
-                )}:/opt/keycloak/themes/${themeName}:rw \\`,
+                `   -v "${keycloakThemePath}":"/opt/keycloak/themes/${themeName}":rw \\`,
                `   -it quay.io/keycloak/keycloak:${keycloakVersion} \\`,
                `   start-dev`,
                ""
--- a/src/bin/link_in_test_app.ts
+++ b/src/bin/link_in_test_app.ts
@ -1,128 +0,0 @@
-import { execSync } from "child_process";
-import { join as pathJoin, relative as pathRelative } from "path";
-import { exclude } from "tsafe/exclude";
-import * as fs from "fs";
-
-const keycloakifyDirPath = pathJoin(__dirname, "..", "..");
-
-fs.writeFileSync(
-    pathJoin(keycloakifyDirPath, "dist", "package.json"),
-    Buffer.from(
-        JSON.stringify(
-            (() => {
-                const packageJsonParsed = JSON.parse(fs.readFileSync(pathJoin(keycloakifyDirPath, "package.json")).toString("utf8"));
-
-                return {
-                    ...packageJsonParsed,
-                    "main": packageJsonParsed["main"].replace(/^dist\//, ""),
-                    "types": packageJsonParsed["types"].replace(/^dist\//, ""),
-                    "bin": Object.fromEntries(Object.entries<string>(packageJsonParsed["bin"]).map(([k, v]) => [k, v.replace(/^dist\//, "")]))
-                };
-            })(),
-            null,
-            2
-        ),
-        "utf8"
-    )
-);
-
-const commonThirdPartyDeps = (() => {
-    const namespaceModuleNames = ["@emotion"];
-    const standaloneModuleNames = ["react", "@types/react", "powerhooks", "tss-react", "evt"];
-
-    return [
-        ...namespaceModuleNames
-            .map(namespaceModuleName =>
-                fs
-                    .readdirSync(pathJoin(keycloakifyDirPath, "node_modules", namespaceModuleName))
-                    .map(submoduleName => `${namespaceModuleName}/${submoduleName}`)
-            )
-            .reduce((prev, curr) => [...prev, ...curr], []),
-        ...standaloneModuleNames
-    ];
-})();
-
-const yarnHomeDirPath = pathJoin(keycloakifyDirPath, ".yarn_home");
-
-fs.rmSync(yarnHomeDirPath, { "recursive": true, "force": true });
-fs.mkdirSync(yarnHomeDirPath);
-
-const execYarnLink = (params: { targetModuleName?: string; cwd: string }) => {
-    const { targetModuleName, cwd } = params;
-
-    const cmd = ["yarn", "link", ...(targetModuleName !== undefined ? [targetModuleName] : [])].join(" ");
-
-    console.log(`$ cd ${pathRelative(keycloakifyDirPath, cwd) || "."} && ${cmd}`);
-
-    execSync(cmd, {
-        cwd,
-        "env": {
-            ...process.env,
-            "HOME": yarnHomeDirPath
-        }
-    });
-};
-
-const testAppPaths = (() => {
-    const arg = process.argv[2];
-
-    const testAppNames = arg !== undefined ? [arg] : ["keycloakify-starter", "keycloakify-advanced-starter"];
-
-    return testAppNames
-        .map(testAppName => {
-            const testAppPath = pathJoin(keycloakifyDirPath, "..", testAppName);
-
-            if (fs.existsSync(testAppPath)) {
-                return testAppPath;
-            }
-
-            console.warn(`Skipping ${testAppName} since it cant be found here: ${testAppPath}`);
-
-            return undefined;
-        })
-        .filter(exclude(undefined));
-})();
-
-if (testAppPaths.length === 0) {
-    console.error("No test app to link into!");
-    process.exit(-1);
-}
-
-testAppPaths.forEach(testAppPath => execSync("yarn install", { "cwd": testAppPath }));
-
-console.log("=== Linking common dependencies ===");
-
-const total = commonThirdPartyDeps.length;
-let current = 0;
-
-commonThirdPartyDeps.forEach(commonThirdPartyDep => {
-    current++;
-
-    console.log(`${current}/${total} ${commonThirdPartyDep}`);
-
-    const localInstallPath = pathJoin(
-        ...[keycloakifyDirPath, "node_modules", ...(commonThirdPartyDep.startsWith("@") ? commonThirdPartyDep.split("/") : [commonThirdPartyDep])]
-    );
-
-    execYarnLink({ "cwd": localInstallPath });
-});
-
-commonThirdPartyDeps.forEach(commonThirdPartyDep =>
-    testAppPaths.forEach(testAppPath =>
-        execYarnLink({
-            "cwd": testAppPath,
-            "targetModuleName": commonThirdPartyDep
-        })
-    )
-);
-
-console.log("=== Linking in house dependencies ===");
-
-execYarnLink({ "cwd": pathJoin(keycloakifyDirPath, "dist") });
-
-testAppPaths.forEach(testAppPath =>
-    execYarnLink({
-        "cwd": testAppPath,
-        "targetModuleName": "keycloakify"
-    })
-);
--- a/src/bin/tools/downloadAndUnzip.ts
+++ b/src/bin/tools/downloadAndUnzip.ts
@ -1,27 +1,22 @@
-import { dirname as pathDirname, basename as pathBasename, join as pathJoin } from "path";
-import { createReadStream, createWriteStream, unlinkSync } from "fs";
-import { stat, mkdir, unlink, readFile, writeFile } from "fs/promises";
+import { dirname as pathDirname, basename as pathBasename, join as pathJoin, join } from "path";
+import { createReadStream, createWriteStream } from "fs";
+import { stat, mkdir, unlink, writeFile } from "fs/promises";
 import { transformCodebase } from "./transformCodebase";
 import { createHash } from "crypto";
-import http from "http";
-import https from "https";
+import fetch from "make-fetch-happen";
 import { createInflateRaw } from "zlib";
-
 import type { Readable } from "stream";
+import { homedir } from "os";
+import { FetchOptions } from "make-fetch-happen";
+import { exec as execCallback } from "child_process";
+import { promisify } from "util";
+
+const exec = promisify(execCallback);

 function hash(s: string) {
    return createHash("sha256").update(s).digest("hex");
 }

-async function maybeReadFile(path: string) {
-    try {
-        return await readFile(path, "utf-8");
-    } catch (error) {
-        if ((error as Error & { code: string }).code === "ENOENT") return undefined;
-        throw error;
-    }
-}
-
 async function maybeStat(path: string) {
    try {
        return await stat(path);
@ -32,69 +27,59 @@ async function maybeStat(path: string) {
 }

 /**
- * Download a file from `url` to `dir`. Will try to avoid downloading existing
- * files by using an `{hash(url)}.etag` file. If this file exists, we add an
- * etag headear, so server can tell us if file changed and we should re-download
- * or if our file is up-to-date.
+ * Get an npm configuration value as string, undefined if not set.
 *
- * Warning, this method assumes that the target filename can be extracted from
- * url, content-disposition headers are ignored.
+ * @param key
+ * @returns string or undefined
+ */
+async function getNmpConfig(key: string): Promise<string | undefined> {
+    const { stdout } = await exec(`npm config get ${key}`);
+    const value = stdout.trim();
+    return value && value !== "null" ? value : undefined;
+}
+
+/**
+ * Get proxy configuration from npm config files. Note that we don't care about
+ * proxy config in env vars, because make-fetch-happen will do that for us.
+ *
+ * @returns proxy configuration
+ */
+async function getNpmProxyConfig(): Promise<Pick<FetchOptions, "proxy" | "noProxy">> {
+    const proxy = (await getNmpConfig("https-proxy")) ?? (await getNmpConfig("proxy"));
+    const noProxy = (await getNmpConfig("noproxy")) ?? (await getNmpConfig("no-proxy"));
+
+    return { proxy, noProxy };
+}
+
+/**
+ * Download a file from `url` to `dir`. Will try to avoid downloading existing
+ * files by using the cache directory ~/.keycloakify/cache
 *
 * If the target directory does not exist, it will be created.
 *
- * If the target file exists and is out of date, it will be overwritten.
- * If the target file exists and there is no etag file, the target file will
- * be overwritten.
+ * If the target file exists, it will be overwritten.
+ *
+ * We use make-fetch-happen's internal file cache here, so we don't need to
+ * worry about redownloading the same file over and over. Unfortunately, that
+ * cache does not have a single file per entry, but bundles and indexes them,
+ * so we still need to write the contents to the target directory (possibly
+ * over and over), cause the current unzip implementation wants random access.
 *
 * @param url download url
 * @param dir target directory
+ * @param filename target filename
 * @returns promise for the full path of the downloaded file
 */
-async function download(url: string, dir: string): Promise<string> {
-    await mkdir(dir, { recursive: true });
-    const filename = pathBasename(url);
+async function download(url: string, dir: string, filename: string): Promise<string> {
+    const proxyOpts = await getNpmProxyConfig();
+    const cacheRoot = process.env.XDG_CACHE_HOME ?? homedir();
+    const cachePath = join(cacheRoot, ".keycloakify/cache");
+    const opts: FetchOptions = { cachePath, ...proxyOpts };
+    const response = await fetch(url, opts);
    const filepath = pathJoin(dir, filename);
-    // If downloaded file exists already and has an `.etag` companion file,
-    // read the etag from that file. This will avoid re-downloading the file
-    // if it is up to date.
-    const exists = await maybeStat(filepath);
-    const etagFilepath = pathJoin(dir, "_" + hash(url).substring(0, 15) + ".etag");
-    const etag = !exists ? undefined : await maybeReadFile(etagFilepath);
-
-    return new Promise((resolve, reject) => {
-        // use inner method to allow following redirects
-        function request(url1: URL) {
-            const headers: Record<string, string> = {};
-            if (etag) headers["If-None-Match"] = etag;
-            (url1.protocol === "https:" ? https : http).get(url1, { headers }, response => {
-                if (response.statusCode === 301 || response.statusCode === 302) {
-                    // follow redirects
-                    request(new URL(response.headers.location!!));
-                } else if (response.statusCode === 304) {
-                    // up-to-date, resolve now
-                    resolve(filepath);
-                } else if (response.statusCode !== 200) {
-                    reject(new Error(`Request to ${url1} returned status ${response.statusCode}.`));
-                } else {
-                    const fp = createWriteStream(filepath, { autoClose: true });
-                    fp.on("err", e => {
-                        fp.close();
-                        unlinkSync(filepath);
-                        reject(e);
-                    });
-                    fp.on("finish", async () => {
-                        // when targetfile has been written, write etag file so that
-                        // next time around we don't need to re-download
-                        const responseEtag = response.headers.etag;
-                        if (responseEtag) await writeFile(etagFilepath, responseEtag, "utf-8");
-                        resolve(filepath);
-                    });
-                    response.pipe(fp);
-                }
-            });
-        }
-        request(new URL(url));
-    });
+    await mkdir(dir, { recursive: true });
+    await writeFile(filepath, response.body);
+    return filepath;
 }

 /**
@ -278,7 +263,8 @@ export async function downloadAndUnzip({
    const downloadHash = hash(JSON.stringify({ url, pathOfDirToExtractInArchive })).substring(0, 15);
    const extractDirPath = pathJoin(cacheDirPath, `_${downloadHash}`);

-    const zipFilepath = await download(url, cacheDirPath);
+    const filename = pathBasename(url);
+    const zipFilepath = await download(url, cacheDirPath, filename);
    const zipMtime = (await stat(zipFilepath)).mtimeMs;
    const unzipMtime = (await maybeStat(extractDirPath))?.mtimeMs;

--- a/src/lib/components/KcApp.tsx
+++ b/src/lib/components/KcApp.tsx
@ -1,41 +1,34 @@
-import React, { lazy, memo, Suspense } from "react";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { KcProps } from "./KcProps";
-import { __unsafe_useI18n as useI18n } from "../i18n";
-import type { I18n } from "../i18n";
+import React, { lazy, Suspense } from "react";
+import { __unsafe_useI18n as useI18n } from "./i18n";
 import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
+import type { KcContextBase } from "./getKcContext/KcContextBase";
+import type { PageProps } from "./KcProps";
+import type { I18nBase } from "./i18n";
+import type { SetOptional } from "./tools/SetOptional";

-const Login = lazy(() => import("./Login"));
-const Register = lazy(() => import("./Register"));
-const RegisterUserProfile = lazy(() => import("./RegisterUserProfile"));
-const Info = lazy(() => import("./Info"));
-const Error = lazy(() => import("./Error"));
-const LoginResetPassword = lazy(() => import("./LoginResetPassword"));
-const LoginVerifyEmail = lazy(() => import("./LoginVerifyEmail"));
-const Terms = lazy(() => import("./Terms"));
-const LoginOtp = lazy(() => import("./LoginOtp"));
-const LoginPassword = lazy(() => import("./LoginPassword"));
-const LoginUsername = lazy(() => import("./LoginUsername"));
-const WebauthnAuthenticate = lazy(() => import("./WebauthnAuthenticate"));
-const LoginUpdatePassword = lazy(() => import("./LoginUpdatePassword"));
-const LoginUpdateProfile = lazy(() => import("./LoginUpdateProfile"));
-const LoginIdpLinkConfirm = lazy(() => import("./LoginIdpLinkConfirm"));
-const LoginPageExpired = lazy(() => import("./LoginPageExpired"));
-const LoginIdpLinkEmail = lazy(() => import("./LoginIdpLinkEmail"));
-const LoginConfigTotp = lazy(() => import("./LoginConfigTotp"));
-const LogoutConfirm = lazy(() => import("./LogoutConfirm"));
-const UpdateUserProfile = lazy(() => import("./UpdateUserProfile"));
-const IdpReviewUserProfile = lazy(() => import("./IdpReviewUserProfile"));
+const Login = lazy(() => import("./pages/Login"));
+const Register = lazy(() => import("./pages/Register"));
+const RegisterUserProfile = lazy(() => import("./pages/RegisterUserProfile"));
+const Info = lazy(() => import("./pages/Info"));
+const Error = lazy(() => import("./pages/Error"));
+const LoginResetPassword = lazy(() => import("./pages/LoginResetPassword"));
+const LoginVerifyEmail = lazy(() => import("./pages/LoginVerifyEmail"));
+const Terms = lazy(() => import("./pages/Terms"));
+const LoginOtp = lazy(() => import("./pages/LoginOtp"));
+const LoginPassword = lazy(() => import("./pages/LoginPassword"));
+const LoginUsername = lazy(() => import("./pages/LoginUsername"));
+const WebauthnAuthenticate = lazy(() => import("./pages/WebauthnAuthenticate"));
+const LoginUpdatePassword = lazy(() => import("./pages/LoginUpdatePassword"));
+const LoginUpdateProfile = lazy(() => import("./pages/LoginUpdateProfile"));
+const LoginIdpLinkConfirm = lazy(() => import("./pages/LoginIdpLinkConfirm"));
+const LoginPageExpired = lazy(() => import("./pages/LoginPageExpired"));
+const LoginIdpLinkEmail = lazy(() => import("./pages/LoginIdpLinkEmail"));
+const LoginConfigTotp = lazy(() => import("./pages/LoginConfigTotp"));
+const LogoutConfirm = lazy(() => import("./pages/LogoutConfirm"));
+const UpdateUserProfile = lazy(() => import("./pages/UpdateUserProfile"));
+const IdpReviewUserProfile = lazy(() => import("./pages/IdpReviewUserProfile"));

-export type KcAppProps = KcProps & {
-    kcContext: KcContextBase;
-    i18n?: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const KcApp = memo((props_: KcAppProps) => {
+export default function KcApp(props_: SetOptional<PageProps<KcContextBase, I18nBase>, "Template">) {
    const { kcContext, i18n: userProvidedI18n, Template = DefaultTemplate, ...kcProps } = props_;

    const i18n = (function useClosure() {
@ -104,6 +97,4 @@ const KcApp = memo((props_: KcAppProps) => {
            })()}
        </Suspense>
    );
-});
-
-export default KcApp;
+}
--- a/src/lib/components/KcProps.ts
+++ b/src/lib/components/KcProps.ts
@ -1,5 +1,8 @@
-import { allPropertiesValuesToUndefined } from "../tools/allPropertiesValuesToUndefined";
+import { allPropertiesValuesToUndefined } from "./tools/allPropertiesValuesToUndefined";
 import { assert } from "tsafe/assert";
+import type { KcContextBase } from "./getKcContext";
+import type { ReactNode } from "react";
+import { I18nBase } from "./i18n";

 /** Class names can be provided as an array or separated by whitespace */
 export type KcPropsGeneric<CssClasses extends string> = {
@ -205,6 +208,29 @@ export const defaultKcProps = {
    "kcFormOptionsWrapperClass": []
 } as const;

+export type TemplateProps<KcContext extends KcContextBase.Common, I18n extends I18nBase> = {
+    kcContext: KcContext;
+    i18n: I18n;
+    doFetchDefaultThemeResources: boolean;
+} & {
+    displayInfo?: boolean;
+    displayMessage?: boolean;
+    displayRequiredFields?: boolean;
+    displayWide?: boolean;
+    showAnotherWayIfPresent?: boolean;
+    headerNode: ReactNode;
+    showUsernameNode?: ReactNode;
+    formNode: ReactNode;
+    infoNode?: ReactNode;
+} & KcTemplateProps;
+
+export type PageProps<KcContext, I18n extends I18nBase> = {
+    kcContext: KcContext;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template: (props: TemplateProps<any, any>) => JSX.Element | null;
+} & KcProps;
+
 assert<typeof defaultKcProps extends KcProps ? true : false>();

 /** Tu use if you don't want any default */
--- a/src/lib/components/Template.tsx
+++ b/src/lib/components/Template.tsx
@ -1,32 +1,13 @@
-import React, { useReducer, useEffect, memo } from "react";
-import type { ReactNode } from "react";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { assert } from "../tools/assert";
-import { useCallbackFactory } from "powerhooks/useCallbackFactory";
-import { headInsert } from "../tools/headInsert";
-import { pathJoin } from "../../bin/tools/pathJoin";
-import { useConstCallback } from "powerhooks/useConstCallback";
-import type { KcTemplateProps } from "./KcProps";
-import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+import React, { useReducer, useEffect } from "react";
+import { assert } from "./tools/assert";
+import { headInsert } from "./tools/headInsert";
+import { pathJoin } from "../bin/tools/pathJoin";
+import { clsx } from "./tools/clsx";
+import type { TemplateProps } from "./KcProps";
+import type { KcContextBase } from "./getKcContext/KcContextBase";
+import type { I18nBase } from "./i18n";

-export type TemplateProps = {
-    displayInfo?: boolean;
-    displayMessage?: boolean;
-    displayRequiredFields?: boolean;
-    displayWide?: boolean;
-    showAnotherWayIfPresent?: boolean;
-    headerNode: ReactNode;
-    showUsernameNode?: ReactNode;
-    formNode: ReactNode;
-    infoNode?: ReactNode;
-    /** If you write your own page you probably want
-     * to avoid pulling the default theme assets.
-     */
-    doFetchDefaultThemeResources: boolean;
-} & { kcContext: KcContextBase; i18n: I18n } & KcTemplateProps;
-
-const Template = memo((props: TemplateProps) => {
+export default function Template(props: TemplateProps<KcContextBase.Common, I18nBase>) {
    const {
        displayInfo = false,
        displayMessage = true,
@ -39,76 +20,27 @@ const Template = memo((props: TemplateProps) => {
        infoNode = null,
        kcContext,
        i18n,
-        doFetchDefaultThemeResources
+        doFetchDefaultThemeResources,
+        stylesCommon,
+        styles,
+        scripts,
+        kcHtmlClass
    } = props;

    const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;

-    const onChangeLanguageClickFactory = useCallbackFactory(([kcLanguageTag]: [string]) => changeLocale(kcLanguageTag));
-
-    const onTryAnotherWayClick = useConstCallback(() => (document.forms["kc-select-try-another-way-form" as never].submit(), false));
-
    const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext;

-    const [isExtraCssLoaded, setExtraCssLoaded] = useReducer(() => true, false);
+    const { isReady } = usePrepareTemplate({
+        doFetchDefaultThemeResources,
+        stylesCommon,
+        styles,
+        scripts,
+        url,
+        kcHtmlClass
+    });

-    useEffect(() => {
-        if (!doFetchDefaultThemeResources) {
-            setExtraCssLoaded();
-            return;
-        }
-
-        let isUnmounted = false;
-        const cleanups: (() => void)[] = [];
-
-        const toArr = (x: string | readonly string[] | undefined) => (typeof x === "string" ? x.split(" ") : x ?? []);
-
-        Promise.all(
-            [
-                ...toArr(props.stylesCommon).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
-                ...toArr(props.styles).map(relativePath => pathJoin(url.resourcesPath, relativePath))
-            ]
-                .reverse()
-                .map(href =>
-                    headInsert({
-                        "type": "css",
-                        href,
-                        "position": "prepend"
-                    })
-                )
-        ).then(() => {
-            if (isUnmounted) {
-                return;
-            }
-
-            setExtraCssLoaded();
-        });
-
-        toArr(props.scripts).forEach(relativePath =>
-            headInsert({
-                "type": "javascript",
-                "src": pathJoin(url.resourcesPath, relativePath)
-            })
-        );
-
-        if (props.kcHtmlClass !== undefined) {
-            const htmlClassList = document.getElementsByTagName("html")[0].classList;
-
-            const tokens = clsx(props.kcHtmlClass).split(" ");
-
-            htmlClassList.add(...tokens);
-
-            cleanups.push(() => htmlClassList.remove(...tokens));
-        }
-
-        return () => {
-            isUnmounted = true;
-
-            cleanups.forEach(f => f());
-        };
-    }, [props.kcHtmlClass]);
-
-    if (!isExtraCssLoaded) {
+    if (!isReady) {
        return null;
    }

@ -126,13 +58,15 @@ const Template = memo((props: TemplateProps) => {
                        <div id="kc-locale">
                            <div id="kc-locale-wrapper" className={clsx(props.kcLocaleWrapperClass)}>
                                <div className="kc-dropdown" id="kc-locale-dropdown">
+                                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                                    <a href="#" id="kc-current-locale-link">
                                        {labelBySupportedLanguageTag[currentLanguageTag]}
                                    </a>
                                    <ul>
                                        {locale.supported.map(({ languageTag }) => (
                                            <li key={languageTag} className="kc-dropdown-item">
-                                                <a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
+                                                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                                <a href="#" onClick={() => changeLocale(languageTag)}>
                                                    {labelBySupportedLanguageTag[languageTag]}
                                                </a>
                                            </li>
@ -225,7 +159,15 @@ const Template = memo((props: TemplateProps) => {
                                <div className={clsx(displayWide && [props.kcFormSocialAccountContentClass, props.kcFormSocialAccountClass])}>
                                    <div className={clsx(props.kcFormGroupClass)}>
                                        <input type="hidden" name="tryAnotherWay" value="on" />
-                                        <a href="#" id="try-another-way" onClick={onTryAnotherWayClick}>
+                                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                        <a
+                                            href="#"
+                                            id="try-another-way"
+                                            onClick={() => {
+                                                document.forms["kc-select-try-another-way-form" as never].submit();
+                                                return false;
+                                            }}
+                                        >
                                            {msg("doTryAnotherWay")}
                                        </a>
                                    </div>
@ -244,6 +186,80 @@ const Template = memo((props: TemplateProps) => {
            </div>
        </div>
    );
-});
+}

-export default Template;
+export function usePrepareTemplate(params: {
+    doFetchDefaultThemeResources: boolean;
+    stylesCommon: string | readonly string[] | undefined;
+    styles: string | readonly string[] | undefined;
+    scripts: string | readonly string[] | undefined;
+    url: {
+        resourcesCommonPath: string;
+        resourcesPath: string;
+    };
+    kcHtmlClass: string | readonly string[] | undefined;
+}) {
+    const { doFetchDefaultThemeResources, stylesCommon, styles, url, scripts, kcHtmlClass } = params;
+
+    const [isReady, setReady] = useReducer(() => true, !doFetchDefaultThemeResources);
+
+    useEffect(() => {
+        if (!doFetchDefaultThemeResources) {
+            return;
+        }
+
+        let isUnmounted = false;
+
+        const toArr = (x: string | readonly string[] | undefined) => (typeof x === "string" ? x.split(" ") : x ?? []);
+
+        Promise.all(
+            [
+                ...toArr(stylesCommon).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
+                ...toArr(styles).map(relativePath => pathJoin(url.resourcesPath, relativePath))
+            ]
+                .reverse()
+                .map(href =>
+                    headInsert({
+                        "type": "css",
+                        href,
+                        "position": "prepend"
+                    })
+                )
+        ).then(() => {
+            if (isUnmounted) {
+                return;
+            }
+
+            setReady();
+        });
+
+        toArr(scripts).forEach(relativePath =>
+            headInsert({
+                "type": "javascript",
+                "src": pathJoin(url.resourcesPath, relativePath)
+            })
+        );
+
+        return () => {
+            isUnmounted = true;
+        };
+    }, [kcHtmlClass]);
+
+    useEffect(() => {
+        if (kcHtmlClass === undefined) {
+            return;
+        }
+
+        const htmlClassList = document.getElementsByTagName("html")[0].classList;
+
+        const tokens = clsx(kcHtmlClass).split(" ");
+
+        htmlClassList.add(...tokens);
+
+        return () => {
+            htmlClassList.remove(...tokens);
+        };
+    }, [kcHtmlClass]);
+
+    return { isReady };
+}
--- a/src/lib/components/shared/UserProfileCommons.tsx
+++ b/src/lib/components/shared/UserProfileCommons.tsx
@ -1,173 +0,0 @@
-import React, { memo, useEffect, Fragment } from "react";
-import type { KcProps } from "../KcProps";
-import type { Attribute } from "../../getKcContext/KcContextBase";
-import { clsx } from "../../tools/clsx";
-import type { ReactComponent } from "../../tools/ReactComponent";
-import { useCallbackFactory } from "powerhooks/useCallbackFactory";
-import { useFormValidationSlice } from "../../useFormValidationSlice";
-import type { I18n } from "../../i18n";
-import type { Param0 } from "tsafe/Param0";
-
-export type UserProfileFormFieldsProps = {
-    kcContext: Param0<typeof useFormValidationSlice>["kcContext"];
-    i18n: I18n;
-} & KcProps &
-    Partial<Record<"BeforeField" | "AfterField", ReactComponent<{ attribute: Attribute }>>> & {
-        onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
-    };
-
-export const UserProfileFormFields = memo(
-    ({ kcContext, onIsFormSubmittableValueChange, i18n, BeforeField, AfterField, ...props }: UserProfileFormFieldsProps) => {
-        const { advancedMsg } = i18n;
-
-        const {
-            formValidationState: { fieldStateByAttributeName, isFormSubmittable },
-            formValidationReducer,
-            attributesWithPassword
-        } = useFormValidationSlice({
-            kcContext,
-            i18n
-        });
-
-        useEffect(() => {
-            onIsFormSubmittableValueChange(isFormSubmittable);
-        }, [isFormSubmittable]);
-
-        const onChangeFactory = useCallbackFactory(
-            (
-                [name]: [string],
-                [
-                    {
-                        target: { value }
-                    }
-                ]: [React.ChangeEvent<HTMLInputElement | HTMLSelectElement>]
-            ) =>
-                formValidationReducer({
-                    "action": "update value",
-                    name,
-                    "newValue": value
-                })
-        );
-
-        const onBlurFactory = useCallbackFactory(([name]: [string]) =>
-            formValidationReducer({
-                "action": "focus lost",
-                name
-            })
-        );
-
-        let currentGroup = "";
-
-        return (
-            <>
-                {attributesWithPassword.map((attribute, i) => {
-                    const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute;
-
-                    const { value, displayableErrors } = fieldStateByAttributeName[attribute.name];
-
-                    const formGroupClassName = clsx(props.kcFormGroupClass, displayableErrors.length !== 0 && props.kcFormGroupErrorClass);
-
-                    return (
-                        <Fragment key={i}>
-                            {group !== currentGroup && (currentGroup = group) !== "" && (
-                                <div className={formGroupClassName}>
-                                    <div className={clsx(props.kcContentWrapperClass)}>
-                                        <label id={`header-${group}`} className={clsx(props.kcFormGroupHeader)}>
-                                            {advancedMsg(groupDisplayHeader) || currentGroup}
-                                        </label>
-                                    </div>
-                                    {groupDisplayDescription !== "" && (
-                                        <div className={clsx(props.kcLabelWrapperClass)}>
-                                            <label id={`description-${group}`} className={`${clsx(props.kcLabelClass)}`}>
-                                                {advancedMsg(groupDisplayDescription)}
-                                            </label>
-                                        </div>
-                                    )}
-                                </div>
-                            )}
-
-                            {BeforeField && <BeforeField attribute={attribute} />}
-
-                            <div className={formGroupClassName}>
-                                <div className={clsx(props.kcLabelWrapperClass)}>
-                                    <label htmlFor={attribute.name} className={clsx(props.kcLabelClass)}>
-                                        {advancedMsg(attribute.displayName ?? "")}
-                                    </label>
-                                    {attribute.required && <>*</>}
-                                </div>
-                                <div className={clsx(props.kcInputWrapperClass)}>
-                                    {(() => {
-                                        const { options } = attribute.validators;
-
-                                        if (options !== undefined) {
-                                            return (
-                                                <select
-                                                    id={attribute.name}
-                                                    name={attribute.name}
-                                                    onChange={onChangeFactory(attribute.name)}
-                                                    onBlur={onBlurFactory(attribute.name)}
-                                                    value={value}
-                                                >
-                                                    {options.options.map(option => (
-                                                        <option key={option} value={option}>
-                                                            {option}
-                                                        </option>
-                                                    ))}
-                                                </select>
-                                            );
-                                        }
-
-                                        return (
-                                            <input
-                                                type={(() => {
-                                                    switch (attribute.name) {
-                                                        case "password-confirm":
-                                                        case "password":
-                                                            return "password";
-                                                        default:
-                                                            return "text";
-                                                    }
-                                                })()}
-                                                id={attribute.name}
-                                                name={attribute.name}
-                                                value={value}
-                                                onChange={onChangeFactory(attribute.name)}
-                                                className={clsx(props.kcInputClass)}
-                                                aria-invalid={displayableErrors.length !== 0}
-                                                disabled={attribute.readOnly}
-                                                autoComplete={attribute.autocomplete}
-                                                onBlur={onBlurFactory(attribute.name)}
-                                            />
-                                        );
-                                    })()}
-                                    {displayableErrors.length !== 0 &&
-                                        (() => {
-                                            const divId = `input-error-${attribute.name}`;
-
-                                            return (
-                                                <>
-                                                    <style>{`#${divId} > span: { display: block; }`}</style>
-                                                    <span
-                                                        id={divId}
-                                                        className={clsx(props.kcInputErrorMessageClass)}
-                                                        style={{
-                                                            "position": displayableErrors.length === 1 ? "absolute" : undefined
-                                                        }}
-                                                        aria-live="polite"
-                                                    >
-                                                        {displayableErrors.map(({ errorMessage }) => errorMessage)}
-                                                    </span>
-                                                </>
-                                            );
-                                        })()}
-                                </div>
-                            </div>
-
-                            {AfterField && <AfterField attribute={attribute} />}
-                        </Fragment>
-                    );
-                })}
-            </>
-        );
-    }
-);
--- a/src/lib/getKcContext/KcContextBase.ts
+++ b/src/lib/getKcContext/KcContextBase.ts
@ -2,7 +2,7 @@ import type { PageId } from "../../bin/keycloakify/generateFtl";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import type { MessageKeyBase } from "../i18n";
-import type { KcTemplateClassKey } from "../components/KcProps";
+import type { KcTemplateClassKey } from "../KcProps";

 type ExtractAfterStartingWith<Prefix extends string, StrEnum> = StrEnum extends `${Prefix}${infer U}` ? U : never;

--- a/src/lib/getKcContext/kcContextMocks/kcContextMocks.ts
+++ b/src/lib/getKcContext/kcContextMocks/kcContextMocks.ts
@ -1,9 +1,9 @@
 import "minimal-polyfills/Object.fromEntries";
-import type { KcContextBase, Attribute } from "../KcContextBase";
+import type { KcContextBase, Attribute } from "./KcContextBase";
 //NOTE: Aside because we want to be able to import them from node
-import { mockTestingResourcesCommonPath, mockTestingResourcesPath } from "../../../bin/mockTestingResourcesPath";
+import { mockTestingResourcesCommonPath, mockTestingResourcesPath } from "../../bin/mockTestingResourcesPath";
 import { id } from "tsafe/id";
-import { pathJoin } from "../../../bin/tools/pathJoin";
+import { pathJoin } from "../../bin/tools/pathJoin";

 const PUBLIC_URL = process.env["PUBLIC_URL"] ?? "/";

@ -117,10 +117,13 @@ export const kcContextCommonMock: KcContextBase.Common = {
        "registrationEmailAsUsername": false
    },
    "messagesPerField": {
-        "printIfExists": (...[, x]) => x,
-        "existsError": () => true,
+        "printIfExists": () => {
+            console.log("coucou");
+            return undefined;
+        },
+        "existsError": () => false,
        "get": key => `Fake error for ${key}`,
-        "exists": () => true
+        "exists": () => false
    },
    "locale": {
        "supported": [
--- a/src/lib/getKcContext/kcContextMocks/index.ts
+++ b/src/lib/getKcContext/kcContextMocks/index.ts
@ -1 +0,0 @@
-export * from "./kcContextMocks";
--- a/src/lib/i18n/i18n.tsx
+++ b/src/lib/i18n/i18n.tsx
@ -0,0 +1,292 @@
+import "minimal-polyfills/Object.fromEntries";
+//NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
+import React, { useEffect, useState, useRef } from "react";
+import type baseMessages from "./generated_messages/18.0.1/login/en";
+import { assert } from "tsafe/assert";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { Markdown } from "../tools/Markdown";
+
+export const fallbackLanguageTag = "en";
+
+export type KcContextLike = {
+    locale?: {
+        currentLanguageTag: string;
+        supported: { languageTag: string; url: string; label: string }[];
+    };
+};
+
+assert<KcContextBase extends KcContextLike ? true : false>();
+
+export type MessageKeyBase = keyof typeof baseMessages | keyof (typeof keycloakifyExtraMessages)[typeof fallbackLanguageTag];
+
+export type I18n<MessageKey extends string> = {
+    /**
+     * e.g: "en", "fr", "zh-CN"
+     *
+     * The current language
+     */
+    currentLanguageTag: string;
+    /**
+     * To call when the user switch language.
+     * This will cause the page to be reloaded,
+     * on next load currentLanguageTag === newLanguageTag
+     */
+    changeLocale: (newLanguageTag: string) => never;
+    /**
+     * e.g. "en" => "English", "fr" => "Français", ...
+     *
+     * Used to render a select that enable user to switch language.
+     * ex: https://user-images.githubusercontent.com/6702424/186044799-38801eec-4e89-483b-81dd-8e9233e8c0eb.png
+     * */
+    labelBySupportedLanguageTag: Record<string, string>;
+    /**
+     * Examples assuming currentLanguageTag === "en"
+     *
+     * msg("access-denied") === <span>Access denied</span>
+     * msg("impersonateTitleHtml", "Foo") === <span><strong>Foo</strong> Impersonate User</span>
+     */
+    msg: (key: MessageKey, ...args: (string | undefined)[]) => JSX.Element;
+    /**
+     * It's the same thing as msg() but instead of returning a JSX.Element it returns a string.
+     * It can be more convenient to manipulate strings but if there are HTML tags it wont render.
+     * msgStr("impersonateTitleHtml", "Foo") === "<strong>Foo</strong> Impersonate User"
+     */
+    msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
+    /**
+     * Examples assuming currentLanguageTag === "en"
+     * 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: (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"
+     */
+    advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
+};
+
+export type I18nBase = I18n<MessageKeyBase>;
+
+export function __unsafe_useI18n<ExtraMessageKey extends string = never>(params: {
+    kcContext: KcContextLike;
+    extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } };
+    doSkip: boolean;
+}): I18n<MessageKeyBase | ExtraMessageKey> | null {
+    const { kcContext, extraMessages, doSkip } = params;
+
+    const [i18n, setI18n] = useState<I18n<ExtraMessageKey | MessageKeyBase> | undefined>(undefined);
+
+    const refHasStartedFetching = useRef(false);
+
+    useEffect(() => {
+        if (doSkip || refHasStartedFetching.current) {
+            return;
+        }
+
+        refHasStartedFetching.current = true;
+
+        (async () => {
+            const { currentLanguageTag = fallbackLanguageTag } = kcContext.locale ?? {};
+
+            const [fallbackMessages, messages] = await Promise.all([
+                import("./generated_messages/18.0.1/login/en"),
+                (() => {
+                    switch (currentLanguageTag) {
+                        case "ca":
+                            return import("./generated_messages/18.0.1/login/ca");
+                        case "cs":
+                            return import("./generated_messages/18.0.1/login/cs");
+                        case "da":
+                            return import("./generated_messages/18.0.1/login/da");
+                        case "de":
+                            return import("./generated_messages/18.0.1/login/de");
+                        case "en":
+                            return import("./generated_messages/18.0.1/login/en");
+                        case "es":
+                            return import("./generated_messages/18.0.1/login/es");
+                        case "fi":
+                            return import("./generated_messages/18.0.1/login/fi");
+                        case "fr":
+                            return import("./generated_messages/18.0.1/login/fr");
+                        case "hu":
+                            return import("./generated_messages/18.0.1/login/hu");
+                        case "it":
+                            return import("./generated_messages/18.0.1/login/it");
+                        case "ja":
+                            return import("./generated_messages/18.0.1/login/ja");
+                        case "lt":
+                            return import("./generated_messages/18.0.1/login/lt");
+                        case "lv":
+                            return import("./generated_messages/18.0.1/login/lv");
+                        case "nl":
+                            return import("./generated_messages/18.0.1/login/nl");
+                        case "no":
+                            return import("./generated_messages/18.0.1/login/no");
+                        case "pl":
+                            return import("./generated_messages/18.0.1/login/pl");
+                        case "pt-BR":
+                            return import("./generated_messages/18.0.1/login/pt-BR");
+                        case "ru":
+                            return import("./generated_messages/18.0.1/login/ru");
+                        case "sk":
+                            return import("./generated_messages/18.0.1/login/sk");
+                        case "sv":
+                            return import("./generated_messages/18.0.1/login/sv");
+                        case "tr":
+                            return import("./generated_messages/18.0.1/login/tr");
+                        case "zh-CN":
+                            return import("./generated_messages/18.0.1/login/zh-CN");
+                        default:
+                            return { "default": {} };
+                    }
+                })()
+            ]).then(modules => modules.map(module => module.default));
+
+            setI18n({
+                ...createI18nTranslationFunctions({
+                    "fallbackMessages": {
+                        ...fallbackMessages,
+                        ...(keycloakifyExtraMessages[fallbackLanguageTag] ?? {}),
+                        ...(extraMessages[fallbackLanguageTag] ?? {})
+                    } as any,
+                    "messages": {
+                        ...messages,
+                        ...((keycloakifyExtraMessages as any)[currentLanguageTag] ?? {}),
+                        ...(extraMessages[currentLanguageTag] ?? {})
+                    } as any
+                }),
+                currentLanguageTag,
+                "changeLocale": newLanguageTag => {
+                    const { locale } = kcContext;
+
+                    assert(locale !== undefined, "Internationalization not enabled");
+
+                    const targetSupportedLocale = locale.supported.find(({ languageTag }) => languageTag === newLanguageTag);
+
+                    assert(targetSupportedLocale !== undefined, `${newLanguageTag} need to be enabled in Keycloak admin`);
+
+                    window.location.href = targetSupportedLocale.url;
+
+                    assert(false, "never");
+                },
+                "labelBySupportedLanguageTag": Object.fromEntries(
+                    (kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label])
+                )
+            });
+        })();
+    }, []);
+
+    return i18n ?? null;
+}
+
+const useI18n_private = __unsafe_useI18n;
+
+export function useI18n<ExtraMessageKey extends string = never>(params: {
+    kcContext: KcContextLike;
+    extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } };
+}): I18n<MessageKeyBase | ExtraMessageKey> | null {
+    return useI18n_private({
+        ...params,
+        "doSkip": false
+    });
+}
+
+function createI18nTranslationFunctions<MessageKey extends string>(params: {
+    fallbackMessages: Record<MessageKey, string>;
+    messages: Record<MessageKey, string>;
+}): Pick<I18n<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;
+
+        const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
+
+        if (messageOrUndefined === undefined) {
+            return undefined;
+        }
+
+        const message = messageOrUndefined;
+
+        const messageWithArgsInjectedIfAny = (() => {
+            const startIndex = message
+                .match(/{[0-9]+}/g)
+                ?.map(g => g.match(/{([0-9]+)}/)![1])
+                .map(indexStr => parseInt(indexStr))
+                .sort((a, b) => a - b)[0];
+
+            if (startIndex === undefined) {
+                // No {0} in message (no arguments expected)
+                return message;
+            }
+
+            let messageWithArgsInjected = message;
+
+            args.forEach((arg, i) => {
+                if (arg === undefined) {
+                    return;
+                }
+
+                messageWithArgsInjected = messageWithArgsInjected.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg);
+            });
+
+            return messageWithArgsInjected;
+        })();
+
+        return doRenderMarkdown ? (
+            <Markdown allowDangerousHtml renderers={{ "paragraph": "span" }}>
+                {messageWithArgsInjectedIfAny}
+            </Markdown>
+        ) : (
+            messageWithArgsInjectedIfAny
+        );
+    }
+
+    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): JSX.Element | string {
+        const { key, args, doRenderMarkdown } = props;
+
+        const match = key.match(/^\$\{([^{]+)\}$/);
+
+        const keyUnwrappedFromCurlyBraces = match === null ? key : match[1];
+
+        const out = resolveMsg({
+            "key": keyUnwrappedFromCurlyBraces,
+            args,
+            doRenderMarkdown
+        });
+
+        return (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
+    }
+
+    return {
+        "msgStr": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": false }) as string,
+        "msg": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": true }) as JSX.Element,
+        "advancedMsg": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": true }) as JSX.Element,
+        "advancedMsgStr": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": false }) as string
+    };
+}
+
+const keycloakifyExtraMessages = {
+    "en": {
+        "shouldBeEqual": "{0} should be equal to {1}",
+        "shouldBeDifferent": "{0} should be different to {1}",
+        "shouldMatchPattern": "Pattern should match: `/{0}/`",
+        "mustBeAnInteger": "Must be an integer",
+        "notAValidOption": "Not a valid option"
+    },
+    "fr": {
+        /* spell-checker: disable */
+        "shouldBeEqual": "{0} doit être égal à {1}",
+        "shouldBeDifferent": "{0} doit être différent de {1}",
+        "shouldMatchPattern": "Dois respecter le schéma: `/{0}/`",
+        "mustBeAnInteger": "Doit être un nombre entier",
+        "notAValidOption": "N'est pas une option valide",
+
+        "logoutConfirmTitle": "Déconnexion",
+        "logoutConfirmHeader": "Êtes-vous sûr(e) de vouloir vous déconnecter ?",
+        "doLogout": "Se déconnecter"
+        /* spell-checker: enable */
+    }
+};
--- a/src/lib/i18n/index.tsx
+++ b/src/lib/i18n/index.tsx
@ -1,290 +1 @@
-import "minimal-polyfills/Object.fromEntries";
-//NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
-import React, { useEffect, useState, useRef } from "react";
-import type baseMessages from "./generated_messages/18.0.1/login/en";
-import { assert } from "tsafe/assert";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { Markdown } from "../tools/Markdown";
-
-export const fallbackLanguageTag = "en";
-
-export type KcContextLike = {
-    locale?: {
-        currentLanguageTag: string;
-        supported: { languageTag: string; url: string; label: string }[];
-    };
-};
-
-assert<KcContextBase extends KcContextLike ? true : false>();
-
-export type MessageKeyBase = keyof typeof baseMessages | keyof typeof keycloakifyExtraMessages[typeof fallbackLanguageTag];
-
-export type I18n<MessageKey extends string = MessageKeyBase> = {
-    /**
-     * e.g: "en", "fr", "zh-CN"
-     *
-     * The current language
-     */
-    currentLanguageTag: string;
-    /**
-     * To call when the user switch language.
-     * This will cause the page to be reloaded,
-     * on next load currentLanguageTag === newLanguageTag
-     */
-    changeLocale: (newLanguageTag: string) => never;
-    /**
-     * e.g. "en" => "English", "fr" => "Français", ...
-     *
-     * Used to render a select that enable user to switch language.
-     * ex: https://user-images.githubusercontent.com/6702424/186044799-38801eec-4e89-483b-81dd-8e9233e8c0eb.png
-     * */
-    labelBySupportedLanguageTag: Record<string, string>;
-    /**
-     * Examples assuming currentLanguageTag === "en"
-     *
-     * msg("access-denied") === <span>Access denied</span>
-     * msg("impersonateTitleHtml", "Foo") === <span><strong>Foo</strong> Impersonate User</span>
-     */
-    msg: (key: MessageKey, ...args: (string | undefined)[]) => JSX.Element;
-    /**
-     * It's the same thing as msg() but instead of returning a JSX.Element it returns a string.
-     * It can be more convenient to manipulate strings but if there are HTML tags it wont render.
-     * msgStr("impersonateTitleHtml", "Foo") === "<strong>Foo</strong> Impersonate User"
-     */
-    msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
-    /**
-     * Examples assuming currentLanguageTag === "en"
-     * 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: (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"
-     */
-    advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
-};
-
-export function __unsafe_useI18n<ExtraMessageKey extends string = never>(params: {
-    kcContext: KcContextLike;
-    extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } };
-    doSkip: boolean;
-}): I18n<MessageKeyBase | ExtraMessageKey> | null {
-    const { kcContext, extraMessages, doSkip } = params;
-
-    const [i18n, setI18n] = useState<I18n<ExtraMessageKey | MessageKeyBase> | undefined>(undefined);
-
-    const refHasStartedFetching = useRef(false);
-
-    useEffect(() => {
-        if (doSkip || refHasStartedFetching.current) {
-            return;
-        }
-
-        refHasStartedFetching.current = true;
-
-        (async () => {
-            const { currentLanguageTag = fallbackLanguageTag } = kcContext.locale ?? {};
-
-            const [fallbackMessages, messages] = await Promise.all([
-                import("./generated_messages/18.0.1/login/en"),
-                (() => {
-                    switch (currentLanguageTag) {
-                        case "ca":
-                            return import("./generated_messages/18.0.1/login/ca");
-                        case "cs":
-                            return import("./generated_messages/18.0.1/login/cs");
-                        case "da":
-                            return import("./generated_messages/18.0.1/login/da");
-                        case "de":
-                            return import("./generated_messages/18.0.1/login/de");
-                        case "en":
-                            return import("./generated_messages/18.0.1/login/en");
-                        case "es":
-                            return import("./generated_messages/18.0.1/login/es");
-                        case "fi":
-                            return import("./generated_messages/18.0.1/login/fi");
-                        case "fr":
-                            return import("./generated_messages/18.0.1/login/fr");
-                        case "hu":
-                            return import("./generated_messages/18.0.1/login/hu");
-                        case "it":
-                            return import("./generated_messages/18.0.1/login/it");
-                        case "ja":
-                            return import("./generated_messages/18.0.1/login/ja");
-                        case "lt":
-                            return import("./generated_messages/18.0.1/login/lt");
-                        case "lv":
-                            return import("./generated_messages/18.0.1/login/lv");
-                        case "nl":
-                            return import("./generated_messages/18.0.1/login/nl");
-                        case "no":
-                            return import("./generated_messages/18.0.1/login/no");
-                        case "pl":
-                            return import("./generated_messages/18.0.1/login/pl");
-                        case "pt-BR":
-                            return import("./generated_messages/18.0.1/login/pt-BR");
-                        case "ru":
-                            return import("./generated_messages/18.0.1/login/ru");
-                        case "sk":
-                            return import("./generated_messages/18.0.1/login/sk");
-                        case "sv":
-                            return import("./generated_messages/18.0.1/login/sv");
-                        case "tr":
-                            return import("./generated_messages/18.0.1/login/tr");
-                        case "zh-CN":
-                            return import("./generated_messages/18.0.1/login/zh-CN");
-                        default:
-                            return { "default": {} };
-                    }
-                })()
-            ]).then(modules => modules.map(module => module.default));
-
-            setI18n({
-                ...createI18nTranslationFunctions({
-                    "fallbackMessages": {
-                        ...fallbackMessages,
-                        ...(keycloakifyExtraMessages[fallbackLanguageTag] ?? {}),
-                        ...(extraMessages[fallbackLanguageTag] ?? {})
-                    } as any,
-                    "messages": {
-                        ...messages,
-                        ...((keycloakifyExtraMessages as any)[currentLanguageTag] ?? {}),
-                        ...(extraMessages[currentLanguageTag] ?? {})
-                    } as any
-                }),
-                currentLanguageTag,
-                "changeLocale": newLanguageTag => {
-                    const { locale } = kcContext;
-
-                    assert(locale !== undefined, "Internationalization not enabled");
-
-                    const targetSupportedLocale = locale.supported.find(({ languageTag }) => languageTag === newLanguageTag);
-
-                    assert(targetSupportedLocale !== undefined, `${newLanguageTag} need to be enabled in Keycloak admin`);
-
-                    window.location.href = targetSupportedLocale.url;
-
-                    assert(false, "never");
-                },
-                "labelBySupportedLanguageTag": Object.fromEntries(
-                    (kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label])
-                )
-            });
-        })();
-    }, []);
-
-    return i18n ?? null;
-}
-
-const useI18n_private = __unsafe_useI18n;
-
-export function useI18n<ExtraMessageKey extends string = never>(params: {
-    kcContext: KcContextLike;
-    extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } };
-}): I18n<MessageKeyBase | ExtraMessageKey> | null {
-    return useI18n_private({
-        ...params,
-        "doSkip": false
-    });
-}
-
-function createI18nTranslationFunctions<MessageKey extends string>(params: {
-    fallbackMessages: Record<MessageKey, string>;
-    messages: Record<MessageKey, string>;
-}): Pick<I18n<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;
-
-        const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
-
-        if (messageOrUndefined === undefined) {
-            return undefined;
-        }
-
-        const message = messageOrUndefined;
-
-        const messageWithArgsInjectedIfAny = (() => {
-            const startIndex = message
-                .match(/{[0-9]+}/g)
-                ?.map(g => g.match(/{([0-9]+)}/)![1])
-                .map(indexStr => parseInt(indexStr))
-                .sort((a, b) => a - b)[0];
-
-            if (startIndex === undefined) {
-                // No {0} in message (no arguments expected)
-                return message;
-            }
-
-            let messageWithArgsInjected = message;
-
-            args.forEach((arg, i) => {
-                if (arg === undefined) {
-                    return;
-                }
-
-                messageWithArgsInjected = messageWithArgsInjected.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg);
-            });
-
-            return messageWithArgsInjected;
-        })();
-
-        return doRenderMarkdown ? (
-            <Markdown allowDangerousHtml renderers={{ "paragraph": "span" }}>
-                {messageWithArgsInjectedIfAny}
-            </Markdown>
-        ) : (
-            messageWithArgsInjectedIfAny
-        );
-    }
-
-    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): JSX.Element | string {
-        const { key, args, doRenderMarkdown } = props;
-
-        const match = key.match(/^\$\{([^{]+)\}$/);
-
-        const keyUnwrappedFromCurlyBraces = match === null ? key : match[1];
-
-        const out = resolveMsg({
-            "key": keyUnwrappedFromCurlyBraces,
-            args,
-            doRenderMarkdown
-        });
-
-        return (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
-    }
-
-    return {
-        "msgStr": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": false }) as string,
-        "msg": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": true }) as JSX.Element,
-        "advancedMsg": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": true }) as JSX.Element,
-        "advancedMsgStr": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": false }) as string
-    };
-}
-
-const keycloakifyExtraMessages = {
-    "en": {
-        "shouldBeEqual": "{0} should be equal to {1}",
-        "shouldBeDifferent": "{0} should be different to {1}",
-        "shouldMatchPattern": "Pattern should match: `/{0}/`",
-        "mustBeAnInteger": "Must be an integer",
-        "notAValidOption": "Not a valid option"
-    },
-    "fr": {
-        /* spell-checker: disable */
-        "shouldBeEqual": "{0} doit être égal à {1}",
-        "shouldBeDifferent": "{0} doit être différent de {1}",
-        "shouldMatchPattern": "Dois respecter le schéma: `/{0}/`",
-        "mustBeAnInteger": "Doit être un nombre entier",
-        "notAValidOption": "N'est pas une option valide",
-
-        "logoutConfirmTitle": "Déconnexion",
-        "logoutConfirmHeader": "Êtes-vous sûr(e) de vouloir vous déconnecter ?",
-        "doLogout": "Se déconnecter"
-        /* spell-checker: enable */
-    }
-};
+export * from "./i18n";
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@ -2,12 +2,12 @@ export * from "./getKcContext";

 export * from "./i18n";

-export { useDownloadTerms } from "./components/Terms";
+export { useDownloadTerms } from "./pages/Terms";

-export * from "./components/KcProps";
+export * from "./KcProps";
 export * from "./keycloakJsAdapter";
 export * from "./useFormValidationSlice";

-import KcApp from "./components/KcApp";
+import KcApp from "./KcApp";

 export default KcApp;
--- a/src/lib/components/Error.tsx
+++ b/src/lib/components/Error.tsx
@ -1,19 +1,10 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
+import React from "react";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type ErrorProps = KcProps & {
-    kcContext: KcContextBase.Error;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const Error = memo((props: ErrorProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function Error(props: PageProps<Extract<KcContextBase, { pageId: "error.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { message, client } = kcContext;

@ -38,6 +29,4 @@ const Error = memo((props: ErrorProps) => {
            }
        />
    );
-});
-
-export default Error;
+}
--- a/src/lib/components/IdpReviewUserProfile.tsx
+++ b/src/lib/components/IdpReviewUserProfile.tsx
@ -1,21 +1,12 @@
-import React, { useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React, { useState } from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
 import { UserProfileFormFields } from "./shared/UserProfileCommons";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type IdpReviewUserProfileProps = KcProps & {
-    kcContext: KcContextBase.IdpReviewUserProfile;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const IdpReviewUserProfile = memo((props: IdpReviewUserProfileProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function IdpReviewUserProfile(props: PageProps<Extract<KcContextBase, { pageId: "idp-review-user-profile.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { msg, msgStr } = i18n;

@ -53,6 +44,4 @@ const IdpReviewUserProfile = memo((props: IdpReviewUserProfileProps) => {
            }
        />
    );
-});
-
-export default IdpReviewUserProfile;
+}
--- a/src/lib/components/Info.tsx
+++ b/src/lib/components/Info.tsx
@ -1,20 +1,11 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
+import React from "react";
 import { assert } from "../tools/assert";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type InfoProps = KcProps & {
-    kcContext: KcContextBase.Info;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const Info = memo((props: InfoProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function Info(props: PageProps<Extract<KcContextBase, { pageId: "info.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { msgStr, msg } = i18n;

@ -55,6 +46,4 @@ const Info = memo((props: InfoProps) => {
            }
        />
    );
-});
-
-export default Info;
+}
--- a/src/lib/components/Login.tsx
+++ b/src/lib/components/Login.tsx
@ -1,22 +1,12 @@
-import React, { useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React, { useState, type FormEventHandler } from "react";
 import { clsx } from "../tools/clsx";
-import { useConstCallback } from "powerhooks/useConstCallback";
-import type { FormEventHandler } from "react";
-import type { I18n } from "../i18n";
+import { useConstCallback } from "../tools/useConstCallback";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type LoginProps = KcProps & {
-    kcContext: KcContextBase.Login;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const Login = memo((props: LoginProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function Login(props: PageProps<Extract<KcContextBase, { pageId: "login.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext;

@ -199,6 +189,4 @@ const Login = memo((props: LoginProps) => {
            }
        />
    );
-});
-
-export default Login;
+}
--- a/src/lib/components/LoginConfigTotp.tsx
+++ b/src/lib/components/LoginConfigTotp.tsx
@ -1,20 +1,11 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type LoginConfigTotpProps = KcProps & {
-    kcContext: KcContextBase.LoginConfigTotp;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginConfigTotp(props: PageProps<Extract<KcContextBase, { pageId: "login-config-totp.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;

@ -188,6 +179,4 @@ const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
            }
        />
    );
-});
-
-export default LoginConfigTotp;
+}
--- a/src/lib/components/LoginIdpLinkConfirm.tsx
+++ b/src/lib/components/LoginIdpLinkConfirm.tsx
@ -1,20 +1,11 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type LoginIdpLinkConfirmProps = KcProps & {
-    kcContext: KcContextBase.LoginIdpLinkConfirm;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginIdpLinkConfirm = memo((props: LoginIdpLinkConfirmProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContextBase, { pageId: "login-idp-link-confirm.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { url, idpAlias } = kcContext;

@ -60,6 +51,4 @@ const LoginIdpLinkConfirm = memo((props: LoginIdpLinkConfirmProps) => {
            }
        />
    );
-});
-
-export default LoginIdpLinkConfirm;
+}
--- a/src/lib/components/LoginIdpLinkEmail.tsx
+++ b/src/lib/components/LoginIdpLinkEmail.tsx
@ -1,19 +1,10 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
+import React from "react";
+import type { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+import type { I18nBase } from "../i18n";

-export type LoginIdpLinkEmailProps = KcProps & {
-    kcContext: KcContextBase.LoginIdpLinkEmail;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginIdpLinkEmail = memo((props: LoginIdpLinkEmailProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContextBase, { pageId: "login-idp-link-email.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { url, realm, brokerContext, idpAlias } = kcContext;

@ -38,6 +29,4 @@ const LoginIdpLinkEmail = memo((props: LoginIdpLinkEmailProps) => {
            }
        />
    );
-});
-
-export default LoginIdpLinkEmail;
+}
--- a/src/lib/components/LoginOtp.tsx
+++ b/src/lib/components/LoginOtp.tsx
@ -1,22 +1,13 @@
-import React, { useEffect, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React, { useEffect } from "react";
 import { headInsert } from "../tools/headInsert";
 import { pathJoin } from "../../bin/tools/pathJoin";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type LoginOtpProps = KcProps & {
-    kcContext: KcContextBase.LoginOtp;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginOtp = memo((props: LoginOtpProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginOtp(props: PageProps<Extract<KcContextBase, { pageId: "login-otp.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { otpLogin, url } = kcContext;

@ -96,7 +87,7 @@ const LoginOtp = memo((props: LoginOtpProps) => {
            }
        />
    );
-});
+}

 declare const $: any;

@ -121,5 +112,3 @@ function evaluateInlineScript() {
        }
    });
 }
-
-export default LoginOtp;
--- a/src/lib/components/LoginPageExpired.tsx
+++ b/src/lib/components/LoginPageExpired.tsx
@ -1,19 +1,10 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
+import React from "react";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type LoginPageExpired = KcProps & {
-    kcContext: KcContextBase.LoginPageExpired;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginPageExpired = memo((props: LoginPageExpired) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginPageExpired(props: PageProps<Extract<KcContextBase, { pageId: "login-page-expired.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { url } = kcContext;

@ -42,6 +33,4 @@ const LoginPageExpired = memo((props: LoginPageExpired) => {
            }
        />
    );
-});
-
-export default LoginPageExpired;
+}
--- a/src/lib/components/LoginPassword.tsx
+++ b/src/lib/components/LoginPassword.tsx
@ -1,22 +1,13 @@
-import React, { useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React, { useState } from "react";
 import { clsx } from "../tools/clsx";
-import { useConstCallback } from "powerhooks/useConstCallback";
+import { useConstCallback } from "../tools/useConstCallback";
 import type { FormEventHandler } from "react";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type LoginPasswordProps = KcProps & {
-    kcContext: KcContextBase.LoginPassword;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginPassword = memo((props: LoginPasswordProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginPassword(props: PageProps<Extract<KcContextBase, { "pageId": "login-password.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { realm, url, login } = kcContext;

@ -92,6 +83,4 @@ const LoginPassword = memo((props: LoginPasswordProps) => {
            }
        />
    );
-});
-
-export default LoginPassword;
+}
--- a/src/lib/components/LoginResetPassword.tsx
+++ b/src/lib/components/LoginResetPassword.tsx
@ -1,20 +1,11 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type LoginResetPasswordProps = KcProps & {
-    kcContext: KcContextBase.LoginResetPassword;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginResetPassword = memo((props: LoginResetPasswordProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginResetPassword(props: PageProps<Extract<KcContextBase, { pageId: "login-reset-password.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { url, realm, auth } = kcContext;

@ -75,6 +66,4 @@ const LoginResetPassword = memo((props: LoginResetPasswordProps) => {
            infoNode={msg("emailInstruction")}
        />
    );
-});
-
-export default LoginResetPassword;
+}
--- a/src/lib/components/LoginUpdatePassword.tsx
+++ b/src/lib/components/LoginUpdatePassword.tsx
@ -1,20 +1,11 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type LoginUpdatePasswordProps = KcProps & {
-    kcContext: KcContextBase.LoginUpdatePassword;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginUpdatePassword(props: PageProps<Extract<KcContextBase, { pageId: "login-update-password.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { msg, msgStr } = i18n;

@ -123,6 +114,4 @@ const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
            }
        />
    );
-});
-
-export default LoginUpdatePassword;
+}
--- a/src/lib/components/LoginUpdateProfile.tsx
+++ b/src/lib/components/LoginUpdateProfile.tsx
@ -1,20 +1,11 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type LoginUpdateProfile = KcProps & {
-    kcContext: KcContextBase.LoginUpdateProfile;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginUpdateProfile = memo((props: LoginUpdateProfile) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginUpdateProfile(props: PageProps<Extract<KcContextBase, { pageId: "login-update-profile.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { msg, msgStr } = i18n;

@ -130,6 +121,4 @@ const LoginUpdateProfile = memo((props: LoginUpdateProfile) => {
            }
        />
    );
-});
-
-export default LoginUpdateProfile;
+}
--- a/src/lib/components/LoginUsername.tsx
+++ b/src/lib/components/LoginUsername.tsx
@ -1,22 +1,13 @@
-import React, { useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React, { useState } from "react";
 import { clsx } from "../tools/clsx";
-import { useConstCallback } from "powerhooks/useConstCallback";
+import { useConstCallback } from "../tools/useConstCallback";
 import type { FormEventHandler } from "react";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type LoginUsernameProps = KcProps & {
-    kcContext: KcContextBase.LoginUsername;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginUsername = memo((props: LoginUsernameProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginUsername(props: PageProps<Extract<KcContextBase, { pageId: "login-username.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { social, realm, url, usernameHidden, login, registrationDisabled } = kcContext;

@ -164,6 +155,4 @@ const LoginUsername = memo((props: LoginUsernameProps) => {
            }
        />
    );
-});
-
-export default LoginUsername;
+}
--- a/src/lib/components/LoginVerifyEmail.tsx
+++ b/src/lib/components/LoginVerifyEmail.tsx
@ -1,19 +1,10 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
+import React from "react";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type LoginVerifyEmailProps = KcProps & {
-    kcContext: KcContextBase.LoginVerifyEmail;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginVerifyEmail = memo((props: LoginVerifyEmailProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginVerifyEmail(props: PageProps<Extract<KcContextBase, { pageId: "login-verify-email.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { msg } = i18n;

@ -38,6 +29,4 @@ const LoginVerifyEmail = memo((props: LoginVerifyEmailProps) => {
            }
        />
    );
-});
-
-export default LoginVerifyEmail;
+}
--- a/src/lib/components/LogoutConfirm.tsx
+++ b/src/lib/components/LogoutConfirm.tsx
@ -1,20 +1,11 @@
-import React, { memo } from "react";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type LogoutConfirmProps = KcProps & {
-    kcContext: KcContextBase.LogoutConfirm;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LogoutConfirm = memo((props: LogoutConfirmProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LogoutConfirm(props: PageProps<Extract<KcContextBase, { pageId: "logout-confirm.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { url, client, logoutConfirm } = kcContext;

@ -64,6 +55,4 @@ const LogoutConfirm = memo((props: LogoutConfirmProps) => {
            }
        />
    );
-});
-
-export default LogoutConfirm;
+}
--- a/src/lib/components/Register.tsx
+++ b/src/lib/components/Register.tsx
@ -1,20 +1,11 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type RegisterProps = KcProps & {
-    kcContext: KcContextBase.Register;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const Register = memo((props: RegisterProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function Register(props: PageProps<Extract<KcContextBase, { pageId: "register.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;

@ -167,6 +158,4 @@ const Register = memo((props: RegisterProps) => {
            }
        />
    );
-});
-
-export default Register;
+}
--- a/src/lib/components/RegisterUserProfile.tsx
+++ b/src/lib/components/RegisterUserProfile.tsx
@ -1,21 +1,12 @@
-import React, { memo, useState } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React, { useState } from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
 import { UserProfileFormFields } from "./shared/UserProfileCommons";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type RegisterUserProfileProps = KcProps & {
-    kcContext: KcContextBase.RegisterUserProfile;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const RegisterUserProfile = memo((props: RegisterUserProfileProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function RegisterUserProfile(props: PageProps<Extract<KcContextBase, { pageId: "register-user-profile.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;

@ -66,6 +57,4 @@ const RegisterUserProfile = memo((props: RegisterUserProfileProps) => {
            }
        />
    );
-});
-
-export default RegisterUserProfile;
+}
--- a/src/lib/components/Terms.tsx
+++ b/src/lib/components/Terms.tsx
@ -1,70 +1,20 @@
-import React, { useEffect, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React, { useEffect } from "react";
+import { memoize } from "../tools/memoize";
 import { clsx } from "../tools/clsx";
 import { Evt } from "evt";
 import { useRerenderOnStateChange } from "evt/hooks";
 import { assert } from "tsafe/assert";
 import { fallbackLanguageTag } from "../i18n";
-import type { I18n } from "../i18n";
-import memoize from "memoizee";
-import { useConst } from "powerhooks/useConst";
-import { useConstCallback } from "powerhooks/useConstCallback";
+import { useConst } from "../tools/useConst";
+import { useConstCallback } from "../tools/useConstCallback";
 import { Markdown } from "../tools/Markdown";
 import type { Extends } from "tsafe";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export const evtTermMarkdown = Evt.create<string | undefined>(undefined);
-
-export type KcContextLike = {
-    pageId: KcContextBase["pageId"];
-    locale?: {
-        currentLanguageTag: string;
-    };
-};
-
-assert<Extends<KcContextBase, KcContextLike>>();
-
-/** Allow to avoid bundling the terms and download it on demand*/
-export function useDownloadTerms(params: {
-    kcContext: KcContextLike;
-    downloadTermMarkdown: (params: { currentLanguageTag: string }) => Promise<string>;
-}) {
-    const { kcContext } = params;
-
-    const { downloadTermMarkdownMemoized } = (function useClosure() {
-        const { downloadTermMarkdown } = params;
-
-        const downloadTermMarkdownConst = useConstCallback(downloadTermMarkdown);
-
-        const downloadTermMarkdownMemoized = useConst(() =>
-            memoize((currentLanguageTag: string) => downloadTermMarkdownConst({ currentLanguageTag }), { "promise": true })
-        );
-
-        return { downloadTermMarkdownMemoized };
-    })();
-
-    useEffect(() => {
-        if (kcContext.pageId !== "terms.ftl") {
-            return;
-        }
-
-        downloadTermMarkdownMemoized(kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag).then(
-            thermMarkdown => (evtTermMarkdown.state = thermMarkdown)
-        );
-    }, []);
-}
-
-export type TermsProps = KcProps & {
-    kcContext: KcContextBase.Terms;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const Terms = memo((props: TermsProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function Terms(props: PageProps<Extract<KcContextBase, { pageId: "terms.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { msg, msgStr } = i18n;

@ -111,6 +61,45 @@ const Terms = memo((props: TermsProps) => {
            }
        />
    );
-});
+}

-export default Terms;
+export const evtTermMarkdown = Evt.create<string | undefined>(undefined);
+
+export type KcContextLike = {
+    pageId: KcContextBase["pageId"];
+    locale?: {
+        currentLanguageTag: string;
+    };
+};
+
+assert<Extends<KcContextBase, KcContextLike>>();
+
+/** Allow to avoid bundling the terms and download it on demand*/
+export function useDownloadTerms(params: {
+    kcContext: KcContextLike;
+    downloadTermMarkdown: (params: { currentLanguageTag: string }) => Promise<string>;
+}) {
+    const { kcContext } = params;
+
+    const { downloadTermMarkdownMemoized } = (function useClosure() {
+        const { downloadTermMarkdown } = params;
+
+        const downloadTermMarkdownConst = useConstCallback(downloadTermMarkdown);
+
+        const downloadTermMarkdownMemoized = useConst(() =>
+            memoize((currentLanguageTag: string) => downloadTermMarkdownConst({ currentLanguageTag }))
+        );
+
+        return { downloadTermMarkdownMemoized };
+    })();
+
+    useEffect(() => {
+        if (kcContext.pageId !== "terms.ftl") {
+            return;
+        }
+
+        downloadTermMarkdownMemoized(kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag).then(
+            thermMarkdown => (evtTermMarkdown.state = thermMarkdown)
+        );
+    }, []);
+}
--- a/src/lib/components/UpdateUserProfile.tsx
+++ b/src/lib/components/UpdateUserProfile.tsx
@ -1,21 +1,12 @@
-import React, { useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React, { useState } from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
 import { UserProfileFormFields } from "./shared/UserProfileCommons";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type UpdateUserProfileProps = KcProps & {
-    kcContext: KcContextBase.UpdateUserProfile;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const UpdateUserProfile = memo((props: UpdateUserProfileProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function UpdateUserProfile(props: PageProps<Extract<KcContextBase, { pageId: "update-user-profile.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { msg, msgStr } = i18n;

@ -73,6 +64,4 @@ const UpdateUserProfile = memo((props: UpdateUserProfileProps) => {
            }
        />
    );
-});
-
-export default UpdateUserProfile;
+}
--- a/src/lib/components/WebauthnAuthenticate.tsx
+++ b/src/lib/components/WebauthnAuthenticate.tsx
@ -1,22 +1,14 @@
-import React, { useRef, useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React, { useRef, useState } from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n, MessageKeyBase } from "../i18n";
+import type { MessageKeyBase } from "../i18n";
 import { base64url } from "rfc4648";
-import { useConstCallback } from "powerhooks/useConstCallback";
+import { useConstCallback } from "../tools/useConstCallback";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";

-export type WebauthnAuthenticateProps = KcProps & {
-    kcContext: KcContextBase.WebauthnAuthenticate;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const WebauthnAuthenticate = memo((props: WebauthnAuthenticateProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function WebauthnAuthenticate(props: PageProps<Extract<KcContextBase, { pageId: "webauthn-authenticate.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { url } = kcContext;

@ -198,6 +190,4 @@ const WebauthnAuthenticate = memo((props: WebauthnAuthenticateProps) => {
            }
        />
    );
-});
-
-export default WebauthnAuthenticate;
+}
--- a/src/lib/pages/shared/UserProfileCommons.tsx
+++ b/src/lib/pages/shared/UserProfileCommons.tsx
@ -0,0 +1,659 @@
+import React, { useEffect, Fragment } from "react";
+import type { KcProps } from "../../KcProps";
+import { clsx } from "../../tools/clsx";
+import type { I18nBase } from "../../i18n";
+import type { Attribute } from "../../getKcContext";
+
+// If you are copy pasting this code in your theme project
+// you can delete all the following import and replace them by
+// import { useFormValidation } from "keycloakify/lib/pages/shared/UserProfileCommons";
+// you can also delete the useFormValidation hooks and useGetErrors hooks, they shouldn't need
+// to be modified.
+import "../../tools/Array.prototype.every";
+import { useMemo, useReducer } from "react";
+import type { KcContextBase, Validators } from "../../getKcContext";
+import { useConstCallback } from "../../tools/useConstCallback";
+import { emailRegexp } from "../../tools/emailRegExp";
+import type { MessageKeyBase } from "../../i18n";
+import { id } from "tsafe/id";
+
+export type UserProfileFormFieldsProps = {
+    kcContext: Parameters<typeof useFormValidation>[0]["kcContext"];
+    i18n: I18nBase;
+} & KcProps &
+    Partial<Record<"BeforeField" | "AfterField", (props: { attribute: Attribute }) => JSX.Element | null>> & {
+        onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
+    };
+
+export function UserProfileFormFields({
+    kcContext,
+    onIsFormSubmittableValueChange,
+    i18n,
+    BeforeField,
+    AfterField,
+    ...props
+}: UserProfileFormFieldsProps) {
+    const { advancedMsg } = i18n;
+
+    const {
+        formValidationState: { fieldStateByAttributeName, isFormSubmittable },
+        formValidationDispatch,
+        attributesWithPassword
+    } = useFormValidation({
+        kcContext,
+        i18n
+    });
+
+    useEffect(() => {
+        onIsFormSubmittableValueChange(isFormSubmittable);
+    }, [isFormSubmittable]);
+
+    let currentGroup = "";
+
+    return (
+        <>
+            {attributesWithPassword.map((attribute, i) => {
+                const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute;
+
+                const { value, displayableErrors } = fieldStateByAttributeName[attribute.name];
+
+                const formGroupClassName = clsx(props.kcFormGroupClass, displayableErrors.length !== 0 && props.kcFormGroupErrorClass);
+
+                return (
+                    <Fragment key={i}>
+                        {group !== currentGroup && (currentGroup = group) !== "" && (
+                            <div className={formGroupClassName}>
+                                <div className={clsx(props.kcContentWrapperClass)}>
+                                    <label id={`header-${group}`} className={clsx(props.kcFormGroupHeader)}>
+                                        {advancedMsg(groupDisplayHeader) || currentGroup}
+                                    </label>
+                                </div>
+                                {groupDisplayDescription !== "" && (
+                                    <div className={clsx(props.kcLabelWrapperClass)}>
+                                        <label id={`description-${group}`} className={`${clsx(props.kcLabelClass)}`}>
+                                            {advancedMsg(groupDisplayDescription)}
+                                        </label>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+                        {BeforeField && <BeforeField attribute={attribute} />}
+
+                        <div className={formGroupClassName}>
+                            <div className={clsx(props.kcLabelWrapperClass)}>
+                                <label htmlFor={attribute.name} className={clsx(props.kcLabelClass)}>
+                                    {advancedMsg(attribute.displayName ?? "")}
+                                </label>
+                                {attribute.required && <>*</>}
+                            </div>
+                            <div className={clsx(props.kcInputWrapperClass)}>
+                                {(() => {
+                                    const { options } = attribute.validators;
+
+                                    if (options !== undefined) {
+                                        return (
+                                            <select
+                                                id={attribute.name}
+                                                name={attribute.name}
+                                                onChange={event =>
+                                                    formValidationDispatch({
+                                                        "action": "update value",
+                                                        "name": attribute.name,
+                                                        "newValue": event.target.value
+                                                    })
+                                                }
+                                                onBlur={() =>
+                                                    formValidationDispatch({
+                                                        "action": "focus lost",
+                                                        "name": attribute.name
+                                                    })
+                                                }
+                                                value={value}
+                                            >
+                                                {options.options.map(option => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </select>
+                                        );
+                                    }
+
+                                    return (
+                                        <input
+                                            type={(() => {
+                                                switch (attribute.name) {
+                                                    case "password-confirm":
+                                                    case "password":
+                                                        return "password";
+                                                    default:
+                                                        return "text";
+                                                }
+                                            })()}
+                                            id={attribute.name}
+                                            name={attribute.name}
+                                            value={value}
+                                            onChange={event =>
+                                                formValidationDispatch({
+                                                    "action": "update value",
+                                                    "name": attribute.name,
+                                                    "newValue": event.target.value
+                                                })
+                                            }
+                                            onBlur={() =>
+                                                formValidationDispatch({
+                                                    "action": "focus lost",
+                                                    "name": attribute.name
+                                                })
+                                            }
+                                            className={clsx(props.kcInputClass)}
+                                            aria-invalid={displayableErrors.length !== 0}
+                                            disabled={attribute.readOnly}
+                                            autoComplete={attribute.autocomplete}
+                                        />
+                                    );
+                                })()}
+                                {displayableErrors.length !== 0 &&
+                                    (() => {
+                                        const divId = `input-error-${attribute.name}`;
+
+                                        return (
+                                            <>
+                                                <style>{`#${divId} > span: { display: block; }`}</style>
+                                                <span
+                                                    id={divId}
+                                                    className={clsx(props.kcInputErrorMessageClass)}
+                                                    style={{
+                                                        "position": displayableErrors.length === 1 ? "absolute" : undefined
+                                                    }}
+                                                    aria-live="polite"
+                                                >
+                                                    {displayableErrors.map(({ errorMessage }) => errorMessage)}
+                                                </span>
+                                            </>
+                                        );
+                                    })()}
+                            </div>
+                        </div>
+                        {AfterField && <AfterField attribute={attribute} />}
+                    </Fragment>
+                );
+            })}
+        </>
+    );
+}
+
+/**
+ * NOTE: The attributesWithPassword returned is actually augmented with
+ * artificial password related attributes only if kcContext.passwordRequired === true
+ */
+export function useFormValidation(params: {
+    kcContext: {
+        messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
+        profile: {
+            attributes: Attribute[];
+        };
+        passwordRequired?: boolean;
+        realm: { registrationEmailAsUsername: boolean };
+    };
+    /** NOTE: Try to avoid passing a new ref every render for better performances. */
+    passwordValidators?: Validators;
+    i18n: I18nBase;
+}) {
+    const {
+        kcContext,
+        passwordValidators = {
+            "length": {
+                "ignore.empty.value": true,
+                "min": "4"
+            }
+        },
+        i18n
+    } = params;
+
+    const attributesWithPassword = useMemo(
+        () =>
+            !kcContext.passwordRequired
+                ? kcContext.profile.attributes
+                : (() => {
+                      const name = kcContext.realm.registrationEmailAsUsername ? "email" : "username";
+
+                      return kcContext.profile.attributes.reduce<Attribute[]>(
+                          (prev, curr) => [
+                              ...prev,
+                              ...(curr.name !== name
+                                  ? [curr]
+                                  : [
+                                        curr,
+                                        id<Attribute>({
+                                            "name": "password",
+                                            "displayName": id<`\${${MessageKeyBase}}`>("${password}"),
+                                            "required": true,
+                                            "readOnly": false,
+                                            "validators": passwordValidators,
+                                            "annotations": {},
+                                            "groupAnnotations": {},
+                                            "autocomplete": "new-password"
+                                        }),
+                                        id<Attribute>({
+                                            "name": "password-confirm",
+                                            "displayName": id<`\${${MessageKeyBase}}`>("${passwordConfirm}"),
+                                            "required": true,
+                                            "readOnly": false,
+                                            "validators": {
+                                                "_compareToOther": {
+                                                    "name": "password",
+                                                    "ignore.empty.value": true,
+                                                    "shouldBe": "equal",
+                                                    "error-message": id<`\${${MessageKeyBase}}`>("${invalidPasswordConfirmMessage}")
+                                                }
+                                            },
+                                            "annotations": {},
+                                            "groupAnnotations": {},
+                                            "autocomplete": "new-password"
+                                        })
+                                    ])
+                          ],
+                          []
+                      );
+                  })(),
+        [kcContext, passwordValidators]
+    );
+
+    const { getErrors } = useGetErrors({
+        "kcContext": {
+            "messagesPerField": kcContext.messagesPerField,
+            "profile": {
+                "attributes": attributesWithPassword
+            }
+        },
+        i18n
+    });
+
+    const initialInternalState = useMemo(
+        () =>
+            Object.fromEntries(
+                attributesWithPassword
+                    .map(attribute => ({
+                        attribute,
+                        "errors": getErrors({
+                            "name": attribute.name,
+                            "fieldValueByAttributeName": Object.fromEntries(
+                                attributesWithPassword.map(({ name, value }) => [name, { "value": value ?? "" }])
+                            )
+                        })
+                    }))
+                    .map(({ attribute, errors }) => [
+                        attribute.name,
+                        {
+                            "value": attribute.value ?? "",
+                            errors,
+                            "doDisplayPotentialErrorMessages": errors.length !== 0
+                        }
+                    ])
+            ),
+        [attributesWithPassword]
+    );
+
+    type InternalState = typeof initialInternalState;
+
+    const [formValidationInternalState, formValidationDispatch] = useReducer(
+        (
+            state: InternalState,
+            params:
+                | {
+                      action: "update value";
+                      name: string;
+                      newValue: string;
+                  }
+                | {
+                      action: "focus lost";
+                      name: string;
+                  }
+        ): InternalState => ({
+            ...state,
+            [params.name]: {
+                ...state[params.name],
+                ...(() => {
+                    switch (params.action) {
+                        case "focus lost":
+                            return { "doDisplayPotentialErrorMessages": true };
+                        case "update value":
+                            return {
+                                "value": params.newValue,
+                                "errors": getErrors({
+                                    "name": params.name,
+                                    "fieldValueByAttributeName": {
+                                        ...state,
+                                        [params.name]: { "value": params.newValue }
+                                    }
+                                })
+                            };
+                    }
+                })()
+            }
+        }),
+        initialInternalState
+    );
+
+    const formValidationState = useMemo(
+        () => ({
+            "fieldStateByAttributeName": Object.fromEntries(
+                Object.entries(formValidationInternalState).map(([name, { value, errors, doDisplayPotentialErrorMessages }]) => [
+                    name,
+                    { value, "displayableErrors": doDisplayPotentialErrorMessages ? errors : [] }
+                ])
+            ),
+            "isFormSubmittable": Object.entries(formValidationInternalState).every(
+                ([name, { value, errors }]) =>
+                    errors.length === 0 && (value !== "" || !attributesWithPassword.find(attribute => attribute.name === name)!.required)
+            )
+        }),
+        [formValidationInternalState, attributesWithPassword]
+    );
+
+    return {
+        formValidationState,
+        formValidationDispatch,
+        attributesWithPassword
+    };
+}
+
+/** Expect to be used in a component wrapped within a <I18nProvider> */
+function useGetErrors(params: {
+    kcContext: {
+        messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
+        profile: {
+            attributes: { name: string; value?: string; validators: Validators }[];
+        };
+    };
+    i18n: I18nBase;
+}) {
+    const { kcContext, i18n } = params;
+
+    const {
+        messagesPerField,
+        profile: { attributes }
+    } = kcContext;
+
+    const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;
+
+    const getErrors = useConstCallback((params: { name: string; fieldValueByAttributeName: Record<string, { value: string }> }) => {
+        const { name, fieldValueByAttributeName } = params;
+
+        const { value } = fieldValueByAttributeName[name];
+
+        const { value: defaultValue, validators } = attributes.find(attribute => attribute.name === name)!;
+
+        block: {
+            if (defaultValue !== value) {
+                break block;
+            }
+
+            let doesErrorExist: boolean;
+
+            try {
+                doesErrorExist = messagesPerField.existsError(name);
+            } catch {
+                break block;
+            }
+
+            if (!doesErrorExist) {
+                break block;
+            }
+
+            const errorMessageStr = messagesPerField.get(name);
+
+            return [
+                {
+                    "validatorName": undefined,
+                    errorMessageStr,
+                    "errorMessage": <span key={0}>{errorMessageStr}</span>
+                }
+            ];
+        }
+
+        const errors: {
+            errorMessage: JSX.Element;
+            errorMessageStr: string;
+            validatorName: keyof Validators | undefined;
+        }[] = [];
+
+        scope: {
+            const validatorName = "length";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false, max, min } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            if (max !== undefined && value.length > parseInt(max)) {
+                const msgArgs = ["error-invalid-length-too-long", max] as const;
+
+                errors.push({
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs),
+                    validatorName
+                });
+            }
+
+            if (min !== undefined && value.length < parseInt(min)) {
+                const msgArgs = ["error-invalid-length-too-short", min] as const;
+
+                errors.push({
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs),
+                    validatorName
+                });
+            }
+        }
+
+        scope: {
+            const validatorName = "_compareToOther";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false, name: otherName, shouldBe, "error-message": errorMessageKey } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            const { value: otherValue } = fieldValueByAttributeName[otherName];
+
+            const isValid = (() => {
+                switch (shouldBe) {
+                    case "different":
+                        return otherValue !== value;
+                    case "equal":
+                        return otherValue === value;
+                }
+            })();
+
+            if (isValid) {
+                break scope;
+            }
+
+            const msgArg = [
+                errorMessageKey ??
+                    id<MessageKeyBase>(
+                        (() => {
+                            switch (shouldBe) {
+                                case "equal":
+                                    return "shouldBeEqual";
+                                case "different":
+                                    return "shouldBeDifferent";
+                            }
+                        })()
+                    ),
+                otherName,
+                name,
+                shouldBe
+            ] as const;
+
+            errors.push({
+                validatorName,
+                "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArg)}</Fragment>,
+                "errorMessageStr": advancedMsgStr(...msgArg)
+            });
+        }
+
+        scope: {
+            const validatorName = "pattern";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false, pattern, "error-message": errorMessageKey } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            if (new RegExp(pattern).test(value)) {
+                break scope;
+            }
+
+            const msgArgs = [errorMessageKey ?? id<MessageKeyBase>("shouldMatchPattern"), pattern] as const;
+
+            errors.push({
+                validatorName,
+                "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArgs)}</Fragment>,
+                "errorMessageStr": advancedMsgStr(...msgArgs)
+            });
+        }
+
+        scope: {
+            if ([...errors].reverse()[0]?.validatorName === "pattern") {
+                break scope;
+            }
+
+            const validatorName = "email";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            if (emailRegexp.test(value)) {
+                break scope;
+            }
+
+            const msgArgs = [id<MessageKeyBase>("invalidEmailMessage")] as const;
+
+            errors.push({
+                validatorName,
+                "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                "errorMessageStr": msgStr(...msgArgs)
+            });
+        }
+
+        scope: {
+            const validatorName = "integer";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false, max, min } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            const intValue = parseInt(value);
+
+            if (isNaN(intValue)) {
+                const msgArgs = ["mustBeAnInteger"] as const;
+
+                errors.push({
+                    validatorName,
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs)
+                });
+
+                break scope;
+            }
+
+            if (max !== undefined && intValue > parseInt(max)) {
+                const msgArgs = ["error-number-out-of-range-too-big", max] as const;
+
+                errors.push({
+                    validatorName,
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs)
+                });
+
+                break scope;
+            }
+
+            if (min !== undefined && intValue < parseInt(min)) {
+                const msgArgs = ["error-number-out-of-range-too-small", min] as const;
+
+                errors.push({
+                    validatorName,
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs)
+                });
+
+                break scope;
+            }
+        }
+
+        scope: {
+            const validatorName = "options";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            if (value === "") {
+                break scope;
+            }
+
+            if (validator.options.indexOf(value) >= 0) {
+                break scope;
+            }
+
+            const msgArgs = [id<MessageKeyBase>("notAValidOption")] as const;
+
+            errors.push({
+                validatorName,
+                "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArgs)}</Fragment>,
+                "errorMessageStr": advancedMsgStr(...msgArgs)
+            });
+        }
+
+        //TODO: Implement missing validators.
+
+        return errors;
+    });
+
+    return { getErrors };
+}
--- a/src/lib/tools/ReactComponent.ts
+++ b/src/lib/tools/ReactComponent.ts
@ -1,4 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-types */
-import type { FC, ComponentClass } from "react";
-
-export type ReactComponent<Props extends Record<string, unknown> = {}> = ((props: Props) => ReturnType<FC>) | ComponentClass<Props>;
--- a/src/lib/tools/SetOptional.ts
+++ b/src/lib/tools/SetOptional.ts
@ -0,0 +1 @@
+export type SetOptional<T extends Record<string, unknown>, K extends keyof T> = Omit<T, K> & Partial<Record<K, T[K]>>;
--- a/src/lib/tools/clsx.ts
+++ b/src/lib/tools/clsx.ts
@ -1,7 +1,44 @@
-import { classnames } from "tss-react/tools/classnames";
-import type { Cx } from "tss-react";
+import { assert } from "tsafe/assert";
+import { typeGuard } from "tsafe/typeGuard";

-/** Drop in replacement for https://www.npmjs.com/package/clsx */
-export const clsx: Cx = (...args) => {
-    return classnames(args);
+export type CxArg = undefined | null | string | boolean | Partial<Record<string, boolean | null | undefined>> | readonly CxArg[];
+
+export const clsx = (...args: CxArg[]): string => {
+    const len = args.length;
+    let i = 0;
+    let cls = "";
+    for (; i < len; i++) {
+        const arg = args[i];
+        if (arg == null) continue;
+
+        let toAdd;
+        switch (typeof arg) {
+            case "boolean":
+                break;
+            case "object": {
+                if (Array.isArray(arg)) {
+                    toAdd = clsx(...arg);
+                } else {
+                    assert(!typeGuard<{ length: number }>(arg, false));
+
+                    toAdd = "";
+                    for (const k in arg) {
+                        if (arg[k as string] && k) {
+                            toAdd && (toAdd += " ");
+                            toAdd += k;
+                        }
+                    }
+                }
+                break;
+            }
+            default: {
+                toAdd = arg;
+            }
+        }
+        if (toAdd) {
+            cls && (cls += " ");
+            cls += toAdd;
+        }
+    }
+    return cls;
 };
--- a/src/lib/tools/deepAssign.ts
+++ b/src/lib/tools/deepAssign.ts
@ -11,7 +11,7 @@ export function deepAssign(params: { target: Record<string, unknown>; source: Re
    Object.keys(source).forEach(key => {
        var dereferencedSource = source[key];

-        if (target[key] === undefined || !(dereferencedSource instanceof Object)) {
+        if (target[key] === undefined || dereferencedSource instanceof Function || !(dereferencedSource instanceof Object)) {
            Object.defineProperty(target, key, {
                "enumerable": true,
                "writable": true,
--- a/src/lib/tools/memoize.ts
+++ b/src/lib/tools/memoize.ts
@ -0,0 +1,55 @@
+type SimpleType = number | string | boolean | null | undefined;
+type FuncWithSimpleParams<T extends SimpleType[], R> = (...args: T) => R;
+
+export function memoize<T extends SimpleType[], R>(
+    fn: FuncWithSimpleParams<T, R>,
+    options?: {
+        argsLength?: number;
+        max?: number;
+    }
+): FuncWithSimpleParams<T, R> {
+    const cache = new Map<string, ReturnType<FuncWithSimpleParams<T, R>>>();
+
+    const { argsLength = fn.length, max = Infinity } = options ?? {};
+
+    return ((...args: Parameters<FuncWithSimpleParams<T, R>>) => {
+        const key = JSON.stringify(
+            args
+                .slice(0, argsLength)
+                .map(v => {
+                    if (v === null) {
+                        return "null";
+                    }
+                    if (v === undefined) {
+                        return "undefined";
+                    }
+                    switch (typeof v) {
+                        case "number":
+                            return `number-${v}`;
+                        case "string":
+                            return `string-${v}`;
+                        case "boolean":
+                            return `boolean-${v ? "true" : "false"}`;
+                    }
+                })
+                .join("-sIs9sAslOdeWlEdIos3-")
+        );
+
+        if (cache.has(key)) {
+            return cache.get(key);
+        }
+
+        if (max === cache.size) {
+            for (const key of cache.keys()) {
+                cache.delete(key);
+                break;
+            }
+        }
+
+        const value = fn(...args);
+
+        cache.set(key, value);
+
+        return value;
+    }) as any;
+}
--- a/src/lib/tools/useCallbackFactory.ts
+++ b/src/lib/tools/useCallbackFactory.ts
@ -0,0 +1,45 @@
+import { useRef, useState } from "react";
+import { id } from "tsafe/id";
+import { memoize } from "./memoize";
+
+export type CallbackFactory<FactoryArgs extends unknown[], Args extends unknown[], R> = (...factoryArgs: FactoryArgs) => (...args: Args) => R;
+
+/**
+ * https://docs.powerhooks.dev/api-reference/usecallbackfactory
+ *
+ *  const callbackFactory= useCallbackFactory(
+ *      ([key]: [string], [params]: [{ foo: number; }]) => {
+ *          ...
+ *      },
+ *      []
+ *  );
+ *
+ * WARNING: Factory args should not be of variable length.
+ *
+ */
+export function useCallbackFactory<FactoryArgs extends (string | number | boolean)[], Args extends unknown[], R = void>(
+    callback: (...callbackArgs: [FactoryArgs, Args]) => R
+): CallbackFactory<FactoryArgs, Args, R> {
+    type Out = CallbackFactory<FactoryArgs, Args, R>;
+
+    const callbackRef = useRef<typeof callback>(callback);
+
+    callbackRef.current = callback;
+
+    const memoizedRef = useRef<Out | undefined>(undefined);
+
+    return useState(() =>
+        id<Out>((...factoryArgs) => {
+            if (memoizedRef.current === undefined) {
+                memoizedRef.current = memoize(
+                    (...factoryArgs: FactoryArgs) =>
+                        (...args: Args) =>
+                            callbackRef.current(factoryArgs, args),
+                    { "argsLength": factoryArgs.length }
+                );
+            }
+
+            return memoizedRef.current(...factoryArgs);
+        })
+    )[0];
+}
--- a/src/lib/tools/useConst.ts
+++ b/src/lib/tools/useConst.ts
@ -0,0 +1,10 @@
+import { useState } from "react";
+
+/**
+ * Compute a value on first render and never again,
+ * Equivalent of const [x] = useState(()=> ...)
+ */
+export function useConst<T>(getValue: () => T): T {
+    const [value] = useState(getValue);
+    return value;
+}
--- a/src/lib/tools/useConstCallback.ts
+++ b/src/lib/tools/useConstCallback.ts
@ -0,0 +1,15 @@
+import { useRef, useState } from "react";
+import { Parameters } from "tsafe/Parameters";
+
+/** https://stackoverflow.com/questions/65890278/why-cant-usecallback-always-return-the-same-ref */
+export function useConstCallback<T extends ((...args: any[]) => unknown) | undefined | null>(callback: NonNullable<T>): T {
+    const callbackRef = useRef<typeof callback>(null as any);
+
+    callbackRef.current = callback;
+
+    return useState(
+        () =>
+            (...args: Parameters<T>) =>
+                callbackRef.current(...args)
+    )[0] as T;
+}
--- a/src/lib/useFormValidationSlice.tsx
+++ b/src/lib/useFormValidationSlice.tsx
@ -1,11 +1,185 @@
 import "./tools/Array.prototype.every";
 import React, { useMemo, useReducer, Fragment } from "react";
 import type { KcContextBase, Validators, Attribute } from "./getKcContext/KcContextBase";
-import type { I18n, MessageKeyBase } from "./i18n";
-import { useConstCallback } from "powerhooks/useConstCallback";
+import type { I18nBase, MessageKeyBase } from "./i18n";
+import { useConstCallback } from "./tools/useConstCallback";
 import { id } from "tsafe/id";
 import { emailRegexp } from "./tools/emailRegExp";

+/** @deprecated: Will be removed in the next major. Use this instead:
+ *  import { useFormValidation } from "keycloakify/lib/pages/shares/UserProfileCommons";
+ *
+ *  The API is the same only the returned value formValidationReducer have been renamed formValidationDispatch
+ *  (a it should have been named from the beginning 😬)
+ */
+export function useFormValidationSlice(params: {
+    kcContext: {
+        messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
+        profile: {
+            attributes: Attribute[];
+        };
+        passwordRequired?: boolean;
+        realm: { registrationEmailAsUsername: boolean };
+    };
+    /** NOTE: Try to avoid passing a new ref every render for better performances. */
+    passwordValidators?: Validators;
+    i18n: I18nBase;
+}) {
+    const {
+        kcContext,
+        passwordValidators = {
+            "length": {
+                "ignore.empty.value": true,
+                "min": "4"
+            }
+        },
+        i18n
+    } = params;
+
+    const attributesWithPassword = useMemo(
+        () =>
+            !kcContext.passwordRequired
+                ? kcContext.profile.attributes
+                : (() => {
+                      const name = kcContext.realm.registrationEmailAsUsername ? "email" : "username";
+
+                      return kcContext.profile.attributes.reduce<Attribute[]>(
+                          (prev, curr) => [
+                              ...prev,
+                              ...(curr.name !== name
+                                  ? [curr]
+                                  : [
+                                        curr,
+                                        id<Attribute>({
+                                            "name": "password",
+                                            "displayName": id<`\${${MessageKeyBase}}`>("${password}"),
+                                            "required": true,
+                                            "readOnly": false,
+                                            "validators": passwordValidators,
+                                            "annotations": {},
+                                            "groupAnnotations": {},
+                                            "autocomplete": "new-password"
+                                        }),
+                                        id<Attribute>({
+                                            "name": "password-confirm",
+                                            "displayName": id<`\${${MessageKeyBase}}`>("${passwordConfirm}"),
+                                            "required": true,
+                                            "readOnly": false,
+                                            "validators": {
+                                                "_compareToOther": {
+                                                    "name": "password",
+                                                    "ignore.empty.value": true,
+                                                    "shouldBe": "equal",
+                                                    "error-message": id<`\${${MessageKeyBase}}`>("${invalidPasswordConfirmMessage}")
+                                                }
+                                            },
+                                            "annotations": {},
+                                            "groupAnnotations": {},
+                                            "autocomplete": "new-password"
+                                        })
+                                    ])
+                          ],
+                          []
+                      );
+                  })(),
+        [kcContext, passwordValidators]
+    );
+
+    const { getErrors } = useGetErrors({
+        "kcContext": {
+            "messagesPerField": kcContext.messagesPerField,
+            "profile": {
+                "attributes": attributesWithPassword
+            }
+        },
+        i18n
+    });
+
+    const initialInternalState = useMemo(
+        () =>
+            Object.fromEntries(
+                attributesWithPassword
+                    .map(attribute => ({
+                        attribute,
+                        "errors": getErrors({
+                            "name": attribute.name,
+                            "fieldValueByAttributeName": Object.fromEntries(
+                                attributesWithPassword.map(({ name, value }) => [name, { "value": value ?? "" }])
+                            )
+                        })
+                    }))
+                    .map(({ attribute, errors }) => [
+                        attribute.name,
+                        {
+                            "value": attribute.value ?? "",
+                            errors,
+                            "doDisplayPotentialErrorMessages": errors.length !== 0
+                        }
+                    ])
+            ),
+        [attributesWithPassword]
+    );
+
+    type InternalState = typeof initialInternalState;
+
+    const [formValidationInternalState, formValidationReducer] = useReducer(
+        (
+            state: InternalState,
+            params:
+                | {
+                      action: "update value";
+                      name: string;
+                      newValue: string;
+                  }
+                | {
+                      action: "focus lost";
+                      name: string;
+                  }
+        ): InternalState => ({
+            ...state,
+            [params.name]: {
+                ...state[params.name],
+                ...(() => {
+                    switch (params.action) {
+                        case "focus lost":
+                            return { "doDisplayPotentialErrorMessages": true };
+                        case "update value":
+                            return {
+                                "value": params.newValue,
+                                "errors": getErrors({
+                                    "name": params.name,
+                                    "fieldValueByAttributeName": {
+                                        ...state,
+                                        [params.name]: { "value": params.newValue }
+                                    }
+                                })
+                            };
+                    }
+                })()
+            }
+        }),
+        initialInternalState
+    );
+
+    const formValidationState = useMemo(
+        () => ({
+            "fieldStateByAttributeName": Object.fromEntries(
+                Object.entries(formValidationInternalState).map(([name, { value, errors, doDisplayPotentialErrorMessages }]) => [
+                    name,
+                    { value, "displayableErrors": doDisplayPotentialErrorMessages ? errors : [] }
+                ])
+            ),
+            "isFormSubmittable": Object.entries(formValidationInternalState).every(
+                ([name, { value, errors }]) =>
+                    errors.length === 0 && (value !== "" || !attributesWithPassword.find(attribute => attribute.name === name)!.required)
+            )
+        }),
+        [formValidationInternalState, attributesWithPassword]
+    );
+
+    return { formValidationState, formValidationReducer, attributesWithPassword };
+}
+
 /** Expect to be used in a component wrapped within a <I18nProvider> */
 export function useGetErrors(params: {
    kcContext: {
@ -14,7 +188,7 @@ export function useGetErrors(params: {
            attributes: { name: string; value?: string; validators: Validators }[];
        };
    };
-    i18n: I18n;
+    i18n: I18nBase;
 }) {
    const { kcContext, i18n } = params;

@ -303,175 +477,3 @@ export function useGetErrors(params: {

    return { getErrors };
 }
-
-/**
- * NOTE: The attributesWithPassword returned is actually augmented with
- * artificial password related attributes only if kcContext.passwordRequired === true
- */
-export function useFormValidationSlice(params: {
-    kcContext: {
-        messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
-        profile: {
-            attributes: Attribute[];
-        };
-        passwordRequired?: boolean;
-        realm: { registrationEmailAsUsername: boolean };
-    };
-    /** NOTE: Try to avoid passing a new ref every render for better performances. */
-    passwordValidators?: Validators;
-    i18n: I18n;
-}) {
-    const {
-        kcContext,
-        passwordValidators = {
-            "length": {
-                "ignore.empty.value": true,
-                "min": "4"
-            }
-        },
-        i18n
-    } = params;
-
-    const attributesWithPassword = useMemo(
-        () =>
-            !kcContext.passwordRequired
-                ? kcContext.profile.attributes
-                : (() => {
-                      const name = kcContext.realm.registrationEmailAsUsername ? "email" : "username";
-
-                      return kcContext.profile.attributes.reduce<Attribute[]>(
-                          (prev, curr) => [
-                              ...prev,
-                              ...(curr.name !== name
-                                  ? [curr]
-                                  : [
-                                        curr,
-                                        id<Attribute>({
-                                            "name": "password",
-                                            "displayName": id<`\${${MessageKeyBase}}`>("${password}"),
-                                            "required": true,
-                                            "readOnly": false,
-                                            "validators": passwordValidators,
-                                            "annotations": {},
-                                            "groupAnnotations": {},
-                                            "autocomplete": "new-password"
-                                        }),
-                                        id<Attribute>({
-                                            "name": "password-confirm",
-                                            "displayName": id<`\${${MessageKeyBase}}`>("${passwordConfirm}"),
-                                            "required": true,
-                                            "readOnly": false,
-                                            "validators": {
-                                                "_compareToOther": {
-                                                    "name": "password",
-                                                    "ignore.empty.value": true,
-                                                    "shouldBe": "equal",
-                                                    "error-message": id<`\${${MessageKeyBase}}`>("${invalidPasswordConfirmMessage}")
-                                                }
-                                            },
-                                            "annotations": {},
-                                            "groupAnnotations": {},
-                                            "autocomplete": "new-password"
-                                        })
-                                    ])
-                          ],
-                          []
-                      );
-                  })(),
-        [kcContext, passwordValidators]
-    );
-
-    const { getErrors } = useGetErrors({
-        "kcContext": {
-            "messagesPerField": kcContext.messagesPerField,
-            "profile": {
-                "attributes": attributesWithPassword
-            }
-        },
-        i18n
-    });
-
-    const initialInternalState = useMemo(
-        () =>
-            Object.fromEntries(
-                attributesWithPassword
-                    .map(attribute => ({
-                        attribute,
-                        "errors": getErrors({
-                            "name": attribute.name,
-                            "fieldValueByAttributeName": Object.fromEntries(
-                                attributesWithPassword.map(({ name, value }) => [name, { "value": value ?? "" }])
-                            )
-                        })
-                    }))
-                    .map(({ attribute, errors }) => [
-                        attribute.name,
-                        {
-                            "value": attribute.value ?? "",
-                            errors,
-                            "doDisplayPotentialErrorMessages": errors.length !== 0
-                        }
-                    ])
-            ),
-        [attributesWithPassword]
-    );
-
-    type InternalState = typeof initialInternalState;
-
-    const [formValidationInternalState, formValidationReducer] = useReducer(
-        (
-            state: InternalState,
-            params:
-                | {
-                      action: "update value";
-                      name: string;
-                      newValue: string;
-                  }
-                | {
-                      action: "focus lost";
-                      name: string;
-                  }
-        ): InternalState => ({
-            ...state,
-            [params.name]: {
-                ...state[params.name],
-                ...(() => {
-                    switch (params.action) {
-                        case "focus lost":
-                            return { "doDisplayPotentialErrorMessages": true };
-                        case "update value":
-                            return {
-                                "value": params.newValue,
-                                "errors": getErrors({
-                                    "name": params.name,
-                                    "fieldValueByAttributeName": {
-                                        ...state,
-                                        [params.name]: { "value": params.newValue }
-                                    }
-                                })
-                            };
-                    }
-                })()
-            }
-        }),
-        initialInternalState
-    );
-
-    const formValidationState = useMemo(
-        () => ({
-            "fieldStateByAttributeName": Object.fromEntries(
-                Object.entries(formValidationInternalState).map(([name, { value, errors, doDisplayPotentialErrorMessages }]) => [
-                    name,
-                    { value, "displayableErrors": doDisplayPotentialErrorMessages ? errors : [] }
-                ])
-            ),
-            "isFormSubmittable": Object.entries(formValidationInternalState).every(
-                ([name, { value, errors }]) =>
-                    errors.length === 0 && (value !== "" || !attributesWithPassword.find(attribute => attribute.name === name)!.required)
-            )
-        }),
-        [formValidationInternalState, attributesWithPassword]
-    );
-
-    return { formValidationState, formValidationReducer, attributesWithPassword };
-}
--- a/src/scripts/generate-i18n-messages.ts
+++ b/src/scripts/generate-i18n-messages.ts
@ -1,11 +1,11 @@
 import "minimal-polyfills/Object.fromEntries";
 import * as fs from "fs";
 import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
-import { crawl } from "./tools/crawl";
-import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme";
-import { getProjectRoot } from "./tools/getProjectRoot";
-import { getCliOptions } from "./tools/cliOptions";
-import { getLogger } from "./tools/logger";
+import { crawl } from "../bin/tools/crawl";
+import { downloadBuiltinKeycloakTheme } from "../bin/download-builtin-keycloak-theme";
+import { getProjectRoot } from "../bin/tools/getProjectRoot";
+import { getCliOptions } from "../bin/tools/cliOptions";
+import { getLogger } from "../bin/tools/logger";

 //NOTE: To run without argument when we want to generate src/i18n/generated_kcMessages files,
 // update the version array for generating for newer version.
--- a/src/scripts/link-in-app.ts
+++ b/src/scripts/link-in-app.ts
@ -0,0 +1,140 @@
+import { execSync } from "child_process";
+import { join as pathJoin, relative as pathRelative } from "path";
+import * as fs from "fs";
+
+const singletonDependencies: string[] = ["react", "@types/react"];
+
+const rootDirPath = pathJoin(__dirname, "..", "..");
+
+//NOTE: This is only required because of: https://github.com/garronej/ts-ci/blob/c0e207b9677523d4ec97fe672ddd72ccbb3c1cc4/README.md?plain=1#L54-L58
+fs.writeFileSync(
+    pathJoin(rootDirPath, "dist", "package.json"),
+    Buffer.from(
+        JSON.stringify(
+            (() => {
+                const packageJsonParsed = JSON.parse(fs.readFileSync(pathJoin(rootDirPath, "package.json")).toString("utf8"));
+
+                return {
+                    ...packageJsonParsed,
+                    "main": packageJsonParsed["main"]?.replace(/^dist\//, ""),
+                    "types": packageJsonParsed["types"]?.replace(/^dist\//, ""),
+                    "module": packageJsonParsed["module"]?.replace(/^dist\//, ""),
+                    "exports": !("exports" in packageJsonParsed)
+                        ? undefined
+                        : Object.fromEntries(
+                              Object.entries(packageJsonParsed["exports"]).map(([key, value]) => [
+                                  key,
+                                  (value as string).replace(/^\.\/dist\//, "./")
+                              ])
+                          )
+                };
+            })(),
+            null,
+            2
+        ),
+        "utf8"
+    )
+);
+
+const commonThirdPartyDeps = (() => {
+    // For example [ "@emotion" ] it's more convenient than
+    // having to list every sub emotion packages (@emotion/css @emotion/utils ...)
+    // in singletonDependencies
+    const namespaceSingletonDependencies: string[] = [];
+
+    return [
+        ...namespaceSingletonDependencies
+            .map(namespaceModuleName =>
+                fs
+                    .readdirSync(pathJoin(rootDirPath, "node_modules", namespaceModuleName))
+                    .map(submoduleName => `${namespaceModuleName}/${submoduleName}`)
+            )
+            .reduce((prev, curr) => [...prev, ...curr], []),
+        ...singletonDependencies
+    ];
+})();
+
+const yarnGlobalDirPath = pathJoin(rootDirPath, ".yarn_home");
+
+fs.rmSync(yarnGlobalDirPath, { "recursive": true, "force": true });
+fs.mkdirSync(yarnGlobalDirPath);
+
+const execYarnLink = (params: { targetModuleName?: string; cwd: string }) => {
+    const { targetModuleName, cwd } = params;
+
+    const cmd = ["yarn", "link", ...(targetModuleName !== undefined ? [targetModuleName] : ["--no-bin-links"])].join(" ");
+
+    console.log(`$ cd ${pathRelative(rootDirPath, cwd) || "."} && ${cmd}`);
+
+    execSync(cmd, {
+        cwd,
+        "env": {
+            ...process.env,
+            "HOME": yarnGlobalDirPath
+        }
+    });
+};
+
+const testAppPaths = (() => {
+    const [, , ...testAppNames] = process.argv;
+
+    return testAppNames
+        .map(testAppName => {
+            const testAppPath = pathJoin(rootDirPath, "..", testAppName);
+
+            if (fs.existsSync(testAppPath)) {
+                return testAppPath;
+            }
+
+            console.warn(`Skipping ${testAppName} since it cant be found here: ${testAppPath}`);
+
+            return undefined;
+        })
+        .filter((path): path is string => path !== undefined);
+})();
+
+if (testAppPaths.length === 0) {
+    console.error("No test app to link into!");
+    process.exit(-1);
+}
+
+testAppPaths.forEach(testAppPath => execSync("yarn install", { "cwd": testAppPath }));
+
+console.log("=== Linking common dependencies ===");
+
+const total = commonThirdPartyDeps.length;
+let current = 0;
+
+commonThirdPartyDeps.forEach(commonThirdPartyDep => {
+    current++;
+
+    console.log(`${current}/${total} ${commonThirdPartyDep}`);
+
+    const localInstallPath = pathJoin(
+        ...[rootDirPath, "node_modules", ...(commonThirdPartyDep.startsWith("@") ? commonThirdPartyDep.split("/") : [commonThirdPartyDep])]
+    );
+
+    execYarnLink({ "cwd": localInstallPath });
+});
+
+commonThirdPartyDeps.forEach(commonThirdPartyDep =>
+    testAppPaths.forEach(testAppPath =>
+        execYarnLink({
+            "cwd": testAppPath,
+            "targetModuleName": commonThirdPartyDep
+        })
+    )
+);
+
+console.log("=== Linking in house dependencies ===");
+
+execYarnLink({ "cwd": pathJoin(rootDirPath, "dist") });
+
+testAppPaths.forEach(testAppPath =>
+    execYarnLink({
+        "cwd": testAppPath,
+        "targetModuleName": JSON.parse(fs.readFileSync(pathJoin(rootDirPath, "package.json")).toString("utf8"))["name"]
+    })
+);
+
+export {};
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
renovate[bot]	9e75ee09bb	fix(deps): update garronej_modules_update	2023-03-18 09:11:03 +00:00
garronej	93fdcb8739	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify	2023-03-16 13:33:01 +01:00
garronej	aca926e202	Fix link script command	2023-03-16 13:31:56 +01:00
Joseph Garrone	9941027b10	Update package.json	2023-03-15 12:45:58 +01:00
Joseph Garrone	9104de4290	Merge pull request #263 from mkreuzmayr/main Fix start container script paths for windows	2023-03-15 12:45:43 +01:00
Michael Kreuzmayr	5dc692809c	Fix start container script paths for windows	2023-03-15 10:07:01 +01:00
garronej	8dc1d1bd21	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify	2023-03-13 10:47:10 +01:00
garronej	fe588485a9	Update changelog	2023-03-13 10:47:02 +01:00
Joseph Garrone	19ef1d7025	Bump version	2023-03-13 10:44:46 +01:00
Joseph Garrone	62523a8662	Merge pull request #260 from InseeFrLab/lordvlad/issue257 Run keycloakify behind corporate proxy	2023-03-13 10:44:08 +01:00
Joseph Garrone	6e97665e2e	Merge branch 'main' into lordvlad/issue257	2023-03-09 18:33:18 +01:00
Joseph Garrone	4988680353	Update description	2023-03-09 18:30:58 +01:00
garronej	c5de5c20c7	Bump version	2023-03-08 23:21:44 +01:00
garronej	1a0fee1aa2	Make things cleaner	2023-03-08 23:21:32 +01:00
Joseph Garrone	06a44603cd	Release candidate	2023-03-08 22:32:45 +01:00
garronej	e48459762e	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify	2023-03-08 22:28:46 +01:00
garronej	235ebeae97	Bump version	2023-03-08 22:25:10 +01:00
garronej	dfe909606e	Deprecate useFormValidationSlice	2023-03-08 22:24:51 +01:00
Waldemar Reusch	6fd0c7726c	Merge branch 'lordvlad/issue257' of github.com:InseeFrLab/keycloakify into lordvlad/issue257 * 'lordvlad/issue257' of github.com:InseeFrLab/keycloakify: Only test build on LTS node version Update dependency evt to ^2.4.15 Update README.md Bump version Avoid passing unessesary realm values in the error.ftl page	2023-03-08 10:25:10 +01:00
Waldemar Reusch	819e045811	feat(proxy): respect XDG_CACHE_HOME if set	2023-03-08 10:24:52 +01:00
Joseph Garrone	1ba780598d	Relase candidate	2023-03-07 18:18:37 +01:00
Joseph Garrone	aeb0cb3110	Only test build on LTS node version	2023-03-07 18:18:04 +01:00
Joseph Garrone	88923838c5	Bump version	2023-03-07 17:29:30 +01:00
Waldemar Reusch	df9f6fd7fd	Merge branch 'main' into lordvlad/issue257	2023-03-07 17:16:24 +01:00
renovate[bot]	98e46d6ac9	Update dependency evt to ^2.4.15	2023-03-07 17:07:49 +01:00
Joseph Garrone	daff614fb4	Update README.md	2023-03-07 17:07:48 +01:00
garronej	5ea324c7f2	Bump version	2023-03-07 17:07:48 +01:00
garronej	23fedbf94a	Avoid passing unessesary realm values in the error.ftl page	2023-03-07 17:07:45 +01:00
Waldemar Reusch	593d66d8d6	style: remove unused dependency	2023-03-07 16:45:17 +01:00
Waldemar Reusch	851dcd5bf7	Run keycloakify behind corporate proxy Fixes #257 Use make-fetch-happen for the download step. This lib will use `PROXY` and `HTTPS_PROXY` and `NO_PROXY` env vars out of the box. Additionally we'll try and get proxy config from npm. Unfortunately, the most straightforward options is to call npm config to do this, since npm config is not easily extracted as a lib and we don't want to replicate the resolution mechanisms.	2023-03-07 16:43:12 +01:00
renovate[bot]	2e919681ae	Update dependency evt to ^2.4.15	2023-03-07 10:14:46 +00:00
Joseph Garrone	5da68cd48c	Update README.md	2023-03-05 23:37:37 +01:00
garronej	27fdaeff46	Bump version	2023-02-27 11:55:39 +01:00
garronej	53c0079656	Use extract instead of subtype to ease copy paste into theme repo	2023-02-27 11:55:25 +01:00
garronej	93780b77e0	Bump version	2023-02-27 11:32:14 +01:00
garronej	b712ed0421	Avoid using tsafe utils to avoid forcing user to install tsafe	2023-02-27 11:32:00 +01:00
garronej	ee96f1b345	Bump version	2023-02-27 11:29:23 +01:00
garronej	d13464df3d	Get rid of the ReactComponent type, classes based component are no longer used	2023-02-27 11:29:05 +01:00
garronej	6bde2e4d96	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify	2023-02-27 10:39:44 +01:00
garronej	0a4953c020	Bump version	2023-02-27 10:39:37 +01:00
garronej	96c488880c	Abstract away Template logic	2023-02-27 10:39:22 +01:00
Joseph Garrone	7e0adf3f66	Update README.md	2023-02-26 17:32:35 +01:00
garronej	09f716440a	Bump version	2023-02-26 16:41:47 +01:00
garronej	2251c84171	Use the new syntax for importing as type	2023-02-26 16:37:06 +01:00
garronej	5cfe78dcd1	Update prettier config	2023-02-26 15:39:03 +01:00
garronej	6a48325132	Be more relax on the type safety to avoir headache	2023-02-26 15:37:52 +01:00
garronej	294be0a79a	see prev commit	2023-02-26 15:36:52 +01:00
garronej	c94b264b44	Don't need a dir for a single file	2023-02-26 15:36:35 +01:00
garronej	7220c4e3e3	Fix deepAssign	2023-02-26 15:35:57 +01:00
garronej	5aadeba2ec	fix clsx	2023-02-26 15:35:30 +01:00
garronej	0f47a5b6ba	Small Template refactor	2023-02-25 20:11:55 +01:00
garronej	36f32d28f2	Stop auto updating powerhooks	2023-02-25 19:21:55 +01:00
garronej	6d69ccf229	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify	2023-02-25 19:21:17 +01:00
garronej	37073b42be	Avoir introducing breaking changes for CSS only setup	2023-02-25 19:19:46 +01:00
garronej	837501c948	Refactor	2023-02-25 18:26:39 +01:00
garronej	b300966fa8	Refactor and get rid of unessesary dependencies	2023-02-25 18:11:23 +01:00
				`@ -0,0 +1 @@`
				`export type SetOptional<T extends Record<string, unknown>, K extends keyof T> = Omit<T, K> & Partial<Record<K, T[K]>>;`