Merge branch 'main' of https://github.com/keycloakify/keycloakify

Change node.js 16.6.0 dependency that Array.prototype.at

.all-contributorsrc

@@ -140,6 +140,24 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "satanshiro",
+      "name": "satanshiro",
+      "avatar_url": "https://avatars.githubusercontent.com/u/38865738?v=4",
+      "profile": "https://github.com/satanshiro",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "kpoelhekke",
+      "name": "Koen Poelhekke",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1632377?v=4",
+      "profile": "https://poelhekke.dev",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -20,7 +20,7 @@
     <a href="https://github.com/thomasdarimont/awesome-keycloak">
         <img src="https://awesome.re/mentioned-badge.svg"/>
     </a>
-    <a href="https://discord.gg/rBzsYtUn">
+    <a href="https://discord.gg/kYFZG7fQmn">
         <img src="https://img.shields.io/discord/1097708346976505977"/>
     </a>
     <p align="center">
@@ -35,31 +35,45 @@
 </p>
 
 <p align="center">
-    <i>Ultimately this build tool generates a Keycloak theme <a href="https://www.keycloakify.dev">Learn more</a></i>
+    <i>This build tool generates a Keycloak theme <a href="https://www.keycloakify.dev">Learn more</a></i>
     <img src="https://user-images.githubusercontent.com/6702424/110260457-a1c3d380-7fac-11eb-853a-80459b65626b.png">
 </p>
 
+> Whether or not React is your preferred framework, Keycloakify
+> offers a solid option for building Keycloak themes.
+> It's not just a convenient way to create a Keycloak theme
+> when using React; it's a well-regarded solution that many
+> developers appreciate.
+
 ## Sponsor 👼
 
-We are exclusively sponsored by [Cloud IAM](https://www.cloud-iam.com), a French company offering Keycloak as a service.  
+We are exclusively sponsored by [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), a French company offering Keycloak as a service.  
 Their dedicated support helps us continue the development and maintenance of this project.
 
-[Cloud IAM](https://www.cloud-iam.com/) provides the following services:
+[Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github) provides the following services:
 
--   Perfectly configured and optimized Keycloak IAM, ready in seconds.
+-   Simplify and secure your Keycloak Identity and Access Management. Keycloak as a Service.
 -   Custom theme building for your brand using Keycloakify.
 
+<div align="center">
+
+![Logo Dark](https://user-images.githubusercontent.com/6702424/234135797-c84d0a90-0526-43e5-a186-70cbebdeb278.png#gh-dark-mode-only)
+
+</div>
+
+<div align="center">
+
+![Logo Light](https://user-images.githubusercontent.com/6702424/234135799-68684c33-4ec5-48d4-8763-0f3922c86643.png#gh-light-mode-only)
+
+</div>
+
 <p align="center">
-    <a href="https://www.cloud-iam.com/">
-      <img src="https://user-images.githubusercontent.com/6702424/232165752-17134e68-4a55-4d6e-8672-e9132ecac5d5.svg" alt="Cloud IAM Logo" width="200"/>
-    </a>
-    <br/>
-    <i>Use promo code <code>keycloakify5</code>  </i>
+    <i>Checkout <a href="https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github">Cloud IAM</a> and use promo code <code>keycloakify5</code></i>
     <br/>
     <i>5% of your annual subscription will be donated to us, and you'll get 5% off too.</i>
 </p>
 
-Thank you, [Cloud IAM](https://www.cloud-iam.com/), for your support!
+Thank you, [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), for your support!
 
 ## Contributors ✨
 
@@ -90,6 +104,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://www.gravitysoftware.be"><img src="https://avatars.githubusercontent.com/u/1140574?v=4?s=100" width="100px;" alt="Thomas Silvestre"/><br /><sub><b>Thomas Silvestre</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=thosil" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/satanshiro"><img src="https://avatars.githubusercontent.com/u/38865738?v=4?s=100" width="100px;" alt="satanshiro"/><br /><sub><b>satanshiro</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=satanshiro" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://poelhekke.dev"><img src="https://avatars.githubusercontent.com/u/1632377?v=4?s=100" width="100px;" alt="Koen Poelhekke"/><br /><sub><b>Koen Poelhekke</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=kpoelhekke" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>
@@ -101,6 +117,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 # Changelog highlights
 
+## 7.12
+
+-   You can now pack multiple themes variant in a single `.jar` bundle. In vanilla Keycloak themes you have the ability to extend a base theme.
+    There is now an idiomatic way of achieving the same result. [Learn more](https://docs.keycloakify.dev/build-options#keycloakify.extrathemenames).
+
 ## 7.9
 
 -   Separate script for copying the default theme static assets to the public directory.  
@@ -108,10 +129,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     You are now expected to have a `"prepare": "copy-keycloak-resources-to-public",` in your package.json scripts.  
     This script will create `public/keycloak-assets` when you run `yarn install` (If you are using another package manager
     like `pnpm` makes sure that `"prepare"` is actually ran.)  
-    [See the updated starter](https://github.com/keycloakify/keycloakify-starter/blob/94532fcf10bf8b19e0873be8575fd28a8958a806/package.json#L11).  
-    `public/keycloak-assets` shouldn't be tracked by GIT and is automatically ignored.
+    [See the updated starter](https://github.com/keycloakify/keycloakify-starter/blob/94532fcf10bf8b19e0873be8575fd28a8958a806/package.json#L11). `public/keycloak-assets` shouldn't be tracked by GIT and is automatically ignored.
 
-## 7.7
+## 7.7
 
 -   Better storybook support, see [the starter project](https://github.com/keycloakify/keycloakify-starter).
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "7.9.5",
+    "version": "7.12.1",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",

src/account/i18n/i18n.tsx

@@ -211,7 +211,9 @@ const keycloakifyExtraMessages = {
         "shouldBeDifferent": "{0} should be different to {1}",
         "shouldMatchPattern": "Pattern should match: `/{0}/`",
         "mustBeAnInteger": "Must be an integer",
-        "notAValidOption": "Not a valid option"
+        "notAValidOption": "Not a valid option",
+        "newPasswordSameAsOld": "New password must be different from the old one",
+        "passwordConfirmNotMatch": "Password confirmation does not match"
     },
     "fr": {
         /* spell-checker: disable */
@@ -223,7 +225,9 @@ const keycloakifyExtraMessages = {
 
         "logoutConfirmTitle": "Déconnexion",
         "logoutConfirmHeader": "Êtes-vous sûr(e) de vouloir vous déconnecter ?",
-        "doLogout": "Se déconnecter"
+        "doLogout": "Se déconnecter",
+        "newPasswordSameAsOld": "Le nouveau mot de passe doit être différent de l'ancien",
+        "passwordConfirmNotMatch": "La confirmation du mot de passe ne correspond pas"
         /* spell-checker: enable */
     }
 };

src/account/kcContext/KcContext.ts

@@ -1,4 +1,4 @@
-import type { AccountThemePageId } from "keycloakify/bin/keycloakify/generateFtl";
+import type { AccountThemePageId, ThemeType } from "keycloakify/bin/keycloakify/generateFtl";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 
@@ -7,6 +7,8 @@ export type KcContext = KcContext.Password | KcContext.Account;
 export declare namespace KcContext {
     export type Common = {
         keycloakifyVersion: string;
+        themeType: "account";
+        themeName: string;
         locale?: {
             supported: {
                 url: string;
@@ -84,4 +86,15 @@ export declare namespace KcContext {
     };
 }
 
-assert<Equals<KcContext["pageId"], AccountThemePageId>>();
+{
+    type Got = KcContext["pageId"];
+    type Expected = AccountThemePageId;
+
+    type OnlyInGot = Exclude<Got, Expected>;
+    type OnlyInExpected = Exclude<Expected, Got>;
+
+    assert<Equals<OnlyInGot, never>>();
+    assert<Equals<OnlyInExpected, never>>();
+}
+
+assert<KcContext["themeType"] extends ThemeType ? true : false>();

src/account/kcContext/createGetKcContext.ts

@@ -7,8 +7,6 @@ import { pathBasename } from "keycloakify/tools/pathBasename";
 import { resourcesCommonDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
 import { symToStr } from "tsafe/symToStr";
 import { kcContextMocks, kcContextCommonMock } from "keycloakify/account/kcContext/kcContextMocks";
-import { id } from "tsafe/id";
-import { accountThemePageIds } from "keycloakify/bin/keycloakify/generateFtl/pageId";
 
 export function createGetKcContext<KcContextExtension extends { pageId: string } = never>(params?: {
     mockData?: readonly DeepPartial<ExtendKcContext<KcContextExtension>>[];
@@ -87,7 +85,7 @@ export function createGetKcContext<KcContextExtension extends { pageId: string }
             return { "kcContext": undefined as any };
         }
 
-        if (id<readonly string[]>(accountThemePageIds).indexOf(realKcContext.pageId) < 0 && !("account" in realKcContext)) {
+        if (realKcContext.themeType !== "account") {
             return { "kcContext": undefined as any };
         }
 

src/account/kcContext/kcContextMocks.ts

@@ -8,6 +8,8 @@ const PUBLIC_URL = process.env["PUBLIC_URL"] ?? "/";
 
 export const kcContextCommonMock: KcContext.Common = {
     "keycloakifyVersion": "0.0.0",
+    "themeType": "account",
+    "themeName": "my-theme-name",
     "url": {
         "resourcesPath": pathJoin(PUBLIC_URL, resourcesDirPathRelativeToPublicDir),
         "resourcesCommonPath": pathJoin(PUBLIC_URL, resourcesCommonDirPathRelativeToPublicDir),

src/account/pages/Password.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
@@ -17,10 +18,69 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
 
     const { url, password, account, stateChecker } = kcContext;
 
-    const { msg } = i18n;
+    const { msgStr, msg } = i18n;
+
+    const [currentPassword, setCurrentPassword] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [newPasswordConfirm, setNewPasswordConfirm] = useState("");
+    const [newPasswordError, setNewPasswordError] = useState("");
+    const [newPasswordConfirmError, setNewPasswordConfirmError] = useState("");
+    const [hasNewPasswordBlurred, setHasNewPasswordBlurred] = useState(false);
+    const [hasNewPasswordConfirmBlurred, setHasNewPasswordConfirmBlurred] = useState(false);
+
+    const checkNewPassword = (newPassword: string) => {
+        if (!password.passwordSet) {
+            return;
+        }
+
+        if (newPassword === currentPassword) {
+            setNewPasswordError(msgStr("newPasswordSameAsOld"));
+        } else {
+            setNewPasswordError("");
+        }
+    };
+
+    const checkNewPasswordConfirm = (newPasswordConfirm: string) => {
+        if (newPasswordConfirm === "") {
+            return;
+        }
+
+        if (newPassword !== newPasswordConfirm) {
+            setNewPasswordConfirmError(msgStr("passwordConfirmNotMatch"));
+        } else {
+            setNewPasswordConfirmError("");
+        }
+    };
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="password">
+        <Template
+            {...{
+                kcContext: {
+                    ...kcContext,
+                    "message": (() => {
+                        if (newPasswordError !== "") {
+                            return {
+                                "type": "error",
+                                "summary": newPasswordError
+                            };
+                        }
+
+                        if (newPasswordConfirmError !== "") {
+                            return {
+                                "type": "error",
+                                "summary": newPasswordConfirmError
+                            };
+                        }
+
+                        return kcContext.message;
+                    })()
+                },
+                i18n,
+                doUseDefaultCss,
+                classes
+            }}
+            active="password"
+        >
             <div className="row">
                 <div className="col-md-10">
                     <h2>{msg("changePasswordHtmlTitle")}</h2>
@@ -48,9 +108,17 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                                 {msg("password")}
                             </label>
                         </div>
-
                         <div className="col-sm-10 col-md-10">
-                            <input type="password" className="form-control" id="password" name="password" autoFocus autoComplete="current-password" />
+                            <input
+                                type="password"
+                                className="form-control"
+                                id="password"
+                                name="password"
+                                autoFocus
+                                autoComplete="current-password"
+                                value={currentPassword}
+                                onChange={event => setCurrentPassword(event.target.value)}
+                            />
                         </div>
                     </div>
                 )}
@@ -63,9 +131,27 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                             {msg("passwordNew")}
                         </label>
                     </div>
-
                     <div className="col-sm-10 col-md-10">
-                        <input type="password" className="form-control" id="password-new" name="password-new" autoComplete="new-password" />
+                        <input
+                            type="password"
+                            className="form-control"
+                            id="password-new"
+                            name="password-new"
+                            autoComplete="new-password"
+                            value={newPassword}
+                            onChange={event => {
+                                const newPassword = event.target.value;
+
+                                setNewPassword(newPassword);
+                                if (hasNewPasswordBlurred) {
+                                    checkNewPassword(newPassword);
+                                }
+                            }}
+                            onBlur={() => {
+                                setHasNewPasswordBlurred(true);
+                                checkNewPassword(newPassword);
+                            }}
+                        />
                     </div>
                 </div>
 
@@ -77,7 +163,26 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                     </div>
 
                     <div className="col-sm-10 col-md-10">
-                        <input type="password" className="form-control" id="password-confirm" name="password-confirm" autoComplete="new-password" />
+                        <input
+                            type="password"
+                            className="form-control"
+                            id="password-confirm"
+                            name="password-confirm"
+                            autoComplete="new-password"
+                            value={newPasswordConfirm}
+                            onChange={event => {
+                                const newPasswordConfirm = event.target.value;
+
+                                setNewPasswordConfirm(newPasswordConfirm);
+                                if (hasNewPasswordConfirmBlurred) {
+                                    checkNewPasswordConfirm(newPasswordConfirm);
+                                }
+                            }}
+                            onBlur={() => {
+                                setHasNewPasswordConfirmBlurred(true);
+                                checkNewPasswordConfirm(newPasswordConfirm);
+                            }}
+                        />
                     </div>
                 </div>
 
@@ -85,6 +190,7 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                     <div id="kc-form-buttons" className="col-md-offset-2 col-md-10 submit">
                         <div>
                             <button
+                                disabled={newPasswordError !== "" || newPasswordConfirmError !== ""}
                                 type="submit"
                                 className={clsx(
                                     getClassName("kcButtonClass"),

src/bin/keycloakify/BuildOptions.ts

@@ -16,6 +16,7 @@ export namespace BuildOptions {
         isSilent: boolean;
         themeVersion: string;
         themeName: string;
+        extraThemeNames: string[];
         extraLoginPages: string[] | undefined;
         extraAccountPages: string[] | undefined;
         extraThemeProperties?: string[];
@@ -108,8 +109,17 @@ export function readBuildOptions(params: { projectDirPath: string; processArgv:
     const common: BuildOptions.Common = (() => {
         const { name, keycloakify = {}, version, homepage } = parsedPackageJson;
 
-        const { extraPages, extraLoginPages, extraAccountPages, extraThemeProperties, groupId, artifactId, bundler, keycloakVersionDefaultAssets } =
-            keycloakify ?? {};
+        const {
+            extraPages,
+            extraLoginPages,
+            extraAccountPages,
+            extraThemeProperties,
+            groupId,
+            artifactId,
+            bundler,
+            keycloakVersionDefaultAssets,
+            extraThemeNames = []
+        } = keycloakify ?? {};
 
         const themeName =
             keycloakify.themeName ??
@@ -120,6 +130,7 @@ export function readBuildOptions(params: { projectDirPath: string; processArgv:
 
         return {
             themeName,
+            extraThemeNames,
             "bundler": (() => {
                 const { KEYCLOAKIFY_BUNDLER } = process.env;
 

src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -121,6 +121,8 @@
 
     out["keycloakifyVersion"] = "KEYCLOAKIFY_VERSION_xEdKd3xEdr";
     out["themeVersion"] = "KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx";
+    out["themeType"] = "KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr";
+    out["themeName"] = "KEYCLOAKIFY_THEME_NAME_cXxKd3xEer";
     out["pageId"] = "${pageId}";
 
     return out;
@@ -336,6 +338,17 @@
 
         </#if>
 
+        <#local isDate = "">
+        <#attempt>
+            <#local isDate = object?is_date_like>
+        <#recover>
+            <#return "ABORT: Can't test if it's a date">
+        </#attempt>
+
+        <#if isDate>
+            <#return '"' + object?datetime?iso_utc + '"'>
+        </#if>
+
         <#attempt>
             <#return '"' + object?js_string + '"'>;
         <#recover>

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -17,6 +17,7 @@ export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.Ex
 
 export namespace BuildOptionsLike {
     export type Common = {
+        themeName: string;
         customUserAttributes: string[];
         themeVersion: string;
     };
@@ -55,8 +56,9 @@ export function generateFtlFilesCodeFactory(params: {
     cssGlobalsToDefine: Record<string, string>;
     buildOptions: BuildOptionsLike;
     keycloakifyVersion: string;
+    themeType: ThemeType;
 }) {
-    const { cssGlobalsToDefine, indexHtmlCode, buildOptions, keycloakifyVersion } = params;
+    const { cssGlobalsToDefine, indexHtmlCode, buildOptions, keycloakifyVersion, themeType } = params;
 
     const $ = cheerio.load(indexHtmlCode);
 
@@ -132,7 +134,9 @@ export function generateFtlFilesCodeFactory(params: {
                 buildOptions.customUserAttributes.length === 0 ? "" : ", " + buildOptions.customUserAttributes.map(name => `"${name}"`).join(", ")
             )
             .replace("KEYCLOAKIFY_VERSION_xEdKd3xEdr", keycloakifyVersion)
-            .replace("KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx", buildOptions.themeVersion),
+            .replace("KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx", buildOptions.themeVersion)
+            .replace("KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr", themeType)
+            .replace("KEYCLOAKIFY_THEME_NAME_cXxKd3xEer", buildOptions.themeName),
         "<!-- xIdLqMeOedErIdLsPdNdI9dSlxI -->": [
             "<#if scripts??>",
             "    <#list scripts as script>",

src/bin/keycloakify/generateFtl/pageId.ts

@@ -21,7 +21,8 @@ export const loginThemePageIds = [
     "update-user-profile.ftl",
     "idp-review-user-profile.ftl",
     "update-email.ftl",
-    "select-authenticator.ftl"
+    "select-authenticator.ftl",
+    "saml-post-form.ftl"
 ] as const;
 
 export const accountThemePageIds = ["password.ftl", "account.ftl"] as const;

src/bin/keycloakify/generateJavaStackFiles.ts

@@ -7,6 +7,7 @@ import type { BuildOptions } from "./BuildOptions";
 
 export type BuildOptionsLike = {
     themeName: string;
+    extraThemeNames: string[];
     groupId: string;
     artifactId?: string;
     themeVersion: string;
@@ -26,7 +27,7 @@ export function generateJavaStackFiles(params: {
     jarFilePath: string;
 } {
     const {
-        buildOptions: { groupId, themeName, themeVersion, artifactId },
+        buildOptions: { groupId, themeName, extraThemeNames, themeVersion, artifactId },
         keycloakThemeBuildingDirPath,
         doBundlesEmailTemplate
     } = params;
@@ -67,12 +68,10 @@ export function generateJavaStackFiles(params: {
             Buffer.from(
                 JSON.stringify(
                     {
-                        "themes": [
-                            {
-                                "name": themeName,
-                                "types": [...themeTypes, ...(doBundlesEmailTemplate ? ["email"] : [])]
-                            }
-                        ]
+                        "themes": [themeName, ...extraThemeNames].map(themeName => ({
+                            "name": themeName,
+                            "types": [...themeTypes, ...(doBundlesEmailTemplate ? ["email"] : [])]
+                        }))
                     },
                     null,
                     2

src/bin/keycloakify/generateStartKeycloakTestingContainer.ts

@@ -6,6 +6,7 @@ import type { BuildOptions } from "./BuildOptions";
 
 export type BuildOptionsLike = {
     themeName: string;
+    extraThemeNames: string[];
 };
 
 {
@@ -27,11 +28,9 @@ export function generateStartKeycloakTestingContainer(params: {
     const {
         keycloakThemeBuildingDirPath,
         keycloakVersion,
-        buildOptions: { themeName }
+        buildOptions: { themeName, extraThemeNames }
     } = params;
 
-    const keycloakThemePath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName).replace(/\\/g, "/");
-
     fs.writeFileSync(
         pathJoin(keycloakThemeBuildingDirPath, generateStartKeycloakTestingContainer.basename),
 
@@ -49,7 +48,13 @@ export function generateStartKeycloakTestingContainer(params: {
                 "   -e KEYCLOAK_ADMIN=admin \\",
                 "   -e KEYCLOAK_ADMIN_PASSWORD=admin \\",
                 "   -e JAVA_OPTS=-Dkeycloak.profile=preview \\",
-                `   -v "${keycloakThemePath}":"/opt/keycloak/themes/${themeName}":rw \\`,
+                ...[themeName, ...extraThemeNames].map(
+                    themeName =>
+                        `   -v "${pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName).replace(
+                            /\\/g,
+                            "/"
+                        )}":"/opt/keycloak/themes/${themeName}":rw \\`
+                ),
                 `   -it quay.io/keycloak/keycloak:${keycloakVersion} \\`,
                 `   start-dev`,
                 ""

src/bin/keycloakify/generateTheme/generateTheme.ts

@@ -141,7 +141,8 @@ export async function generateTheme(params: {
                 "indexHtmlCode": fs.readFileSync(pathJoin(reactAppBuildDirPath, "index.html")).toString("utf8"),
                 "cssGlobalsToDefine": allCssGlobalsToDefine,
                 buildOptions,
-                keycloakifyVersion
+                keycloakifyVersion,
+                themeType
             });
 
             return generateFtlFilesCode;

src/bin/keycloakify/keycloakify.ts

@@ -23,27 +23,38 @@ export async function main() {
     const logger = getLogger({ "isSilent": buildOptions.isSilent });
     logger.log("🔏 Building the keycloak theme...⌚");
 
-    const { doBundlesEmailTemplate } = await generateTheme({
-        keycloakThemeBuildingDirPath: buildOptions.keycloakifyBuildDirPath,
-        "emailThemeSrcDirPath": (() => {
-            const { emailThemeSrcDirPath } = getEmailThemeSrcDirPath({ projectDirPath });
+    let doBundlesEmailTemplate: boolean | undefined;
 
-            if (emailThemeSrcDirPath === undefined || !fs.existsSync(emailThemeSrcDirPath)) {
-                return;
-            }
+    for (const themeName of [buildOptions.themeName, ...buildOptions.extraThemeNames]) {
+        const { doBundlesEmailTemplate: doBundlesEmailTemplate_ } = await generateTheme({
+            keycloakThemeBuildingDirPath: buildOptions.keycloakifyBuildDirPath,
+            "emailThemeSrcDirPath": (() => {
+                const { emailThemeSrcDirPath } = getEmailThemeSrcDirPath({ projectDirPath });
 
-            return emailThemeSrcDirPath;
-        })(),
-        "reactAppBuildDirPath": buildOptions.reactAppBuildDirPath,
-        buildOptions,
-        "keycloakifyVersion": (() => {
-            const version = JSON.parse(fs.readFileSync(pathJoin(getProjectRoot(), "package.json")).toString("utf8"))["version"];
+                if (emailThemeSrcDirPath === undefined || !fs.existsSync(emailThemeSrcDirPath)) {
+                    return;
+                }
 
-            assert(typeof version === "string");
+                return emailThemeSrcDirPath;
+            })(),
+            "reactAppBuildDirPath": buildOptions.reactAppBuildDirPath,
+            "buildOptions": {
+                ...buildOptions,
+                "themeName": themeName
+            },
+            "keycloakifyVersion": (() => {
+                const version = JSON.parse(fs.readFileSync(pathJoin(getProjectRoot(), "package.json")).toString("utf8"))["version"];
 
-            return version;
-        })()
-    });
+                assert(typeof version === "string");
+
+                return version;
+            })()
+        });
+
+        doBundlesEmailTemplate ??= doBundlesEmailTemplate_;
+    }
+
+    assert(doBundlesEmailTemplate !== undefined);
 
     const { jarFilePath } = generateJavaStackFiles({
         keycloakThemeBuildingDirPath: buildOptions.keycloakifyBuildDirPath,
@@ -58,7 +69,7 @@ export async function main() {
         case "keycloakify":
             logger.log("🫶 Let keycloakify do its thang");
             await jar({
-                "rootPath": pathJoin(buildOptions.keycloakifyBuildDirPath, "src", "main", "resources"),
+                "rootPath": buildOptions.keycloakifyBuildDirPath,
                 "version": buildOptions.themeVersion,
                 "groupId": buildOptions.groupId,
                 "artifactId": buildOptions.artifactId,
@@ -128,16 +139,18 @@ export async function main() {
             ``,
             `Once your container is up and running: `,
             "- Log into the admin console 👉 http://localhost:8080/admin username: admin, password: admin 👈",
-            `- Create a realm:                  myrealm`,
-            `- Enable registration:             Realm settings -> Login tab  -> User registration: on`,
-            `- Enable the Account theme:        Realm settings -> Themes tab -> Account theme, select ${buildOptions.themeName} `,
-            `- Create a client id               myclient`,
-            `  Root URL:                        https://www.keycloak.org/app/`,
-            `  Valid redirect URIs:             https://www.keycloak.org/app* http://localhost* (localhost is optional)`,
-            `  Valid post logout redirect URIs: https://www.keycloak.org/app* http://localhost*`,
-            `  Web origins:                     *`,
-            `  Login Theme:                     ${buildOptions.themeName}`,
-            `  Save (button at the bottom of the page)`,
+            `- Create a realm:                       Master         -> AddRealm   -> Name: myrealm`,
+            `- Enable registration:                  Realm settings -> Login tab  -> User registration: on`,
+            `- Enable the Account theme (optional):  Realm settings -> Themes tab -> Account theme: ${buildOptions.themeName}`,
+            `                                        Clients        -> account    -> Login theme:   ${buildOptions.themeName}`,
+            `- Enable the email theme (optional):    Realm settings -> Themes tab -> Email theme:   ${buildOptions.themeName} (option will appear only if you have ran npx initialize-email-theme)`,
+            `- Create a client                       Clients        -> Create     -> Client ID:                       myclient`,
+            `                                                                        Root URL:                        https://www.keycloak.org/app/`,
+            `                                                                        Valid redirect URIs:             https://www.keycloak.org/app* http://localhost* (localhost is optional)`,
+            `                                                                        Valid post logout redirect URIs: https://www.keycloak.org/app* http://localhost*`,
+            `                                                                        Web origins:                     *`,
+            `                                                                        Login Theme:                     ${buildOptions.themeName}`,
+            `                                                                        Save (button at the bottom of the page)`,
             ``,
             `- Go to  👉  https://www.keycloak.org/app/ 👈 Click "Save" then "Sign in". You should see your login page`,
             `- Got to 👉  http://localhost:8080/realms/myrealm/account 👈 to see your account theme`,

src/bin/keycloakify/parsedPackageJson.ts

@@ -25,6 +25,7 @@ export type ParsedPackageJson = {
         keycloakifyBuildDirPath?: string;
         customUserAttributes?: string[];
         themeName?: string;
+        extraThemeNames?: string[];
     };
 };
 
@@ -46,7 +47,8 @@ export const zParsedPackageJson = z.object({
             "reactAppBuildDirPath": z.string().optional(),
             "keycloakifyBuildDirPath": z.string().optional(),
             "customUserAttributes": z.array(z.string()).optional(),
-            "themeName": z.string().optional()
+            "themeName": z.string().optional(),
+            "extraThemeNames": z.array(z.string()).optional()
         })
         .optional()
 });

src/bin/tools/downloadAndUnzip.ts

@@ -1,6 +1,6 @@
 import { exec as execCallback } from "child_process";
 import { createHash } from "crypto";
-import { mkdir, stat, writeFile } from "fs/promises";
+import { mkdir, readFile, stat, writeFile } from "fs/promises";
 import fetch, { type FetchOptions } from "make-fetch-happen";
 import { dirname as pathDirname, join as pathJoin } from "path";
 import { assert } from "tsafe";
@@ -25,32 +25,75 @@ async function exists(path: string) {
     }
 }
 
+function ensureArray<T>(arg0: T | T[]) {
+    return Array.isArray(arg0) ? arg0 : typeof arg0 === "undefined" ? [] : [arg0];
+}
+
+function ensureSingleOrNone<T>(arg0: T | T[]) {
+    if (!Array.isArray(arg0)) return arg0;
+    if (arg0.length === 0) return undefined;
+    if (arg0.length === 1) return arg0[0];
+    throw new Error("Illegal configuration, expected a single value but found multiple: " + arg0.map(String).join(", "));
+}
+
+type NPMConfig = Record<string, string | string[]>;
+
+const npmConfigReducer = (cfg: NPMConfig, [key, value]: [string, string]) =>
+    key in cfg ? { ...cfg, [key]: [...ensureArray(cfg[key]), value] } : { ...cfg, [key]: value };
+
 /**
  * Get npm configuration as map
  */
-async function getNmpConfig(): Promise<Record<string, string>> {
+async function getNmpConfig() {
+    return readNpmConfig().then(parseNpmConfig);
+}
+
+async function readNpmConfig() {
     const { stdout } = await exec("npm config get", { encoding: "utf8" });
+    return stdout;
+}
+
+function parseNpmConfig(stdout: string) {
     return stdout
         .split("\n")
         .filter(line => !line.startsWith(";"))
         .map(line => line.trim())
-        .map(line => line.split("=", 2))
-        .reduce((cfg, [key, value]) => ({ ...cfg, [key]: value }), {});
+        .map(line => line.split("=", 2) as [string, string])
+        .reduce(npmConfigReducer, {} as NPMConfig);
+}
+
+function maybeBoolean(arg0: string | undefined) {
+    return typeof arg0 === "undefined" ? undefined : Boolean(arg0);
+}
+
+function chunks<T>(arr: T[], size: number = 2) {
+    return arr.map((_, i) => i % size == 0 && arr.slice(i, i + size)).filter(Boolean) as T[][];
+}
+
+async function readCafile(cafile: string) {
+    const cafileContent = await readFile(cafile, "utf-8");
+    return chunks(cafileContent.split(/(-----END CERTIFICATE-----)/), 2).map(ca => ca.join("").replace(/^\n/, "").replace(/\n/g, "\\n"));
 }
 
 /**
- * Get proxy configuration from npm config files. Note that we don't care about
+ * Get proxy and ssl configuration from npm config files. Note that we don't care about
  * proxy config in env vars, because make-fetch-happen will do that for us.
  *
  * @returns proxy configuration
  */
-async function getNpmProxyConfig(): Promise<Pick<FetchOptions, "proxy" | "noProxy">> {
+async function getFetchOptions(): Promise<Pick<FetchOptions, "proxy" | "noProxy" | "strictSSL" | "ca" | "cert">> {
     const cfg = await getNmpConfig();
 
-    const proxy = cfg["https-proxy"] ?? cfg["proxy"];
+    const proxy = ensureSingleOrNone(cfg["https-proxy"] ?? cfg["proxy"]);
     const noProxy = cfg["noproxy"] ?? cfg["no-proxy"];
+    const strictSSL = maybeBoolean(ensureSingleOrNone(cfg["strict-ssl"]));
+    const cert = cfg["cert"];
+    const ca = ensureArray(cfg["ca"] ?? cfg["ca[]"]);
+    const cafile = ensureSingleOrNone(cfg["cafile"]);
 
-    return { proxy, noProxy };
+    if (typeof cafile !== "undefined" && cafile !== "null") ca.push(...(await readCafile(cafile)));
+
+    return { proxy, noProxy, strictSSL, cert, ca: ca.length === 0 ? undefined : ca };
 }
 
 export async function downloadAndUnzip(params: { url: string; destDirPath: string; pathOfDirToExtractInArchive?: string }) {
@@ -63,8 +106,8 @@ export async function downloadAndUnzip(params: { url: string; destDirPath: strin
     const extractDirPath = pathJoin(cacheRoot, "keycloakify", "unzip", `_${downloadHash}`);
 
     if (!(await exists(zipFilePath))) {
-        const proxyOpts = await getNpmProxyConfig();
-        const response = await fetch(url, proxyOpts);
+        const opts = await getFetchOptions();
+        const response = await fetch(url, opts);
         await mkdir(pathDirname(zipFilePath), { "recursive": true });
         /**
          * The correct way to fix this is to upgrade node-fetch beyond 3.2.5

src/bin/tools/jar.ts

@@ -1,4 +1,4 @@
-import { dirname, relative, sep } from "path";
+import { dirname, relative, sep, join } from "path";
 import { createWriteStream } from "fs";
 
 import walk from "./walk";
@@ -48,8 +48,12 @@ export async function jarStream({ groupId, artifactId, version, asyncPathGenerat
     for await (const entry of asyncPathGeneratorFn()) {
         if ("buffer" in entry) {
             zipFile.addBuffer(entry.buffer, entry.zipPath);
-        } else if ("fsPath" in entry && !entry.fsPath.endsWith(sep)) {
-            zipFile.addFile(entry.fsPath, entry.zipPath);
+        } else if ("fsPath" in entry) {
+            if (entry.fsPath.endsWith(sep)) {
+                zipFile.addEmptyDirectory(entry.zipPath);
+            } else {
+                zipFile.addFile(entry.fsPath, entry.zipPath);
+            }
         }
     }
 
@@ -65,15 +69,23 @@ export async function jarStream({ groupId, artifactId, version, asyncPathGenerat
  * Create a jar archive, using the resources found at `rootPath` (a directory) and write the
  * archive to `targetPath` (a file). Use `groupId`, `artifactId` and `version` to define
  * the contents of the pom.properties file which is going to be added to the archive.
+ * The root directory is expectedto have a conventional maven/gradle folder structure with a
+ * single `pom.xml` file at the root and a `src/main/resources` directory containing all
+ * application resources.
  */
 export default async function jar({ groupId, artifactId, version, rootPath, targetPath }: JarArgs) {
     await mkdir(dirname(targetPath), { recursive: true });
 
     const asyncPathGeneratorFn = async function* (): ZipEntryGenerator {
-        for await (const fsPath of walk(rootPath)) {
-            const zipPath = relative(rootPath, fsPath).split(sep).join("/");
+        const resourcesPath = join(rootPath, "src", "main", "resources");
+        for await (const fsPath of walk(resourcesPath)) {
+            const zipPath = relative(resourcesPath, fsPath).split(sep).join("/");
             yield { fsPath, zipPath };
         }
+        yield {
+            fsPath: join(rootPath, "pom.xml"),
+            zipPath: `META-INF/maven/${groupId}/${artifactId}/pom.xml`
+        };
     };
 
     const zipFile = await jarStream({ groupId, artifactId, version, asyncPathGeneratorFn });

src/bin/tools/trimIndent.ts

@@ -9,7 +9,7 @@ function populateTemplate(strings: TemplateStringsArray, ...args: unknown[]) {
         if (strings[i]) {
             chunks.push(strings[i]);
             // remember last indent of the string portion
-            lastStringLineLength = strings[i].split("\n").at(-1)?.length ?? 0;
+            lastStringLineLength = strings[i].split("\n").slice(-1)[0]?.length ?? 0;
         }
         if (args[i]) {
             // if the interpolation value has newlines, indent the interpolation values

src/login/Fallback.tsx

@@ -27,6 +27,7 @@ const UpdateUserProfile = lazy(() => import("keycloakify/login/pages/UpdateUserP
 const IdpReviewUserProfile = lazy(() => import("keycloakify/login/pages/IdpReviewUserProfile"));
 const UpdateEmail = lazy(() => import("keycloakify/login/pages/UpdateEmail"));
 const SelectAuthenticator = lazy(() => import("keycloakify/login/pages/SelectAuthenticator"));
+const SamlPostForm = lazy(() => import("keycloakify/login/pages/SamlPostForm"));
 
 export default function Fallback(props: PageProps<KcContext, I18n>) {
     const { kcContext, ...rest } = props;
@@ -81,6 +82,8 @@ export default function Fallback(props: PageProps<KcContext, I18n>) {
                         return <UpdateEmail kcContext={kcContext} {...rest} />;
                     case "select-authenticator.ftl":
                         return <SelectAuthenticator kcContext={kcContext} {...rest} />;
+                    case "saml-post-form.ftl":
+                        return <SamlPostForm kcContext={kcContext} {...rest} />;
                 }
                 assert<Equals<typeof kcContext, never>>(false);
             })()}

src/login/kcContext/KcContext.ts

@@ -1,4 +1,4 @@
-import type { LoginThemePageId } from "keycloakify/bin/keycloakify/generateFtl";
+import type { LoginThemePageId, ThemeType } from "keycloakify/bin/keycloakify/generateFtl";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import type { MessageKey } from "../i18n/i18n";
@@ -32,11 +32,14 @@ export type KcContext =
     | KcContext.UpdateUserProfile
     | KcContext.IdpReviewUserProfile
     | KcContext.UpdateEmail
-    | KcContext.SelectAuthenticator;
+    | KcContext.SelectAuthenticator
+    | KcContext.SamlPostForm;
 
 export declare namespace KcContext {
     export type Common = {
         keycloakifyVersion: string;
+        themeType: "login";
+        themeName: string;
         url: {
             loginAction: string;
             resourcesPath: string;
@@ -85,6 +88,16 @@ export declare namespace KcContext {
         };
     };
 
+    export type SamlPostForm = Common & {
+        pageId: "saml-post-form.ftl";
+        samlPost: {
+            url: string;
+            SAMLRequest?: string;
+            SAMLResponse?: string;
+            relayState?: string;
+        };
+    };
+
     export type Login = Common & {
         pageId: "login.ftl";
         url: {
@@ -543,4 +556,15 @@ export declare namespace Validators {
     };
 }
 
-assert<Equals<KcContext["pageId"], LoginThemePageId>>();
+{
+    type Got = KcContext["pageId"];
+    type Expected = LoginThemePageId;
+
+    type OnlyInGot = Exclude<Got, Expected>;
+    type OnlyInExpected = Exclude<Expected, Got>;
+
+    assert<Equals<OnlyInGot, never>>();
+    assert<Equals<OnlyInExpected, never>>();
+}
+
+assert<KcContext["themeType"] extends ThemeType ? true : false>();

src/login/kcContext/createGetKcContext.ts

@@ -11,7 +11,6 @@ import { pathJoin } from "keycloakify/bin/tools/pathJoin";
 import { pathBasename } from "keycloakify/tools/pathBasename";
 import { resourcesCommonDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
 import { symToStr } from "tsafe/symToStr";
-import { loginThemePageIds } from "keycloakify/bin/keycloakify/generateFtl/pageId";
 
 export function createGetKcContext<KcContextExtension extends { pageId: string } = never>(params?: {
     mockData?: readonly DeepPartial<ExtendKcContext<KcContextExtension>>[];
@@ -145,7 +144,7 @@ export function createGetKcContext<KcContextExtension extends { pageId: string }
             return { "kcContext": undefined as any };
         }
 
-        if (id<readonly string[]>(loginThemePageIds).indexOf(realKcContext.pageId) < 0 && !("login" in realKcContext)) {
+        if (realKcContext.themeType !== "login") {
             return { "kcContext": undefined as any };
         }
 

src/login/kcContext/kcContextMocks.ts

@@ -3,6 +3,8 @@ import type { KcContext, Attribute } from "./KcContext";
 import { resourcesCommonDirPathRelativeToPublicDir, resourcesDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
 import { pathJoin } from "keycloakify/bin/tools/pathJoin";
 import { id } from "tsafe/id";
+import { assert, type Equals } from "tsafe/assert";
+import type { LoginThemePageId } from "keycloakify/bin/keycloakify/generateFtl";
 
 const PUBLIC_URL = process.env["PUBLIC_URL"] ?? "/";
 
@@ -102,6 +104,8 @@ const attributesByName = Object.fromEntries(attributes.map(attribute => [attribu
 
 export const kcContextCommonMock: KcContext.Common = {
     "keycloakifyVersion": "0.0.0",
+    "themeType": "login",
+    "themeName": "my-theme-name",
     "url": {
         "loginAction": "#",
         "resourcesPath": pathJoin(PUBLIC_URL, resourcesDirPathRelativeToPublicDir),
@@ -243,7 +247,7 @@ const loginUrl = {
     "registrationUrl": "/auth/realms/myrealm/login-actions/registration?client_id=account&tab_id=HoAx28ja4xg"
 };
 
-export const kcContextMocks: KcContext[] = [
+export const kcContextMocks = [
     id<KcContext.Login>({
         ...kcContextCommonMock,
         "pageId": "login.ftl",
@@ -519,5 +523,27 @@ export const kcContextMocks: KcContext[] = [
                 }
             ]
         }
+    }),
+    id<KcContext.SamlPostForm>({
+        ...kcContextCommonMock,
+        pageId: "saml-post-form.ftl",
+        "samlPost": {
+            "url": ""
+        }
+    }),
+    id<KcContext.LoginPageExpired>({
+        ...kcContextCommonMock,
+        pageId: "login-page-expired.ftl"
     })
 ];
+
+{
+    type Got = (typeof kcContextMocks)[number]["pageId"];
+    type Expected = LoginThemePageId;
+
+    type OnlyInGot = Exclude<Got, Expected>;
+    type OnlyInExpected = Exclude<Expected, Got>;
+
+    assert<Equals<OnlyInGot, never>>();
+    assert<Equals<OnlyInExpected, never>>();
+}

src/login/pages/LoginVerifyEmail.tsx

@@ -11,7 +11,7 @@ export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { p
 
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("emailVerifyTitle")}>
-            <p className="instruction">{msg("emailVerifyInstruction1", user?.email)}</p>
+            <p className="instruction">{msg("emailVerifyInstruction1", user?.email ?? "")}</p>
             <p className="instruction">
                 {msg("emailVerifyInstruction2")}
                 <br />

src/login/pages/RegisterUserProfile.tsx

@@ -14,11 +14,13 @@ export default function RegisterUserProfile(props: PageProps<Extract<KcContext,
         classes
     });
 
-    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
+    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey, realm } = kcContext;
+
+    realm.registrationEmailAsUsername;
 
     const { msg, msgStr } = i18n;
 
-    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
 
     return (
         <Template
@@ -30,7 +32,7 @@ export default function RegisterUserProfile(props: PageProps<Extract<KcContext,
             <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
                 <UserProfileFormFields
                     kcContext={kcContext}
-                    onIsFormSubmittableValueChange={setIsFomSubmittable}
+                    onIsFormSubmittableValueChange={setIsFormSubmittable}
                     i18n={i18n}
                     getClassName={getClassName}
                 />
@@ -60,7 +62,7 @@ export default function RegisterUserProfile(props: PageProps<Extract<KcContext,
                             )}
                             type="submit"
                             value={msgStr("doRegister")}
-                            disabled={!isFomSubmittable}
+                            disabled={!isFormSubmittable}
                         />
                     </div>
                 </div>

src/login/pages/SamlPostForm.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageId: "saml-post-form.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { msgStr, msg } = i18n;
+
+    const { samlPost } = kcContext;
+
+    const [htmlFormElement, setHtmlFormElement] = useState<HTMLFormElement | null>(null);
+
+    useEffect(() => {
+        if (htmlFormElement === null) {
+            return;
+        }
+
+        // Storybook
+        if (samlPost.url === "") {
+            alert("In a real Keycloak the user would be redirected immediately");
+            return;
+        }
+
+        htmlFormElement.submit();
+    }, [htmlFormElement]);
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("saml.post-form.title")}>
+            <p>{msg("saml.post-form.message")}</p>
+            <form name="saml-post-binding" method="post" action={samlPost.url} ref={setHtmlFormElement}>
+                {samlPost.SAMLRequest && <input type="hidden" name="SAMLRequest" value={samlPost.SAMLRequest} />}
+                {samlPost.SAMLResponse && <input type="hidden" name="SAMLResponse" value={samlPost.SAMLResponse} />}
+                {samlPost.relayState && <input type="hidden" name="RelayState" value={samlPost.relayState} />}
+                <noscript>
+                    <p>{msg("saml.post-form.js-disabled")}</p>
+                    <input type="submit" value={msgStr("doContinue")} />
+                </noscript>
+            </form>
+        </Template>
+    );
+}

src/login/pages/WebauthnAuthenticate.tsx

@@ -7,6 +7,9 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
+import { typeGuard } from "tsafe/typeGuard";
 
 export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -21,10 +24,24 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
     const createTimeout = Number(kcContext.createTimeout);
     const isUserIdentified = kcContext.isUserIdentified == "true";
 
+    const formElementRef = useRef<HTMLFormElement>(null);
+
     const webAuthnAuthenticate = useConstCallback(async () => {
         if (!isUserIdentified) {
             return;
         }
+
+        const submitForm = async (): Promise<void> => {
+            const formElement = formElementRef.current;
+
+            if (formElement === null) {
+                await new Promise(resolve => setTimeout(resolve, 100));
+                return submitForm();
+            }
+
+            formElement.submit();
+        };
+
         const allowCredentials = authenticators.authenticators.map(
             authenticator =>
                 ({
@@ -57,30 +74,36 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
         }
 
         try {
-            const resultRaw = await navigator.credentials.get({ publicKey });
-            if (!resultRaw || resultRaw.type != "public-key") return;
-            const result = resultRaw as PublicKeyCredential;
-            if (!("authenticatorData" in result.response)) return;
-            const response = result.response as AuthenticatorAssertionResponse;
+            const result = await navigator.credentials.get({ publicKey });
+            if (!result || result.type != "public-key") {
+                return;
+            }
+            assert(is<PublicKeyCredential>(result));
+            if (!("authenticatorData" in result.response)) {
+                return;
+            }
+            const response = result.response;
+
             const clientDataJSON = response.clientDataJSON;
+
+            assert(
+                typeGuard<AuthenticatorAssertionResponse>(response, "signature" in response && response.authenticatorData instanceof ArrayBuffer),
+                "response not an AuthenticatorAssertionResponse"
+            );
+
             const authenticatorData = response.authenticatorData;
             const signature = response.signature;
 
-            setClientDataJSON(base64url.stringify(new Uint8Array(clientDataJSON), { pad: false }));
-            setAuthenticatorData(base64url.stringify(new Uint8Array(authenticatorData), { pad: false }));
-            setSignature(base64url.stringify(new Uint8Array(signature), { pad: false }));
+            setClientDataJSON(base64url.stringify(new Uint8Array(clientDataJSON), { "pad": false }));
+            setAuthenticatorData(base64url.stringify(new Uint8Array(authenticatorData), { "pad": false }));
+            setSignature(base64url.stringify(new Uint8Array(signature), { "pad": false }));
             setCredentialId(result.id);
-            setUserHandle(base64url.stringify(new Uint8Array(response.userHandle!), { pad: false }));
-            submitForm();
+            setUserHandle(base64url.stringify(new Uint8Array(response.userHandle!), { "pad": false }));
         } catch (err) {
             setError(String(err));
-            submitForm();
         }
-    });
 
-    const webAuthForm = useRef<HTMLFormElement>(null);
-    const submitForm = useConstCallback(() => {
-        webAuthForm.current!.submit();
+        submitForm();
     });
 
     const [clientDataJSON, setClientDataJSON] = useState("");
@@ -93,7 +116,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("webauthn-login-title")}>
             <div id="kc-form-webauthn" className={getClassName("kcFormClass")}>
-                <form id="webauth" action={url.loginAction} ref={webAuthForm} method="post">
+                <form id="webauth" action={url.loginAction} ref={formElementRef} method="post">
                     <input type="hidden" id="clientDataJSON" name="clientDataJSON" value={clientDataJSON} />
                     <input type="hidden" id="authenticatorData" name="authenticatorData" value={authenticatorData} />
                     <input type="hidden" id="signature" name="signature" value={signature} />

stories/login/pages/SamlPostForm.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import type { ComponentMeta } from "@storybook/react";
+import { createPageStory } from "../createPageStory";
+
+const pageId = "saml-post-form.ftl";
+
+const { PageStory } = createPageStory({ pageId });
+
+const meta: ComponentMeta<any> = {
+    title: `login/${pageId}`,
+    component: PageStory,
+    parameters: {
+        viewMode: "story",
+        previewTabs: {
+            "storybook/docs/panel": {
+                "hidden": true
+            }
+        }
+    }
+};
+
+export default meta;
+
+export const Default = () => <PageStory />;

test/bin/jar.spec.ts

@@ -3,7 +3,7 @@ import { fromBuffer, Entry, ZipFile } from "yauzl";
 import { it, describe, assert, afterAll } from "vitest";
 import { Readable } from "stream";
 import { tmpdir } from "os";
-import { mkdtemp, cp, mkdir, rm } from "fs/promises";
+import { mkdtemp, cp, mkdir, rm, writeFile } from "fs/promises";
 import path from "path";
 import { createReadStream } from "fs";
 import walk from "keycloakify/bin/tools/walk";
@@ -98,12 +98,17 @@ describe("jar", () => {
 
     it("creates a jar from _real_ files without error", async () => {
         const tmp = await mkdtemp(path.join(tmpdir(), "kc-jar-test-"));
-        tmpDirs.push(tmp);
-        const rootPath = path.join(tmp, "src");
-        const targetPath = path.join(tmp, "jar.jar");
-        await mkdir(rootPath);
 
-        await cp(path.dirname(__dirname), rootPath, { recursive: true });
+        tmpDirs.push(tmp);
+
+        const rootPath = path.join(tmp, "root");
+        const resourcesPath = path.join(tmp, "root", "src", "main", "resources");
+        const targetPath = path.join(tmp, "jar.jar");
+
+        await mkdir(resourcesPath, { recursive: true });
+        await writeFile(path.join(rootPath, "pom.xml"), "foo", "utf-8");
+
+        await cp(path.dirname(__dirname), resourcesPath, { recursive: true });
 
         await jar({ ...coords, rootPath, targetPath });
 
@@ -114,11 +119,12 @@ describe("jar", () => {
 
         assert.isOk(entries.has("META-INF/MANIFEST.MF"));
         assert.isOk(entries.has("META-INF/maven/someGroupId/someArtifactId/pom.properties"));
+        assert.isOk(entries.has("META-INF/maven/someGroupId/someArtifactId/pom.xml"));
 
-        for await (const fsPath of walk(rootPath)) {
+        for await (const fsPath of walk(resourcesPath)) {
             if (!fsPath.endsWith(path.sep)) {
-                const rel = path.relative(rootPath, fsPath).replace(path.sep === "/" ? /\//g : /\\/g, "/");
-                assert.isOk(zipPaths.includes(rel), `missing ${rel} (${rel}, ${zipPaths.join(", ")})`);
+                const rel = path.relative(resourcesPath, fsPath).replace(path.sep === "/" ? /\//g : /\\/g, "/");
+                assert.isOk(zipPaths.includes(rel), `missing '${rel}' (${rel}, '${zipPaths.join("', '")}')`);
             }
         }
     });