Complete rework of WebauthnRegister

src/login/KcContext/kcContextMocks.ts

@@ -345,8 +345,7 @@ export const kcContextMocks = [
         rpId: "",
         createTimeout: "0",
         isUserIdentified: "false",
-        shouldDisplayAuthenticators: false,
+        shouldDisplayAuthenticators: false
-        login: {}
     }),
     id<KcContext.LoginUpdatePassword>({
         ...kcContextCommonMock,

src/login/pages/LoginPasskeysConditionalAuthenticate.useScript.tsx

@@ -11,7 +11,7 @@ type KcContextLike = {
     challenge: string;
     userVerification: string;
     rpId: string;
-    createTimeout: number;
+    createTimeout: number | string;
 };
 
 assert<keyof KcContextLike extends keyof KcContext.LoginPasskeysConditionalAuthenticate ? true : false>();
@@ -41,9 +41,9 @@ export function useScript(params: { authButtonId: string; kcContext: KcContextLi
                     const authButton = document.getElementById("${authButtonId}");
                     const input = {
                         isUserIdentified : ${isUserIdentified},
-                        challenge : '${challenge}',
+                        challenge : ${JSON.stringify(challenge)},
-                        userVerification : '${userVerification}',
+                        userVerification : ${JSON.stringify(userVerification)},
-                        rpId : '${rpId}',
+                        rpId : ${JSON.stringify(rpId)},
                         createTimeout : ${createTimeout}
                     };
                     authButton.addEventListener("click", () => {

src/login/pages/WebauthnAuthenticate.useScript.tsx

@@ -30,7 +30,7 @@ export function useScript(params: { authButtonId: string; kcContext: KcContextLi
     const { msgStr, isFetchingTranslations } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
-        componentOrHookName: "LoginRecoveryAuthnCodeConfig",
+        componentOrHookName: "WebauthnAuthenticate",
         scriptTags: [
             {
                 type: "module",

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 {
+    const { url, isSetRetry, isAppInitiatedAction } = kcContext;
-        url,
-        challenge,
-        userid,
-        username,
-        signatureAlgorithms,
-        rpEntityName,
-        rpId,
-        attestationConveyancePreference,
-        authenticatorAttachment,
-        requireResidentKey,
-        userVerificationRequirement,
-        createTimeout,
-        excludeCredentialIds,
-        isSetRetry,
-        isAppInitiatedAction
-    } = kcContext;
 
     const { msg, msgStr } = i18n;
 
-    const { insertScriptTags } = useInsertScriptTags({
+    const authButtonId = "authenticateWebAuthnButton";
-        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() {
 
-                    // Check if WebAuthn is supported by this browser
+    useScript({
-                    if (!window.PublicKeyCredential) {
+        authButtonId,
-                        $("#error").val("${msgStr("webauthn-unsupported-browser-text")}");
+        kcContext,
-                        $("#register").submit();
+        i18n
-                        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);
-                }
-                `
-            }
-        ]
     });
 
-    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 && (

src/login/pages/WebauthnRegister.useScript.tsx

@@ -0,0 +1,93 @@
+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;
+    };
+    challenge: string;
+    userid: string;
+    username: string;
+    signatureAlgorithms: string[];
+    rpEntityName: string;
+    rpId: string;
+    attestationConveyancePreference: string;
+    authenticatorAttachment: string;
+    requireResidentKey: string;
+    userVerificationRequirement: string;
+    createTimeout: number | string;
+    excludeCredentialIds: string;
+};
+
+assert<keyof KcContextLike extends keyof KcContext.WebauthnRegister ? true : false>();
+assert<KcContext.WebauthnRegister extends KcContextLike ? true : false>();
+
+type I18nLike = {
+    msgStr: (key: "webauthn-registration-init-label" | "webauthn-registration-init-label-prompt" | "webauthn-unsupported-browser-text") => string;
+    isFetchingTranslations: boolean;
+};
+
+export function useScript(params: { authButtonId: string; kcContext: KcContextLike; i18n: I18nLike }) {
+    const { authButtonId, kcContext, i18n } = params;
+
+    const {
+        url,
+        challenge,
+        userid,
+        username,
+        signatureAlgorithms,
+        rpEntityName,
+        rpId,
+        attestationConveyancePreference,
+        authenticatorAttachment,
+        requireResidentKey,
+        userVerificationRequirement,
+        createTimeout,
+        excludeCredentialIds
+    } = kcContext;
+
+    const { msgStr, isFetchingTranslations } = i18n;
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "LoginRecoveryAuthnCodeConfig",
+        scriptTags: [
+            {
+                type: "module",
+                textContent: () => `
+                    import { registerByWebAuthn } from "${url.resourcesPath}/js/webauthnRegister.js";
+                    const registerButton = document.getElementById('${authButtonId}');
+                    registerButton.addEventListener("click", function() {
+                        const input = {
+                            challenge : '${challenge}',
+                            userid : '${userid}',
+                            username : '${username}',
+                            signatureAlgorithms : ${JSON.stringify(signatureAlgorithms)},
+                            rpEntityName : ${JSON.stringify(rpEntityName)},
+                            rpId : ${JSON.stringify(rpId)},
+                            attestationConveyancePreference : ${JSON.stringify(attestationConveyancePreference)},
+                            authenticatorAttachment : ${JSON.stringify(authenticatorAttachment)},
+                            requireResidentKey : ${JSON.stringify(requireResidentKey)},
+                            userVerificationRequirement : ${JSON.stringify(userVerificationRequirement)},
+                            createTimeout : ${createTimeout},
+                            excludeCredentialIds : ${JSON.stringify(excludeCredentialIds)},
+                            initLabel : ${JSON.stringify(msgStr("webauthn-registration-init-label"))},
+                            initLabelPrompt : ${JSON.stringify(msgStr("webauthn-registration-init-label-prompt"))},
+                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
+                        };
+                        registerByWebAuthn(input);
+                    });
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (isFetchingTranslations) {
+            return;
+        }
+
+        insertScriptTags();
+    }, [isFetchingTranslations]);
+}