#631

src/bin/shared/buildContext.ts

@@ -15,7 +15,7 @@ import * as child_process from "child_process";
 import {
     VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES,
     BUILD_FOR_KEYCLOAK_MAJOR_VERSION_ENV_NAME,
-    LOGIN_THEME_RESOURCES_FROMkEYCLOAK_VERSION_DEFAULT
+    LOGIN_THEME_RESOURCES_FROM_KEYCLOAK_VERSION_DEFAULT
 } from "./constants";
 import type { KeycloakVersionRange } from "./KeycloakVersionRange";
 import { exclude } from "tsafe";
@@ -547,7 +547,7 @@ export function getBuildContext(params: {
             `${themeNames[0]}-keycloak-theme`,
         loginThemeResourcesFromKeycloakVersion:
             buildOptions.loginThemeResourcesFromKeycloakVersion ??
-            LOGIN_THEME_RESOURCES_FROMkEYCLOAK_VERSION_DEFAULT,
+            LOGIN_THEME_RESOURCES_FROM_KEYCLOAK_VERSION_DEFAULT,
         projectDirPath,
         projectBuildDirPath,
         keycloakifyBuildDirPath: (() => {

src/bin/shared/constants.ts

@@ -50,7 +50,9 @@ export 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"
 ] as const;
 
 export const ACCOUNT_THEME_PAGE_IDS = [
@@ -70,4 +72,4 @@ export const CONTAINER_NAME = "keycloak-keycloakify";
 
 export const FALLBACK_LANGUAGE_TAG = "en";
 
-export const LOGIN_THEME_RESOURCES_FROMkEYCLOAK_VERSION_DEFAULT = "24.0.4";
+export const LOGIN_THEME_RESOURCES_FROM_KEYCLOAK_VERSION_DEFAULT = "24.0.4";

src/bin/shared/downloadKeycloakDefaultTheme/downloadKeycloakDefaultTheme.ts

@@ -1,8 +1,10 @@
-import { join as pathJoin, relative as pathRelative } from "path";
-import { type BuildContext } from "./buildContext";
+import { join as pathJoin, relative as pathRelative, sep as pathSep } from "path";
+import { type BuildContext } from "../buildContext";
 import { assert } from "tsafe/assert";
-import { LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1 } from "./constants";
-import { downloadAndExtractArchive } from "../tools/downloadAndExtractArchive";
+import { LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1 } from "../constants";
+import { downloadAndExtractArchive } from "../../tools/downloadAndExtractArchive";
+import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPath";
+import * as fsPr from "fs/promises";
 
 export type BuildContextLike = {
     cacheDirPath: string;
@@ -20,6 +22,8 @@ export async function downloadKeycloakDefaultTheme(params: {
     let kcNodeModulesKeepFilePaths: Set<string> | undefined = undefined;
     let kcNodeModulesKeepFilePaths_lastAccountV1: Set<string> | undefined = 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,
@@ -32,8 +36,6 @@ export async function downloadKeycloakDefaultTheme(params: {
                 return;
             }
 
-            const { readFile, writeFile } = params;
-
             skip_keycloak_v2: {
                 if (!fileRelativePath.startsWith(pathJoin("keycloak.v2"))) {
                     break skip_keycloak_v2;
@@ -42,6 +44,8 @@ export async function downloadKeycloakDefaultTheme(params: {
                 return;
             }
 
+            const { readFile, writeFile } = params;
+
             last_account_v1_transformations: {
                 if (LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1 !== keycloakVersion) {
                     break last_account_v1_transformations;
@@ -168,6 +172,42 @@ export async function downloadKeycloakDefaultTheme(params: {
                 }
             }
 
+            copy_extra_assets: {
+                if (keycloakVersion !== "24.0.4") {
+                    break copy_extra_assets;
+                }
+
+                if (areExtraAssetsFor24Copied) {
+                    break copy_extra_assets;
+                }
+
+                const extraAssetsDirPath = pathJoin(
+                    getThisCodebaseRootDirPath(),
+                    "src",
+                    "bin",
+                    __dirname.split(`${pathSep}bin${pathSep}`)[1],
+                    "extra-assets"
+                );
+
+                await Promise.all(
+                    ["webauthnAuthenticate.js", "passkeysConditionalAuth.js"].map(
+                        async fileBasename =>
+                            writeFile({
+                                fileRelativePath: pathJoin(
+                                    "base",
+                                    "login",
+                                    "resources",
+                                    "js",
+                                    fileBasename
+                                ),
+                                modifiedData: await fsPr.readFile(
+                                    pathJoin(extraAssetsDirPath, fileBasename)
+                                )
+                            })
+                    )
+                );
+            }
+
             skip_unused_resources: {
                 if (keycloakVersion !== "24.0.4") {
                     break skip_unused_resources;

src/bin/shared/downloadKeycloakDefaultTheme/extra-assets/passkeysConditionalAuth.js

@@ -0,0 +1,79 @@
+import { base64url } from "rfc4648";
+import { returnSuccess, returnFailure } from "./webauthnAuthenticate.js";
+
+export function initAuthenticate(input) {
+    // Check if WebAuthn is supported by this browser
+    if (!window.PublicKeyCredential) {
+        returnFailure(input.errmsg);
+        return;
+    }
+    if (input.isUserIdentified || typeof PublicKeyCredential.isConditionalMediationAvailable === "undefined") {
+        document.getElementById("kc-form-passkey-button").style.display = 'block';
+    } else {
+        tryAutoFillUI(input);
+    }
+}
+
+function doAuthenticate(input) {
+    // Check if WebAuthn is supported by this browser
+    if (!window.PublicKeyCredential) {
+        returnFailure(input.errmsg);
+        return;
+    }
+
+    const publicKey = {
+        rpId : input.rpId,
+        challenge: base64url.parse(input.challenge, { loose: true })
+    };
+
+    publicKey.allowCredentials = !input.isUserIdentified ? [] : getAllowCredentials();
+
+    if (input.createTimeout !== 0) {
+        publicKey.timeout = input.createTimeout * 1000;
+    }
+
+    if (input.userVerification !== 'not specified') {
+        publicKey.userVerification = input.userVerification;
+    }
+
+    return navigator.credentials.get({
+        publicKey: publicKey,
+        ...input.additionalOptions
+    });
+}
+
+async function tryAutoFillUI(input) {
+    const isConditionalMediationAvailable = await PublicKeyCredential.isConditionalMediationAvailable();
+    if (isConditionalMediationAvailable) {
+        document.getElementById("kc-form-login").style.display = "block";
+        input.additionalOptions = { mediation: 'conditional'};
+        try {
+            const result = await doAuthenticate(input);
+            returnSuccess(result);
+        } catch (error) {
+            returnFailure(error);
+        }
+    } else {
+        document.getElementById("kc-form-passkey-button").style.display = 'block';
+    }
+}
+
+function getAllowCredentials() {
+    const allowCredentials = [];
+    const authnUse = document.forms['authn_select'].authn_use_chk;
+    if (authnUse !== undefined) {
+        if (authnUse.length === undefined) {
+            allowCredentials.push({
+                id: base64url.parse(authnUse.value, {loose: true}),
+                type: 'public-key',
+            });
+        } else {
+            authnUse.forEach((entry) =>
+                allowCredentials.push({
+                    id: base64url.parse(entry.value, {loose: true}),
+                    type: 'public-key',
+                }));
+        }
+    }
+    return allowCredentials;
+}

src/bin/shared/downloadKeycloakDefaultTheme/extra-assets/webauthnAuthenticate.js

@@ -0,0 +1,82 @@
+import { base64url } from "rfc4648";
+
+export async function authenticateByWebAuthn(input) {
+    if (!input.isUserIdentified) {
+        try {
+            const result = await doAuthenticate([], input.challenge, input.userVerification, input.rpId, input.createTimeout, input.errmsg);
+            returnSuccess(result);
+        } catch (error) {
+            returnFailure(error);
+        }
+        return;
+    }
+    checkAllowCredentials(input.challenge, input.userVerification, input.rpId, input.createTimeout, input.errmsg);
+}
+
+async function checkAllowCredentials(challenge, userVerification, rpId, createTimeout, errmsg) {
+    const allowCredentials = [];
+    const authnUse = document.forms['authn_select'].authn_use_chk;
+    if (authnUse !== undefined) {
+        if (authnUse.length === undefined) {
+            allowCredentials.push({
+                id: base64url.parse(authnUse.value, {loose: true}),
+                type: 'public-key',
+            });
+        } else {
+            authnUse.forEach((entry) =>
+                allowCredentials.push({
+                    id: base64url.parse(entry.value, {loose: true}),
+                    type: 'public-key',
+                }));
+        }
+    }
+    try {
+        const result = await doAuthenticate(allowCredentials, challenge, userVerification, rpId, createTimeout, errmsg);
+        returnSuccess(result);
+    } catch (error) {
+        returnFailure(error);
+    }
+}
+
+function doAuthenticate(allowCredentials, challenge, userVerification, rpId, createTimeout, errmsg) {
+    // Check if WebAuthn is supported by this browser
+    if (!window.PublicKeyCredential) {
+        returnFailure(errmsg);
+        return;
+    }
+
+    const publicKey = {
+        rpId : rpId,
+        challenge: base64url.parse(challenge, { loose: true })
+    };
+
+    if (createTimeout !== 0) {
+        publicKey.timeout = createTimeout * 1000;
+    }
+
+    if (allowCredentials.length) {
+        publicKey.allowCredentials = allowCredentials;
+    }
+
+    if (userVerification !== 'not specified') {
+        publicKey.userVerification = userVerification;
+    }
+
+    return navigator.credentials.get({publicKey});
+}
+
+export function returnSuccess(result) {
+    document.getElementById("clientDataJSON").value = base64url.stringify(new Uint8Array(result.response.clientDataJSON), { pad: false });
+    document.getElementById("authenticatorData").value = base64url.stringify(new Uint8Array(result.response.authenticatorData), { pad: false });
+    document.getElementById("signature").value = base64url.stringify(new Uint8Array(result.response.signature), { pad: false });
+    document.getElementById("credentialId").value = result.id;
+    if (result.response.userHandle) {
+        document.getElementById("userHandle").value = base64url.stringify(new Uint8Array(result.response.userHandle), { pad: false });
+    }
+    document.getElementById("webauth").submit();
+}
+
+export function returnFailure(err) {
+    document.getElementById("error").value = err;
+    document.getElementById("webauth").submit();
+}

src/bin/shared/downloadKeycloakDefaultTheme/index.ts

@@ -0,0 +1 @@
+export * from "./downloadKeycloakDefaultTheme";

src/login/DefaultPage.tsx

@@ -40,6 +40,8 @@ const LoginRecoveryAuthnCodeInput = lazy(() => import("keycloakify/login/pages/L
 const LoginResetOtp = lazy(() => import("keycloakify/login/pages/LoginResetOtp"));
 const LoginX509Info = lazy(() => import("keycloakify/login/pages/LoginX509Info"));
 const WebauthnError = lazy(() => import("keycloakify/login/pages/WebauthnError"));
+const LoginPasskeysConditionalAuthenticate = lazy(() => import("keycloakify/login/pages/LoginPasskeysConditionalAuthenticate"));
+const LoginIdpLinkConfirmOverride = lazy(() => import("keycloakify/login/pages/LoginIdpLinkConfirmOverride"));
 
 type DefaultPageProps = PageProps<KcContext, I18n> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
@@ -121,6 +123,10 @@ export default function DefaultPage(props: DefaultPageProps) {
                         return <LoginX509Info kcContext={kcContext} {...rest} />;
                     case "webauthn-error.ftl":
                         return <WebauthnError kcContext={kcContext} {...rest} />;
+                    case "login-passkeys-conditional-authenticate.ftl":
+                        return <LoginPasskeysConditionalAuthenticate kcContext={kcContext} {...rest} />;
+                    case "login-idp-link-confirm-override.ftl":
+                        return <LoginIdpLinkConfirmOverride kcContext={kcContext} {...rest} />;
                 }
                 assert<Equals<typeof kcContext, never>>(false);
             })()}

src/login/KcContext/KcContext.ts

@@ -59,7 +59,9 @@ export type KcContext =
     | KcContext.LoginRecoveryAuthnCodeInput
     | KcContext.LoginResetOtp
     | KcContext.LoginX509Info
-    | KcContext.WebauthnError;
+    | KcContext.WebauthnError
+    | KcContext.LoginPasskeysConditionalAuthenticate
+    | KcContext.LoginIdpLinkConfirmOverride;
 
 assert<KcContext["themeType"] extends ThemeType ? true : false>();
 
@@ -577,6 +579,40 @@ export declare namespace KcContext {
         pageId: "webauthn-error.ftl";
         isAppInitiatedAction?: boolean;
     };
+
+    export type LoginPasskeysConditionalAuthenticate = Common & {
+        pageId: "login-passkeys-conditional-authenticate.ftl";
+        realm: {
+            registrationAllowed: boolean;
+            password: boolean;
+        };
+        url: {
+            registrationUrl: string;
+        };
+        registrationDisabled: boolean;
+        isUserIdentified: boolean | "true" | "false";
+        challenge: string;
+        userVerification: string;
+        rpId: string;
+        createTimeout: number | string;
+
+        authenticators?: {
+            authenticators: WebauthnAuthenticate.WebauthnAuthenticator[];
+        };
+        shouldDisplayAuthenticators?: boolean;
+        usernameHidden?: boolean;
+        login: {
+            username?: string;
+        };
+    };
+
+    export type LoginIdpLinkConfirmOverride = Common & {
+        pageId: "login-idp-link-confirm-override.ftl";
+        url: {
+            loginRestartFlowUrl: string;
+        };
+        idpDisplayName: string;
+    };
 }
 
 export type UserProfile = {

src/login/KcContext/kcContextMocks.ts

@@ -567,6 +567,39 @@ export const kcContextMocks = [
         pageId: "webauthn-error.ftl",
         ...kcContextCommonMock,
         isAppInitiatedAction: true
+    }),
+    id<KcContext.LoginPasskeysConditionalAuthenticate>({
+        pageId: "login-passkeys-conditional-authenticate.ftl",
+        ...kcContextCommonMock,
+        url: {
+            ...kcContextCommonMock.url,
+            registrationUrl: "#"
+        },
+        realm: {
+            ...kcContextCommonMock.realm,
+            password: true,
+            registrationAllowed: true
+        },
+        registrationDisabled: false,
+        isUserIdentified: "false",
+        challenge: "",
+        userVerification: "not specified",
+        rpId: "",
+        createTimeout: "0",
+        authenticators: {
+            authenticators: []
+        },
+        shouldDisplayAuthenticators: false,
+        login: {}
+    }),
+    id<KcContext.LoginIdpLinkConfirmOverride>({
+        pageId: "login-idp-link-confirm-override.ftl",
+        ...kcContextCommonMock,
+        url: {
+            ...kcContextCommonMock.url,
+            loginRestartFlowUrl: "#"
+        },
+        idpDisplayName: "Google"
     })
 ];
 

src/login/pages/LoginIdpLinkConfirmOverride.tsx

@@ -0,0 +1,40 @@
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+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;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, idpDisplayName } = kcContext;
+
+    const { msg } = i18n;
+
+    return (
+        <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("confirmOverrideIdpTitle")}>
+            <form id="kc-register-form" action={url.loginAction} method="post">
+                {msg("pageExpiredMsg1")}{" "}
+                <a id="loginRestartLink" href={url.loginRestartFlowUrl}>
+                    {msg("doClickHere")}
+                </a>
+                <br />
+                <br />
+                <button
+                    type="submit"
+                    className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                    name="submitAction"
+                    id="confirmOverride"
+                    value="confirmOverride"
+                >
+                    {msg("confirmOverrideIdpContinue", idpDisplayName)}
+                </button>
+            </form>
+        </Template>
+    );
+}

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>
+    );
+}