Fix LoginPasskesConditionalAuthenticate

scripts/build/createPublicDotKeycloakifyDir.ts

@@ -68,27 +68,6 @@ export async function createPublicDotKeycloakifyDir() {
                     WELL_KNOWN_DIRECTORY_BASE_NAME.RESOURCES_COMMON
                 )
             });
-
-            copy_v24_js: {
-                if (themeType !== "login") {
-                    break copy_v24_js;
-                }
-
-                const { extractedDirPath } = await downloadKeycloakDefaultTheme({
-                    keycloakVersionId: "LAST_24"
-                });
-
-                transformCodebase({
-                    srcDirPath: pathJoin(
-                        extractedDirPath,
-                        "base",
-                        "login",
-                        "resources",
-                        "js"
-                    ),
-                    destDirPath: pathJoin(destDirPath, "js", "v24")
-                });
-            }
         })
     );
 }

scripts/shared/downloadKeycloakDefaultTheme.ts

@@ -7,8 +7,7 @@ import { assert, type Equals } from "tsafe/assert";
 
 const KEYCLOAK_VERSION = {
     FOR_LOGIN_THEME: "25.0.4",
-    FOR_ACCOUNT_MULTI_PAGE: "21.1.2",
+    FOR_ACCOUNT_MULTI_PAGE: "21.1.2"
-    LAST_24: "24.0.4"
 } as const;
 
 export async function downloadKeycloakDefaultTheme(params: {
@@ -73,15 +72,6 @@ export async function downloadKeycloakDefaultTheme(params: {
                         return;
                     }
 
-                    break;
-                case KEYCLOAK_VERSION.LAST_24:
-                    if (
-                        !fileRelativePath.startsWith(
-                            pathJoin("base", "login", "resources", "js")
-                        )
-                    ) {
-                        return;
-                    }
                     break;
                 default:
                     assert<Equals<typeof keycloakVersion, never>>(false);

src/login/KcContext/KcContext.ts

@@ -149,10 +149,6 @@ export declare namespace KcContext {
 
             getFirstError: (...fieldNames: string[]) => string;
         };
-        authenticationSession?: {
-            authSessionId: string;
-            tabId: string;
-        };
         properties: {};
         "x-keycloakify": {
             messages: Record<string, string>;
@@ -593,7 +589,7 @@ export declare namespace KcContext {
         challenge: string;
         userVerification: string;
         rpId: string;
-        createTimeout: number | string;
+        createTimeout: number;
 
         authenticators?: {
             authenticators: WebauthnAuthenticate.WebauthnAuthenticator[];

src/login/Template.tsx

@@ -4,9 +4,9 @@ import { clsx } from "keycloakify/tools/clsx";
 import type { TemplateProps } from "keycloakify/login/TemplateProps";
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import { useSetClassName } from "keycloakify/tools/useSetClassName";
+import { useStylesAndScripts } from "keycloakify/login/Template.useStylesAndScripts";
 import type { I18n } from "./i18n";
 import type { KcContext } from "./KcContext";
-import { useInitTemplate } from "keycloakify/login/useInitTemplate";
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
     const {
@@ -45,7 +45,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
         className: bodyClassName ?? kcClsx("kcBodyClass")
     });
 
-    const { isReadyToRender } = useInitTemplate({ kcContext, doUseDefaultCss });
+    const { isReadyToRender } = useStylesAndScripts({ kcContext, doUseDefaultCss });
 
     if (!isReadyToRender) {
         return null;

src/login/Template.useStylesAndScripts.ts

@@ -14,22 +14,18 @@ export type KcContextLike = {
         currentLanguageTag: string;
     };
     scripts: string[];
-    authenticationSession?: {
-        authSessionId: string;
-        tabId: string;
-    };
 };
 
 assert<keyof KcContextLike extends keyof KcContext ? true : false>();
 assert<KcContext extends KcContextLike ? true : false>();
 
-export function useInitTemplate(params: {
+export function useStylesAndScripts(params: {
     kcContext: KcContextLike;
     doUseDefaultCss: boolean;
 }) {
     const { kcContext, doUseDefaultCss } = params;
 
-    const { url, locale, scripts, authenticationSession } = kcContext;
+    const { url, locale, scripts } = kcContext;
 
     useEffect(() => {
         const { currentLanguageTag } = locale ?? {};
@@ -59,33 +55,32 @@ export function useInitTemplate(params: {
     const { insertScriptTags } = useInsertScriptTags({
         componentOrHookName: "Template",
         scriptTags: [
+            {
+                type: "importmap",
+                textContent: JSON.stringify({
+                    imports: {
+                        rfc4648: `${url.resourcesCommonPath}/node_modules/rfc4648/lib/rfc4648.js`
+                    }
+                })
+            },
             {
                 type: "module",
                 src: `${url.resourcesPath}/js/menu-button-links.js`
             },
-            ...(authenticationSession === undefined
+            ...scripts.map(src => ({
-                ? []
+                type: "text/javascript" as const,
-                : [
+                src
-                      {
+            })),
-                          type: "module",
+            {
-                          textContent: [
+                type: "module",
-                              `import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";`,
+                textContent: `
-                              ``,
+                    import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";
-                              `checkCookiesAndSetTimer(`,
+
-                              `  "${authenticationSession.authSessionId}",`,
+                    checkCookiesAndSetTimer(
-                              `  "${authenticationSession.tabId}",`,
+                        "${url.ssoLoginInOtherTabsUrl}"
-                              `  "${url.ssoLoginInOtherTabsUrl}"`,
+                    );
-                              `);`
+                `
-                          ].join("\n")
+            }
-                      } as const
-                  ]),
-            ...scripts.map(
-                script =>
-                    ({
-                        type: "text/javascript",
-                        src: script
-                    }) as const
-            )
         ]
     });
 

src/login/pages/LoginIdpLinkConfirmOverride.tsx

@@ -3,7 +3,6 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
-// NOTE: Added with Keycloak 25
 export default function LoginIdpLinkConfirmOverride(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-confirm-override.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 

src/login/pages/LoginPasskeysConditionalAuthenticate.tsx

@@ -1,33 +1,17 @@
-import { useEffect, Fragment } from "react";
+import { Fragment } from "react";
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
-import { assert } from "keycloakify/tools/assert";
+import { useScript } from "keycloakify/login/pages/LoginPasskeysConditionalAuthenticate.useScript";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
-// NOTE: From Keycloak 25.0.4
 export default function LoginPasskeysConditionalAuthenticate(
     props: PageProps<Extract<KcContext, { pageId: "login-passkeys-conditional-authenticate.ftl" }>, I18n>
 ) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const {
+    const { messagesPerField, login, url, usernameHidden, shouldDisplayAuthenticators, authenticators, registrationDisabled, realm } = kcContext;
-        messagesPerField,
-        login,
-        url,
-        usernameHidden,
-        shouldDisplayAuthenticators,
-        authenticators,
-        registrationDisabled,
-        realm,
-        isUserIdentified,
-        challenge,
-        userVerification,
-        rpId,
-        createTimeout
-    } = kcContext;
 
     const { msg, msgStr, advancedMsg } = i18n;
 
@@ -36,46 +20,9 @@ export default function LoginPasskeysConditionalAuthenticate(
         classes
     });
 
-    const { insertScriptTags } = useInsertScriptTags({
+    const authButtonId = "authenticateWebAuthnButton";
-        componentOrHookName: "LoginRecoveryAuthnCodeConfig",
-        scriptTags: [
-            {
-                type: "module",
-                textContent: `
-                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
-                    import { initAuthenticate } from "${url.resourcesPath}/js/passkeysConditionalAuth.js";
 
-                    const authButton = document.getElementById('authenticateWebAuthnButton');
+    useScript({ authButtonId, kcContext, i18n });
-                    const input = {
-                        isUserIdentified : ${isUserIdentified},
-                        challenge : '${challenge}',
-                        userVerification : '${userVerification}',
-                        rpId : '${rpId}',
-                        createTimeout : ${createTimeout},
-                        errmsg : "${msgStr("webauthn-unsupported-browser-text")}"
-                    };
-                    authButton.addEventListener("click", () => {
-                        authenticateByWebAuthn(input);
-                    });
-
-                    const args = {
-                        isUserIdentified : ${isUserIdentified},
-                        challenge : '${challenge}',
-                        userVerification : '${userVerification}',
-                        rpId : '${rpId}',
-                        createTimeout : ${createTimeout},
-                        errmsg : "${msgStr("passkey-unsupported-browser-text")}"
-                    };
-
-                    document.addEventListener("DOMContentLoaded", (event) => initAuthenticate(args));
-                `
-            }
-        ]
-    });
-
-    useEffect(() => {
-        insertScriptTags();
-    }, []);
 
     return (
         <Template
@@ -213,29 +160,7 @@ export default function LoginPasskeysConditionalAuthenticate(
                                 )}
                                 <div id="kc-form-passkey-button" className={kcClsx("kcFormButtonsClass")} style={{ display: "none" }}>
                                     <input
-                                        id="authenticateWebAuthnButton"
+                                        id={authButtonId}
-                                        type="button"
-                                        onClick={() => {
-                                            assert("doAuthenticate" in window);
-                                            assert(typeof window.doAuthenticate === "function");
-                                            window.doAuthenticate(
-                                                [],
-                                                rpId,
-                                                challenge,
-                                                typeof isUserIdentified === "boolean" ? isUserIdentified : isUserIdentified === "true",
-                                                createTimeout,
-                                                userVerification,
-                                                msgStr("passkey-unsupported-browser-text")
-                                            );
-                                        }}
-                                        autoFocus
-                                        value={msgStr("passkey-doAuthenticate")}
-                                        className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
-                                    />
-                                </div>
-                                <div id="kc-form-passkey-button" className={kcClsx("kcFormButtonsClass")} style={{ display: "none" }}>
-                                    <input
-                                        id="authenticateWebAuthnButton"
                                         type="button"
                                         autoFocus
                                         value={msgStr("passkey-doAuthenticate")}

src/login/pages/LoginPasskeysConditionalAuthenticate.useScript.tsx

@@ -0,0 +1,67 @@
+import { useEffect } from "react";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { assert } from "keycloakify/tools/assert";
+import { KcContext } from "keycloakify/login/KcContext/KcContext";
+
+type KcContextLike = {
+    url: {
+        resourcesPath: string;
+    };
+    isUserIdentified: boolean | "true" | "false";
+    challenge: string;
+    userVerification: string;
+    rpId: string;
+    createTimeout: number;
+};
+
+assert<keyof KcContextLike extends keyof KcContext.LoginPasskeysConditionalAuthenticate ? true : false>();
+assert<KcContext.LoginPasskeysConditionalAuthenticate extends KcContextLike ? true : false>();
+
+type I18nLike = {
+    msgStr: (key: "webauthn-unsupported-browser-text" | "passkey-unsupported-browser-text") => string;
+};
+
+export function useScript(params: { authButtonId: string; kcContext: KcContextLike; i18n: I18nLike }) {
+    const { authButtonId, kcContext, i18n } = params;
+
+    const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
+
+    const { msgStr } = i18n;
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "LoginRecoveryAuthnCodeConfig",
+        scriptTags: [
+            {
+                type: "module",
+                textContent: `
+                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+                    import { initAuthenticate } from "${url.resourcesPath}/js/passkeysConditionalAuth.js";
+
+                    const authButton = document.getElementById(${JSON.stringify(authButtonId)});
+                    const input = {
+                        isUserIdentified : ${isUserIdentified},
+                        challenge : '${challenge}',
+                        userVerification : '${userVerification}',
+                        rpId : '${rpId}',
+                        createTimeout : ${createTimeout}
+                    };
+                    authButton.addEventListener("click", () => {
+                        authenticateByWebAuthn({
+                            ...input,
+                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
+                        });
+                    });
+
+                    initAuthenticate({
+                        ...input,
+                        errmsg : ${JSON.stringify(msgStr("passkey-unsupported-browser-text"))}
+                    });
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        insertScriptTags();
+    }, []);
+}

src/tools/useInsertScriptTags.ts

@@ -6,7 +6,7 @@ export type ScriptTag = ScriptTag.TextContent | ScriptTag.Src;
 
 export namespace ScriptTag {
     type Common = {
-        type: "text/javascript" | "module";
+        type: "text/javascript" | "module" | "importmap";
     };
 
     export type TextContent = Common & {