keycloakify 10.1.0-rc.1 → 10.1.0

package/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]);
+}

package/src/tools/useInsertScriptTags.ts

@@ -6,11 +6,11 @@ export type ScriptTag = ScriptTag.TextContent | ScriptTag.Src;
 
 export namespace ScriptTag {
     type Common = {
-        type: "text/javascript" | "module";
+        type: "text/javascript" | "module" | "importmap";
     };
 
     export type TextContent = Common & {
-        textContent: string;
+        textContent: string | (() => string);
     };
     export type Src = Common & {
         src: string;
@@ -69,7 +69,12 @@ export function useInsertScriptTags(params: {
                 for (let i = 0; i < scripts.length; i++) {
                     const script = scripts[i];
                     if ("textContent" in scriptTag) {
-                        if (script.textContent === scriptTag.textContent) {
+                        const textContent =
+                            typeof scriptTag.textContent === "function"
+                                ? scriptTag.textContent()
+                                : scriptTag.textContent;
+
+                        if (script.textContent === textContent) {
                             return;
                         }
                         continue;
@@ -90,7 +95,12 @@ export function useInsertScriptTags(params: {
 
             (() => {
                 if ("textContent" in scriptTag) {
-                    htmlElement.textContent = scriptTag.textContent;
+                    const textContent =
+                        typeof scriptTag.textContent === "function"
+                            ? scriptTag.textContent()
+                            : scriptTag.textContent;
+
+                    htmlElement.textContent = textContent;
                     return;
                 }
                 if ("src" in scriptTag) {

package/src/vite-plugin/vite-plugin.ts

@@ -1,8 +1,7 @@
 import { join as pathJoin, relative as pathRelative, sep as pathSep } from "path";
 import type { Plugin } from "vite";
 import {
-    BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR,
-    KEYCLOAK_RESOURCES,
+    WELL_KNOWN_DIRECTORY_BASE_NAME,
     VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES
 } from "../bin/shared/constants";
 import { id } from "tsafe/id";
@@ -128,14 +127,8 @@ export function keycloakify(params: keycloakify.Params) {
                 }
             });
 
-            await Promise.all([
-                copyKeycloakResourcesToPublic({
-                    buildContext
-                }),
-                generateKcGenTs({
-                    buildContext
-                })
-            ]);
+            copyKeycloakResourcesToPublic({ buildContext }),
+                await generateKcGenTs({ buildContext });
         },
         transform: (code, id) => {
             assert(command !== undefined);
@@ -174,7 +167,7 @@ export function keycloakify(params: keycloakify.Params) {
                     `(`,
                     `(window.kcContext === undefined || import.meta.env.MODE === "development")?`,
                     `"${urlPathname ?? "/"}":`,
-                    `(window.kcContext["x-keycloakify"].resourcesPath + "/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/")`,
+                    `(window.kcContext["x-keycloakify"].resourcesPath + "/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}/")`,
                     `)`
                 ].join("")
             );
@@ -207,10 +200,13 @@ export function keycloakify(params: keycloakify.Params) {
 
             assert(buildDirPath !== undefined);
 
-            await rm(pathJoin(buildDirPath, KEYCLOAK_RESOURCES), {
-                recursive: true,
-                force: true
-            });
+            await rm(
+                pathJoin(buildDirPath, WELL_KNOWN_DIRECTORY_BASE_NAME.DOT_KEYCLOAKIFY),
+                {
+                    recursive: true,
+                    force: true
+                }
+            );
         }
     } satisfies Plugin;
 

package/tools/useInsertScriptTags.d.ts

@@ -1,10 +1,10 @@
 export type ScriptTag = ScriptTag.TextContent | ScriptTag.Src;
 export declare namespace ScriptTag {
     type Common = {
-        type: "text/javascript" | "module";
+        type: "text/javascript" | "module" | "importmap";
     };
     export type TextContent = Common & {
-        textContent: string;
+        textContent: string | (() => string);
     };
     export type Src = Common & {
         src: string;

package/tools/useInsertScriptTags.js

@@ -40,7 +40,10 @@ export function useInsertScriptTags(params) {
                 for (let i = 0; i < scripts.length; i++) {
                     const script = scripts[i];
                     if ("textContent" in scriptTag) {
-                        if (script.textContent === scriptTag.textContent) {
+                        const textContent = typeof scriptTag.textContent === "function"
+                            ? scriptTag.textContent()
+                            : scriptTag.textContent;
+                        if (script.textContent === textContent) {
                             return;
                         }
                         continue;
@@ -58,7 +61,10 @@ export function useInsertScriptTags(params) {
             htmlElement.type = scriptTag.type;
             (() => {
                 if ("textContent" in scriptTag) {
-                    htmlElement.textContent = scriptTag.textContent;
+                    const textContent = typeof scriptTag.textContent === "function"
+                        ? scriptTag.textContent()
+                        : scriptTag.textContent;
+                    htmlElement.textContent = textContent;
                     return;
                 }
                 if ("src" in scriptTag) {

package/tools/useInsertScriptTags.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInsertScriptTags.js","sourceRoot":"","sources":["../src/tools/useInsertScriptTags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAiBnE,MAAM,kCAAkC,GAAG,IAAI,GAAG,EAAU,CAAC;AAE7D;;;;;;;;;GASG;AACH,MAAM,UAAU,mBAAmB,CAAC,MAGnC;IACG,MAAM,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAAG,MAAM,CAAC;IAEnD,cAAc,CAAC,GAAG,EAAE;QAChB,MAAM,gBAAgB,GAClB,kCAAkC,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAEhE,IAAI,gBAAgB,EAAE;YAClB,MAAM,EAAE;gBACJ,IACI,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,MAAM,EACvE;oBACE,2EAA2E;oBAC3E,MAAM,MAAM,CAAC;iBAChB;gBACD,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;aAC5B;YACD,OAAO;SACV;QAED,kCAAkC,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,IAAI,kBAAkB,GAAG,KAAK,CAAC;IAE/B,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,IAAI,kBAAkB,EAAE;YACpB,OAAO;SACV;QAED,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;YAC3B,mEAAmE;YACnE;gBACI,MAAM,OAAO,GAAG,QAAQ,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;gBACxD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACrC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;oBAC1B,IAAI,aAAa,IAAI,SAAS,EAAE;wBAC5B,IAAI,MAAM,CAAC,WAAW,KAAK,SAAS,CAAC,WAAW,EAAE;4BAC9C,OAAO;yBACV;wBACD,SAAS;qBACZ;oBACD,IAAI,KAAK,IAAI,SAAS,EAAE;wBACpB,IAAI,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,SAAS,CAAC,GAAG,EAAE;4BAC9C,OAAO;yBACV;wBACD,SAAS;qBACZ;oBACD,MAAM,CAAC,KAAK,CAAC,CAAC;iBACjB;aACJ;YAED,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAErD,WAAW,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC;YAElC,CAAC,GAAG,EAAE;gBACF,IAAI,aAAa,IAAI,SAAS,EAAE;oBAC5B,WAAW,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;oBAChD,OAAO;iBACV;gBACD,IAAI,KAAK,IAAI,SAAS,EAAE;oBACpB,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC;oBAChC,OAAO;iBACV;gBACD,MAAM,CAAC,KAAK,CAAC,CAAC;YAClB,CAAC,CAAC,EAAE,CAAC;YAEL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;QAEH,kBAAkB,GAAG,IAAI,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAChC,CAAC"}
+{"version":3,"file":"useInsertScriptTags.js","sourceRoot":"","sources":["../src/tools/useInsertScriptTags.ts"],"names":[],"mappings":"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"}