keycloakify 6.13.2 → 7.0.0-rc.10

package/src/login/pages/LogoutConfirm.tsx

@@ -0,0 +1,56 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "logout-confirm.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, client, logoutConfirm } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("logoutConfirmTitle")}>
+            <div id="kc-logout-confirm" className="content-area">
+                <p className="instruction">{msg("logoutConfirmHeader")}</p>
+                <form className="form-actions" action={url.logoutConfirmAction} method="POST">
+                    <input type="hidden" name="session_code" value={logoutConfirm.code} />
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div id="kc-form-options">
+                            <div className={getClassName("kcFormOptionsWrapperClass")}></div>
+                        </div>
+                        <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
+                            <input
+                                tabIndex={4}
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                name="confirmLogout"
+                                id="kc-logout"
+                                type="submit"
+                                value={msgStr("doLogout")}
+                            />
+                        </div>
+                    </div>
+                </form>
+                <div id="kc-info-message">
+                    {!logoutConfirm.skipLink && client.baseUrl && (
+                        <p>
+                            <a href={client.baseUrl} dangerouslySetInnerHTML={{ __html: msgStr("backToApplication") }} />
+                        </p>
+                    )}
+                </div>
+            </div>
+        </Template>
+    );
+}

package/src/login/pages/PageProps.ts

@@ -0,0 +1,11 @@
+import type { LazyExoticComponent } from "react";
+import type { I18n } from "keycloakify/login/i18n";
+import { type TemplateProps, type ClassKey } from "keycloakify/login/TemplateProps";
+
+export type PageProps<KcContext, I18nExtended extends I18n> = {
+    Template: LazyExoticComponent<(props: TemplateProps<any, any>) => JSX.Element | null>;
+    kcContext: KcContext;
+    i18n: I18nExtended;
+    doUseDefaultCss: boolean;
+    classes?: Partial<Record<ClassKey, string>>;
+};

package/src/login/pages/Register.tsx

@@ -0,0 +1,182 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function Register(props: PageProps<Extract<KcContext, { pageId: "register.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("registerTitle")}>
+            <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
+                <div
+                    className={clsx(
+                        getClassName("kcFormGroupClass"),
+                        messagesPerField.printIfExists("firstName", getClassName("kcFormGroupErrorClass"))
+                    )}
+                >
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="firstName" className={getClassName("kcLabelClass")}>
+                            {msg("firstName")}
+                        </label>
+                    </div>
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input
+                            type="text"
+                            id="firstName"
+                            className={getClassName("kcInputClass")}
+                            name="firstName"
+                            defaultValue={register.formData.firstName ?? ""}
+                        />
+                    </div>
+                </div>
+
+                <div
+                    className={clsx(
+                        getClassName("kcFormGroupClass"),
+                        messagesPerField.printIfExists("lastName", getClassName("kcFormGroupErrorClass"))
+                    )}
+                >
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="lastName" className={getClassName("kcLabelClass")}>
+                            {msg("lastName")}
+                        </label>
+                    </div>
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input
+                            type="text"
+                            id="lastName"
+                            className={getClassName("kcInputClass")}
+                            name="lastName"
+                            defaultValue={register.formData.lastName ?? ""}
+                        />
+                    </div>
+                </div>
+
+                <div
+                    className={clsx(getClassName("kcFormGroupClass"), messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass")))}
+                >
+                    <div className={getClassName("kcLabelWrapperClass")}>
+                        <label htmlFor="email" className={getClassName("kcLabelClass")}>
+                            {msg("email")}
+                        </label>
+                    </div>
+                    <div className={getClassName("kcInputWrapperClass")}>
+                        <input
+                            type="text"
+                            id="email"
+                            className={getClassName("kcInputClass")}
+                            name="email"
+                            defaultValue={register.formData.email ?? ""}
+                            autoComplete="email"
+                        />
+                    </div>
+                </div>
+                {!realm.registrationEmailAsUsername && (
+                    <div
+                        className={clsx(
+                            getClassName("kcFormGroupClass"),
+                            messagesPerField.printIfExists("username", getClassName("kcFormGroupErrorClass"))
+                        )}
+                    >
+                        <div className={getClassName("kcLabelWrapperClass")}>
+                            <label htmlFor="username" className={getClassName("kcLabelClass")}>
+                                {msg("username")}
+                            </label>
+                        </div>
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <input
+                                type="text"
+                                id="username"
+                                className={getClassName("kcInputClass")}
+                                name="username"
+                                defaultValue={register.formData.username ?? ""}
+                                autoComplete="username"
+                            />
+                        </div>
+                    </div>
+                )}
+                {passwordRequired && (
+                    <>
+                        <div
+                            className={clsx(
+                                getClassName("kcFormGroupClass"),
+                                messagesPerField.printIfExists("password", getClassName("kcFormGroupErrorClass"))
+                            )}
+                        >
+                            <div className={getClassName("kcLabelWrapperClass")}>
+                                <label htmlFor="password" className={getClassName("kcLabelClass")}>
+                                    {msg("password")}
+                                </label>
+                            </div>
+                            <div className={getClassName("kcInputWrapperClass")}>
+                                <input
+                                    type="password"
+                                    id="password"
+                                    className={getClassName("kcInputClass")}
+                                    name="password"
+                                    autoComplete="new-password"
+                                />
+                            </div>
+                        </div>
+
+                        <div
+                            className={clsx(
+                                getClassName("kcFormGroupClass"),
+                                messagesPerField.printIfExists("password-confirm", getClassName("kcFormGroupErrorClass"))
+                            )}
+                        >
+                            <div className={getClassName("kcLabelWrapperClass")}>
+                                <label htmlFor="password-confirm" className={getClassName("kcLabelClass")}>
+                                    {msg("passwordConfirm")}
+                                </label>
+                            </div>
+                            <div className={getClassName("kcInputWrapperClass")}>
+                                <input type="password" id="password-confirm" className={getClassName("kcInputClass")} name="password-confirm" />
+                            </div>
+                        </div>
+                    </>
+                )}
+                {recaptchaRequired && (
+                    <div className="form-group">
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div>
+                        </div>
+                    </div>
+                )}
+                <div className={getClassName("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                        <div className={getClassName("kcFormOptionsWrapperClass")}>
+                            <span>
+                                <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                            </span>
+                        </div>
+                    </div>
+
+                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        <input
+                            className={clsx(
+                                getClassName("kcButtonClass"),
+                                getClassName("kcButtonPrimaryClass"),
+                                getClassName("kcButtonBlockClass"),
+                                getClassName("kcButtonLargeClass")
+                            )}
+                            type="submit"
+                            value={msgStr("doRegister")}
+                        />
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/src/login/pages/RegisterUserProfile.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { clsx } from "keycloakify/tools/clsx";
+import { UserProfileFormFields } from "./shared/UserProfileCommons";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function RegisterUserProfile(props: PageProps<Extract<KcContext, { pageId: "register-user-profile.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            displayMessage={messagesPerField.exists("global")}
+            displayRequiredFields={true}
+            headerNode={msg("registerTitle")}
+        >
+            <form id="kc-register-form" className={getClassName("kcFormClass")} action={url.registrationAction} method="post">
+                <UserProfileFormFields
+                    kcContext={kcContext}
+                    onIsFormSubmittableValueChange={setIsFomSubmittable}
+                    i18n={i18n}
+                    getClassName={getClassName}
+                />
+                {recaptchaRequired && (
+                    <div className="form-group">
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
+                        </div>
+                    </div>
+                )}
+                <div className={getClassName("kcFormGroupClass")} style={{ "marginBottom": 30 }}>
+                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                        <div className={getClassName("kcFormOptionsWrapperClass")}>
+                            <span>
+                                <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                            </span>
+                        </div>
+                    </div>
+
+                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        <input
+                            className={clsx(
+                                getClassName("kcButtonClass"),
+                                getClassName("kcButtonPrimaryClass"),
+                                getClassName("kcButtonBlockClass"),
+                                getClassName("kcButtonLargeClass")
+                            )}
+                            type="submit"
+                            value={msgStr("doRegister")}
+                            disabled={!isFomSubmittable}
+                        />
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/src/login/pages/Terms.tsx

@@ -0,0 +1,56 @@
+import { clsx } from "keycloakify/tools/clsx";
+import { useRerenderOnStateChange } from "evt/hooks";
+import { Markdown } from "keycloakify/tools/Markdown";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { evtTermMarkdown } from "keycloakify/login/lib/useDownloadTerms";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function Terms(props: PageProps<Extract<KcContext, { pageId: "terms.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { msg, msgStr } = i18n;
+
+    useRerenderOnStateChange(evtTermMarkdown);
+
+    const { url } = kcContext;
+
+    if (evtTermMarkdown.state === undefined) {
+        return null;
+    }
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("termsTitle")}>
+            <div id="kc-terms-text">{evtTermMarkdown.state && <Markdown>{evtTermMarkdown.state}</Markdown>}</div>
+            <form className="form-actions" action={url.loginAction} method="POST">
+                <input
+                    className={clsx(
+                        getClassName("kcButtonClass"),
+                        getClassName("kcButtonClass"),
+                        getClassName("kcButtonClass"),
+                        getClassName("kcButtonPrimaryClass"),
+                        getClassName("kcButtonLargeClass")
+                    )}
+                    name="accept"
+                    id="kc-accept"
+                    type="submit"
+                    value={msgStr("doAccept")}
+                />
+                <input
+                    className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonDefaultClass"), getClassName("kcButtonLargeClass"))}
+                    name="cancel"
+                    id="kc-decline"
+                    type="submit"
+                    value={msgStr("doDecline")}
+                />
+            </form>
+            <div className="clearfix" />
+        </Template>
+    );
+}

package/src/login/pages/UpdateUserProfile.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { clsx } from "keycloakify/tools/clsx";
+import { UserProfileFormFields } from "keycloakify/login/pages/shared/UserProfileCommons";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function UpdateUserProfile(props: PageProps<Extract<KcContext, { pageId: "update-user-profile.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { msg, msgStr } = i18n;
+
+    const { url, isAppInitiatedAction } = kcContext;
+
+    const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginProfileTitle")}>
+            <form id="kc-update-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+                <UserProfileFormFields
+                    kcContext={kcContext}
+                    onIsFormSubmittableValueChange={setIsFomSubmittable}
+                    i18n={i18n}
+                    getClassName={getClassName}
+                />
+
+                <div className={getClassName("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                        <div className={getClassName("kcFormOptionsWrapperClass")}></div>
+                    </div>
+
+                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        {isAppInitiatedAction ? (
+                            <>
+                                <input
+                                    className={clsx(
+                                        getClassName("kcButtonClass"),
+                                        getClassName("kcButtonPrimaryClass"),
+                                        getClassName("kcButtonLargeClass")
+                                    )}
+                                    type="submit"
+                                    value={msgStr("doSubmit")}
+                                />
+                                <button
+                                    className={clsx(
+                                        getClassName("kcButtonClass"),
+                                        getClassName("kcButtonDefaultClass"),
+                                        getClassName("kcButtonLargeClass")
+                                    )}
+                                    type="submit"
+                                    name="cancel-aia"
+                                    value="true"
+                                    formNoValidate
+                                >
+                                    {msg("doCancel")}
+                                </button>
+                            </>
+                        ) : (
+                            <input
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                type="submit"
+                                defaultValue={msgStr("doSubmit")}
+                                disabled={!isFomSubmittable}
+                            />
+                        )}
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/src/login/pages/WebauthnAuthenticate.tsx

@@ -0,0 +1,192 @@
+import { useRef, useState } from "react";
+import { clsx } from "keycloakify/tools/clsx";
+import type { MessageKey } from "keycloakify/login/i18n/i18n";
+import { base64url } from "rfc4648";
+import { useConstCallback } from "keycloakify/tools/useConstCallback";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
+
+    const { url } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const { authenticators, challenge, shouldDisplayAuthenticators, userVerification, rpId } = kcContext;
+    const createTimeout = Number(kcContext.createTimeout);
+    const isUserIdentified = kcContext.isUserIdentified == "true";
+
+    const webAuthnAuthenticate = useConstCallback(async () => {
+        if (!isUserIdentified) {
+            return;
+        }
+        const allowCredentials = authenticators.authenticators.map(
+            authenticator =>
+                ({
+                    id: base64url.parse(authenticator.credentialId, { loose: true }),
+                    type: "public-key"
+                } as PublicKeyCredentialDescriptor)
+        );
+        // Check if WebAuthn is supported by this browser
+        if (!window.PublicKeyCredential) {
+            setError(msgStr("webauthn-unsupported-browser-text"));
+            submitForm();
+            return;
+        }
+
+        const publicKey: PublicKeyCredentialRequestOptions = {
+            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;
+        }
+
+        try {
+            const resultRaw = await navigator.credentials.get({ publicKey });
+            if (!resultRaw || resultRaw.type != "public-key") return;
+            const result = resultRaw as PublicKeyCredential;
+            if (!("authenticatorData" in result.response)) return;
+            const response = result.response as AuthenticatorAssertionResponse;
+            const clientDataJSON = response.clientDataJSON;
+            const authenticatorData = response.authenticatorData;
+            const signature = response.signature;
+
+            setClientDataJSON(base64url.stringify(new Uint8Array(clientDataJSON), { pad: false }));
+            setAuthenticatorData(base64url.stringify(new Uint8Array(authenticatorData), { pad: false }));
+            setSignature(base64url.stringify(new Uint8Array(signature), { pad: false }));
+            setCredentialId(result.id);
+            setUserHandle(base64url.stringify(new Uint8Array(response.userHandle!), { pad: false }));
+            submitForm();
+        } catch (err) {
+            setError(String(err));
+            submitForm();
+        }
+    });
+
+    const webAuthForm = useRef<HTMLFormElement>(null);
+    const submitForm = useConstCallback(() => {
+        webAuthForm.current!.submit();
+    });
+
+    const [clientDataJSON, setClientDataJSON] = useState("");
+    const [authenticatorData, setAuthenticatorData] = useState("");
+    const [signature, setSignature] = useState("");
+    const [credentialId, setCredentialId] = useState("");
+    const [userHandle, setUserHandle] = useState("");
+    const [error, setError] = useState("");
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("webauthn-login-title")}>
+            <div id="kc-form-webauthn" className={getClassName("kcFormClass")}>
+                <form id="webauth" action={url.loginAction} ref={webAuthForm} method="post">
+                    <input type="hidden" id="clientDataJSON" name="clientDataJSON" value={clientDataJSON} />
+                    <input type="hidden" id="authenticatorData" name="authenticatorData" value={authenticatorData} />
+                    <input type="hidden" id="signature" name="signature" value={signature} />
+                    <input type="hidden" id="credentialId" name="credentialId" value={credentialId} />
+                    <input type="hidden" id="userHandle" name="userHandle" value={userHandle} />
+                    <input type="hidden" id="error" name="error" value={error} />
+                </form>
+                <div className={getClassName("kcFormGroupClass")}>
+                    {authenticators &&
+                        (() => (
+                            <form id="authn_select" className={getClassName("kcFormClass")}>
+                                {authenticators.authenticators.map(authenticator => (
+                                    <input type="hidden" name="authn_use_chk" value={authenticator.credentialId} key={authenticator.credentialId} />
+                                ))}
+                            </form>
+                        ))()}
+                    {authenticators &&
+                        shouldDisplayAuthenticators &&
+                        (() => (
+                            <>
+                                {authenticators.authenticators.length > 1 && (
+                                    <p className={getClassName("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
+                                )}
+                                <div className={getClassName("kcFormClass")}>
+                                    {authenticators.authenticators.map(authenticator => (
+                                        <div id="kc-webauthn-authenticator" className={getClassName("kcSelectAuthListItemClass")}>
+                                            <div className={getClassName("kcSelectAuthListItemIconClass")}>
+                                                <i
+                                                    className={clsx(
+                                                        (() => {
+                                                            const className = getClassName(authenticator.transports.iconClass as any);
+                                                            return className.includes(" ")
+                                                                ? className
+                                                                : [className, getClassName("kcWebAuthnDefaultIcon")];
+                                                        })(),
+                                                        getClassName("kcSelectAuthListItemIconPropertyClass")
+                                                    )}
+                                                />
+                                            </div>
+                                            <div className={getClassName("kcSelectAuthListItemBodyClass")}>
+                                                <div
+                                                    id="kc-webauthn-authenticator-label"
+                                                    className={getClassName("kcSelectAuthListItemHeadingClass")}
+                                                >
+                                                    {authenticator.label}
+                                                </div>
+
+                                                {authenticator.transports && authenticator.transports.displayNameProperties.length && (
+                                                    <div
+                                                        id="kc-webauthn-authenticator-transport"
+                                                        className={getClassName("kcSelectAuthListItemDescriptionClass")}
+                                                    >
+                                                        {authenticator.transports.displayNameProperties.map(
+                                                            (transport: MessageKey, index: number) => (
+                                                                <>
+                                                                    <span>{msg(transport)}</span>
+                                                                    {index < authenticator.transports.displayNameProperties.length - 1 && (
+                                                                        <span>{", "}</span>
+                                                                    )}
+                                                                </>
+                                                            )
+                                                        )}
+                                                    </div>
+                                                )}
+
+                                                <div className={getClassName("kcSelectAuthListItemDescriptionClass")}>
+                                                    <span id="kc-webauthn-authenticator-created-label">{msg("webauthn-createdAt-label")}</span>
+                                                    <span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
+                                                </div>
+                                            </div>
+                                            <div className={getClassName("kcSelectAuthListItemFillClass")} />
+                                        </div>
+                                    ))}
+                                </div>
+                            </>
+                        ))()}
+                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                        <input
+                            id="authenticateWebAuthnButton"
+                            type="button"
+                            onClick={webAuthnAuthenticate}
+                            autoFocus={true}
+                            value={msgStr("webauthn-doAuthenticate")}
+                            className={clsx(
+                                getClassName("kcButtonClass"),
+                                getClassName("kcButtonPrimaryClass"),
+                                getClassName("kcButtonBlockClass"),
+                                getClassName("kcButtonLargeClass")
+                            )}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Template>
+    );
+}