keycloakify 10.1.0-rc.1 → 10.1.0

package/src/login/pages/Register.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
 import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
+import { clsx } from "keycloakify/tools/clsx";
 import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFieldsProps";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
@@ -19,9 +20,10 @@ export default function Register(props: RegisterProps) {
         classes
     });
 
-    const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey, termsAcceptanceRequired } = kcContext;
+    const { messageHeader, url, messagesPerField, recaptchaRequired, recaptchaVisible, recaptchaSiteKey, recaptchaAction, termsAcceptanceRequired } =
+        kcContext;
 
-    const { msg, msgStr } = i18n;
+    const { msg, msgStr, advancedMsg } = i18n;
 
     const [isFormSubmittable, setIsFormSubmittable] = useState(false);
     const [areTermsAccepted, setAreTermsAccepted] = useState(false);
@@ -32,7 +34,7 @@ export default function Register(props: RegisterProps) {
             i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
-            headerNode={msg("registerTitle")}
+            headerNode={messageHeader !== undefined ? advancedMsg(messageHeader) : msg("registerTitle")}
             displayMessage={messagesPerField.exists("global")}
             displayRequiredFields
         >
@@ -53,10 +55,10 @@ export default function Register(props: RegisterProps) {
                         onAreTermsAcceptedValueChange={setAreTermsAccepted}
                     />
                 )}
-                {recaptchaRequired && (
+                {recaptchaRequired && (recaptchaVisible || recaptchaAction === undefined) && (
                     <div className="form-group">
                         <div className={kcClsx("kcInputWrapperClass")}>
-                            <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div>
+                            <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} data-action={recaptchaAction}></div>
                         </div>
                     </div>
                 )}
@@ -68,14 +70,34 @@ export default function Register(props: RegisterProps) {
                             </span>
                         </div>
                     </div>
-                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
-                        <input
-                            disabled={!isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted)}
-                            className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
-                            type="submit"
-                            value={msgStr("doRegister")}
-                        />
-                    </div>
+
+                    {recaptchaRequired && !recaptchaVisible && recaptchaAction !== undefined ? (
+                        <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                            <button
+                                className={clsx(
+                                    kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass"),
+                                    "g-recaptcha"
+                                )}
+                                data-sitekey={recaptchaSiteKey}
+                                data-callback={() => {
+                                    (document.getElementById("kc-register-form") as HTMLFormElement).submit();
+                                }}
+                                data-action={recaptchaAction}
+                                type="submit"
+                            >
+                                {msg("doRegister")}
+                            </button>
+                        </div>
+                    ) : (
+                        <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                            <input
+                                disabled={!isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted)}
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                                type="submit"
+                                value={msgStr("doRegister")}
+                            />
+                        </div>
+                    )}
                 </div>
             </form>
         </Template>

package/src/login/pages/WebauthnAuthenticate.tsx

@@ -1,8 +1,7 @@
-import { useEffect, Fragment } from "react";
-import { assert } from "keycloakify/tools/assert";
+import { Fragment } from "react";
 import { clsx } from "keycloakify/tools/clsx";
-import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import { useScript } from "keycloakify/login/pages/WebauthnAuthenticate.useScript";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
@@ -12,136 +11,25 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
 
     const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
-    const {
-        url,
-        isUserIdentified,
-        challenge,
-        userVerification,
-        rpId,
-        createTimeout,
-        messagesPerField,
-        realm,
-        registrationDisabled,
-        authenticators,
-        shouldDisplayAuthenticators
-    } = kcContext;
+    const { url, realm, registrationDisabled, authenticators, shouldDisplayAuthenticators } = kcContext;
 
     const { msg, msgStr, advancedMsg } = i18n;
 
-    const { insertScriptTags } = useInsertScriptTags({
-        componentOrHookName: "WebauthnAuthenticate",
-        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: `
+    const authButtonId = "authenticateWebAuthnButton";
 
-                    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();
-                            })
-                        ;
-                    }
-
-                `
-            }
-        ]
+    useScript({
+        authButtonId,
+        kcContext,
+        i18n
     });
 
-    useEffect(() => {
-        insertScriptTags();
-    }, []);
-
     return (
         <Template
             kcContext={kcContext}
             i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
-            displayMessage={!messagesPerField.existsError("username")}
-            displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
+            displayInfo={realm.registrationAllowed && !registrationDisabled}
             infoNode={
                 <div id="kc-registration">
                     <span>
@@ -179,7 +67,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                                     )}
                                     <div className={kcClsx("kcFormOptionsClass")}>
                                         {authenticators.authenticators.map((authenticator, i) => (
-                                            <div key={i} id="kc-webauthn-authenticator" className={kcClsx("kcSelectAuthListItemClass")}>
+                                            <div key={i} id={`kc-webauthn-authenticator-item-${i}`} className={kcClsx("kcSelectAuthListItemClass")}>
                                                 <div className={kcClsx("kcSelectAuthListItemIconClass")}>
                                                     <i
                                                         className={clsx(
@@ -195,12 +83,15 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                                                     />
                                                 </div>
                                                 <div className={kcClsx("kcSelectAuthListItemArrowIconClass")}>
-                                                    <div id="kc-webauthn-authenticator-label" className={kcClsx("kcSelectAuthListItemHeadingClass")}>
+                                                    <div
+                                                        id={`kc-webauthn-authenticator-label-${i}`}
+                                                        className={kcClsx("kcSelectAuthListItemHeadingClass")}
+                                                    >
                                                         {advancedMsg(authenticator.label)}
                                                     </div>
                                                     {authenticator.transports.displayNameProperties?.length && (
                                                         <div
-                                                            id="kc-webauthn-authenticator-transport"
+                                                            id={`kc-webauthn-authenticator-transport-${i}`}
                                                             className={kcClsx("kcSelectAuthListItemDescriptionClass")}
                                                         >
                                                             {authenticator.transports.displayNameProperties
@@ -217,8 +108,10 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                                                         </div>
                                                     )}
                                                     <div className={kcClsx("kcSelectAuthListItemDescriptionClass")}>
-                                                        <span id="kc-webauthn-authenticator-created-label">{msg("webauthn-createdAt-label")}</span>
-                                                        <span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
+                                                        <span id={`kc-webauthn-authenticator-createdlabel-${i}`}>
+                                                            {msg("webauthn-createdAt-label")}
+                                                        </span>
+                                                        <span id={`kc-webauthn-authenticator-created-${i}`}>{authenticator.createdAt}</span>
                                                     </div>
                                                     <div className={kcClsx("kcSelectAuthListItemFillClass")} />
                                                 </div>
@@ -229,16 +122,10 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                             )}
                         </>
                     )}
-
                     <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
                         <input
-                            id="authenticateWebAuthnButton"
+                            id={authButtonId}
                             type="button"
-                            onClick={() => {
-                                assert("webAuthnAuthenticate" in window);
-                                assert(typeof window.webAuthnAuthenticate === "function");
-                                window.webAuthnAuthenticate();
-                            }}
                             autoFocus
                             value={msgStr("webauthn-doAuthenticate")}
                             className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}

package/src/login/pages/WebauthnAuthenticate.useScript.tsx

@@ -0,0 +1,64 @@
+import { useEffect } from "react";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { assert } from "keycloakify/tools/assert";
+import { KcContext } from "keycloakify/login/KcContext/KcContext";
+
+type KcContextLike = {
+    url: {
+        resourcesPath: string;
+    };
+    isUserIdentified: "true" | "false";
+    challenge: string;
+    userVerification: KcContext.WebauthnAuthenticate["userVerification"];
+    rpId: string;
+    createTimeout: number | string;
+};
+
+assert<keyof KcContextLike extends keyof KcContext.WebauthnAuthenticate ? true : false>();
+assert<KcContext.WebauthnAuthenticate extends KcContextLike ? true : false>();
+
+type I18nLike = {
+    msgStr: (key: "webauthn-unsupported-browser-text") => string;
+    isFetchingTranslations: boolean;
+};
+
+export function useScript(params: { authButtonId: string; kcContext: KcContextLike; i18n: I18nLike }) {
+    const { authButtonId, kcContext, i18n } = params;
+
+    const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
+
+    const { msgStr, isFetchingTranslations } = i18n;
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "WebauthnAuthenticate",
+        scriptTags: [
+            {
+                type: "module",
+                textContent: () => `
+
+                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+                    const authButton = document.getElementById('${authButtonId}');
+                    authButton.addEventListener("click", function() {
+                        const input = {
+                            isUserIdentified : ${isUserIdentified},
+                            challenge : '${challenge}',
+                            userVerification : '${userVerification}',
+                            rpId : '${rpId}',
+                            createTimeout : ${createTimeout},
+                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
+                        };
+                        authenticateByWebAuthn(input);
+                    });
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (isFetchingTranslations) {
+            return;
+        }
+
+        insertScriptTags();
+    }, [isFetchingTranslations]);
+}

package/src/login/pages/WebauthnRegister.tsx

@@ -1,7 +1,5 @@
-import { useEffect } from "react";
-import { assert } from "keycloakify/tools/assert";
 import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
-import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { useScript } from "keycloakify/login/pages/WebauthnRegister.useScript";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
@@ -11,198 +9,18 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
 
     const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
-    const {
-        url,
-        challenge,
-        userid,
-        username,
-        signatureAlgorithms,
-        rpEntityName,
-        rpId,
-        attestationConveyancePreference,
-        authenticatorAttachment,
-        requireResidentKey,
-        userVerificationRequirement,
-        createTimeout,
-        excludeCredentialIds,
-        isSetRetry,
-        isAppInitiatedAction
-    } = kcContext;
+    const { url, isSetRetry, isAppInitiatedAction } = kcContext;
 
     const { msg, msgStr } = i18n;
 
-    const { insertScriptTags } = useInsertScriptTags({
-        componentOrHookName: "WebauthnRegister",
-        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 registerSecurityKey() {
+    const authButtonId = "authenticateWebAuthnButton";
 
-                    // Check if WebAuthn is supported by this browser
-                    if (!window.PublicKeyCredential) {
-                        $("#error").val("${msgStr("webauthn-unsupported-browser-text")}");
-                        $("#register").submit();
-                        return;
-                    }
-    
-                    // mandatory parameters
-                    let challenge = "${challenge}";
-                    let userid = "${userid}";
-                    let username = "${username}";
-    
-                    let signatureAlgorithms =${JSON.stringify(signatureAlgorithms)};
-                    let pubKeyCredParams = getPubKeyCredParams(signatureAlgorithms);
-    
-                    let rpEntityName = "${rpEntityName}";
-                    let rp = {name: rpEntityName};
-    
-                    let publicKey = {
-                        challenge: base64url.decode(challenge, {loose: true}),
-                        rp: rp,
-                        user: {
-                            id: base64url.decode(userid, {loose: true}),
-                            name: username,
-                            displayName: username
-                        },
-                        pubKeyCredParams: pubKeyCredParams,
-                    };
-    
-                    // optional parameters
-                    let rpId = "${rpId}";
-                    publicKey.rp.id = rpId;
-    
-                    let attestationConveyancePreference = "${attestationConveyancePreference}";
-                    if (attestationConveyancePreference !== 'not specified') publicKey.attestation = attestationConveyancePreference;
-    
-                    let authenticatorSelection = {};
-                    let isAuthenticatorSelectionSpecified = false;
-    
-                    let authenticatorAttachment = "${authenticatorAttachment}";
-                    if (authenticatorAttachment !== 'not specified') {
-                        authenticatorSelection.authenticatorAttachment = authenticatorAttachment;
-                        isAuthenticatorSelectionSpecified = true;
-                    }
-    
-                    let requireResidentKey = "${requireResidentKey}";
-                    if (requireResidentKey !== 'not specified') {
-                        if (requireResidentKey === 'Yes')
-                            authenticatorSelection.requireResidentKey = true;
-                        else
-                            authenticatorSelection.requireResidentKey = false;
-                        isAuthenticatorSelectionSpecified = true;
-                    }
-    
-                    let userVerificationRequirement = "${userVerificationRequirement}";
-                    if (userVerificationRequirement !== 'not specified') {
-                        authenticatorSelection.userVerification = userVerificationRequirement;
-                        isAuthenticatorSelectionSpecified = true;
-                    }
-    
-                    if (isAuthenticatorSelectionSpecified) publicKey.authenticatorSelection = authenticatorSelection;
-    
-                    let createTimeout = ${createTimeout};
-                    if (createTimeout !== 0) publicKey.timeout = createTimeout * 1000;
-    
-                    let excludeCredentialIds = "${excludeCredentialIds}";
-                    let excludeCredentials = getExcludeCredentials(excludeCredentialIds);
-                    if (excludeCredentials.length > 0) publicKey.excludeCredentials = excludeCredentials;
-    
-                    navigator.credentials.create({publicKey})
-                        .then(function (result) {
-                            window.result = result;
-                            let clientDataJSON = result.response.clientDataJSON;
-                            let attestationObject = result.response.attestationObject;
-                            let publicKeyCredentialId = result.rawId;
-    
-                            $("#clientDataJSON").val(base64url.encode(new Uint8Array(clientDataJSON), {pad: false}));
-                            $("#attestationObject").val(base64url.encode(new Uint8Array(attestationObject), {pad: false}));
-                            $("#publicKeyCredentialId").val(base64url.encode(new Uint8Array(publicKeyCredentialId), {pad: false}));
-    
-                            if (typeof result.response.getTransports === "function") {
-                                let transports = result.response.getTransports();
-                                if (transports) {
-                                    $("#transports").val(getTransportsAsString(transports));
-                                }
-                            } else {
-                                console.log("Your browser is not able to recognize supported transport media for the authenticator.");
-                            }
-    
-                            let initLabel = "WebAuthn Authenticator (Default Label)";
-                            let labelResult = window.prompt("Please input your registered authenticator's label", initLabel);
-                            if (labelResult === null) labelResult = initLabel;
-                            $("#authenticatorLabel").val(labelResult);
-    
-                            $("#register").submit();
-    
-                        })
-                        .catch(function (err) {
-                            $("#error").val(err);
-                            $("#register").submit();
-    
-                        });
-                }
-    
-                function getPubKeyCredParams(signatureAlgorithmsList) {
-                    let pubKeyCredParams = [];
-                    if (signatureAlgorithmsList.length === 0) {
-                        pubKeyCredParams.push({type: "public-key", alg: -7});
-                        return pubKeyCredParams;
-                    }
-    
-                    for (let i = 0; i < signatureAlgorithmsList.length; i++) {
-                        pubKeyCredParams.push({
-                            type: "public-key",
-                            alg: signatureAlgorithmsList[i]
-                        });
-                    }
-                    return pubKeyCredParams;
-                }
-    
-                function getExcludeCredentials(excludeCredentialIds) {
-                    let excludeCredentials = [];
-                    if (excludeCredentialIds === "") return excludeCredentials;
-    
-                    let excludeCredentialIdsList = excludeCredentialIds.split(',');
-    
-                    for (let i = 0; i < excludeCredentialIdsList.length; i++) {
-                        excludeCredentials.push({
-                            type: "public-key",
-                            id: base64url.decode(excludeCredentialIdsList[i],
-                            {loose: true})
-                        });
-                    }
-                    return excludeCredentials;
-                }
-    
-                function getTransportsAsString(transportsList) {
-                    if (transportsList === '' || Array.isArray(transportsList)) return "";
-    
-                    let transportsString = "";
-    
-                    for (let i = 0; i < transportsList.length; i++) {
-                        transportsString += transportsList[i] + ",";
-                    }
-    
-                    return transportsString.slice(0, -1);
-                }
-                `
-            }
-        ]
+    useScript({
+        authButtonId,
+        kcContext,
+        i18n
     });
 
-    useEffect(() => {
-        insertScriptTags();
-    }, []);
-
     return (
         <Template
             kcContext={kcContext}
@@ -230,13 +48,8 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
             <input
                 type="submit"
                 className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
-                id="registerWebAuthn"
+                id={authButtonId}
                 value={msgStr("doRegisterSecurityKey")}
-                onClick={() => {
-                    assert("registerSecurityKey" in window);
-                    assert(typeof window.registerSecurityKey === "function");
-                    window.registerSecurityKey();
-                }}
             />
 
             {!isSetRetry && isAppInitiatedAction && (