update webauthn-autenticate.ftl

src/login/kcContext/KcContext.ts

@@ -340,6 +340,14 @@ export declare namespace KcContext {
             displayInfo: boolean;
         };
         login: {};
+        realm: {
+            password: boolean;
+            registrationAllowed: boolean;
+        };
+        registrationDisabled?: boolean;
+        url: {
+            registrationUrl?: string;
+        };
     };
 
     export namespace WebauthnAuthenticate {
@@ -347,7 +355,7 @@ export declare namespace KcContext {
             credentialId: string;
             transports: {
                 iconClass: string;
-                displayNameProperties: MessageKey[];
+                displayNameProperties?: MessageKey[];
             };
             label: string;
             createdAt: string;

src/login/pages/Login.tsx

@@ -25,11 +25,9 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
         <Template
             {...{ kcContext, i18n, doUseDefaultCss, classes }}
             displayMessage={!messagesPerField.existsError("username", "password")}
-            displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
             headerNode={msg("loginAccountTitle")}
+            displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
             infoNode={
-                <>
-                    {realm.password && realm.registrationAllowed && !registrationDisabled && (
                 <div id="kc-registration-container">
                     <div id="kc-registration">
                         <span>
@@ -40,8 +38,6 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                         </span>
                     </div>
                 </div>
-                    )}
-                </>
             }
             socialProvidersNode={
                 <>

src/login/pages/WebauthnAuthenticate.tsx

@@ -1,204 +1,244 @@
-import { useRef, useState } from "react";
+import { useEffect, Fragment } 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 { assert } from "tsafe/assert";
+import { createUseInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
-import { assert } from "tsafe/assert";
+
-import { is } from "tsafe/is";
+const { useInsertScriptTags } = createUseInsertScriptTags();
-import { typeGuard } from "tsafe/typeGuard";
 
 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 {
+        url,
+        isUserIdentified,
+        challenge,
+        userVerification,
+        rpId,
+        createTimeout,
+        messagesPerField,
+        realm,
+        registrationDisabled,
+        authenticators,
+        shouldDisplayAuthenticators
+    } = kcContext;
 
     const { msg, msgStr } = i18n;
 
-    const { authenticators, challenge, shouldDisplayAuthenticators, userVerification, rpId } = kcContext;
+    const { insertScriptTags } = useInsertScriptTags({
-    const createTimeout = Number(kcContext.createTimeout);
+        "scriptTags": [
-    const isUserIdentified = kcContext.isUserIdentified == "true";
+            {
+                "type": "text/javascript",
+                "src": `${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
+            },
+            {
+                "type": "text/javascript",
+                "src": `${url.resourcesPath}/js/base64url.js`
+            },
+            {
+                "type": "text/javascript",
+                "textContent": `
 
-    const formElementRef = useRef<HTMLFormElement>(null);
+                    function webAuthnAuthenticate() {
-
+                        let isUserIdentified = ${isUserIdentified};
-    const webAuthnAuthenticate = useConstCallback(async () => {
                         if (!isUserIdentified) {
+                            doAuthenticate([]);
                             return;
                         }
-
+                        checkAllowCredentials();
-        const submitForm = async (): Promise<void> => {
-            const formElement = formElementRef.current;
-
-            if (formElement === null) {
-                await new Promise(resolve => setTimeout(resolve, 100));
-                return submitForm();
                     }
 
-            formElement.submit();
+                    function checkAllowCredentials() {
-        };
+                        let allowCredentials = [];
+                        let authn_use = document.forms['authn_select'].authn_use_chk;
+                    
+                        if (authn_use !== undefined) {
+                            if (authn_use.length === undefined) {
+                                allowCredentials.push({
+                                    id: base64url.decode(authn_use.value, {loose: true}),
+                                    type: 'public-key',
+                                });
+                            } else {
+                                for (let i = 0; i < authn_use.length; i++) {
+                                    allowCredentials.push({
+                                        id: base64url.decode(authn_use[i].value, {loose: true}),
+                                        type: 'public-key',
+                                    });
+                                }
+                            }
+                        }
+                        doAuthenticate(allowCredentials);
+                    }
+
+
+                    function doAuthenticate(allowCredentials) {
                     
-        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"));
+                            $("#error").val("${msgStr("webauthn-unsupported-browser-text")}");
-            submitForm();
+                            $("#webauth").submit();
                             return;
                         }
                     
-        const publicKey: PublicKeyCredentialRequestOptions = {
+                        let challenge = "${challenge}";
-            rpId,
+                        let userVerification = "${userVerification}";
-            challenge: base64url.parse(challenge, { loose: true })
+                        let rpId = "${rpId}";
+                        let publicKey = {
+                            rpId : rpId,
+                            challenge: base64url.decode(challenge, { loose: true })
                         };
                     
-        if (createTimeout !== 0) {
+                        let createTimeout = ${createTimeout};
-            publicKey.timeout = createTimeout * 1000;
+                        if (createTimeout !== 0) publicKey.timeout = createTimeout * 1000;
-        }
                     
                         if (allowCredentials.length) {
                             publicKey.allowCredentials = allowCredentials;
                         }
                     
-        if (userVerification !== "not specified") {
+                        if (userVerification !== 'not specified') publicKey.userVerification = userVerification;
-            publicKey.userVerification = userVerification;
+                    
+                        navigator.credentials.get({publicKey})
+                            .then((result) => {
+                                window.result = result;
+                            
+                                let clientDataJSON = result.response.clientDataJSON;
+                                let authenticatorData = result.response.authenticatorData;
+                                let signature = result.response.signature;
+                            
+                                $("#clientDataJSON").val(base64url.encode(new Uint8Array(clientDataJSON), { pad: false }));
+                                $("#authenticatorData").val(base64url.encode(new Uint8Array(authenticatorData), { pad: false }));
+                                $("#signature").val(base64url.encode(new Uint8Array(signature), { pad: false }));
+                                $("#credentialId").val(result.id);
+                                if(result.response.userHandle) {
+                                    $("#userHandle").val(base64url.encode(new Uint8Array(result.response.userHandle), { pad: false }));
+                                }
+                                $("#webauth").submit();
+                            })
+                            .catch((err) => {
+                                $("#error").val(err);
+                                $("#webauth").submit();
+                            })
+                        ;
                     }
 
-        try {
+                `
-            const result = await navigator.credentials.get({ publicKey });
-            if (!result || result.type != "public-key") {
-                return;
             }
-            assert(is<PublicKeyCredential>(result));
+        ]
-            if (!("authenticatorData" in result.response)) {
-                return;
-            }
-            const response = result.response;
-
-            const clientDataJSON = response.clientDataJSON;
-
-            assert(
-                typeGuard<AuthenticatorAssertionResponse>(response, "signature" in response && response.authenticatorData instanceof ArrayBuffer),
-                "response not an AuthenticatorAssertionResponse"
-            );
-
-            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 }));
-        } catch (err) {
-            setError(String(err));
-        }
-
-        submitForm();
     });
 
-    const [clientDataJSON, setClientDataJSON] = useState("");
+    useEffect(() => {
-    const [authenticatorData, setAuthenticatorData] = useState("");
+        insertScriptTags();
-    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")}>
+        <Template
+            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            displayMessage={!messagesPerField.existsError("username")}
+            displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
+            infoNode={
+                <div id="kc-registration">
+                    <span>
+                        {msg("noAccount")}{" "}
+                        <a tabIndex={6} href={url.registrationUrl}>
+                            {msg("doRegister")}
+                        </a>
+                    </span>
+                </div>
+            }
+            headerNode={msg("webauthn-login-title")}
+        >
             <div id="kc-form-webauthn" className={getClassName("kcFormClass")}>
-                <form id="webauth" action={url.loginAction} ref={formElementRef} method="post">
+                <form id="webauth" action={url.loginAction} method="post">
-                    <input type="hidden" id="clientDataJSON" name="clientDataJSON" value={clientDataJSON} />
+                    <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
-                    <input type="hidden" id="authenticatorData" name="authenticatorData" value={authenticatorData} />
+                    <input type="hidden" id="authenticatorData" name="authenticatorData" />
-                    <input type="hidden" id="signature" name="signature" value={signature} />
+                    <input type="hidden" id="signature" name="signature" />
-                    <input type="hidden" id="credentialId" name="credentialId" value={credentialId} />
+                    <input type="hidden" id="credentialId" name="credentialId" />
-                    <input type="hidden" id="userHandle" name="userHandle" value={userHandle} />
+                    <input type="hidden" id="userHandle" name="userHandle" />
-                    <input type="hidden" id="error" name="error" value={error} />
+                    <input type="hidden" id="error" name="error" />
                 </form>
-                <div className={getClassName("kcFormGroupClass")}>
+                <div className={clsx(getClassName("kcFormGroupClass"), "no-bottom-margin")}>
-                    {authenticators &&
+                    {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} />
+                                    <input type="hidden" name="authn_use_chk" value={authenticator.credentialId} />
                                 ))}
                             </form>
-                        ))()}
+
-                    {authenticators &&
+                            {shouldDisplayAuthenticators && (
-                        shouldDisplayAuthenticators &&
-                        (() => (
                                 <>
                                     {authenticators.authenticators.length > 1 && (
                                         <p className={getClassName("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
                                     )}
-                                <div className={getClassName("kcFormClass")}>
+                                    <div className={getClassName("kcFormOptionsClass")}>
-                                    {authenticators.authenticators.map(authenticator => (
+                                        {authenticators.authenticators.map((authenticator, i) => (
-                                        <div id="kc-webauthn-authenticator" className={getClassName("kcSelectAuthListItemClass")}>
+                                            <div key={i} 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(" ")
+                                                                if (className === authenticator.transports.iconClass) {
-                                                                ? className
+                                                                    return getClassName("kcWebAuthnDefaultIcon");
-                                                                : [className, getClassName("kcWebAuthnDefaultIcon")];
+                                                                }
+                                                                return className;
                                                             })(),
                                                             getClassName("kcSelectAuthListItemIconPropertyClass")
                                                         )}
                                                     />
                                                 </div>
-                                            <div className={getClassName("kcSelectAuthListItemBodyClass")}>
+                                                <div className={getClassName("kcSelectAuthListItemArrowIconClass")}>
                                                     <div
                                                         id="kc-webauthn-authenticator-label"
                                                         className={getClassName("kcSelectAuthListItemHeadingClass")}
                                                     >
-                                                    {authenticator.label}
+                                                        {msg(authenticator.label as MessageKey)}
                                                     </div>
-
+                                                    {authenticator.transports.displayNameProperties?.length && (
-                                                {authenticator.transports && authenticator.transports.displayNameProperties.length && (
                                                         <div
                                                             id="kc-webauthn-authenticator-transport"
                                                             className={getClassName("kcSelectAuthListItemDescriptionClass")}
                                                         >
-                                                        {authenticator.transports.displayNameProperties.map(
+                                                            {authenticator.transports.displayNameProperties
-                                                            (transport: MessageKey, index: number) => (
+                                                                .map((nameProperty, i, arr) => ({ nameProperty, "hasNext": i !== arr.length - 1 }))
-                                                                <>
+                                                                .map(({ nameProperty, hasNext }) => (
-                                                                    <span>{msg(transport)}</span>
+                                                                    <Fragment key={nameProperty}>
-                                                                    {index < authenticator.transports.displayNameProperties.length - 1 && (
+                                                                        <span>{msg(nameProperty)}</span>
-                                                                        <span>{", "}</span>
+                                                                        {hasNext && <span>, </span>}
-                                                                    )}
+                                                                    </Fragment>
-                                                                </>
+                                                                ))}
-                                                            )
-                                                        )}
                                                         </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>
                                 </>
-                        ))()}
+                            )}
+                        </>
+                    )}
+
                     <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
                         <input
                             id="authenticateWebAuthnButton"
                             type="button"
-                            onClick={webAuthnAuthenticate}
+                            onClick={() => {
-                            autoFocus={true}
+                                assert("webAuthnAuthenticate" in window);
+                                assert(window.webAuthnAuthenticate instanceof Function);
+                                window.webAuthnAuthenticate();
+                            }}
+                            autoFocus
                             value={msgStr("webauthn-doAuthenticate")}
                             className={clsx(
                                 getClassName("kcButtonClass"),