Release candidate

Add users to provided realm configuration if none exists
Release candidate
2024-08-25 19:02:33 +02:00 · 2024-08-25 19:02:00 +02:00 · 2024-08-25 03:19:58 +02:00 · 2024-08-25 03:19:34 +02:00 · 2024-08-25 02:54:46 +02:00 · 2024-08-24 23:15:54 +02:00
48 changed files with 975 additions and 1409 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@ -231,6 +231,24 @@
      "contributions": [
        "code"
      ]
+    },
+    {
+      "login": "madmadson",
+      "name": "Tobias Matt",
+      "avatar_url": "https://avatars.githubusercontent.com/u/798831?v=4",
+      "profile": "https://github.com/madmadson",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "oliviergoulet5",
+      "name": "Olivier Goulet",
+      "avatar_url": "https://avatars.githubusercontent.com/u/17685861?v=4",
+      "profile": "https://github.com/oliviergoulet5",
+      "contributions": [
+        "code"
+      ]
    }
  ],
  "contributorsPerLine": 7,
--- a/.storybook/Containers.js
+++ b/.storybook/Containers.js
@ -1,70 +0,0 @@
-
-import React from "react";
-import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
-import { useDarkMode } from "storybook-dark-mode";
-import { darkTheme, lightTheme } from "./customTheme";
-import "./static/fonts/WorkSans/font.css";
-
-export function DocsContainer({ children, context }) {
-    const isStorybookUiDark = useDarkMode();
-
-    const theme = isStorybookUiDark ? darkTheme : lightTheme;
-
-    const backgroundColor = theme.appBg;
-
-    return (
-        <>
-            <style>{`
-                body {
-                    padding: 0 !important;
-                    background-color: ${backgroundColor};
-                }
-
-                .docs-story {
-                    background-color: ${backgroundColor};
-                }
-                [id^=story--] .container {
-                    border: 1px dashed #e8e8e8;
-                }
-
-                .docblock-argstable-head th:nth-child(3), .docblock-argstable-body tr > td:nth-child(3) {
-                    visibility: collapse;
-                }
-
-                .docblock-argstable-head th:nth-child(3), .docblock-argstable-body tr > td:nth-child(2) p {
-                    font-size: 13px;
-                }
-            `}</style>
-            <BaseContainer
-                context={{
-                    ...context,
-                    "storyById": id => {
-                        const storyContext = context.storyById(id);
-                        return {
-                            ...storyContext,
-                            "parameters": {
-                                ...storyContext?.parameters,
-                                "docs": {
-                                    ...storyContext?.parameters?.docs,
-                                    "theme": isStorybookUiDark ? darkTheme : lightTheme
-                                }
-                            }
-                        };
-                    }
-                }}
-            >
-                {children}
-            </BaseContainer>
-        </>
-    );
-}
-
-export function CanvasContainer({ children }) {
-
-    return (
-        <>
-            {children}
-        </>
-    );
-
-}
--- a/.storybook/customTheme.js
+++ b/.storybook/customTheme.js
@ -1,35 +0,0 @@
-import { create } from "@storybook/theming";
-
-const brandImage = "logo.png";
-const brandTitle = "Keycloakify";
-const brandUrl = "https://github.com/keycloakify/keycloakify";
-const fontBase = '"Work Sans", sans-serif';
-const fontCode = "monospace";
-
-export const darkTheme = create({
-    "base": "dark",
-    "appBg": "#1E1E1E",
-    "appContentBg": "#161616",
-    "barBg": "#161616",
-    "colorSecondary": "#8585F6",
-    "textColor": "#FFFFFF",
-    brandImage,
-    brandTitle,
-    brandUrl,
-    fontBase,
-    fontCode
-});
-
-export const lightTheme = create({
-    "base": "light",
-    "appBg": "#F6F6F6",
-    "appContentBg": "#FFFFFF",
-    "barBg": "#FFFFFF",
-    "colorSecondary": "#000091",
-    "textColor": "#212121",
-    brandImage,
-    brandTitle,
-    brandUrl,
-    fontBase,
-    fontCode
-});
--- a/.storybook/customTheme.ts
+++ b/.storybook/customTheme.ts
@ -0,0 +1,33 @@
+const brandImage = "logo.png";
+const brandTitle = "Keycloakify";
+const brandUrl = "https://github.com/keycloakify/keycloakify";
+const fontBase = '"Work Sans", sans-serif';
+const fontCode = "monospace";
+
+export const darkTheme = {
+    base: "dark",
+    appBg: "#1E1E1E",
+    appContentBg: "#161616",
+    barBg: "#161616",
+    colorSecondary: "#8585F6",
+    textColor: "#FFFFFF",
+    brandImage,
+    brandTitle,
+    brandUrl,
+    fontBase,
+    fontCode
+};
+
+export const lightTheme: typeof darkTheme = {
+    base: "light",
+    appBg: "#F6F6F6",
+    appContentBg: "#FFFFFF",
+    barBg: "#FFFFFF",
+    colorSecondary: "#000091",
+    textColor: "#212121",
+    brandImage,
+    brandTitle,
+    brandUrl,
+    fontBase,
+    fontCode
+};
--- a/.storybook/main.js
+++ b/.storybook/main.js
@ -1,15 +1,13 @@
 module.exports = {
-    "stories": [
-        "../stories/**/*.stories.@(ts|tsx|mdx)"
+    stories: [
+        "../stories/**/*.stories.tsx"
    ],
-    "addons": [
-        "@storybook/addon-links",
-        "@storybook/addon-essentials",
+    addons: [
        "storybook-dark-mode",
        "@storybook/addon-a11y"
    ],
-    "core": {
-        "builder": "webpack5"
+    core: {
+        builder: "webpack5"
    },
-    "staticDirs": ["./static"]
+    staticDirs: ["./static"]
 };
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@ -1,6 +1,6 @@
 import { addons } from '@storybook/addons';

 addons.setConfig({
-  "selectedPanel": 'storybook/a11y/panel',
-  "showPanel": false,
+  selectedPanel: 'storybook/a11y/panel',
+  showPanel: false
 });
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@ -1,3 +1,9 @@
+<link rel="preload" href="/fonts/WorkSans/worksans-bold-webfont.woff2" as="font" crossorigin="anonymous">
+<link rel="preload" href="/fonts/WorkSans/worksans-medium-webfont.woff2" as="font" crossorigin="anonymous">
+<link rel="preload" href="/fonts/WorkSans/worksans-regular-webfont.woff2" as="font" crossorigin="anonymous">
+<link rel="preload" href="/fonts/WorkSans/worksans-semibold-webfont.woff2" as="font" crossorigin="anonymous">
+<link rel="stylesheet" type="text/css" href="/fonts/WorkSans/font.css">
+
 <style>
    body.sb-show-main.sb-main-padded {
        padding: 0;
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@ -1,116 +1,105 @@
 import { darkTheme, lightTheme } from "./customTheme";
-import { DocsContainer, CanvasContainer } from "./Containers";
+import { create as createTheme } from "@storybook/theming";

 export const parameters = {
-    "actions": { "argTypesRegex": "^on[A-Z].*" },
-    "controls": {
-        "matchers": {
-            "color": /(background|color)$/i,
-            "date": /Date$/,
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
        },
    },
-    "backgrounds": { "disable": true },
-    "darkMode": {
-        "light": lightTheme,
-        "dark": darkTheme,
+    backgrounds: { disable: true },
+    darkMode: {
+        light: createTheme(lightTheme),
+        dark: createTheme(darkTheme),
    },
-    "docs": {
-        "container": DocsContainer
+    controls: {
+        disable: true,
    },
-    "controls": {
-        "disable": true,
+    actions: {
+        disable: true
    },
-    "actions": {
-        "disable": true
-    },
-    "viewport": {
-        "viewports": {
+    viewport: {
+        viewports: {
            "1440p": {
-                "name": "1440p",
-                "styles": {
-                    "width": "2560px",
-                    "height": "1440px",
+                name: "1440p",
+                styles: {
+                    width: "2560px",
+                    height: "1440px",
                },
            },
-            "fullHD": {
-                "name": "Full HD",
-                "styles": {
-                    "width": "1920px",
-                    "height": "1080px",
+            fullHD: {
+                name: "Full HD",
+                styles: {
+                    width: "1920px",
+                    height: "1080px",
                },
            },
-            "macBookProBig": {
-                "name": "MacBook Pro Big",
-                "styles": {
-                    "width": "1024px",
-                    "height": "640px",
+            macBookProBig: {
+                name: "MacBook Pro Big",
+                styles: {
+                    width: "1024px",
+                    height: "640px",
                },
            },
-            "macBookProMedium": {
-                "name": "MacBook Pro Medium",
-                "styles": {
-                    "width": "1440px",
-                    "height": "900px",
+            macBookProMedium: {
+                name: "MacBook Pro Medium",
+                styles: {
+                    width: "1440px",
+                    height: "900px",
                },
            },
-            "macBookProSmall": {
-                "name": "MacBook Pro Small",
-                "styles": {
-                    "width": "1680px",
-                    "height": "1050px",
+            macBookProSmall: {
+                name: "MacBook Pro Small",
+                styles: {
+                    width: "1680px",
+                    height: "1050px",
                },
            },
-            "pcAgent": {
-                "name": "PC Agent",
-                "styles": {
-                    "width": "960px",
-                    "height": "540px",
+            pcAgent: {
+                name: "PC Agent",
+                styles: {
+                    width: "960px",
+                    height: "540px",
                },
            },
-            "iphone12Pro": {
-                "name": "Iphone 12 pro",
-                "styles": {
-                    "width": "390px",
-                    "height": "844px",
+            iphone12Pro: {
+                name: "Iphone 12 pro",
+                styles: {
+                    width: "390px",
+                    height: "844px",
                },
            },
-            "iphone5se": {
-                "name": "Iphone 5/SE",
-                "styles": {
-                    "width": "320px",
-                    "height": "568px",
+            iphone5se: {
+                name: "Iphone 5/SE",
+                styles: {
+                    width: "320px",
+                    height: "568px",
                },
            },
-            "ipadPro": {
-                "name": "Ipad pro",
-                "styles": {
-                    "width": "1240px",
-                    "height": "1366px",
+            ipadPro: {
+                name: "Ipad pro",
+                styles: {
+                    width: "1240px",
+                    height: "1366px",
                },
            },
            "Galaxy s9+": {
-                "name": "Galaxy S9+",
-                "styles": {
-                    "width": "320px",
-                    "height": "658px",
+                name: "Galaxy S9+",
+                styles: {
+                    width: "320px",
+                    height: "658px",
                },
            }
        },
    },
-    "options": {
-        "storySort": (a, b) =>
+    options: {
+        storySort: (a, b) =>
            getHardCodedWeight(b[1].kind) - getHardCodedWeight(a[1].kind),
    },
 };

-export const decorators = [
-    (Story) => (
-        <CanvasContainer>
-            <Story />
-        </CanvasContainer>
-    ),
-];
-
 const { getHardCodedWeight } = (() => {

    const orderedPagesPrefix = [
--- a/README.md
+++ b/README.md
@ -43,7 +43,8 @@

 Keycloakify is fully compatible with Keycloak 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, [~~22~~](https://github.com/keycloakify/keycloakify/issues/389#issuecomment-1822509763), 23, 24, 25...[and beyond](https://github.com/keycloakify/keycloakify/discussions/346#discussioncomment-5889791)

-> NOTE: Keycloakify 10 is still in release-candidate state. [Follow progress](https://github.com/keycloakify/keycloakify/pull/538).
+> NOTE: Keycloakify 10, while still being tagged as release candidate is the version you should use if you are starting today.  
+> Use `yarn add keycloakify@next` or pin [the latest version candidate](https://www.npmjs.com/package/keycloakify?activeTab=versions).

 ## Sponsors

@ -130,7 +131,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
      <td align="center" valign="top" width="14.28%"><a href="https://m-siemens.de/"><img src="https://avatars.githubusercontent.com/u/1873922?v=4?s=100" width="100px;" alt="Markus Siemens"/><br /><sub><b>Markus Siemens</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=msiemens" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/law108000"><img src="https://avatars.githubusercontent.com/u/8112024?v=4?s=100" width="100px;" alt="Rlok"/><br /><sub><b>Rlok</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=law108000" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Moulyy"><img src="https://avatars.githubusercontent.com/u/115405804?v=4?s=100" width="100px;" alt="Moulyy"/><br /><sub><b>Moulyy</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Moulyy" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/giorgoslytos"><img src="https://avatars.githubusercontent.com/u/50946162?v=4?s=100" width="100px;" alt="giorgoslytos"/><br /><sub><b>giorgoslytos</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=giorgoslytos" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/madmadson"><img src="https://avatars.githubusercontent.com/u/798831?v=4?s=100" width="100px;" alt="Tobias Matt"/><br /><sub><b>Tobias Matt</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=madmadson" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/oliviergoulet5"><img src="https://avatars.githubusercontent.com/u/17685861?v=4?s=100" width="100px;" alt="Olivier Goulet"/><br /><sub><b>Olivier Goulet</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=oliviergoulet5" title="Code">💻</a></td>
    </tr>
  </tbody>
 </table>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "keycloakify",
-    "version": "10.0.0-rc.122",
+    "version": "10.0.0-rc.149",
    "description": "Create Keycloak themes using React",
    "repository": {
        "type": "git",
@ -72,14 +72,10 @@
        "@emotion/react": "^11.11.4",
        "@octokit/rest": "^20.1.1",
        "@storybook/addon-a11y": "^6.5.16",
-        "@storybook/addon-actions": "^6.5.13",
-        "@storybook/addon-essentials": "^6.5.13",
-        "@storybook/addon-interactions": "^6.5.13",
-        "@storybook/addon-links": "^6.5.13",
        "@storybook/builder-webpack5": "^6.5.13",
        "@storybook/manager-webpack5": "^6.5.13",
        "@storybook/react": "^6.5.13",
-        "@storybook/testing-library": "^0.0.13",
+        "eslint-plugin-storybook": "^0.6.7",
        "@types/babel__generator": "^7.6.4",
        "@types/make-fetch-happen": "^10.0.1",
        "@types/minimist": "^1.2.2",
@ -89,10 +85,9 @@
        "@types/yauzl": "^2.10.3",
        "@vercel/ncc": "^0.38.1",
        "chalk": "^4.1.2",
-        "cheerio": "^1.0.0-rc.12",
+        "cheerio": "1.0.0-rc.12",
        "chokidar-cli": "^3.0.0",
        "cli-select": "^1.1.2",
-        "eslint-plugin-storybook": "^0.6.7",
        "husky": "^4.3.8",
        "lint-staged": "^11.0.0",
        "magic-string": "^0.30.7",
@ -108,7 +103,7 @@
        "termost": "^v0.12.1",
        "tsc-alias": "^1.8.10",
        "tss-react": "^4.9.10",
-        "typescript": "^4.9.1-beta",
+        "typescript": "^4.9.4",
        "vite": "^5.2.11",
        "vitest": "^1.6.0",
        "yauzl": "^2.10.0",
--- a/scripts/link-in-starter.ts
+++ b/scripts/link-in-starter.ts
@ -2,8 +2,33 @@ import * as child_process from "child_process";
 import * as fs from "fs";
 import { join } from "path";
 import { startRebuildOnSrcChange } from "./startRebuildOnSrcChange";
+import { crawl } from "../src/bin/tools/crawl";
+
+{
+    const dirPath = "node_modules";
+
+    try {
+        fs.rmSync(dirPath, { recursive: true, force: true });
+    } catch {
+        // NOTE: This is a workaround for windows
+        // we can't remove locked executables.
+
+        crawl({
+            dirPath,
+            returnedPathsType: "absolute"
+        }).forEach(filePath => {
+            try {
+                fs.rmSync(filePath, { force: true });
+            } catch (error) {
+                if (filePath.endsWith(".exe")) {
+                    return;
+                }
+                throw error;
+            }
+        });
+    }
+}

-fs.rmSync("node_modules", { recursive: true, force: true });
 fs.rmSync("dist", { recursive: true, force: true });
 fs.rmSync(".yarn_home", { recursive: true, force: true });

--- a/src/bin/initialize-account-theme/initializeAccountTheme_singlePage.ts
+++ b/src/bin/initialize-account-theme/initializeAccountTheme_singlePage.ts
@ -2,7 +2,10 @@ import { join as pathJoin, relative as pathRelative, dirname as pathDirname } fr
 import type { BuildContext } from "../shared/buildContext";
 import * as fs from "fs";
 import chalk from "chalk";
-import { getLatestsSemVersionedTag } from "../shared/getLatestsSemVersionedTag";
+import {
+    getLatestsSemVersionedTag,
+    type BuildContextLike as BuildContextLike_getLatestsSemVersionedTag
+} from "../shared/getLatestsSemVersionedTag";
 import fetch from "make-fetch-happen";
 import { z } from "zod";
 import { assert, type Equals } from "tsafe/assert";
@ -12,8 +15,7 @@ import { npmInstall } from "../tools/npmInstall";
 import { copyBoilerplate } from "./copyBoilerplate";
 import { getThisCodebaseRootDirPath } from "../tools/getThisCodebaseRootDirPath";

-type BuildContextLike = {
-    cacheDirPath: string;
+type BuildContextLike = BuildContextLike_getLatestsSemVersionedTag & {
    fetchOptions: BuildContext["fetchOptions"];
    packageJsonFilePath: string;
 };
@ -30,11 +32,11 @@ export async function initializeAccountTheme_singlePage(params: {
    const REPO = "keycloak-account-ui";

    const [semVersionedTag] = await getLatestsSemVersionedTag({
-        cacheDirPath: buildContext.cacheDirPath,
        owner: OWNER,
        repo: REPO,
        count: 1,
-        doIgnoreReleaseCandidates: false
+        doIgnoreReleaseCandidates: false,
+        buildContext
    });

    const dependencies = await fetch(
--- a/src/bin/initialize-email-theme.ts
+++ b/src/bin/initialize-email-theme.ts
@ -30,7 +30,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
        // NOTE: This is arbitrary
        startingFromMajor: 17,
        excludeMajorVersions: [],
-        cacheDirPath: buildContext.cacheDirPath
+        buildContext
    });

    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
--- a/src/bin/keycloakify/generateFtl/generateFtl.ts
+++ b/src/bin/keycloakify/generateFtl/generateFtl.ts
@ -1,4 +1,4 @@
-import cheerio from "cheerio";
+import * as cheerio from "cheerio";
 import {
    replaceImportsInJsCode,
    BuildContextLike as BuildContextLike_replaceImportsInJsCode
@ -77,7 +77,8 @@ export function generateFtlFilesCodeFactory(params: {
        (
            [
                ["link", "href"],
-                ["script", "src"]
+                ["script", "src"],
+                ["script", "data-src"]
            ] as const
        ).forEach(([selector, attrName]) =>
            $(selector).each((...[, element]) => {
--- a/src/bin/main.ts
+++ b/src/bin/main.ts
@ -78,7 +78,7 @@ program

 program
    .command<{
-        port: number;
+        port: number | undefined;
        keycloakVersion: string | undefined;
        realmJsonFilePath: string | undefined;
    }>({
@ -96,7 +96,7 @@ program
            return name;
        })(),
        description: ["Keycloak server port.", "Example `--port 8085`"].join(" "),
-        defaultValue: 8080
+        defaultValue: undefined
    })
    .option({
        key: "keycloakVersion",
--- a/src/bin/shared/buildContext.ts
+++ b/src/bin/shared/buildContext.ts
@ -61,6 +61,19 @@ export type BuildContext = {
        keycloakVersionRange: KeycloakVersionRange;
        jarFileBasename: string;
    }[];
+    startKeycloakOptions: {
+        dockerImage:
+            | {
+                  reference: string;
+                  tag: string;
+              }
+            | undefined;
+        dockerExtraArgs: string[];
+        keycloakExtraArgs: string[];
+        extensionJars: ({ type: "path"; path: string } | { type: "url"; url: string })[];
+        realmJsonFilePath: string | undefined;
+        port: number | undefined;
+    };
 };

 assert<Equals<keyof BuildContext["implementedThemeTypes"], ThemeType | "email">>();
@ -75,6 +88,14 @@ export type BuildOptions = {
    loginThemeResourcesFromKeycloakVersion?: string;
    keycloakifyBuildDirPath?: string;
    kcContextExclusionsFtl?: string;
+    startKeycloakOptions?: {
+        dockerImage?: string;
+        dockerExtraArgs?: string[];
+        keycloakExtraArgs?: string[];
+        extensionJars?: string[];
+        realmJsonFilePath?: string;
+        port?: number;
+    };
 } & BuildOptions.AccountThemeImplAndKeycloakVersionTargets;

 export namespace BuildOptions {
@ -301,6 +322,23 @@ export function getBuildContext(params: {
            return id<z.ZodType<TargetType>>(zTargetType);
        })();

+        const zStartKeycloakOptions = (() => {
+            type TargetType = NonNullable<BuildOptions["startKeycloakOptions"]>;
+
+            const zTargetType = z.object({
+                dockerImage: z.string().optional(),
+                extensionJars: z.array(z.string()).optional(),
+                realmJsonFilePath: z.string().optional(),
+                dockerExtraArgs: z.array(z.string()).optional(),
+                keycloakExtraArgs: z.array(z.string()).optional(),
+                port: z.number().optional()
+            });
+
+            assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+            return id<z.ZodType<TargetType>>(zTargetType);
+        })();
+
        const zBuildOptions = (() => {
            type TargetType = BuildOptions;

@ -321,7 +359,8 @@ export function getBuildContext(params: {
                    groupId: z.string().optional(),
                    loginThemeResourcesFromKeycloakVersion: z.string().optional(),
                    keycloakifyBuildDirPath: z.string().optional(),
-                    kcContextExclusionsFtl: z.string().optional()
+                    kcContextExclusionsFtl: z.string().optional(),
+                    startKeycloakOptions: zStartKeycloakOptions.optional()
                }),
                zAccountThemeImplAndKeycloakVersionTargets
            );
@ -891,6 +930,48 @@ export function getBuildContext(params: {
            }

            return jarTargets;
-        })()
+        })(),
+        startKeycloakOptions: {
+            dockerImage: (() => {
+                if (buildOptions.startKeycloakOptions?.dockerImage === undefined) {
+                    return undefined;
+                }
+
+                const [reference, tag, ...rest] =
+                    buildOptions.startKeycloakOptions.dockerImage.split(":");
+
+                assert(
+                    reference !== undefined && tag !== undefined && rest.length === 0,
+                    `Invalid docker image: ${buildOptions.startKeycloakOptions.dockerImage}`
+                );
+
+                return { reference, tag };
+            })(),
+            dockerExtraArgs: buildOptions.startKeycloakOptions?.dockerExtraArgs ?? [],
+            keycloakExtraArgs: buildOptions.startKeycloakOptions?.keycloakExtraArgs ?? [],
+            extensionJars: (buildOptions.startKeycloakOptions?.extensionJars ?? []).map(
+                urlOrPath => {
+                    if (/^https?:\/\//.test(urlOrPath)) {
+                        return { type: "url", url: urlOrPath };
+                    }
+
+                    return {
+                        type: "path",
+                        path: getAbsoluteAndInOsFormatPath({
+                            pathIsh: urlOrPath,
+                            cwd: projectDirPath
+                        })
+                    };
+                }
+            ),
+            realmJsonFilePath:
+                buildOptions.startKeycloakOptions?.realmJsonFilePath === undefined
+                    ? undefined
+                    : getAbsoluteAndInOsFormatPath({
+                          pathIsh: buildOptions.startKeycloakOptions.realmJsonFilePath,
+                          cwd: projectDirPath
+                      }),
+            port: buildOptions.startKeycloakOptions?.port
+        }
    };
 }
--- a/src/bin/shared/getLatestsSemVersionedTag.ts
+++ b/src/bin/shared/getLatestsSemVersionedTag.ts
@ -9,6 +9,8 @@ import { assert, type Equals } from "tsafe/assert";
 import { id } from "tsafe/id";
 import type { SemVer } from "../tools/SemVer";
 import { same } from "evt/tools/inDepth/same";
+import type { BuildContext } from "./buildContext";
+import fetch from "make-fetch-happen";

 type GetLatestsSemVersionedTag = ReturnType<
    typeof getLatestsSemVersionedTagFactory
@ -31,11 +33,23 @@ type Cache = {
    }[];
 };

+export type BuildContextLike = {
+    cacheDirPath: string;
+    fetchOptions: BuildContext["fetchOptions"];
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
 export async function getLatestsSemVersionedTag({
-    cacheDirPath,
+    buildContext,
    ...params
-}: Params & { cacheDirPath: string }): Promise<R> {
-    const cacheFilePath = pathJoin(cacheDirPath, "latest-sem-versioned-tags.json");
+}: Params & {
+    buildContext: BuildContextLike;
+}): Promise<R> {
+    const cacheFilePath = pathJoin(
+        buildContext.cacheDirPath,
+        "latest-sem-versioned-tags.json"
+    );

    const cacheLookupResult = (() => {
        const getResult_currentCache = (currentCacheEntries: Cache["entries"]) => ({
@ -144,9 +158,16 @@ export async function getLatestsSemVersionedTag({
        const octokit = (() => {
            const githubToken = process.env.GITHUB_TOKEN;

-            const octokit = new Octokit(
-                githubToken === undefined ? undefined : { auth: githubToken }
-            );
+            const octokit = new Octokit({
+                ...(githubToken === undefined ? {} : { auth: githubToken }),
+                request: {
+                    fetch: (url: string, options?: any) =>
+                        fetch(url, {
+                            ...options,
+                            ...buildContext.fetchOptions
+                        })
+                }
+            });

            return octokit;
        })();
--- a/src/bin/shared/promptKeycloakVersion.ts
+++ b/src/bin/shared/promptKeycloakVersion.ts
@ -1,22 +1,31 @@
-import { getLatestsSemVersionedTag } from "./getLatestsSemVersionedTag";
+import {
+    getLatestsSemVersionedTag,
+    type BuildContextLike as BuildContextLike_getLatestsSemVersionedTag
+} from "./getLatestsSemVersionedTag";
 import cliSelect from "cli-select";
+import { assert } from "tsafe/assert";
 import { SemVer } from "../tools/SemVer";
+import type { BuildContext } from "./buildContext";
+
+export type BuildContextLike = BuildContextLike_getLatestsSemVersionedTag & {};
+
+assert<BuildContext extends BuildContextLike ? true : false>();

 export async function promptKeycloakVersion(params: {
    startingFromMajor: number | undefined;
    excludeMajorVersions: number[];
-    cacheDirPath: string;
+    buildContext: BuildContextLike;
 }) {
-    const { startingFromMajor, excludeMajorVersions, cacheDirPath } = params;
+    const { startingFromMajor, excludeMajorVersions, buildContext } = params;

    const semVersionedTagByMajor = new Map<number, { tag: string; version: SemVer }>();

    const semVersionedTags = await getLatestsSemVersionedTag({
-        cacheDirPath,
        count: 50,
        owner: "keycloak",
        repo: "keycloak",
-        doIgnoreReleaseCandidates: true
+        doIgnoreReleaseCandidates: true,
+        buildContext
    });

    semVersionedTags.forEach(semVersionedTag => {
@ -46,7 +55,7 @@ export async function promptKeycloakVersion(params: {
    });

    const lastMajorVersions = Array.from(semVersionedTagByMajor.values()).map(
-        ({ tag }) => tag
+        ({ version }) => `${version.major}.${version.minor}`
    );

    const { value } = await cliSelect<string>({
--- a/src/bin/start-keycloak/appBuild.ts
+++ b/src/bin/start-keycloak/appBuild.ts
@ -40,7 +40,7 @@ async function appBuild_vite(params: {

    const dIsSuccess = new Deferred<boolean>();

-    console.log(chalk.blue("Running: 'npx vite build'"));
+    console.log(chalk.blue("$ npx vite build"));

    const child = child_process.spawn("npx", ["vite", "build"], {
        cwd: buildContext.projectDirPath,
@ -145,7 +145,7 @@ async function appBuild_webpack(params: {
            continue;
        }

-        console.log(chalk.blue(`Running: '${subCommand}'`));
+        console.log(chalk.blue(`$ ${subCommand}`));

        const child = child_process.spawn(command, args, {
            cwd: commandCwd,
--- a/src/bin/start-keycloak/keycloakifyBuild.ts
+++ b/src/bin/start-keycloak/keycloakifyBuild.ts
@ -20,7 +20,7 @@ export async function keycloakifyBuild(params: {

    const dResult = new Deferred<{ isSuccess: boolean }>();

-    console.log(chalk.blue("Running: 'npx keycloakify build'"));
+    console.log(chalk.blue("$ npx keycloakify build"));

    const child = child_process.spawn("npx", ["keycloakify", "build"], {
        cwd: buildContext.projectDirPath,
--- a/src/bin/start-keycloak/myrealm-realm-18.json
+++ b/src/bin/start-keycloak/myrealm-realm-18.json
@ -73,7 +73,7 @@
                "composites": {
                    "realm": ["offline_access", "uma_authorization"],
                    "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                    }
                },
                "clientRole": false,
@ -611,8 +611,8 @@
            "name": "",
            "description": "",
            "rootUrl": "https://my-theme.keycloakify.dev",
-            "adminUrl": "",
-            "baseUrl": "",
+            "adminUrl": "https://my-theme.keycloakify.dev",
+            "baseUrl": "https://my-theme.keycloakify.dev",
            "surrogateAuthRequired": false,
            "enabled": true,
            "alwaysDisplayInConsole": false,
@ -2099,7 +2099,7 @@
            "alias": "delete_account",
            "name": "Delete Account",
            "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
            "defaultAction": false,
            "priority": 60,
            "config": {}
--- a/src/bin/start-keycloak/myrealm-realm-19.json
+++ b/src/bin/start-keycloak/myrealm-realm-19.json
@ -73,7 +73,7 @@
                "composites": {
                    "realm": ["offline_access", "uma_authorization"],
                    "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                    }
                },
                "clientRole": false,
@ -618,8 +618,8 @@
            "name": "",
            "description": "",
            "rootUrl": "https://my-theme.keycloakify.dev",
-            "adminUrl": "",
-            "baseUrl": "",
+            "adminUrl": "https://my-theme.keycloakify.dev",
+            "baseUrl": "https://my-theme.keycloakify.dev",
            "surrogateAuthRequired": false,
            "enabled": true,
            "alwaysDisplayInConsole": false,
@ -2130,7 +2130,7 @@
            "alias": "delete_account",
            "name": "Delete Account",
            "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
            "defaultAction": false,
            "priority": 60,
            "config": {}
--- a/src/bin/start-keycloak/myrealm-realm-20.json
+++ b/src/bin/start-keycloak/myrealm-realm-20.json
@ -73,7 +73,7 @@
                "composites": {
                    "realm": ["offline_access", "uma_authorization"],
                    "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                    }
                },
                "clientRole": false,
@ -628,8 +628,8 @@
            "name": "",
            "description": "",
            "rootUrl": "https://my-theme.keycloakify.dev",
-            "adminUrl": "",
-            "baseUrl": "",
+            "adminUrl": "https://my-theme.keycloakify.dev",
+            "baseUrl": "https://my-theme.keycloakify.dev",
            "surrogateAuthRequired": false,
            "enabled": true,
            "alwaysDisplayInConsole": false,
@ -2140,7 +2140,7 @@
            "alias": "delete_account",
            "name": "Delete Account",
            "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
            "defaultAction": false,
            "priority": 60,
            "config": {}
--- a/src/bin/start-keycloak/myrealm-realm-21.json
+++ b/src/bin/start-keycloak/myrealm-realm-21.json
@ -73,7 +73,7 @@
                "composites": {
                    "realm": ["offline_access", "uma_authorization"],
                    "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                    }
                },
                "clientRole": false,
@ -632,8 +632,8 @@
            "name": "",
            "description": "",
            "rootUrl": "https://my-theme.keycloakify.dev",
-            "adminUrl": "",
-            "baseUrl": "",
+            "adminUrl": "https://my-theme.keycloakify.dev",
+            "baseUrl": "https://my-theme.keycloakify.dev",
            "surrogateAuthRequired": false,
            "enabled": true,
            "alwaysDisplayInConsole": false,
@ -2144,7 +2144,7 @@
            "alias": "delete_account",
            "name": "Delete Account",
            "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
            "defaultAction": false,
            "priority": 60,
            "config": {}
--- a/src/bin/start-keycloak/myrealm-realm-23.json
+++ b/src/bin/start-keycloak/myrealm-realm-23.json
@ -55,7 +55,7 @@
                "composites": {
                    "realm": ["offline_access", "uma_authorization"],
                    "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                    }
                },
                "clientRole": false,
@ -644,7 +644,7 @@
            "description": "",
            "rootUrl": "https://my-theme.keycloakify.dev",
            "adminUrl": "https://my-theme.keycloakify.dev",
-            "baseUrl": "",
+            "baseUrl": "https://my-theme.keycloakify.dev",
            "surrogateAuthRequired": false,
            "enabled": true,
            "alwaysDisplayInConsole": false,
@ -2088,7 +2088,7 @@
            "alias": "delete_account",
            "name": "Delete Account",
            "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
            "defaultAction": false,
            "priority": 60,
            "config": {}
--- a/src/bin/start-keycloak/myrealm-realm-24.json
+++ b/src/bin/start-keycloak/myrealm-realm-24.json
@ -63,7 +63,7 @@
                "composites": {
                    "realm": ["offline_access", "uma_authorization"],
                    "client": {
-                        "account": ["manage-account", "view-profile"]
+                        "account": ["delete-account", "manage-account", "view-profile"]
                    }
                },
                "clientRole": false,
@ -449,7 +449,7 @@
                "gender": ["prefer_not_to_say"],
                "bio": ["Hello I'm Test User and I do not exist."],
                "phone_number": ["1111111111"],
-                "locale": ["fr"],
+                "locale": ["en"],
                "favorite_media": ["movies", "series"]
            },
            "createdTimestamp": 1716183898408,
@ -653,7 +653,7 @@
            "description": "",
            "rootUrl": "https://my-theme.keycloakify.dev",
            "adminUrl": "https://my-theme.keycloakify.dev",
-            "baseUrl": "",
+            "baseUrl": "https://my-theme.keycloakify.dev",
            "surrogateAuthRequired": false,
            "enabled": true,
            "alwaysDisplayInConsole": false,
@ -2235,7 +2235,7 @@
            "alias": "delete_account",
            "name": "Delete Account",
            "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
            "defaultAction": false,
            "priority": 60,
            "config": {}
--- a/src/bin/start-keycloak/myrealm-realm-25.json
+++ b/src/bin/start-keycloak/myrealm-realm-25.json
@ -63,7 +63,7 @@
                "composites": {
                    "realm": ["offline_access", "uma_authorization"],
                    "client": {
-                        "account": ["manage-account", "view-profile"]
+                        "account": ["delete-account", "manage-account", "view-profile"]
                    }
                },
                "clientRole": false,
@ -543,7 +543,7 @@
                "favourite_pet": ["cat"],
                "bio": ["Hello I'm Test User and I do not exist."],
                "phone_number": ["1111111111"],
-                "locale": ["fr"],
+                "locale": ["en"],
                "favorite_media": ["movies", "series"]
            },
            "createdTimestamp": 1716183898408,
@ -767,7 +767,7 @@
            "description": "",
            "rootUrl": "https://my-theme.keycloakify.dev",
            "adminUrl": "https://my-theme.keycloakify.dev",
-            "baseUrl": "",
+            "baseUrl": "https://my-theme.keycloakify.dev",
            "surrogateAuthRequired": false,
            "enabled": true,
            "alwaysDisplayInConsole": false,
@ -2315,7 +2315,7 @@
            "alias": "delete_account",
            "name": "Delete Account",
            "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
            "defaultAction": false,
            "priority": 60,
            "config": {}
--- a/src/bin/start-keycloak/start-keycloak.ts
+++ b/src/bin/start-keycloak/start-keycloak.ts
@ -4,13 +4,14 @@ import type { CliCommandOptions as CliCommandOptions_common } from "../main";
 import { promptKeycloakVersion } from "../shared/promptKeycloakVersion";
 import { ACCOUNT_V1_THEME_NAME, CONTAINER_NAME } from "../shared/constants";
 import { SemVer } from "../tools/SemVer";
-import { assert } from "tsafe/assert";
+import { assert, type Equals } from "tsafe/assert";
 import * as fs from "fs";
 import {
    join as pathJoin,
    relative as pathRelative,
    sep as pathSep,
-    basename as pathBasename
+    basename as pathBasename,
+    dirname as pathDirname
 } from "path";
 import * as child_process from "child_process";
 import chalk from "chalk";
@ -26,9 +27,10 @@ import { keycloakifyBuild } from "./keycloakifyBuild";
 import { isInside } from "../tools/isInside";
 import { existsAsync } from "../tools/fs.existsAsync";
 import { rm } from "../tools/fs.rm";
+import { downloadAndExtractArchive } from "../tools/downloadAndExtractArchive";

 export type CliCommandOptions = CliCommandOptions_common & {
-    port: number;
+    port: number | undefined;
    keycloakVersion: string | undefined;
    realmJsonFilePath: string | undefined;
 };
@ -88,30 +90,65 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })

    const buildContext = getBuildContext({ cliCommandOptions });

-    const { keycloakVersion } = await (async () => {
+    const { dockerImageTag } = await (async () => {
        if (cliCommandOptions.keycloakVersion !== undefined) {
+            return { dockerImageTag: cliCommandOptions.keycloakVersion };
+        }
+
+        if (buildContext.startKeycloakOptions.dockerImage !== undefined) {
            return {
-                keycloakVersion: cliCommandOptions.keycloakVersion,
-                keycloakMajorNumber: SemVer.parse(cliCommandOptions.keycloakVersion).major
+                dockerImageTag: buildContext.startKeycloakOptions.dockerImage.tag
            };
        }

        console.log(
-            chalk.cyan("On which version of Keycloak do you want to test your theme?")
+            [
+                chalk.cyan(
+                    "On which version of Keycloak do you want to test your theme?"
+                ),
+                chalk.gray(
+                    "You can also explicitly provide the version with `npx keycloakify start-keycloak --keycloak-version 25.0.2` (or any other version)"
+                )
+            ].join("\n")
        );

        const { keycloakVersion } = await promptKeycloakVersion({
            startingFromMajor: 18,
            excludeMajorVersions: [22],
-            cacheDirPath: buildContext.cacheDirPath
+            buildContext
        });

        console.log(`→ ${keycloakVersion}`);

-        return { keycloakVersion };
+        return { dockerImageTag: keycloakVersion };
    })();

-    const keycloakMajorVersionNumber = SemVer.parse(keycloakVersion).major;
+    const keycloakMajorVersionNumber = (() => {
+        if (buildContext.startKeycloakOptions.dockerImage === undefined) {
+            return SemVer.parse(dockerImageTag).major;
+        }
+
+        const { tag } = buildContext.startKeycloakOptions.dockerImage;
+
+        const [wrap] = [18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
+            .map(majorVersionNumber => ({
+                majorVersionNumber,
+                index: tag.indexOf(`${majorVersionNumber}`)
+            }))
+            .filter(({ index }) => index !== -1)
+            .sort((a, b) => a.index - b.index);
+
+        if (wrap === undefined) {
+            console.warn(
+                chalk.yellow(
+                    `Could not determine the major Keycloak version number from the docker image tag ${tag}. Assuming 25`
+                )
+            );
+            return 25;
+        }
+
+        return wrap.majorVersionNumber;
+    })();

    {
        const { isAppBuildSuccess } = await appBuild({
@ -150,41 +187,68 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })

    assert(jarFilePath !== undefined);

-    console.log(`Using ${chalk.bold(pathBasename(jarFilePath))}`);
+    const extensionJarFilePaths = await Promise.all(
+        buildContext.startKeycloakOptions.extensionJars.map(async extensionJar => {
+            switch (extensionJar.type) {
+                case "path": {
+                    assert(
+                        await existsAsync(extensionJar.path),
+                        `${extensionJar.path} does not exist`
+                    );
+                    return extensionJar.path;
+                }
+                case "url": {
+                    const { archiveFilePath } = await downloadAndExtractArchive({
+                        cacheDirPath: buildContext.cacheDirPath,
+                        fetchOptions: buildContext.fetchOptions,
+                        url: extensionJar.url,
+                        uniqueIdOfOnArchiveFile: "no extraction",
+                        onArchiveFile: async () => {}
+                    });
+                    return archiveFilePath;
+                }
+            }
+            assert<Equals<typeof extensionJar, never>>(false);
+        })
+    );
+
+    const getRealmJsonFilePath_defaultForKeycloakMajor = (
+        keycloakMajorVersionNumber: number
+    ) =>
+        pathJoin(
+            getThisCodebaseRootDirPath(),
+            "src",
+            "bin",
+            "start-keycloak",
+            `myrealm-realm-${keycloakMajorVersionNumber}.json`
+        );

    const realmJsonFilePath = await (async () => {
        if (cliCommandOptions.realmJsonFilePath !== undefined) {
            if (cliCommandOptions.realmJsonFilePath === "none") {
                return undefined;
            }
-
-            console.log(
-                chalk.green(
-                    `Using realm json file: ${cliCommandOptions.realmJsonFilePath}`
-                )
-            );
-
            return getAbsoluteAndInOsFormatPath({
                pathIsh: cliCommandOptions.realmJsonFilePath,
                cwd: process.cwd()
            });
        }

+        if (buildContext.startKeycloakOptions.realmJsonFilePath !== undefined) {
+            assert(
+                await existsAsync(buildContext.startKeycloakOptions.realmJsonFilePath),
+                `${pathRelative(process.cwd(), buildContext.startKeycloakOptions.realmJsonFilePath)} does not exist`
+            );
+            return buildContext.startKeycloakOptions.realmJsonFilePath;
+        }
+
        const internalFilePath = await (async () => {
-            const dirPath = pathJoin(
-                getThisCodebaseRootDirPath(),
-                "src",
-                "bin",
-                "start-keycloak"
+            const defaultFilePath = getRealmJsonFilePath_defaultForKeycloakMajor(
+                keycloakMajorVersionNumber
            );

-            const filePath = pathJoin(
-                dirPath,
-                `myrealm-realm-${keycloakMajorVersionNumber}.json`
-            );
-
-            if (fs.existsSync(filePath)) {
-                return filePath;
+            if (fs.existsSync(defaultFilePath)) {
+                return defaultFilePath;
            }

            console.log(
@ -195,6 +259,8 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })

            console.log(chalk.cyan("Select what configuration to use:"));

+            const dirPath = pathDirname(defaultFilePath);
+
            const { value } = await cliSelect<string>({
                values: [
                    ...fs
@ -236,6 +302,40 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
        return filePath;
    })();

+    add_test_user_if_missing: {
+        if (realmJsonFilePath === undefined) {
+            break add_test_user_if_missing;
+        }
+
+        const realm: Record<string, unknown> = JSON.parse(
+            fs.readFileSync(realmJsonFilePath).toString("utf8")
+        );
+
+        if (realm.users !== undefined) {
+            break add_test_user_if_missing;
+        }
+
+        const realmJsonFilePath_internal = (() => {
+            const filePath = getRealmJsonFilePath_defaultForKeycloakMajor(
+                keycloakMajorVersionNumber
+            );
+
+            if (!fs.existsSync(filePath)) {
+                return getRealmJsonFilePath_defaultForKeycloakMajor(25);
+            }
+
+            return filePath;
+        })();
+
+        const users = JSON.parse(
+            fs.readFileSync(realmJsonFilePath_internal).toString("utf8")
+        ).users;
+
+        realm.users = users;
+
+        fs.writeFileSync(realmJsonFilePath, JSON.stringify(realm, null, 2), "utf8");
+    }
+
    async function extractThemeResourcesFromJar() {
        await extractArchive({
            archiveFilePath: jarFilePath,
@ -274,77 +374,105 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
        });
    } catch {}

-    const spawnArgs = [
-        "docker",
-        [
-            "run",
-            ...["-p", `${cliCommandOptions.port}:8080`],
-            ...["--name", CONTAINER_NAME],
-            ...["-e", "KEYCLOAK_ADMIN=admin"],
-            ...["-e", "KEYCLOAK_ADMIN_PASSWORD=admin"],
-            ...(realmJsonFilePath === undefined
-                ? []
-                : [
-                      "-v",
-                      `${realmJsonFilePath}:/opt/keycloak/data/import/myrealm-realm.json`
-                  ]),
-            ...[
-                "-v",
-                `${jarFilePath_cacheDir}:/opt/keycloak/providers/keycloak-theme.jar`
-            ],
-            ...(keycloakMajorVersionNumber <= 20
-                ? ["-e", "JAVA_OPTS=-Dkeycloak.profile=preview"]
-                : []),
-            ...[
-                ...buildContext.themeNames,
-                ...(fs.existsSync(
-                    pathJoin(
-                        buildContext.keycloakifyBuildDirPath,
-                        "theme",
-                        ACCOUNT_V1_THEME_NAME
-                    )
-                )
-                    ? [ACCOUNT_V1_THEME_NAME]
-                    : [])
-            ]
-                .map(themeName => ({
-                    localDirPath: pathJoin(
-                        buildContext.keycloakifyBuildDirPath,
-                        "theme",
-                        themeName
-                    ),
-                    containerDirPath: `/opt/keycloak/themes/${themeName}`
-                }))
-                .map(({ localDirPath, containerDirPath }) => [
-                    "-v",
-                    `${localDirPath}:${containerDirPath}:rw`
-                ])
-                .flat(),
-            ...buildContext.environmentVariables
-                .map(({ name }) => ({ name, envValue: process.env[name] }))
-                .map(({ name, envValue }) =>
-                    envValue === undefined ? undefined : { name, envValue }
-                )
-                .filter(exclude(undefined))
-                .map(({ name, envValue }) => [
-                    "--env",
-                    `${name}='${envValue.replace(/'/g, "'\\''")}'`
-                ])
-                .flat(),
-            `quay.io/keycloak/keycloak:${keycloakVersion}`,
-            "start-dev",
-            ...(21 <= keycloakMajorVersionNumber && keycloakMajorVersionNumber < 24
-                ? ["--features=declarative-user-profile"]
-                : []),
-            ...(realmJsonFilePath === undefined ? [] : ["--import-realm"])
-        ],
-        {
-            cwd: buildContext.keycloakifyBuildDirPath,
-            shell: true
-        }
-    ] as const;
+    const DEFAULT_PORT = 8080;
+    const port =
+        cliCommandOptions.port ?? buildContext.startKeycloakOptions.port ?? DEFAULT_PORT;

-    const child = child_process.spawn(...spawnArgs);
+    const SPACE_PLACEHOLDER = "SPACE_PLACEHOLDER_xKLmdPd";
+
+    const dockerRunArgs: string[] = [
+        `-p${SPACE_PLACEHOLDER}${port}:8080`,
+        `--name${SPACE_PLACEHOLDER}${CONTAINER_NAME}`,
+        `-e${SPACE_PLACEHOLDER}KEYCLOAK_ADMIN=admin`,
+        `-e${SPACE_PLACEHOLDER}KEYCLOAK_ADMIN_PASSWORD=admin`,
+        ...(buildContext.startKeycloakOptions.dockerExtraArgs.length === 0
+            ? []
+            : [
+                  buildContext.startKeycloakOptions.dockerExtraArgs.join(
+                      SPACE_PLACEHOLDER
+                  )
+              ]),
+        ...(realmJsonFilePath === undefined
+            ? []
+            : [
+                  `-v${SPACE_PLACEHOLDER}".${pathSep}${pathRelative(process.cwd(), realmJsonFilePath)}":/opt/keycloak/data/import/myrealm-realm.json`
+              ]),
+        `-v${SPACE_PLACEHOLDER}".${pathSep}${pathRelative(process.cwd(), jarFilePath_cacheDir)}":/opt/keycloak/providers/keycloak-theme.jar`,
+        ...extensionJarFilePaths.map(
+            jarFilePath =>
+                `-v${SPACE_PLACEHOLDER}".${pathSep}${pathRelative(process.cwd(), jarFilePath)}":/opt/keycloak/providers/${pathBasename(jarFilePath)}`
+        ),
+        ...(keycloakMajorVersionNumber <= 20
+            ? [`-e${SPACE_PLACEHOLDER}JAVA_OPTS=-Dkeycloak.profile=preview`]
+            : []),
+        ...[
+            ...buildContext.themeNames,
+            ...(fs.existsSync(
+                pathJoin(
+                    buildContext.keycloakifyBuildDirPath,
+                    "theme",
+                    ACCOUNT_V1_THEME_NAME
+                )
+            )
+                ? [ACCOUNT_V1_THEME_NAME]
+                : [])
+        ]
+            .map(themeName => ({
+                localDirPath: pathJoin(
+                    buildContext.keycloakifyBuildDirPath,
+                    "theme",
+                    themeName
+                ),
+                containerDirPath: `/opt/keycloak/themes/${themeName}`
+            }))
+            .map(
+                ({ localDirPath, containerDirPath }) =>
+                    `-v${SPACE_PLACEHOLDER}".${pathSep}${pathRelative(process.cwd(), localDirPath)}":${containerDirPath}:rw`
+            ),
+        ...buildContext.environmentVariables
+            .map(({ name }) => ({ name, envValue: process.env[name] }))
+            .map(({ name, envValue }) =>
+                envValue === undefined ? undefined : { name, envValue }
+            )
+            .filter(exclude(undefined))
+            .map(
+                ({ name, envValue }) =>
+                    `--env${SPACE_PLACEHOLDER}${name}='${envValue.replace(/'/g, "'\\''")}'`
+            ),
+        `${buildContext.startKeycloakOptions.dockerImage?.reference ?? "quay.io/keycloak/keycloak"}:${dockerImageTag}`,
+        "start-dev",
+        ...(21 <= keycloakMajorVersionNumber && keycloakMajorVersionNumber < 24
+            ? ["--features=declarative-user-profile"]
+            : []),
+        ...(realmJsonFilePath === undefined ? [] : ["--import-realm"]),
+        ...(buildContext.startKeycloakOptions.keycloakExtraArgs.length === 0
+            ? []
+            : [
+                  buildContext.startKeycloakOptions.keycloakExtraArgs.join(
+                      SPACE_PLACEHOLDER
+                  )
+              ])
+    ];
+
+    console.log(
+        chalk.blue(
+            [
+                `$ docker run \\`,
+                ...dockerRunArgs
+                    .map(arg => arg.replace(new RegExp(SPACE_PLACEHOLDER, "g"), " "))
+                    .map(
+                        (line, i, arr) =>
+                            `    ${line}${arr.length - 1 === i ? "" : " \\"}`
+                    )
+            ].join("\n")
+        )
+    );
+
+    const child = child_process.spawn(
+        "docker",
+        ["run", ...dockerRunArgs.map(line => line.split(SPACE_PLACEHOLDER)).flat()],
+        { shell: true }
+    );

    child.stdout.on("data", data => process.stdout.write(data));

@ -355,6 +483,18 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
    const srcDirPath = pathJoin(buildContext.projectDirPath, "src");

    {
+        const kcHttpRelativePath = (() => {
+            const match = buildContext.startKeycloakOptions.dockerExtraArgs
+                .join(" ")
+                .match(/KC_HTTP_RELATIVE_PATH=([^ ]+)/);
+
+            if (match === null) {
+                return undefined;
+            }
+
+            return match[1];
+        })();
+
        const handler = async (data: Buffer) => {
            if (!data.toString("utf8").includes("Listening on: http://0.0.0.0:8080")) {
                return;
@ -372,7 +512,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                    )} are mounted in the Keycloak container.`,
                    "",
                    `Keycloak Admin console: ${chalk.cyan.bold(
-                        `http://localhost:${cliCommandOptions.port}`
+                        `http://localhost:${port}${kcHttpRelativePath ?? ""}`
                    )}`,
                    `- user:     ${chalk.cyan.bold("admin")}`,
                    `- password: ${chalk.cyan.bold("admin")}`,
@ -380,7 +520,21 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                    "",
                    `${chalk.green("Your theme is accessible at:")}`,
                    `${chalk.green("➜")} ${chalk.cyan.bold(
-                        `https://my-theme.keycloakify.dev${cliCommandOptions.port === 8080 ? "" : `?port=${cliCommandOptions.port}`}`
+                        (() => {
+                            const url = new URL("https://my-theme.keycloakify.dev");
+
+                            if (port !== DEFAULT_PORT) {
+                                url.searchParams.set("port", `${port}`);
+                            }
+                            if (kcHttpRelativePath !== undefined) {
+                                url.searchParams.set(
+                                    "kcHttpRelativePath",
+                                    kcHttpRelativePath
+                                );
+                            }
+
+                            return url.href;
+                        })()
                    )}`,
                    "",
                    "You can login with the following credentials:",
--- a/src/bin/tools/assertNoPnpmDlx.ts
+++ b/src/bin/tools/assertNoPnpmDlx.ts
@ -5,9 +5,11 @@ export function assertNoPnpmDlx() {
    if (__dirname.includes(`${pathSep}pnpm${pathSep}dlx${pathSep}`)) {
        console.log(
            [
-                chalk.red("Please don't use `pnpm dlx keycloakify`"),
+                chalk.red(
+                    "Please don't use `pnpm dlx keycloakify` (download and execute)"
+                ),
                "\nUse `npx keycloakify` or `pnpm exec keycloakify` instead since you want to use the keycloakify",
-                "version that is installed in your project and not the latest version on NPM."
+                "version that is installed in your project and not download and run the latest NPM version of keycloakify."
            ].join(" ")
        );
        process.exit(1);
--- a/src/bin/tools/downloadAndExtractArchive.ts
+++ b/src/bin/tools/downloadAndExtractArchive.ts
@ -4,7 +4,6 @@ import { dirname as pathDirname, join as pathJoin } from "path";
 import { assert } from "tsafe/assert";
 import { extractArchive } from "./extractArchive";
 import { existsAsync } from "./fs.existsAsync";
-
 import * as crypto from "crypto";
 import { rm } from "./fs.rm";

@ -21,7 +20,7 @@ export async function downloadAndExtractArchive(params: {
    }) => Promise<void>;
    cacheDirPath: string;
    fetchOptions: FetchOptions | undefined;
-}): Promise<{ extractedDirPath: string }> {
+}): Promise<{ extractedDirPath: string; archiveFilePath: string }> {
    const { url, uniqueIdOfOnArchiveFile, onArchiveFile, cacheDirPath, fetchOptions } =
        params;

@ -30,6 +29,8 @@ export async function downloadAndExtractArchive(params: {
    const archiveFilePath = pathJoin(cacheDirPath, archiveFileBasename);

    download: {
+        await mkdir(pathDirname(archiveFilePath), { recursive: true });
+
        if (await existsAsync(archiveFilePath)) {
            const isDownloaded = await SuccessTracker.getIsDownloaded({
                cacheDirPath,
@ -48,8 +49,6 @@ export async function downloadAndExtractArchive(params: {
            });
        }

-        await mkdir(pathDirname(archiveFilePath), { recursive: true });
-
        const response = await fetch(url, fetchOptions);

        response.body?.setMaxListeners(Number.MAX_VALUE);
@ -136,7 +135,7 @@ export async function downloadAndExtractArchive(params: {
        });
    }

-    return { extractedDirPath };
+    return { extractedDirPath, archiveFilePath };
 }

 type SuccessTracker = {
--- a/src/bin/tools/fetchProxyOptions.ts
+++ b/src/bin/tools/fetchProxyOptions.ts
@ -1,6 +1,7 @@
 import { type FetchOptions } from "make-fetch-happen";
 import * as child_process from "child_process";
 import * as fs from "fs";
+import { exclude } from "tsafe/exclude";

 export type ProxyFetchOptions = Pick<
    FetchOptions,
@ -23,12 +24,32 @@ export function getProxyFetchOptions(params: {
            .split("\n")
            .filter(line => !line.startsWith(";"))
            .map(line => line.trim())
-            .map(line => line.split("=", 2) as [string, string])
+            .map(line => {
+                const [key, value] = line.split("=");
+                if (key === undefined) {
+                    return undefined;
+                }
+                if (value === undefined) {
+                    return undefined;
+                }
+                return [key.trim(), value.trim()] as const;
+            })
+            .filter(exclude(undefined))
+            .filter(([key]) => key !== "")
+            .map(([key, value]) => {
+                if (value.startsWith('"') && value.endsWith('"')) {
+                    return [key, value.slice(1, -1)] as const;
+                }
+
+                if (value === "true" || value === "false") {
+                    return [key, value] as const;
+                }
+
+                return undefined;
+            })
+            .filter(exclude(undefined))
            .reduce(
-                (
-                    cfg: Record<string, string | string[]>,
-                    [key, value]: [string, string]
-                ) =>
+                (cfg: Record<string, string | string[]>, [key, value]) =>
                    key in cfg
                        ? { ...cfg, [key]: [...ensureArray(cfg[key]), value] }
                        : { ...cfg, [key]: value },
@ -37,18 +58,18 @@ export function getProxyFetchOptions(params: {
    })();

    const proxy = ensureSingleOrNone(cfg["https-proxy"] ?? cfg["proxy"]);
+
    const noProxy = cfg["noproxy"] ?? cfg["no-proxy"];

-    function maybeBoolean(arg0: string | undefined) {
-        return typeof arg0 === "undefined" ? undefined : Boolean(arg0);
-    }
+    const strictSSL = ensureSingleOrNone(cfg["strict-ssl"]) === "true";

-    const strictSSL = maybeBoolean(ensureSingleOrNone(cfg["strict-ssl"]));
    const cert = cfg["cert"];
+
    const ca = ensureArray(cfg["ca"] ?? cfg["ca[]"]);
+
    const cafile = ensureSingleOrNone(cfg["cafile"]);

-    if (typeof cafile !== "undefined" && cafile !== "null") {
+    if (cafile !== undefined) {
        ca.push(
            ...(() => {
                const cafileContent = fs.readFileSync(cafile).toString("utf8");
@ -82,7 +103,7 @@ export function getProxyFetchOptions(params: {
 }

 function ensureArray<T>(arg0: T | T[]) {
-    return Array.isArray(arg0) ? arg0 : typeof arg0 === "undefined" ? [] : [arg0];
+    return Array.isArray(arg0) ? arg0 : arg0 === undefined ? [] : [arg0];
 }

 function ensureSingleOrNone<T>(arg0: T | T[]) {
--- a/src/login/KcContext/KcContext.ts
+++ b/src/login/KcContext/KcContext.ts
@ -79,8 +79,8 @@ export declare namespace KcContext {
        };
        realm: {
            name: string;
-            displayName?: string;
-            displayNameHtml?: string;
+            displayName: string;
+            displayNameHtml: string;
            internationalizationEnabled: boolean;
            registrationEmailAsUsername: boolean;
        };
--- a/src/login/Template.tsx
+++ b/src/login/Template.tsx
@ -224,19 +224,17 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                        {auth !== undefined && auth.showTryAnotherWayLink && (
                            <form id="kc-select-try-another-way-form" action={url.loginAction} method="post">
                                <div className={kcClsx("kcFormGroupClass")}>
-                                    <div className={kcClsx("kcFormGroupClass")}>
-                                        <input type="hidden" name="tryAnotherWay" value="on" />
-                                        <a
-                                            href="#"
-                                            id="try-another-way"
-                                            onClick={() => {
-                                                document.forms["kc-select-try-another-way-form" as never].submit();
-                                                return false;
-                                            }}
-                                        >
-                                            {msg("doTryAnotherWay")}
-                                        </a>
-                                    </div>
+                                    <input type="hidden" name="tryAnotherWay" value="on" />
+                                    <a
+                                        href="#"
+                                        id="try-another-way"
+                                        onClick={() => {
+                                            document.forms["kc-select-try-another-way-form" as never].submit();
+                                            return false;
+                                        }}
+                                    >
+                                        {msg("doTryAnotherWay")}
+                                    </a>
                                </div>
                            </form>
                        )}
--- a/src/login/UserProfileFormFields.tsx
+++ b/src/login/UserProfileFormFields.tsx
@ -58,7 +58,7 @@ export default function UserProfileFormFields(props: UserProfileFormFieldsProps<
                                <label htmlFor={attribute.name} className={kcClsx("kcLabelClass")}>
                                    {advancedMsg(attribute.displayName ?? "")}
                                </label>
-                                {attribute.required && <>*</>}
+                                {attribute.required && <> *</>}
                            </div>
                            <div className={kcClsx("kcInputWrapperClass")}>
                                {attribute.annotations.inputHelperTextBefore !== undefined && (
--- a/src/login/i18n/i18n.tsx
+++ b/src/login/i18n/i18n.tsx
@ -217,7 +217,13 @@ function createI18nTranslationFunctionsFactory<MessageKey_themeDefined extends s

                messageWithArgsInjected = messageWithArgsInjected.replace(
                    new RegExp(`\\{${i + startIndex}\\}`, "g"),
-                    arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+                    (() => {
+                        if (key === "loginTitleHtml") {
+                            return arg;
+                        }
+
+                        return arg.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+                    })()
                );
            });

--- a/src/login/lib/useUserProfileForm.tsx
+++ b/src/login/lib/useUserProfileForm.tsx
@ -59,6 +59,8 @@ export type FormAction =
          action: "update";
          name: string;
          valueOrValues: string | string[];
+          /** Default false */
+          displayErrorsImmediately?: boolean;
      }
    | {
          action: "focus lost";
@ -413,6 +415,24 @@ export function useUserProfileForm(params: UseUserProfileFormParams): ReturnType
                        formFieldStates: state.formFieldStates
                    });

+                    simulate_focus_lost: {
+                        const { displayErrorsImmediately = false } = formAction;
+
+                        if (!displayErrorsImmediately) {
+                            break simulate_focus_lost;
+                        }
+
+                        for (const fieldIndex of formAction.valueOrValues instanceof Array
+                            ? formAction.valueOrValues.map((...[, index]) => index)
+                            : [undefined]) {
+                            state = reducer(state, {
+                                action: "focus lost",
+                                name: formAction.name,
+                                fieldIndex
+                            });
+                        }
+                    }
+
                    update_password_confirm: {
                        if (doMakeUserConfirmPassword) {
                            break update_password_confirm;
@ -425,7 +445,8 @@ export function useUserProfileForm(params: UseUserProfileFormParams): ReturnType
                        state = reducer(state, {
                            action: "update",
                            name: "password-confirm",
-                            valueOrValues: formAction.valueOrValues
+                            valueOrValues: formAction.valueOrValues,
+                            displayErrorsImmediately: formAction.displayErrorsImmediately
                        });
                    }

@ -447,7 +468,8 @@ export function useUserProfileForm(params: UseUserProfileFormParams): ReturnType
                                assert(formFieldState !== undefined);

                                return formFieldState.valueOrValues;
-                            })()
+                            })(),
+                            displayErrorsImmediately: formAction.displayErrorsImmediately
                        });
                    }

@ -1372,14 +1394,10 @@ export function getButtonToDisplayForMultivaluedAttributeField(params: { attribu
        })();

        if (maxCount === undefined) {
-            return false;
+            return true;
        }

-        if (values.length === maxCount) {
-            return false;
-        }
-
-        return true;
+        return values.length !== maxCount;
    })();

    return { hasRemove, hasAdd };
--- a/src/login/pages/WebauthnRegister.tsx
+++ b/src/login/pages/WebauthnRegister.tsx
@ -153,7 +153,7 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
    
                function getPubKeyCredParams(signatureAlgorithmsList) {
                    let pubKeyCredParams = [];
-                    if (signatureAlgorithmsList === []) {
+                    if (signatureAlgorithmsList.length === 0) {
                        pubKeyCredParams.push({type: "public-key", alg: -7});
                        return pubKeyCredParams;
                    }
@ -184,7 +184,7 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
                }
    
                function getTransportsAsString(transportsList) {
-                    if (transportsList === '' || transportsList.constructor !== Array) return "";
+                    if (transportsList === '' || Array.isArray(transportsList)) return "";
    
                    let transportsString = "";
    
--- a/src/tools/useInsertLinkTags.ts
+++ b/src/tools/useInsertLinkTags.ts
@ -22,7 +22,15 @@ export function useInsertLinkTags(params: {
            alreadyMountedComponentOrHookNames.has(componentOrHookName);

        if (isAlreadyMounted) {
-            window.location.reload();
+            reload: {
+                if (
+                    new URL(window.location.href).searchParams.get("viewMode") === "docs"
+                ) {
+                    // NOTE: Special case for Storybook, we want to avoid infinite reload loop.
+                    break reload;
+                }
+                window.location.reload();
+            }
            return;
        }

--- a/src/tools/useInsertScriptTags.ts
+++ b/src/tools/useInsertScriptTags.ts
@ -40,7 +40,15 @@ export function useInsertScriptTags(params: {
            alreadyMountedComponentOrHookNames.has(componentOrHookName);

        if (isAlreadyMounted) {
-            window.location.reload();
+            reload: {
+                if (
+                    new URL(window.location.href).searchParams.get("viewMode") === "docs"
+                ) {
+                    // NOTE: Special case for Storybook, we want to avoid infinite reload loop.
+                    break reload;
+                }
+                window.location.reload();
+            }
            return;
        }

--- a/stories/account-spa/index.stories.tsx
+++ b/stories/account-spa/index.stories.tsx
@ -0,0 +1,94 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useInsertLinkTags } from "../../dist/tools/useInsertLinkTags";
+import { tss } from "../tss";
+// @ts-expect-error
+import screenshotPngUrl from "./screenshot.png";
+
+const meta = {
+    title: "Account SPA/index.ftl"
+} satisfies Meta<any>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const NotInStorybookButSupported: Story = {
+    render: () => <AccountSpa />
+};
+
+function AccountSpa() {
+    console.log(window.location.href);
+
+    useInsertLinkTags({
+        componentOrHookName: "Template",
+        hrefs: []
+    });
+
+    const { classes, theme } = useStyles();
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.content}>
+                <p>
+                    Keycloakify offers two option for creating an account theme:{" "}
+                    <a href="https://docs.keycloakify.dev/account-theme#multi-page" target="_blank">
+                        Multi Page
+                    </a>{" "}
+                    or{" "}
+                    <a href="https://docs.keycloakify.dev/account-theme#single-page" target="_blank">
+                        Single Page
+                    </a>
+                    . Since the account Single Page does not support Storybook, here is a screenshot of it's default look:
+                    <br />
+                    <br />
+                    <img className={classes.screenshot} alt="image" src={screenshotPngUrl} />
+                    <br />
+                    <a href="https://docs.keycloakify.dev/account-theme" target="_blank">
+                        Learn more
+                    </a>
+                </p>
+            </div>
+        </div>
+    );
+}
+
+const useStyles = tss.withName({ AccountSpa }).create(({ isDark, theme }) => ({
+    root: {
+        height: "100vh",
+        color: isDark ? "white" : "black",
+        backgroundColor: theme.appContentBg,
+        fontFamily: "'Work Sans'",
+        fontSize: "14px",
+        lineHeight: "24px",
+        WebkitFontSmoothing: "antialiased",
+        "& a": {
+            color: theme.colorSecondary,
+            textDecoration: "none",
+            "&:hover": {
+                textDecoration: "underline"
+            }
+        },
+        "& h1": {
+            fontSize: "32px",
+            marginBottom: 35
+        },
+        display: "flex",
+        justifyContent: "center"
+    },
+    content: {
+        maxWidth: 750,
+        textAlign: "center",
+        marginTop: 100
+    },
+    keycloakifyLogoWrapper: {
+        display: "flex",
+        justifyContent: "center"
+    },
+    keycloakifyLogo: {
+        width: 400
+    },
+    screenshot: {
+        maxWidth: "100%"
+    }
+}));
--- a/stories/account-spa/screenshot.png
+++ b/stories/account-spa/screenshot.png
--- a/stories/intro/KeycloakifyRotatingLogo.tsx
+++ b/stories/intro/KeycloakifyRotatingLogo.tsx
@ -2,18 +2,20 @@ import React from "react";
 import { memo, useState } from "react";
 import { useConstCallback } from "powerhooks";
 import { keyframes } from "tss-react";
+// @ts-expect-error
 import keycloakifyLogoHeroMovingPngUrl from "./keycloakify-logo-hero-moving.png";
+// @ts-expect-error
 import keycloakifyLogoHeroStillPngUrl from "./keycloakify-logo-hero-still.png";
-import { makeStyles } from "./tss";
+import { tss } from "../tss";

 export type Props = {
-    style?: React.CSSProperties;
+    className?: string;
    id?: string;
    onLoad?: () => void;
 };

 export const KeycloakifyRotatingLogo = memo((props: Props) => {
-    const { id, style, onLoad: onLoadProp } = props;
+    const { id, className, onLoad: onLoadProp } = props;

    const [isImageLoaded, setIsImageLoaded] = useState(false);

@ -22,40 +24,41 @@ export const KeycloakifyRotatingLogo = memo((props: Props) => {
        onLoadProp?.();
    });

-    const { classes } = useStyles({
+    const { cx, classes } = useStyles({
        isImageLoaded
    });
    return (
-        <div id={id} className={classes.root} style={style}>
+        <div id={id} className={cx(classes.root, className)}>
            <img className={classes.rotatingImg} onLoad={onLoad} src={keycloakifyLogoHeroMovingPngUrl} alt={"Rotating react logo"} />
            <img className={classes.stillImg} src={keycloakifyLogoHeroStillPngUrl} alt={"keyhole"} />
        </div>
    );
 });

-const useStyles = makeStyles<{ isImageLoaded: boolean }>({
-    name: { KeycloakifyRotatingLogo }
-})((_theme, { isImageLoaded }) => ({
-    root: {
-        position: "relative"
-    },
-    rotatingImg: {
-        animation: `${keyframes({
-            from: {
-                transform: "rotate(0deg)"
-            },
-            to: {
-                transform: "rotate(360deg)"
-            }
-        })} infinite 20s linear`,
-        width: isImageLoaded ? "100%" : undefined,
-        height: isImageLoaded ? "auto" : undefined
-    },
-    stillImg: {
-        position: "absolute",
-        top: "0",
-        left: "0",
-        width: isImageLoaded ? "100%" : undefined,
-        height: isImageLoaded ? "auto" : undefined
-    }
-}));
+const useStyles = tss
+    .withParams<{ isImageLoaded: boolean }>()
+    .withName({ KeycloakifyRotatingLogo })
+    .create(({ isImageLoaded }) => ({
+        root: {
+            position: "relative"
+        },
+        rotatingImg: {
+            animation: `${keyframes({
+                from: {
+                    transform: "rotate(0deg)"
+                },
+                to: {
+                    transform: "rotate(360deg)"
+                }
+            })} infinite 20s linear`,
+            width: isImageLoaded ? "100%" : undefined,
+            height: isImageLoaded ? "auto" : undefined
+        },
+        stillImg: {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            width: isImageLoaded ? "100%" : undefined,
+            height: isImageLoaded ? "auto" : undefined
+        }
+    }));
--- a/stories/intro/intro.stories.mdx
+++ b/stories/intro/intro.stories.mdx
@ -1,31 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-import { KeycloakifyRotatingLogo } from "./KeycloakifyRotatingLogo";
-
-<Meta
-    title="Introduction" 
-    parameters={{
-        "viewMode": "docs",
-        "previewTabs": {
-            "canvas": { "hidden": true },
-            "zoom": { "hidden": true },
-            "storybook/background": { "hidden": true },
-            "storybook/viewport": { "hidden": true },
-        },
-    }}
-/>
-
-<div style={{ "margin": "0 auto", "maxWidth": "700px", "textAlign": "center" }}>
-<div style={{ "display": "flex", "justifyContent": "center" }}>
-<KeycloakifyRotatingLogo style={{ "width": 400 }} />
-</div>
-<h1><a href="#">Keycloakify </a> Storybook</h1>
-
-<p>
-This website showcases all the Keycloak user-facing pages of the login and account theme.
-The storybook serves as a reference to help you determine which pages you would like to personalize.
-These pages are a direct React adaptation of the [built-in FreeMarker Keycloak pages](https://github.com/keycloak/keycloak/tree/24.0.4/themes/src/main/resources/theme/base).  
-You may notice some visual bugs on certain pages; these issues were not introduced by Keycloakiy and are also present in the default Keycloak 24 theme.
-</p>
-
-
-</div>
--- a/stories/intro/intro.stories.tsx
+++ b/stories/intro/intro.stories.tsx
@ -0,0 +1,90 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { KeycloakifyRotatingLogo } from "./KeycloakifyRotatingLogo";
+import { useInsertLinkTags } from "../../dist/tools/useInsertLinkTags";
+import { useOnFistMount } from "../../dist/tools/useOnFirstMount";
+import { tss } from "../tss";
+
+const meta = {
+    title: "Introduction"
+} satisfies Meta<any>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WhatIsThisWebsite: Story = {
+    render: () => <Introduction />
+};
+
+function Introduction() {
+    console.log(window.location.href);
+
+    useInsertLinkTags({
+        componentOrHookName: "Template",
+        hrefs: []
+    });
+
+    const { classes, theme } = useStyles();
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.content}>
+                <div className={classes.keycloakifyLogoWrapper}>
+                    <KeycloakifyRotatingLogo className={classes.keycloakifyLogo} />
+                </div>
+                <h1>
+                    <a href={theme.brandUrl}>Keycloakify </a> Storybook
+                </h1>
+
+                <p>
+                    This website showcases all the Keycloak user-facing pages of the Login and{" "}
+                    <a href="https://docs.keycloakify.dev/account-theme#multi-page">Account Multi-Page theme</a>.<br />
+                    The storybook serves as a reference to help you determine which pages you would like to personalize.
+                    <br />
+                    These pages are a direct React adaptation of the{" "}
+                    <a href="https://github.com/keycloak/keycloak/tree/24.0.4/themes/src/main/resources/theme/base" target="_blank">
+                        built-in FreeMarker Keycloak pages
+                    </a>
+                    .
+                </p>
+            </div>
+        </div>
+    );
+}
+
+const useStyles = tss.withName({ Introduction }).create(({ isDark, theme }) => ({
+    root: {
+        height: "100vh",
+        color: isDark ? "white" : "black",
+        backgroundColor: theme.appContentBg,
+        fontFamily: "'Work Sans'",
+        fontSize: "14px",
+        lineHeight: "24px",
+        WebkitFontSmoothing: "antialiased",
+        "& a": {
+            color: theme.colorSecondary,
+            textDecoration: "none",
+            "&:hover": {
+                textDecoration: "underline"
+            }
+        },
+        "& h1": {
+            fontSize: "32px",
+            marginBottom: 35
+        },
+        display: "flex",
+        justifyContent: "center"
+    },
+    content: {
+        maxWidth: 750,
+        textAlign: "center"
+    },
+    keycloakifyLogoWrapper: {
+        display: "flex",
+        justifyContent: "center"
+    },
+    keycloakifyLogo: {
+        width: 400
+    }
+}));
--- a/stories/intro/tss.ts
+++ b/stories/intro/tss.ts
@ -1,5 +0,0 @@
-import { createMakeAndWithStyles } from "tss-react";
-
-export const { makeStyles, useStyles } = createMakeAndWithStyles({
-    useTheme: () => ({})
-});
--- a/stories/login/pages/Login.stories.tsx
+++ b/stories/login/pages/Login.stories.tsx
@ -122,73 +122,85 @@ export const WithSocialProviders: Story = {
                            loginUrl: "google",
                            alias: "google",
                            providerId: "google",
-                            displayName: "Google"
+                            displayName: "Google",
+                            iconClasses: "fa fa-google"
                        },
                        {
                            loginUrl: "microsoft",
                            alias: "microsoft",
                            providerId: "microsoft",
-                            displayName: "Microsoft"
+                            displayName: "Microsoft",
+                            iconClasses: "fa fa-windows"
                        },
                        {
                            loginUrl: "facebook",
                            alias: "facebook",
                            providerId: "facebook",
-                            displayName: "Facebook"
+                            displayName: "Facebook",
+                            iconClasses: "fa fa-facebook"
                        },
                        {
                            loginUrl: "instagram",
                            alias: "instagram",
                            providerId: "instagram",
-                            displayName: "Instagram"
+                            displayName: "Instagram",
+                            iconClasses: "fa fa-instagram"
                        },
                        {
                            loginUrl: "twitter",
                            alias: "twitter",
                            providerId: "twitter",
-                            displayName: "Twitter"
+                            displayName: "Twitter",
+                            iconClasses: "fa fa-twitter"
                        },
                        {
                            loginUrl: "linkedin",
                            alias: "linkedin",
                            providerId: "linkedin",
-                            displayName: "LinkedIn"
+                            displayName: "LinkedIn",
+                            iconClasses: "fa fa-linkedin"
                        },
                        {
                            loginUrl: "stackoverflow",
                            alias: "stackoverflow",
                            providerId: "stackoverflow",
-                            displayName: "Stackoverflow"
+                            displayName: "Stackoverflow",
+                            iconClasses: "fa fa-stack-overflow"
                        },
                        {
                            loginUrl: "github",
                            alias: "github",
                            providerId: "github",
-                            displayName: "Github"
+                            displayName: "Github",
+                            iconClasses: "fa fa-github"
                        },
                        {
                            loginUrl: "gitlab",
                            alias: "gitlab",
                            providerId: "gitlab",
-                            displayName: "Gitlab"
+                            displayName: "Gitlab",
+                            iconClasses: "fa fa-gitlab"
                        },
                        {
                            loginUrl: "bitbucket",
                            alias: "bitbucket",
                            providerId: "bitbucket",
-                            displayName: "Bitbucket"
+                            displayName: "Bitbucket",
+                            iconClasses: "fa fa-bitbucket"
                        },
                        {
                            loginUrl: "paypal",
                            alias: "paypal",
                            providerId: "paypal",
-                            displayName: "PayPal"
+                            displayName: "PayPal",
+                            iconClasses: "fa fa-paypal"
                        },
                        {
                            loginUrl: "openshift",
                            alias: "openshift",
                            providerId: "openshift",
-                            displayName: "OpenShift"
+                            displayName: "OpenShift",
+                            iconClasses: "fa fa-cloud"
                        }
                    ]
                }
--- a/stories/tss.ts
+++ b/stories/tss.ts
@ -0,0 +1,13 @@
+import { createTss } from "tss-react";
+import { useDarkMode } from "storybook-dark-mode";
+import { darkTheme, lightTheme } from "../.storybook/customTheme";
+
+function useContext() {
+    const isDark = useDarkMode();
+
+    return { isDark, theme: isDark ? darkTheme : lightTheme };
+}
+
+export const { tss } = createTss({
+    useContext
+});
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Joseph Garrone	01cbdee2ca	Release candidate	2024-08-25 19:02:33 +02:00
Joseph Garrone	b70c0af0a9	Add users to provided realm configuration if none exists	2024-08-25 19:02:00 +02:00
Joseph Garrone	dcaee9cb7f	Release candidate	2024-08-25 03:19:58 +02:00
Joseph Garrone	1d8b6c7792	Fix logical error in multivalued attributes	2024-08-25 03:19:34 +02:00
Joseph Garrone	c98dbe84c6	Add missing space before the *	2024-08-25 02:54:46 +02:00
Joseph Garrone	1785916d32	download and extract actually just for downloading and extracting	2024-08-24 23:15:54 +02:00
Joseph Garrone	c6cf564842	Release candidate	2024-08-23 19:01:56 +02:00
Joseph Garrone	380b739017	Don't pin the patch version in the docker tag	2024-08-23 19:01:37 +02:00
Joseph Garrone	c3f3c55303	Release candidate	2024-08-23 18:45:56 +02:00
Joseph Garrone	2c01018529	#618	2024-08-23 18:36:40 +02:00
Joseph Garrone	dd2edf3013	Merge pull request #616 from keycloakify/all-contributors/add-oliviergoulet5 docs: add oliviergoulet5 as a contributor for code	2024-08-22 00:56:15 +02:00
Joseph Garrone	7f3cdf9fac	Release candidate	2024-08-22 00:55:39 +02:00
allcontributors[bot]	f75a91fbc1	docs: update .all-contributorsrc [skip ci]	2024-08-21 22:55:00 +00:00
allcontributors[bot]	f151086bb1	docs: update README.md [skip ci]	2024-08-21 22:54:59 +00:00
Joseph Garrone	7c833e6f10	Merge pull request #615 from oliviergoulet5/fix-array-operations Fix array comparison and improve type check	2024-08-22 00:53:48 +02:00
Olivier Goulet	885e8314e8	Fix array comparison and type check	2024-08-21 17:13:06 -04:00
Joseph Garrone	3bdd955ab6	Release candidate	2024-08-19 02:11:31 +02:00
Joseph Garrone	9499587bad	Fix formating bug of Docker command being run	2024-08-19 02:10:59 +02:00
Joseph Garrone	0879ddba7c	Release candidate	2024-08-19 00:25:54 +02:00
Joseph Garrone	106a1dd4c7	Support parsing of the KC_HTTP_RELATIVE_PATH option	2024-08-19 00:25:41 +02:00
Joseph Garrone	5580248bcd	Release candidate	2024-08-19 00:00:22 +02:00
Joseph Garrone	c9c10b8fba	Fix issue with the port in the start-keycloak command	2024-08-19 00:00:08 +02:00
Joseph Garrone	ed254922e9	Relase candidate	2024-08-18 23:46:12 +02:00
Joseph Garrone	4b7d1e2cec	Fix bug in docker command	2024-08-18 23:45:58 +02:00
Joseph Garrone	775ae57258	Release candidate	2024-08-18 21:10:37 +02:00
Joseph Garrone	96e4cd79ee	Enable to configure the port via the build options	2024-08-18 21:10:18 +02:00
Joseph Garrone	bb70f7df4f	Release candidate	2024-08-18 20:56:34 +02:00
Joseph Garrone	602de2e407	Fix bug with spaces in docker run command	2024-08-18 20:56:25 +02:00
Joseph Garrone	225ced989c	Release candidate	2024-08-18 19:20:57 +02:00
Joseph Garrone	ab53698f34	Merge pull request #612 from keycloakify/extensions keycloak start command options support in config	2024-08-18 19:20:31 +02:00
Joseph Garrone	02f2124126	keycloak start command options support in config	2024-08-18 19:19:35 +02:00
Joseph Garrone	66623e3324	Release candidate	2024-08-16 08:48:21 +02:00
Joseph Garrone	4cc886fd04	Update misleading note in the readme	2024-08-16 08:48:06 +02:00
Joseph Garrone	a10b490245	Release candidate	2024-08-15 22:40:34 +02:00
Joseph Garrone	b947b8a00d	Display name and displayNameHtml are always provided	2024-08-15 22:40:08 +02:00
Joseph Garrone	60fa240a4d	#611	2024-08-15 22:38:45 +02:00
Joseph Garrone	e05cd87b7c	Release candidate	2024-08-14 18:32:21 +02:00
Joseph Garrone	8e41c905ed	Add the icons to the social provider in the story	2024-08-14 18:31:55 +02:00
Joseph Garrone	e21f607ab0	Merge pull request #609 from keycloakify/all-contributors/add-madmadson docs: add madmadson as a contributor for code	2024-08-14 16:36:59 +02:00
allcontributors[bot]	34af5abb82	docs: update .all-contributorsrc [skip ci]	2024-08-14 14:36:45 +00:00
allcontributors[bot]	fc1cdb5dc9	docs: update README.md [skip ci]	2024-08-14 14:36:44 +00:00
Joseph Garrone	069a0cc980	Release candidate	2024-08-14 16:34:45 +02:00
Joseph Garrone	78363727e1	Add correct fetch options to octokit	2024-08-14 16:34:22 +02:00
Joseph Garrone	23b16746f6	Release candidate	2024-08-14 15:48:37 +02:00
Joseph Garrone	6edf9c3d15	Fix div duplication	2024-08-14 15:48:16 +02:00
Joseph Garrone	2e371d2078	Fix linking script for windows	2024-08-14 07:11:16 +02:00
Joseph Garrone	b70b478e25	Pin cheerio to a given version	2024-08-13 14:58:46 +02:00
Joseph Garrone	97ad132086	Update to latest typescript v4 release	2024-08-13 09:31:23 +02:00
Joseph Garrone	2c5c54bf46	Don't use default import for cheerio (prepare for v1)	2024-08-13 09:25:06 +02:00
Joseph Garrone	c0ca078b43	Release candidate	2024-08-13 00:20:54 +02:00
Joseph Garrone	53e94d04f6	Improve message related to pnpm dlx	2024-08-13 00:17:26 +02:00
Joseph Garrone	dd198f9f06	Tell pepole they can explicitely provide the keycloak version	2024-08-13 00:17:26 +02:00
Joseph Garrone	43f455f4d0	Provide the proxy options to oktokit	2024-08-13 00:17:26 +02:00
Joseph Garrone	d9132ea5a5	Merge pull request #603 from keycloakify/debug_fetch_proxy Debug fetch proxy	2024-08-07 19:28:04 +02:00
Joseph Garrone	d5c7e2547b	Release candidate	2024-08-07 19:01:15 +02:00
Joseph Garrone	13b87de06c	Remove debug log	2024-08-07 19:00:57 +02:00
Joseph Garrone	83bdbb7a7e	Release candidate	2024-08-07 16:07:25 +02:00
Joseph Garrone	89320b8d51	Fix get proxy option	2024-08-07 16:07:07 +02:00
Joseph Garrone	5fa9c3879c	Release candidate	2024-08-07 11:48:02 +02:00
Joseph Garrone	c0cd76d40e	Debug log for proxy config	2024-08-07 11:46:05 +02:00
Joseph Garrone	01f60f8013	Release candidate	2024-08-07 07:51:07 +02:00
Joseph Garrone	91ad0712af	Make defaultuser english in keycloak 25	2024-08-07 07:33:48 +02:00
Joseph Garrone	2cb1b36725	Release candidate	2024-08-07 06:22:22 +02:00
Joseph Garrone	67ce66765f	Enable delete account in default Keycloak realm configuration	2024-08-07 06:21:59 +02:00
Joseph Garrone	c8cc453942	Release candidate	2024-08-06 06:42:02 +02:00
Joseph Garrone	3f835f152f	#602	2024-08-06 06:41:25 +02:00
Joseph Garrone	35e8a853e0	Release candidate	2024-08-02 14:09:29 +02:00
Joseph Garrone	d084a4bf4a	Fix bug spaces in path keycloak-start	2024-08-02 14:09:09 +02:00
Joseph Garrone	2a6b79e097	Release candidate	2024-07-31 18:46:10 +02:00
Joseph Garrone	5d786c922f	Enable the errors to be displayed immediately and not after focus is lost	2024-07-31 18:45:48 +02:00
Joseph Garrone	26bd5dd534	Release candidate	2024-07-31 11:57:38 +02:00
Joseph Garrone	b4df0ce52c	Set the default user locale to english	2024-07-31 11:57:13 +02:00
Joseph Garrone	386a8d7cd7	Rework the storybook	2024-07-29 05:12:31 +02:00
Joseph Garrone	5221fb3479	Prevent reload loop in storybook	2024-07-29 02:48:57 +02:00
Joseph Garrone	2871f63f25	Mention account Single Page in the storybook	2024-07-29 00:29:36 +02:00