Bump version

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,13 +35,19 @@
 </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://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github) provides the following services:
@@ -98,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>
@@ -109,6 +117,15 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 # Changelog highlights
 
+## 7.13
+
+-   Deprecate `customUserAttribute`, Keycloakify now analyze your code to predict field name usage. [See doc](https://docs.keycloakify.dev/build-options#customuserattributes).
+
+## 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.  

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "7.11.5",
+    "version": "7.13.0",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",
@@ -10,8 +10,7 @@
     "types": "dist/index.d.ts",
     "scripts": {
         "prepare": "yarn generate-i18n-messages",
-        "build": "rimraf dist/ && tsc -p src/bin && tsc -p src && tsc-alias -p src/tsconfig.json && yarn grant-exec-perms && yarn copy-files dist/",
-        "watch-in-starter": "yarn build && yarn link-in-starter && (concurrently \"tsc -p src -w\" \"tsc-alias -p src/tsconfig.json\" \"tsc -p src/bin -w\")",
+        "build": "rimraf dist/ && tsc -p src/bin && tsc -p src && tsc-alias -p src/tsconfig.json && yarn grant-exec-perms && yarn copy-files dist/ && cp -r src dist/",
         "generate:json-schema": "ts-node scripts/generate-json-schema.ts",
         "grant-exec-perms": "node dist/bin/tools/grant-exec-perms.js",
         "copy-files": "copyfiles -u 1 src/**/*.ftl",
@@ -24,6 +23,7 @@
         "generate-i18n-messages": "ts-node --skipProject scripts/generate-i18n-messages.ts",
         "link-in-app": "ts-node --skipProject scripts/link-in-app.ts",
         "link-in-starter": "yarn link-in-app keycloakify-starter",
+        "watch-in-starter": "yarn build && yarn link-in-starter && (concurrently \"tsc -p src -w\" \"tsc-alias -p src/tsconfig.json\" \"tsc -p src/bin -w\")",
         "copy-keycloak-resources-to-storybook-static": "PUBLIC_DIR_PATH=.storybook/static node dist/bin/copy-keycloak-resources-to-public.js",
         "storybook": "yarn build && yarn copy-keycloak-resources-to-storybook-static && start-storybook -p 6006",
         "build-storybook": "yarn build && yarn copy-keycloak-resources-to-storybook-static && build-storybook"

src/account/kcContext/KcContext.ts

@@ -8,6 +8,7 @@ export declare namespace KcContext {
     export type Common = {
         keycloakifyVersion: string;
         themeType: "account";
+        themeName: string;
         locale?: {
             supported: {
                 url: string;
@@ -51,9 +52,34 @@ export declare namespace KcContext {
             name: string; // Client id
         };
         messagesPerField: {
-            printIfExists: <T>(fieldName: string, x: T) => T | undefined;
+            /**
+             * Return text if message for given field exists. Useful eg. to add css styles for fields with message.
+             *
+             * @param fieldName to check for
+             * @param text to return
+             * @return text if message exists for given field, else undefined
+             */
+            printIfExists: <T extends string>(fieldName: string, text: T) => T | undefined;
+            /**
+             * Check if exists error message for given fields
+             *
+             * @param fields
+             * @return boolean
+             */
             existsError: (fieldName: string) => boolean;
+            /**
+             * Get message for given field.
+             *
+             * @param fieldName
+             * @return message text or empty string
+             */
             get: (fieldName: string) => string;
+            /**
+             * Check if message for given field exists
+             *
+             * @param field
+             * @return boolean
+             */
             exists: (fieldName: string) => boolean;
         };
         account: {

src/account/kcContext/kcContextMocks.ts

@@ -9,6 +9,7 @@ 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/bin/getSrcDirPath.ts

@@ -31,13 +31,3 @@ export function getThemeSrcDirPath(params: { projectDirPath: string }) {
 
     return { themeSrcDirPath };
 }
-
-export function getEmailThemeSrcDirPath(params: { projectDirPath: string }) {
-    const { projectDirPath } = params;
-
-    const { themeSrcDirPath } = getThemeSrcDirPath({ projectDirPath });
-
-    const emailThemeSrcDirPath = themeSrcDirPath === undefined ? undefined : pathJoin(themeSrcDirPath, "email");
-
-    return { emailThemeSrcDirPath };
-}

src/bin/initialize-email-theme.ts

@@ -7,7 +7,7 @@ import { promptKeycloakVersion } from "./promptKeycloakVersion";
 import { readBuildOptions } from "./keycloakify/BuildOptions";
 import * as fs from "fs";
 import { getLogger } from "./tools/logger";
-import { getEmailThemeSrcDirPath } from "./getSrcDirPath";
+import { getThemeSrcDirPath } from "./getSrcDirPath";
 
 export async function main() {
     const { isSilent } = readBuildOptions({
@@ -17,16 +17,18 @@ export async function main() {
 
     const logger = getLogger({ isSilent });
 
-    const { emailThemeSrcDirPath } = getEmailThemeSrcDirPath({
+    const { themeSrcDirPath } = getThemeSrcDirPath({
         "projectDirPath": process.cwd()
     });
 
-    if (emailThemeSrcDirPath === undefined) {
+    if (themeSrcDirPath === undefined) {
         logger.warn("Couldn't locate your theme source directory");
 
         process.exit(-1);
     }
 
+    const emailThemeSrcDirPath = pathJoin(themeSrcDirPath, "email");
+
     if (fs.existsSync(emailThemeSrcDirPath)) {
         logger.warn(`There is already a ${pathRelative(process.cwd(), emailThemeSrcDirPath)} directory in your project. Aborting.`);
 

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[];
@@ -27,7 +28,6 @@ export namespace BuildOptions {
         reactAppBuildDirPath: string;
         /** Directory that keycloakify outputs to. Defaults to {cwd}/build_keycloak */
         keycloakifyBuildDirPath: string;
-        customUserAttributes: string[];
     };
 
     export type Standalone = Common & {
@@ -108,8 +108,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 +129,7 @@ export function readBuildOptions(params: { projectDirPath: string; processArgv:
 
         return {
             themeName,
+            extraThemeNames,
             "bundler": (() => {
                 const { KEYCLOAKIFY_BUNDLER } = process.env;
 
@@ -188,8 +198,7 @@ export function readBuildOptions(params: { projectDirPath: string; processArgv:
                 }
 
                 return keycloakifyBuildDirPath;
-            })(),
-            "customUserAttributes": keycloakify.customUserAttributes ?? []
+            })()
         };
     })();
 

src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -8,13 +8,7 @@
     out["advancedMsg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
 
     out["messagesPerField"]= {
-        <#assign fieldNames = [
-            "global", "userLabel", "username", "email", "firstName", "lastName", "password", "password-confirm",
-            "totp", "totpSecret", "SAMLRequest", "SAMLResponse", "relayState", "device_user_code", "code", 
-            "password-new", "rememberMe", "login", "authenticationExecution", "cancel-aia", "clientDataJSON", 
-            "authenticatorData", "signature", "credentialId", "userHandle", "error", "authn_use_chk", "authenticationExecution", 
-            "isSetRetry", "try-again", "attestationObject", "publicKeyCredentialId", "authenticatorLabel"CUSTOM_USER_ATTRIBUTES_eKsIY4ZsZ4xeM
-        ]>
+        <#assign fieldNames = [ FIELD_NAMES_eKsIY4ZsZ4xeM ]>
     
         <#attempt>
             <#if profile?? && profile.attributes?? && profile.attributes?is_enumerable>
@@ -28,85 +22,371 @@
         <#recover>
         </#attempt>
     
-        "printIfExists": function (fieldName, x) {
-            <#if !messagesPerField?? >
-                return undefined;
-            <#else>
-                <#list fieldNames as fieldName>
-                    if(fieldName === "${fieldName}" ){
-                        <#attempt>
-                            <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
-                                return <#if messagesPerField.existsError('username', 'password')>x<#else>undefined</#if>;
-                            <#else>
-                                return <#if messagesPerField.existsError('${fieldName}')>x<#else>undefined</#if>;
-                            </#if>
-                        <#recover>
-                        </#attempt>
-                    }
-                </#list>
-                throw new Error("There is no " + fieldName + " field");
+        "printIfExists": function (fieldName, text) {
+
+            <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+                throw new Error("You're not supposed to use messagesPerField.printIfExists in this page");
             </#if>
+
+            <#list fieldNames as fieldName>
+                if(fieldName === "${fieldName}" ){
+
+                    <#-- https://github.com/keycloakify/keycloakify/pull/359 Compat with Keycloak prior v12 -->
+                    <#if !messagesPerField.existsError??>
+
+                        <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                        <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
+
+                            <#assign doExistMessageForUsernameOrPassword = "">
+
+                            <#attempt>
+                                <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('username')>
+                            <#recover>
+                                <#assign doExistMessageForUsernameOrPassword = true>
+                            </#attempt>
+
+                            <#if !doExistMessageForUsernameOrPassword>
+                                <#attempt>
+                                    <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('password')>
+                                <#recover>
+                                    <#assign doExistMessageForUsernameOrPassword = true>
+                                </#attempt>
+                            </#if>
+
+                            return <#if doExistMessageForUsernameOrPassword>text<#else>undefined</#if>;
+
+                        <#else>
+
+                            <#assign doExistMessageForField = "">
+
+                            <#attempt>
+                                <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
+                            <#recover>
+                                <#assign doExistMessageForField = true>
+                            </#attempt>
+
+                            return <#if doExistMessageForField>text<#else>undefined</#if>;
+
+                        </#if>
+
+                    <#else>
+
+                        <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                        <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
+
+                            <#assign doExistErrorOnUsernameOrPassword = "">
+
+                            <#attempt>
+                                <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                            <#recover>
+                                <#assign doExistErrorOnUsernameOrPassword = true>
+                            </#attempt>
+
+                            <#if doExistErrorOnUsernameOrPassword>
+                                return text;
+                            <#else>
+
+                                <#assign doExistMessageForField = "">
+
+                                <#attempt>
+                                    <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
+                                <#recover>
+                                    <#assign doExistMessageForField = true>
+                                </#attempt>
+
+                                return <#if doExistMessageForField>text<#else>undefined</#if>;
+
+                            </#if>
+
+                        <#else>
+
+                            <#assign doExistMessageForField = "">
+
+                            <#attempt>
+                                <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
+                            <#recover>
+                                <#assign doExistMessageForField = true>
+                            </#attempt>
+
+                            return <#if doExistMessageForField>text<#else>undefined</#if>;
+
+                        </#if>
+
+                    </#if>
+
+                }
+            </#list>
+
+            throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
         },
         "existsError": function (fieldName) {
-            <#if !messagesPerField?? >
-                return false;
-            <#else>
-                <#list fieldNames as fieldName>
-                    if(fieldName === "${fieldName}" ){
-                        <#attempt>
-                            <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
-                                return <#if messagesPerField.existsError('username', 'password')>true<#else>false</#if>;
-                            <#else>
-                                return <#if messagesPerField.existsError('${fieldName}')>true<#else>false</#if>;
-                            </#if>
-                        <#recover>
-                        </#attempt>
-                    }
-                </#list>
-                throw new Error("There is no " + fieldName + " field");
+
+            <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+                throw new Error("You're not supposed to use messagesPerField.printIfExists in this page");
             </#if>
+
+            <#list fieldNames as fieldName>
+                if(fieldName === "${fieldName}" ){
+
+                    <#-- https://github.com/keycloakify/keycloakify/pull/359 Compat with Keycloak prior v12 -->
+                    <#if !messagesPerField.existsError??>
+
+                        <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                        <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
+
+                            <#assign doExistMessageForUsernameOrPassword = "">
+
+                            <#attempt>
+                                <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('username')>
+                            <#recover>
+                                <#assign doExistMessageForUsernameOrPassword = true>
+                            </#attempt>
+
+                            <#if !doExistMessageForUsernameOrPassword>
+                                <#attempt>
+                                    <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('password')>
+                                <#recover>
+                                    <#assign doExistMessageForUsernameOrPassword = true>
+                                </#attempt>
+                            </#if>
+
+                            return <#if doExistMessageForUsernameOrPassword>true<#else>false</#if>;
+
+                        <#else>
+
+                            <#assign doExistMessageForField = "">
+
+                            <#attempt>
+                                <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
+                            <#recover>
+                                <#assign doExistMessageForField = true>
+                            </#attempt>
+
+                            return <#if doExistMessageForField>true<#else>false</#if>;
+
+                        </#if>
+
+                    <#else>
+
+                        <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                        <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
+
+                            <#assign doExistErrorOnUsernameOrPassword = "">
+
+                            <#attempt>
+                                <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                            <#recover>
+                                <#assign doExistErrorOnUsernameOrPassword = true>
+                            </#attempt>
+
+                            return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
+
+                        <#else>
+
+                            <#assign doExistErrorMessageForField = "">
+
+                            <#attempt>
+                                <#assign doExistErrorMessageForField = messagesPerField.existsError('${fieldName}')>
+                            <#recover>
+                                <#assign doExistErrorMessageForField = true>
+                            </#attempt>
+
+                            return <#if doExistErrorMessageForField>true<#else>false</#if>;
+
+                        </#if>
+
+                    </#if>
+
+                }
+            </#list>
+
+            throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
+
         },
         "get": function (fieldName) {
-            <#if !messagesPerField?? >
-                return '';
-            <#else>
-                <#list fieldNames as fieldName>
-                    if(fieldName === "${fieldName}" ){
-                        <#attempt>
-                            <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
-                                <#if messagesPerField.existsError('username', 'password')>
-                                    return 'Invalid username or password.';
-                                </#if>
-                            <#else>
-                                <#if messagesPerField.existsError('${fieldName}')>
-                                    return "${messagesPerField.get('${fieldName}')?no_esc}";
-                                </#if>
-                            </#if>
-                        <#recover>
-                        </#attempt>
-                    }
-                </#list>
-                throw new Error("There is no " + fieldName + " field");
+
+
+            <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+                throw new Error("You're not supposed to use messagesPerField.get in this page");
             </#if>
+
+            <#list fieldNames as fieldName>
+                if(fieldName === "${fieldName}" ){
+
+                    <#-- https://github.com/keycloakify/keycloakify/pull/359 Compat with Keycloak prior v12 -->
+                    <#if !messagesPerField.existsError??>
+
+                        <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                        <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
+
+                            <#assign doExistMessageForUsernameOrPassword = "">
+
+                            <#attempt>
+                                <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('username')>
+                            <#recover>
+                                <#assign doExistMessageForUsernameOrPassword = true>
+                            </#attempt>
+
+                            <#if !doExistMessageForUsernameOrPassword>
+                                <#attempt>
+                                    <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('password')>
+                                <#recover>
+                                    <#assign doExistMessageForUsernameOrPassword = true>
+                                </#attempt>
+                            </#if>
+
+                            <#if !doExistMessageForUsernameOrPassword>
+                                return "";
+                            <#else>
+                                <#attempt>
+                                    return "${kcSanitize(msg('invalidUserMessage'))?no_esc}";
+                                <#recover>
+                                    return "Invalid username or password.";
+                                </#attempt>
+                            </#if>
+
+                        <#else>
+
+                            <#attempt>
+                                return "${messagesPerField.get('${fieldName}')?no_esc}";
+                            <#recover>
+                                return "invalid field";
+                            </#attempt>
+
+                        </#if>
+
+                    <#else>
+
+                        <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                        <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
+
+                            <#assign doExistErrorOnUsernameOrPassword = "">
+
+                            <#attempt>
+                                <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                            <#recover>
+                                <#assign doExistErrorOnUsernameOrPassword = true>
+                            </#attempt>
+
+                            <#if doExistErrorOnUsernameOrPassword>
+
+                                <#attempt>
+                                    return "${kcSanitize(msg('invalidUserMessage'))?no_esc}";
+                                <#recover>
+                                    return "Invalid username or password.";
+                                </#attempt>
+
+                            <#else>
+
+                                <#attempt>
+                                    return "${messagesPerField.get('${fieldName}')?no_esc}";
+                                <#recover>
+                                    return "";
+                                </#attempt>
+
+                            </#if>
+
+                        <#else>
+
+                            <#attempt>
+                                return "${messagesPerField.get('${fieldName}')?no_esc}";
+                            <#recover>
+                                return "invalid field";
+                            </#attempt>
+
+                        </#if>
+
+                    </#if>
+
+                }
+            </#list>
+
+            throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
+
         },
         "exists": function (fieldName) {
-            <#if !messagesPerField?? >
-                return false;
-            <#else>
-                <#list fieldNames as fieldName>
-                    if(fieldName === "${fieldName}" ){
-                        <#attempt>
-                            <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
-                                return <#if messagesPerField.exists('username') ||  messagesPerField.exists('password')>true<#else>false</#if>;
-                            <#else>
-                                return <#if messagesPerField.exists('${fieldName}')>true<#else>false</#if>;
-                            </#if>
-                        <#recover>
-                        </#attempt>
-                    }
-                </#list>
-                throw new Error("There is no " + fieldName + " field");
+
+            <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+                throw new Error("You're not supposed to use messagesPerField.exists in this page");
             </#if>
+
+            <#list fieldNames as fieldName>
+                if(fieldName === "${fieldName}" ){
+
+                    <#-- https://github.com/keycloakify/keycloakify/pull/359 Compat with Keycloak prior v12 -->
+                    <#if !messagesPerField.existsError??>
+
+                        <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                        <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
+
+                            <#assign doExistMessageForUsernameOrPassword = "">
+
+                            <#attempt>
+                                <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('username')>
+                            <#recover>
+                                <#assign doExistMessageForUsernameOrPassword = true>
+                            </#attempt>
+
+                            <#if !doExistMessageForUsernameOrPassword>
+                                <#attempt>
+                                    <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('password')>
+                                <#recover>
+                                    <#assign doExistMessageForUsernameOrPassword = true>
+                                </#attempt>
+                            </#if>
+
+                            return <#if doExistMessageForUsernameOrPassword>true<#else>false</#if>;
+
+                        <#else>
+
+                            <#assign doExistMessageForField = "">
+
+                            <#attempt>
+                                <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
+                            <#recover>
+                                <#assign doExistMessageForField = true>
+                            </#attempt>
+
+                            return <#if doExistMessageForField>true<#else>false</#if>;
+
+                        </#if>
+
+                    <#else>
+
+                        <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                        <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
+
+                            <#assign doExistErrorOnUsernameOrPassword = "">
+
+                            <#attempt>
+                                <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                            <#recover>
+                                <#assign doExistErrorOnUsernameOrPassword = true>
+                            </#attempt>
+
+                            return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
+
+                        <#else>
+
+                            <#assign doExistErrorMessageForField = "">
+
+                            <#attempt>
+                                <#assign doExistErrorMessageForField = messagesPerField.exists('${fieldName}')>
+                            <#recover>
+                                <#assign doExistErrorMessageForField = true>
+                            </#attempt>
+
+                            return <#if doExistErrorMessageForField>true<#else>false</#if>;
+
+                        </#if>
+
+                    </#if>
+
+                }
+            </#list>
+
+            throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
+
         }
     };
 
@@ -122,6 +402,7 @@
     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;
@@ -170,10 +451,15 @@
                         <#-- https://github.com/keycloakify/keycloakify/pull/65#issuecomment-991896344 (reports with saml-post-form.ftl) -->
                         <#-- https://github.com/keycloakify/keycloakify/issues/91#issue-1212319466 (reports with error.ftl and Kc18) -->
                         <#-- https://github.com/keycloakify/keycloakify/issues/109#issuecomment-1134610163 -->
+                        <#-- https://github.com/keycloakify/keycloakify/issues/357 -->
                         key == "loginAction" && 
                         are_same_path(path, ["url"]) && 
-                        ["saml-post-form.ftl", "error.ftl", "info.ftl"]?seq_contains(pageId) &&
+                        ["saml-post-form.ftl", "error.ftl", "info.ftl", "login-oauth-grant.ftl"]?seq_contains(pageId) &&
                         !(auth?has_content && auth.showTryAnotherWayLink())
+                    ) || (
+                        <#-- https://github.com/keycloakify/keycloakify/issues/362 -->
+                        ["secretData", "value"]?seq_contains(key) && 
+                        are_same_path(path, [ "totp", "otpCredentials", "*" ])
                     ) || (
                         ["contextData", "idpConfig", "idp", "authenticationSession"]?seq_contains(key) &&
                         are_same_path(path, ["brokerContext"]) &&
@@ -337,6 +623,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,7 +17,7 @@ export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.Ex
 
 export namespace BuildOptionsLike {
     export type Common = {
-        customUserAttributes: string[];
+        themeName: string;
         themeVersion: string;
     };
 
@@ -56,8 +56,9 @@ export function generateFtlFilesCodeFactory(params: {
     buildOptions: BuildOptionsLike;
     keycloakifyVersion: string;
     themeType: ThemeType;
+    fieldNames: string[];
 }) {
-    const { cssGlobalsToDefine, indexHtmlCode, buildOptions, keycloakifyVersion, themeType } = params;
+    const { cssGlobalsToDefine, indexHtmlCode, buildOptions, keycloakifyVersion, themeType, fieldNames } = params;
 
     const $ = cheerio.load(indexHtmlCode);
 
@@ -128,13 +129,11 @@ export function generateFtlFilesCodeFactory(params: {
             .readFileSync(pathJoin(__dirname, "ftl_object_to_js_code_declaring_an_object.ftl"))
             .toString("utf8")
             .match(/^<script>const _=((?:.|\n)+)<\/script>[\n]?$/)![1]
-            .replace(
-                "CUSTOM_USER_ATTRIBUTES_eKsIY4ZsZ4xeM",
-                buildOptions.customUserAttributes.length === 0 ? "" : ", " + buildOptions.customUserAttributes.map(name => `"${name}"`).join(", ")
-            )
+            .replace("FIELD_NAMES_eKsIY4ZsZ4xeM", fieldNames.map(name => `"${name}"`).join(", "))
             .replace("KEYCLOAKIFY_VERSION_xEdKd3xEdr", keycloakifyVersion)
             .replace("KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx", buildOptions.themeVersion)
-            .replace("KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr", themeType),
+            .replace("KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr", themeType)
+            .replace("KEYCLOAKIFY_THEME_NAME_cXxKd3xEer", buildOptions.themeName),
         "<!-- xIdLqMeOedErIdLsPdNdI9dSlxI -->": [
             "<#if scripts??>",
             "    <#list scripts as script>",

src/bin/keycloakify/generateJavaStackFiles.ts

@@ -1,12 +1,13 @@
 import * as fs from "fs";
 import { join as pathJoin, dirname as pathDirname } from "path";
-import { themeTypes } from "./generateFtl/generateFtl";
 import { assert } from "tsafe/assert";
 import { Reflect } from "tsafe/Reflect";
 import type { BuildOptions } from "./BuildOptions";
+import type { ThemeType } from "./generateFtl";
 
 export type BuildOptionsLike = {
     themeName: string;
+    extraThemeNames: string[];
     groupId: string;
     artifactId?: string;
     themeVersion: string;
@@ -20,15 +21,15 @@ export type BuildOptionsLike = {
 
 export function generateJavaStackFiles(params: {
     keycloakThemeBuildingDirPath: string;
-    doBundlesEmailTemplate: boolean;
+    implementedThemeTypes: Record<ThemeType | "email", boolean>;
     buildOptions: BuildOptionsLike;
 }): {
     jarFilePath: string;
 } {
     const {
-        buildOptions: { groupId, themeName, themeVersion, artifactId },
+        buildOptions: { groupId, themeName, extraThemeNames, themeVersion, artifactId },
         keycloakThemeBuildingDirPath,
-        doBundlesEmailTemplate
+        implementedThemeTypes
     } = params;
 
     {
@@ -67,12 +68,12 @@ export function generateJavaStackFiles(params: {
             Buffer.from(
                 JSON.stringify(
                     {
-                        "themes": [
-                            {
-                                "name": themeName,
-                                "types": [...themeTypes, ...(doBundlesEmailTemplate ? ["email"] : [])]
-                            }
-                        ]
+                        "themes": [themeName, ...extraThemeNames].map(themeName => ({
+                            "name": themeName,
+                            "types": Object.entries(implementedThemeTypes)
+                                .filter(([, isImplemented]) => isImplemented)
+                                .map(([themeType]) => themeType)
+                        }))
                     },
                     null,
                     2

src/bin/keycloakify/generateStartKeycloakTestingContainer.ts

@@ -6,6 +6,7 @@ import type { BuildOptions } from "./BuildOptions";
 
 export type BuildOptionsLike = {
     themeName: string;
+    extraThemeNames: string[];
 };
 
 {
@@ -27,14 +28,11 @@ 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),
-
         Buffer.from(
             [
                 "#!/usr/bin/env bash",
@@ -49,7 +47,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

@@ -9,6 +9,7 @@ import { isInside } from "../../tools/isInside";
 import type { BuildOptions } from "../BuildOptions";
 import { assert } from "tsafe/assert";
 import { downloadKeycloakStaticResources } from "./downloadKeycloakStaticResources";
+import { readFieldNameUsage } from "./readFieldNameUsage";
 
 export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.ExternalAssets;
 
@@ -19,7 +20,6 @@ export namespace BuildOptionsLike {
         extraAccountPages?: string[];
         extraThemeProperties?: string[];
         isSilent: boolean;
-        customUserAttributes: string[];
         themeVersion: string;
         keycloakVersionDefaultAssets: string;
     };
@@ -53,11 +53,12 @@ assert<BuildOptions extends BuildOptionsLike ? true : false>();
 export async function generateTheme(params: {
     reactAppBuildDirPath: string;
     keycloakThemeBuildingDirPath: string;
-    emailThemeSrcDirPath: string | undefined;
+    themeSrcDirPath: string | undefined;
+    keycloakifySrcDirPath: string;
     buildOptions: BuildOptionsLike;
     keycloakifyVersion: string;
-}): Promise<{ doBundlesEmailTemplate: boolean }> {
-    const { reactAppBuildDirPath, keycloakThemeBuildingDirPath, emailThemeSrcDirPath, buildOptions, keycloakifyVersion } = params;
+}): Promise<void> {
+    const { reactAppBuildDirPath, keycloakThemeBuildingDirPath, themeSrcDirPath, keycloakifySrcDirPath, buildOptions, keycloakifyVersion } = params;
 
     const getThemeDirPath = (themeType: ThemeType | "email") =>
         pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", buildOptions.themeName, themeType);
@@ -142,7 +143,12 @@ export async function generateTheme(params: {
                 "cssGlobalsToDefine": allCssGlobalsToDefine,
                 buildOptions,
                 keycloakifyVersion,
-                themeType
+                themeType,
+                "fieldNames": readFieldNameUsage({
+                    keycloakifySrcDirPath,
+                    themeSrcDirPath,
+                    themeType
+                })
             });
 
             return generateFtlFilesCode;
@@ -220,21 +226,20 @@ export async function generateTheme(params: {
         );
     }
 
-    let doBundlesEmailTemplate: boolean;
-
     email: {
-        if (emailThemeSrcDirPath === undefined) {
-            doBundlesEmailTemplate = false;
+        if (themeSrcDirPath === undefined) {
             break email;
         }
 
-        doBundlesEmailTemplate = true;
+        const emailThemeSrcDirPath = pathJoin(themeSrcDirPath, "email");
+
+        if (!fs.existsSync(emailThemeSrcDirPath)) {
+            break email;
+        }
 
         transformCodebase({
             "srcDirPath": emailThemeSrcDirPath,
             "destDirPath": getThemeDirPath("email")
         });
     }
-
-    return { doBundlesEmailTemplate };
 }

src/bin/keycloakify/generateTheme/readFieldNameUsage.ts

@@ -0,0 +1,96 @@
+import { crawl } from "../../tools/crawl";
+import { removeDuplicates } from "evt/tools/reducers/removeDuplicates";
+import { join as pathJoin } from "path";
+import * as fs from "fs";
+import type { ThemeType } from "../generateFtl";
+import { exclude } from "tsafe/exclude";
+
+export function readFieldNameUsage(params: {
+    keycloakifySrcDirPath: string;
+    themeSrcDirPath: string | undefined;
+    themeType: ThemeType | "email";
+}): string[] {
+    const { keycloakifySrcDirPath, themeSrcDirPath, themeType } = params;
+
+    const fieldNames: string[] = [];
+
+    if (themeSrcDirPath === undefined) {
+        //If we can't detect the user theme directory we restore the fieldNames we had previously to prevent errors.
+        fieldNames.push(
+            ...[
+                "global",
+                "userLabel",
+                "username",
+                "email",
+                "firstName",
+                "lastName",
+                "password",
+                "password-confirm",
+                "totp",
+                "totpSecret",
+                "SAMLRequest",
+                "SAMLResponse",
+                "relayState",
+                "device_user_code",
+                "code",
+                "password-new",
+                "rememberMe",
+                "login",
+                "authenticationExecution",
+                "cancel-aia",
+                "clientDataJSON",
+                "authenticatorData",
+                "signature",
+                "credentialId",
+                "userHandle",
+                "error",
+                "authn_use_chk",
+                "authenticationExecution",
+                "isSetRetry",
+                "try-again",
+                "attestationObject",
+                "publicKeyCredentialId",
+                "authenticatorLabel"
+            ]
+        );
+    }
+
+    for (const srcDirPath of (
+        [
+            pathJoin(keycloakifySrcDirPath, themeType),
+            (() => {
+                if (themeSrcDirPath === undefined) {
+                    return undefined;
+                }
+
+                const srcDirPath = pathJoin(themeSrcDirPath, themeType);
+
+                if (!fs.existsSync(srcDirPath)) {
+                    return undefined;
+                }
+
+                return srcDirPath;
+            })()
+        ] as const
+    ).filter(exclude(undefined))) {
+        const filePaths = crawl(srcDirPath)
+            .filter(filePath => /\.(ts|tsx|js|jsx)$/.test(filePath))
+            .map(filePath => pathJoin(srcDirPath, filePath));
+
+        for (const filePath of filePaths) {
+            const rawSourceFile = fs.readFileSync(filePath).toString("utf8");
+
+            if (!rawSourceFile.includes("messagesPerField")) {
+                continue;
+            }
+
+            fieldNames.push(
+                ...Array.from(rawSourceFile.matchAll(/(?:(?:printIfExists)|(?:existsError)|(?:get)|(?:exists))\(["']([^"']+)["']/g), m => m[1])
+            );
+        }
+    }
+
+    const out = fieldNames.reduce(...removeDuplicates<string>());
+
+    return out;
+}

src/bin/keycloakify/keycloakify.ts

@@ -9,8 +9,9 @@ import { getLogger } from "../tools/logger";
 import jar from "../tools/jar";
 import { assert } from "tsafe/assert";
 import { Equals } from "tsafe";
-import { getEmailThemeSrcDirPath } from "../getSrcDirPath";
+import { getThemeSrcDirPath } from "../getSrcDirPath";
 import { getProjectRoot } from "../tools/getProjectRoot";
+import { objectKeys } from "tsafe/objectKeys";
 
 export async function main() {
     const projectDirPath = process.cwd();
@@ -23,31 +24,54 @@ 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 });
+    const keycloakifyDirPath = getProjectRoot();
 
-            if (emailThemeSrcDirPath === undefined || !fs.existsSync(emailThemeSrcDirPath)) {
-                return;
-            }
+    const { themeSrcDirPath } = getThemeSrcDirPath({ projectDirPath });
 
-            return emailThemeSrcDirPath;
-        })(),
-        "reactAppBuildDirPath": buildOptions.reactAppBuildDirPath,
-        buildOptions,
-        "keycloakifyVersion": (() => {
-            const version = JSON.parse(fs.readFileSync(pathJoin(getProjectRoot(), "package.json")).toString("utf8"))["version"];
+    for (const themeName of [buildOptions.themeName, ...buildOptions.extraThemeNames]) {
+        await generateTheme({
+            "keycloakThemeBuildingDirPath": buildOptions.keycloakifyBuildDirPath,
+            themeSrcDirPath,
+            "keycloakifySrcDirPath": pathJoin(keycloakifyDirPath, "src"),
+            "reactAppBuildDirPath": buildOptions.reactAppBuildDirPath,
+            "buildOptions": {
+                ...buildOptions,
+                "themeName": themeName
+            },
+            "keycloakifyVersion": (() => {
+                const version = JSON.parse(fs.readFileSync(pathJoin(keycloakifyDirPath, "package.json")).toString("utf8"))["version"];
 
-            assert(typeof version === "string");
+                assert(typeof version === "string");
 
-            return version;
-        })()
-    });
+                return version;
+            })()
+        });
+    }
 
     const { jarFilePath } = generateJavaStackFiles({
-        keycloakThemeBuildingDirPath: buildOptions.keycloakifyBuildDirPath,
-        doBundlesEmailTemplate,
+        "keycloakThemeBuildingDirPath": buildOptions.keycloakifyBuildDirPath,
+        "implementedThemeTypes": (() => {
+            const implementedThemeTypes = {
+                "login": false,
+                "account": false,
+                "email": false
+            };
+
+            if (themeSrcDirPath === undefined) {
+                implementedThemeTypes["login"] = true;
+                implementedThemeTypes["account"] = true;
+                return implementedThemeTypes;
+            }
+
+            for (const themeType of objectKeys(implementedThemeTypes)) {
+                if (!fs.existsSync(pathJoin(themeSrcDirPath, themeType))) {
+                    continue;
+                }
+                implementedThemeTypes[themeType] = true;
+            }
+
+            return implementedThemeTypes;
+        })(),
         buildOptions
     });
 

src/bin/keycloakify/parsedPackageJson.ts

@@ -23,8 +23,8 @@ export type ParsedPackageJson = {
         keycloakVersionDefaultAssets?: string;
         reactAppBuildDirPath?: string;
         keycloakifyBuildDirPath?: string;
-        customUserAttributes?: string[];
         themeName?: string;
+        extraThemeNames?: string[];
     };
 };
 
@@ -45,8 +45,8 @@ export const zParsedPackageJson = z.object({
             "keycloakVersionDefaultAssets": z.string().optional(),
             "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/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/kcContext/KcContext.ts

@@ -39,6 +39,7 @@ export declare namespace KcContext {
     export type Common = {
         keycloakifyVersion: string;
         themeType: "login";
+        themeName: string;
         url: {
             loginAction: string;
             resourcesPath: string;
@@ -80,9 +81,34 @@ export declare namespace KcContext {
         };
         isAppInitiatedAction: boolean;
         messagesPerField: {
-            printIfExists: <T>(fieldName: string, x: T) => T | undefined;
+            /**
+             * Return text if message for given field exists. Useful eg. to add css styles for fields with message.
+             *
+             * @param fieldName to check for
+             * @param text to return
+             * @return text if message exists for given field, else undefined
+             */
+            printIfExists: <T extends string>(fieldName: string, text: T) => T | undefined;
+            /**
+             * Check if exists error message for given fields
+             *
+             * @param fields
+             * @return boolean
+             */
             existsError: (fieldName: string) => boolean;
+            /**
+             * Get message for given field.
+             *
+             * @param fieldName
+             * @return message text or empty string
+             */
             get: (fieldName: string) => string;
+            /**
+             * Check if message for given field exists
+             *
+             * @param field
+             * @return boolean
+             */
             exists: (fieldName: string) => boolean;
         };
     };
@@ -93,7 +119,7 @@ export declare namespace KcContext {
             url: string;
             SAMLRequest?: string;
             SAMLResponse?: string;
-            RelayState?: string;
+            relayState?: string;
         };
     };
 

src/login/kcContext/kcContextMocks.ts

@@ -105,6 +105,7 @@ 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),
@@ -527,7 +528,7 @@ export const kcContextMocks = [
         ...kcContextCommonMock,
         pageId: "saml-post-form.ftl",
         "samlPost": {
-            "url": "https://saml-post-url"
+            "url": ""
         }
     }),
     id<KcContext.LoginPageExpired>({

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

@@ -20,7 +20,7 @@ export default function RegisterUserProfile(props: PageProps<Extract<KcContext,
 
     const { msg, msgStr } = i18n;
 
-    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
 
     return (
         <Template
@@ -32,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}
                 />
@@ -62,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

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
@@ -9,14 +10,28 @@ export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageI
 
     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")}>
-            <script dangerouslySetInnerHTML={{ "__html": `window.onload = function() {document.forms[0].submit()};` }} />
             <p>{msg("saml.post-form.message")}</p>
-            <form name="saml-post-binding" method="post" action={samlPost.url}>
+            <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} />}
+                {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")} />