keycloakify/login/pages/Login.useScript.js

Framework to create custom Keycloak UIs

import { useEffect } from "react";
import { useInsertScriptTags } from "../../tools/useInsertScriptTags";
import { assert } from "../../tools/assert";
import { waitForElementMountedOnDom } from "../../tools/waitForElementMountedOnDom";
assert();
assert();
export function useScript(params) {
    const { webAuthnButtonId, kcContext, i18n } = params;
    const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
    const { msgStr, isFetchingTranslations } = i18n;
    const { insertScriptTags } = useInsertScriptTags({
        componentOrHookName: "Login",
        scriptTags: [
            {
                type: "module",
                textContent: () => `

                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
                    import { initAuthenticate } from "${url.resourcesPath}/js/passkeysConditionalAuth.js";
                    const authButton = document.getElementById('${webAuthnButtonId}');
                    const input = {
                        isUserIdentified : ${isUserIdentified},
                        challenge : ${JSON.stringify(challenge)},
                        userVerification : ${JSON.stringify(userVerification)},
                        rpId : ${JSON.stringify(rpId)},
                        createTimeout : ${createTimeout}
                    };
                    authButton.addEventListener("click", () => {
                        authenticateByWebAuthn({
                            ...input,
                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
                        });
                    }, { once: true });

                    initAuthenticate({
                        ...input,
                        errmsg : ${JSON.stringify(msgStr("passkey-unsupported-browser-text"))}
                    });
                `
            }
        ]
    });
    useEffect(() => {
        if (isFetchingTranslations || kcContext.enableWebAuthnConditionalUI !== true) {
            return;
        }
        (async () => {
            await waitForElementMountedOnDom({
                elementId: webAuthnButtonId
            });
            insertScriptTags();
        })();
    }, [isFetchingTranslations]);
}
//# sourceMappingURL=Login.useScript.js.map