keycloakify 9.6.7 → 10.0.0-rc.0

package/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";
-import { typeGuard } from "tsafe/typeGuard";
+
+const { useInsertScriptTags } = createUseInsertScriptTags();
 
 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 createTimeout = Number(kcContext.createTimeout);
-    const isUserIdentified = kcContext.isUserIdentified == "true";
-
-    const formElementRef = useRef<HTMLFormElement>(null);
-
-    const webAuthnAuthenticate = useConstCallback(async () => {
-        if (!isUserIdentified) {
-            return;
-        }
-
-        const submitForm = async (): Promise<void> => {
-            const formElement = formElementRef.current;
-
-            if (formElement === null) {
-                await new Promise(resolve => setTimeout(resolve, 100));
-                return submitForm();
+    const { insertScriptTags } = useInsertScriptTags({
+        "scriptTags": [
+            {
+                "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": `
+
+                    function webAuthnAuthenticate() {
+                        let isUserIdentified = ${isUserIdentified};
+                        if (!isUserIdentified) {
+                            doAuthenticate([]);
+                            return;
+                        }
+                        checkAllowCredentials();
+                    }
+
+                    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) {
+                    
+                        // Check if WebAuthn is supported by this browser
+                        if (!window.PublicKeyCredential) {
+                            $("#error").val("${msgStr("webauthn-unsupported-browser-text")}");
+                            $("#webauth").submit();
+                            return;
+                        }
+                    
+                        let challenge = "${challenge}";
+                        let userVerification = "${userVerification}";
+                        let rpId = "${rpId}";
+                        let publicKey = {
+                            rpId : rpId,
+                            challenge: base64url.decode(challenge, { loose: true })
+                        };
+                    
+                        let createTimeout = ${createTimeout};
+                        if (createTimeout !== 0) publicKey.timeout = createTimeout * 1000;
+                    
+                        if (allowCredentials.length) {
+                            publicKey.allowCredentials = allowCredentials;
+                        }
+                    
+                        if (userVerification !== 'not specified') 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();
+                            })
+                        ;
+                    }
+
+                `
             }
-
-            formElement.submit();
-        };
-
-        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 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("");
-    const [authenticatorData, setAuthenticatorData] = useState("");
-    const [signature, setSignature] = useState("");
-    const [credentialId, setCredentialId] = useState("");
-    const [userHandle, setUserHandle] = useState("");
-    const [error, setError] = useState("");
+    useEffect(() => {
+        insertScriptTags();
+    }, []);
 
     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">
-                    <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 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={getClassName("kcFormGroupClass")}>
-                    {authenticators &&
-                        (() => (
+                <div className={clsx(getClassName("kcFormGroupClass"), "no-bottom-margin")}>
+                    {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 &&
-                        (() => (
-                            <>
-                                {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 && (
+                            {shouldDisplayAuthenticators && (
+                                <>
+                                    {authenticators.authenticators.length > 1 && (
+                                        <p className={getClassName("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
+                                    )}
+                                    <div className={getClassName("kcFormOptionsClass")}>
+                                        {authenticators.authenticators.map((authenticator, i) => (
+                                            <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);
+                                                                if (className === authenticator.transports.iconClass) {
+                                                                    return getClassName("kcWebAuthnDefaultIcon");
+                                                                }
+                                                                return className;
+                                                            })(),
+                                                            getClassName("kcSelectAuthListItemIconPropertyClass")
+                                                        )}
+                                                    />
+                                                </div>
+                                                <div className={getClassName("kcSelectAuthListItemArrowIconClass")}>
                                                     <div
-                                                        id="kc-webauthn-authenticator-transport"
-                                                        className={getClassName("kcSelectAuthListItemDescriptionClass")}
+                                                        id="kc-webauthn-authenticator-label"
+                                                        className={getClassName("kcSelectAuthListItemHeadingClass")}
                                                     >
-                                                        {authenticator.transports.displayNameProperties.map(
-                                                            (transport: MessageKey, index: number) => (
-                                                                <>
-                                                                    <span>{msg(transport)}</span>
-                                                                    {index < authenticator.transports.displayNameProperties.length - 1 && (
-                                                                        <span>{", "}</span>
-                                                                    )}
-                                                                </>
-                                                            )
-                                                        )}
+                                                        {msg(authenticator.label as MessageKey)}
                                                     </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>
+                                                    {authenticator.transports.displayNameProperties?.length && (
+                                                        <div
+                                                            id="kc-webauthn-authenticator-transport"
+                                                            className={getClassName("kcSelectAuthListItemDescriptionClass")}
+                                                        >
+                                                            {authenticator.transports.displayNameProperties
+                                                                .map((nameProperty, i, arr) => ({ nameProperty, "hasNext": i !== arr.length - 1 }))
+                                                                .map(({ nameProperty, hasNext }) => (
+                                                                    <Fragment key={nameProperty}>
+                                                                        <span>{msg(nameProperty)}</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 className={getClassName("kcSelectAuthListItemFillClass")} />
                                                 </div>
                                             </div>
-                                            <div className={getClassName("kcSelectAuthListItemFillClass")} />
-                                        </div>
-                                    ))}
-                                </div>
-                            </>
-                        ))()}
+                                        ))}
+                                    </div>
+                                </>
+                            )}
+                        </>
+                    )}
+
                     <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
                         <input
                             id="authenticateWebAuthnButton"
                             type="button"
-                            onClick={webAuthnAuthenticate}
-                            autoFocus={true}
+                            onClick={() => {
+                                assert("webAuthnAuthenticate" in window);
+                                assert(typeof window.webAuthnAuthenticate === "function");
+                                window.webAuthnAuthenticate();
+                            }}
+                            autoFocus
                             value={msgStr("webauthn-doAuthenticate")}
                             className={clsx(
                                 getClassName("kcButtonClass"),

package/src/login/pages/WebauthnError.tsx

@@ -0,0 +1,66 @@
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import { clsx } from "keycloakify/tools/clsx";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function WebauthnError(props: PageProps<Extract<KcContext, { pageId: "webauthn-error.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { url, isAppInitiatedAction } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage headerNode={msg("webauthn-error-title")}>
+            <form id="kc-error-credential-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+                <input type="hidden" id="executionValue" name="authenticationExecution" />
+                <input type="hidden" id="isSetRetry" name="isSetRetry" />
+            </form>
+            <input
+                tabIndex={4}
+                onClick={() => {
+                    // @ts-expect-error: Trusted Keycloak's code
+                    document.getElementById("isSetRetry").value = "retry";
+                    // @ts-expect-error: Trusted Keycloak's code
+                    document.getElementById("executionValue").value = "${execution}";
+                    // @ts-expect-error: Trusted Keycloak's code
+                    document.getElementById("kc-error-credential-form").submit();
+                }}
+                type="button"
+                className={clsx(
+                    getClassName("kcButtonClass"),
+                    getClassName("kcButtonPrimaryClass"),
+                    getClassName("kcButtonBlockClass"),
+                    getClassName("kcButtonLargeClass")
+                )}
+                name="try-again"
+                id="kc-try-again"
+                value={msgStr("doTryAgain")}
+            />
+            {isAppInitiatedAction && (
+                <form action={url.loginAction} className={getClassName("kcFormClass")} id="kc-webauthn-settings-form" method="post">
+                    <button
+                        type="submit"
+                        className={clsx(
+                            getClassName("kcButtonClass"),
+                            getClassName("kcButtonDefaultClass"),
+                            getClassName("kcButtonBlockClass"),
+                            getClassName("kcButtonLargeClass")
+                        )}
+                        id="cancelWebAuthnAIA"
+                        name="cancel-aia"
+                        value="true"
+                    >
+                        {msgStr("doCancel")}
+                    </button>
+                </form>
+            )}
+        </Template>
+    );
+}