keycloakify 10.0.4 → 10.1.0-rc.0

package/src/login/pages/LoginPasskeysConditionalAuthenticate.tsx

@@ -0,0 +1,252 @@
+import { useEffect, 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 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 {
+        messagesPerField,
+        login,
+        url,
+        usernameHidden,
+        shouldDisplayAuthenticators,
+        authenticators,
+        registrationDisabled,
+        realm,
+        isUserIdentified,
+        challenge,
+        userVerification,
+        rpId,
+        createTimeout
+    } = kcContext;
+
+    const { msg, msgStr, advancedMsg } = i18n;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    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('authenticateWebAuthnButton');
+                    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
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("passkey-login-title")}
+            infoNode={
+                realm.registrationAllowed &&
+                !registrationDisabled && (
+                    <div id="kc-registration">
+                        <span>
+                            ${msg("noAccount")}{" "}
+                            <a tabIndex={6} href={url.registrationUrl}>
+                                {msg("doRegister")}
+                            </a>
+                        </span>
+                    </div>
+                )
+            }
+        >
+            <form id="webauth" action={url.loginAction} method="post">
+                <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
+                <input type="hidden" id="authenticatorData" name="authenticatorData" />
+                <input type="hidden" id="signature" name="signature" />
+                <input type="hidden" id="credentialId" name="credentialId" />
+                <input type="hidden" id="userHandle" name="userHandle" />
+                <input type="hidden" id="error" name="error" />
+            </form>
+
+            <div className={kcClsx("kcFormGroupClass")} no-bottom-margin="true" style={{ marginBottom: 0 }}>
+                {authenticators !== undefined && Object.keys(authenticators).length !== 0 && (
+                    <>
+                        <form id="authn_select" className={kcClsx("kcFormClass")}>
+                            {authenticators.authenticators.map((authenticator, i) => (
+                                <input key={i} type="hidden" name="authn_use_chk" readOnly value={authenticator.credentialId} />
+                            ))}
+                        </form>
+                        {shouldDisplayAuthenticators && (
+                            <>
+                                {authenticators.authenticators.length > 1 && (
+                                    <p className={kcClsx("kcSelectAuthListItemTitle")}>{msg("passkey-available-authenticators")}</p>
+                                )}
+                                <div className={kcClsx("kcFormClass")}>
+                                    {authenticators.authenticators.map((authenticator, i) => (
+                                        <div key={i} id={`kc-webauthn-authenticator-item-${i}`} className={kcClsx("kcSelectAuthListItemClass")}>
+                                            <i
+                                                className={clsx(
+                                                    (() => {
+                                                        const className = kcClsx(authenticator.transports.iconClass as any);
+                                                        if (className === authenticator.transports.iconClass) {
+                                                            return kcClsx("kcWebAuthnDefaultIcon");
+                                                        }
+                                                        return className;
+                                                    })(),
+                                                    kcClsx("kcSelectAuthListItemIconPropertyClass")
+                                                )}
+                                            />
+                                            <div className={kcClsx("kcSelectAuthListItemBodyClass")}>
+                                                <div
+                                                    id={`kc-webauthn-authenticator-label-${i}`}
+                                                    className={kcClsx("kcSelectAuthListItemHeadingClass")}
+                                                >
+                                                    {advancedMsg(authenticator.label)}
+                                                </div>
+                                                {authenticator.transports !== undefined &&
+                                                    authenticator.transports.displayNameProperties !== undefined &&
+                                                    authenticator.transports.displayNameProperties.length !== 0 && (
+                                                        <div
+                                                            id={`kc-webauthn-authenticator-transport-${i}`}
+                                                            className={kcClsx("kcSelectAuthListItemDescriptionClass")}
+                                                        >
+                                                            {authenticator.transports.displayNameProperties.map((nameProperty, i, arr) => (
+                                                                <Fragment key={i}>
+                                                                    <span key={i}> {advancedMsg(nameProperty)} </span>
+                                                                    {i !== arr.length - 1 && <span>, </span>}
+                                                                </Fragment>
+                                                            ))}
+                                                        </div>
+                                                    )}
+                                                <div className={kcClsx("kcSelectAuthListItemDescriptionClass")}>
+                                                    <span id={`kc-webauthn-authenticator-createdlabel-${i}`}>{msg("passkey-createdAt-label")}</span>
+                                                    <span id={`kc-webauthn-authenticator-created-${i}`}>{authenticator.createdAt}</span>
+                                                </div>
+                                            </div>
+                                            <div className={kcClsx("kcSelectAuthListItemFillClass")} />
+                                        </div>
+                                    ))}
+                                </div>
+                            </>
+                        )}
+                        <div id="kc-form">
+                            <div id="kc-form-wrapper">
+                                {realm.password && (
+                                    <form
+                                        id="kc-form-passkey"
+                                        action={url.loginAction}
+                                        method="post"
+                                        style={{ display: "none" }}
+                                        onSubmit={event => {
+                                            try {
+                                                // @ts-expect-error
+                                                event.target.login.disabled = true;
+                                            } catch {}
+
+                                            return true;
+                                        }}
+                                    >
+                                        {!usernameHidden && (
+                                            <div className={kcClsx("kcFormGroupClass")}>
+                                                <label htmlFor="username" className={kcClsx("kcLabelClass")}>
+                                                    {msg("passkey-autofill-select")}
+                                                </label>
+                                                <input
+                                                    tabIndex={1}
+                                                    id="username"
+                                                    aria-invalid={messagesPerField.existsError("username")}
+                                                    className={kcClsx("kcInputClass")}
+                                                    name="username"
+                                                    defaultValue={login.username ?? ""}
+                                                    //autoComplete="username webauthn"
+                                                    type="text"
+                                                    autoFocus
+                                                    autoComplete="off"
+                                                />
+                                                {messagesPerField.existsError("username") && (
+                                                    <span id="input-error-username" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
+                                                        {messagesPerField.get("username")}
+                                                    </span>
+                                                )}
+                                            </div>
+                                        )}
+                                    </form>
+                                )}
+                                <div id="kc-form-passkey-button" className={kcClsx("kcFormButtonsClass")} style={{ display: "none" }}>
+                                    <input
+                                        id="authenticateWebAuthnButton"
+                                        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")}
+                                        className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </>
+                )}
+            </div>
+        </Template>
+    );
+}

package/src/login/pages/LoginUsername.tsx

@@ -40,7 +40,7 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
             headerNode={msg("doLogIn")}
             socialProvidersNode={
                 <>
-                    {realm.password && social.providers?.length && (
+                    {realm.password && social.providers !== undefined && social.providers.length !== 0 && (
                         <div id="kc-social-providers" className={kcClsx("kcFormSocialAccountSectionClass")}>
                             <hr />
                             <h2>{msg("identity-provider-login-label")}</h2>

package/stories/login/pages/LoginIdpLinkConfirmOverride.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "login-idp-link-confirm-override.ftl" });
+
+const meta = {
+    title: "login/login-idp-link-confirm-override.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};

package/stories/login/pages/LoginPasskeysConditionalAuthenticate.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "login-passkeys-conditional-authenticate.ftl" });
+
+const meta = {
+    title: "login/login-passkeys-conditional-authenticate.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};

package/vite-plugin/index.js

@@ -431,7 +431,7 @@ function getBuildContext(params) {
                     .host) === null || _c === void 0 ? void 0 : _c.replace(/:[0-9]+$/, "")) === null || _d === void 0 ? void 0 : _d.split(".").reverse().join(".")) !== null && _e !== void 0 ? _e : fallbackGroupId) + ".keycloak");
         })(),
         artifactId: (_d = (_c = process.env.KEYCLOAKIFY_ARTIFACT_ID) !== null && _c !== void 0 ? _c : buildOptions.artifactId) !== null && _d !== void 0 ? _d : `${themeNames[0]}-keycloak-theme`,
-        loginThemeResourcesFromKeycloakVersion: (_e = buildOptions.loginThemeResourcesFromKeycloakVersion) !== null && _e !== void 0 ? _e : constants.LOGIN_THEME_RESOURCES_FROMkEYCLOAK_VERSION_DEFAULT,
+        loginThemeResourcesFromKeycloakVersion: (_e = buildOptions.loginThemeResourcesFromKeycloakVersion) !== null && _e !== void 0 ? _e : constants.LOGIN_THEME_RESOURCES_FROM_KEYCLOAK_VERSION_DEFAULT,
         projectDirPath,
         projectBuildDirPath,
         keycloakifyBuildDirPath: (() => {
@@ -746,7 +746,7 @@ __nccwpck_require__.r(__webpack_exports__);
 /* harmony export */   "KEYCLOAK_RESOURCES": () => (/* binding */ KEYCLOAK_RESOURCES),
 /* harmony export */   "LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1": () => (/* binding */ LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1),
 /* harmony export */   "LOGIN_THEME_PAGE_IDS": () => (/* binding */ LOGIN_THEME_PAGE_IDS),
-/* harmony export */   "LOGIN_THEME_RESOURCES_FROMkEYCLOAK_VERSION_DEFAULT": () => (/* binding */ LOGIN_THEME_RESOURCES_FROMkEYCLOAK_VERSION_DEFAULT),
+/* harmony export */   "LOGIN_THEME_RESOURCES_FROM_KEYCLOAK_VERSION_DEFAULT": () => (/* binding */ LOGIN_THEME_RESOURCES_FROM_KEYCLOAK_VERSION_DEFAULT),
 /* harmony export */   "RESOURCES_COMMON": () => (/* binding */ RESOURCES_COMMON),
 /* harmony export */   "THEME_TYPES": () => (/* binding */ THEME_TYPES),
 /* harmony export */   "VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES": () => (/* binding */ VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES)
@@ -796,7 +796,9 @@ const LOGIN_THEME_PAGE_IDS = [
     "login-recovery-authn-code-input.ftl",
     "login-reset-otp.ftl",
     "login-x509-info.ftl",
-    "webauthn-error.ftl"
+    "webauthn-error.ftl",
+    "login-passkeys-conditional-authenticate.ftl",
+    "login-idp-link-confirm-override.ftl"
 ];
 const ACCOUNT_THEME_PAGE_IDS = [
     "password.ftl",
@@ -809,12 +811,12 @@ const ACCOUNT_THEME_PAGE_IDS = [
 ];
 const CONTAINER_NAME = "keycloak-keycloakify";
 const FALLBACK_LANGUAGE_TAG = "en";
-const LOGIN_THEME_RESOURCES_FROMkEYCLOAK_VERSION_DEFAULT = "24.0.4";
+const LOGIN_THEME_RESOURCES_FROM_KEYCLOAK_VERSION_DEFAULT = "24.0.4";
 //# sourceMappingURL=constants.js.map
 
 /***/ }),
 
-/***/ 3695:
+/***/ 4348:
 /***/ ((__unused_webpack_module, __webpack_exports__, __nccwpck_require__) => {
 
 "use strict";
@@ -1197,7 +1199,26 @@ var SuccessTracker;
     SuccessTracker.removeFromExtracted = removeFromExtracted;
 })(SuccessTracker || (SuccessTracker = {}));
 //# sourceMappingURL=downloadAndExtractArchive.js.map
-;// CONCATENATED MODULE: ./dist/bin/shared/downloadKeycloakDefaultTheme.js
+;// CONCATENATED MODULE: ./dist/bin/tools/getThisCodebaseRootDirPath.js
+
+
+function getThisCodebaseRootDirPath_rec(dirPath) {
+    if (external_fs_.existsSync(external_path_.join(dirPath, "package.json"))) {
+        return dirPath;
+    }
+    return getThisCodebaseRootDirPath_rec(external_path_.join(dirPath, ".."));
+}
+let result = undefined;
+function getThisCodebaseRootDirPath() {
+    if (result !== undefined) {
+        return result;
+    }
+    return (result = getThisCodebaseRootDirPath_rec(__dirname));
+}
+//# sourceMappingURL=getThisCodebaseRootDirPath.js.map
+;// CONCATENATED MODULE: ./dist/bin/shared/downloadKeycloakDefaultTheme/downloadKeycloakDefaultTheme.js
+
+
 
 
 
@@ -1207,6 +1228,7 @@ async function downloadKeycloakDefaultTheme(params) {
     const { keycloakVersion, buildContext } = params;
     let kcNodeModulesKeepFilePaths = undefined;
     let kcNodeModulesKeepFilePaths_lastAccountV1 = undefined;
+    let areExtraAssetsFor24Copied = false;
     const { extractedDirPath } = await downloadAndExtractArchive({
         url: `https://repo1.maven.org/maven2/org/keycloak/keycloak-themes/${keycloakVersion}/keycloak-themes-${keycloakVersion}.jar`,
         cacheDirPath: buildContext.cacheDirPath,
@@ -1217,13 +1239,13 @@ async function downloadKeycloakDefaultTheme(params) {
             if (fileRelativePath.startsWith("..")) {
                 return;
             }
-            const { readFile, writeFile } = params;
             skip_keycloak_v2: {
                 if (!fileRelativePath.startsWith((0,external_path_.join)("keycloak.v2"))) {
                     break skip_keycloak_v2;
                 }
                 return;
             }
+            const { readFile, writeFile } = params;
             last_account_v1_transformations: {
                 if (constants.LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1 !== keycloakVersion) {
                     break last_account_v1_transformations;
@@ -1277,6 +1299,19 @@ async function downloadKeycloakDefaultTheme(params) {
                     return;
                 }
             }
+            copy_extra_assets: {
+                if (keycloakVersion !== "24.0.4") {
+                    break copy_extra_assets;
+                }
+                if (areExtraAssetsFor24Copied) {
+                    break copy_extra_assets;
+                }
+                const extraAssetsDirPath = (0,external_path_.join)(getThisCodebaseRootDirPath(), "src", "bin", __dirname.split(`${external_path_.sep}bin${external_path_.sep}`)[1], "extra-assets");
+                await Promise.all(["webauthnAuthenticate.js", "passkeysConditionalAuth.js"].map(async (fileBasename) => writeFile({
+                    fileRelativePath: (0,external_path_.join)("base", "login", "resources", "js", fileBasename),
+                    modifiedData: await promises_.readFile((0,external_path_.join)(extraAssetsDirPath, fileBasename))
+                })));
+            }
             skip_unused_resources: {
                 if (keycloakVersion !== "24.0.4") {
                     break skip_unused_resources;
@@ -1330,6 +1365,9 @@ async function downloadKeycloakDefaultTheme(params) {
     return { defaultThemeDirPath: extractedDirPath };
 }
 //# sourceMappingURL=downloadKeycloakDefaultTheme.js.map
+;// CONCATENATED MODULE: ./dist/bin/shared/downloadKeycloakDefaultTheme/index.js
+
+//# sourceMappingURL=index.js.map
 ;// CONCATENATED MODULE: ./dist/bin/shared/downloadKeycloakStaticResources.js
 
 
@@ -1365,23 +1403,6 @@ async function downloadKeycloakStaticResources(params) {
     });
 }
 //# sourceMappingURL=downloadKeycloakStaticResources.js.map
-;// CONCATENATED MODULE: ./dist/bin/tools/getThisCodebaseRootDirPath.js
-
-
-function getThisCodebaseRootDirPath_rec(dirPath) {
-    if (external_fs_.existsSync(external_path_.join(dirPath, "package.json"))) {
-        return dirPath;
-    }
-    return getThisCodebaseRootDirPath_rec(external_path_.join(dirPath, ".."));
-}
-let result = undefined;
-function getThisCodebaseRootDirPath() {
-    if (result !== undefined) {
-        return result;
-    }
-    return (result = getThisCodebaseRootDirPath_rec(__dirname));
-}
-//# sourceMappingURL=getThisCodebaseRootDirPath.js.map
 ;// CONCATENATED MODULE: ./dist/bin/tools/readThisNpmPackageVersion.js
 
 
@@ -1833,7 +1854,7 @@ const path_1 = __nccwpck_require__(1017);
 const constants_1 = __nccwpck_require__(173);
 const id_1 = __nccwpck_require__(3047);
 const fs_rm_1 = __nccwpck_require__(8699);
-const copyKeycloakResourcesToPublic_1 = __nccwpck_require__(3695);
+const copyKeycloakResourcesToPublic_1 = __nccwpck_require__(4348);
 const assert_1 = __nccwpck_require__(8078);
 const buildContext_1 = __nccwpck_require__(5614);
 const magic_string_1 = __importDefault(__nccwpck_require__(5734));