@keycloakify/login-ui 250004.2.2 → 250004.3.0

package/core/KcContext/KcContext.d.ts

@@ -265,6 +265,10 @@ export declare namespace KcContext {
         };
         usernameHidden?: boolean;
         social?: Login["social"];
+        enableWebAuthnConditionalUI?: boolean;
+        authenticators?: {
+            authenticators: WebauthnAuthenticate.WebauthnAuthenticator[];
+        };
     };
     type LoginPassword = Common & {
         pageId: "login-password.ftl";

package/keycloak-theme/login/pages/login-username/Page.tsx

@@ -5,6 +5,7 @@ import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
 import { useKcContext } from "../../KcContext";
 import { useI18n } from "../../i18n";
 import { Template } from "../../components/Template";
+import { useScript } from "./useScript";
 
 export function Page() {
     const { kcContext } = useKcContext();
@@ -12,13 +13,26 @@ export function Page() {
 
     const { kcClsx } = useKcClsx();
 
-    const { social, realm, url, usernameHidden, login, registrationDisabled, messagesPerField } =
-        kcContext;
+    const {
+        social,
+        realm,
+        url,
+        usernameHidden,
+        login,
+        registrationDisabled,
+        messagesPerField,
+        enableWebAuthnConditionalUI,
+        authenticators
+    } = kcContext;
 
     const { msg, msgStr } = useI18n();
 
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
+    const authButtonId = "authenticateWebAuthnButton";
+
+    useScript({ authButtonId });
+
     return (
         <Template
             displayMessage={!messagesPerField.existsError("username")}
@@ -171,6 +185,45 @@ export function Page() {
                     )}
                 </div>
             </div>
+            {enableWebAuthnConditionalUI && (
+                <>
+                    <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>
+
+                    {authenticators !== undefined && Object.keys(authenticators).length !== 0 && (
+                        <>
+                            <form id="authn_select" className={kcClsx("kcFormClass")}>
+                                {authenticators.authenticators.map((authenticator, i) => (
+                                    <input
+                                        key={i}
+                                        type="hidden"
+                                        name="authn_use_chk"
+                                        readOnly
+                                        value={authenticator.credentialId}
+                                    />
+                                ))}
+                            </form>
+                        </>
+                    )}
+                    <a
+                        id={authButtonId}
+                        href="#"
+                        className={kcClsx(
+                            "kcButtonSecondaryClass",
+                            "kcButtonBlockClass",
+                            "kcMarginTopClass"
+                        )}
+                    >
+                        {msg("passkey-doAuthenticate")}
+                    </a>
+                </>
+            )}
         </Template>
     );
 }

package/keycloak-theme/login/pages/login-username/useScript.tsx

@@ -0,0 +1,64 @@
+import { useEffect } from "react";
+import { assert } from "tsafe/assert";
+import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
+import { waitForElementMountedOnDom } from "@keycloakify/login-ui/tools/waitForElementMountedOnDom";
+// NOTE: If you are in a Vite project you can use `import.meta.env.BASE_URL` directly, this is a shim to support Webpack.
+import { BASE_URL } from "../../../kc.gen";
+import { useI18n } from "../../i18n";
+import { useKcContext } from "../../KcContext";
+
+export function useScript(params: { authButtonId: string }) {
+    const { authButtonId } = params;
+
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-username.ftl");
+
+    const { msgStr, isFetchingTranslations } = useI18n();
+
+    const { insertScriptTags } = useInsertScriptTags({
+        effectId: "LoginRecoveryAuthnCodeConfigLoginUsername",
+        scriptTags: [
+            {
+                type: "module",
+                textContent: () => `
+                    import { authenticateByWebAuthn } from "${BASE_URL}keycloak-theme/login/js/webauthnAuthenticate.js";
+                    import { initAuthenticate } from "${BASE_URL}keycloak-theme/login/js/passkeysConditionalAuth.js";
+
+                    const authButton = document.getElementById("${authButtonId}");
+                    const input = {
+                        isUserIdentified : ${kcContext.isUserIdentified},
+                        challenge : ${JSON.stringify(kcContext.challenge)},
+                        userVerification : ${JSON.stringify(kcContext.userVerification)},
+                        rpId : ${JSON.stringify(kcContext.rpId)},
+                        createTimeout : ${kcContext.createTimeout}
+                    };
+                    authButton.addEventListener("click", () => {
+                        authenticateByWebAuthn({
+                            ...input,
+                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
+                        });
+                    });
+
+                    initAuthenticate({
+                        ...input,
+                        errmsg : ${JSON.stringify(msgStr("passkey-unsupported-browser-text"))}
+                    });
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (isFetchingTranslations) {
+            return;
+        }
+
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: authButtonId
+            });
+
+            insertScriptTags();
+        })();
+    }, [isFetchingTranslations]);
+}

package/keycloak-theme/public/login/js/passkeysConditionalAuth.js

@@ -1,4 +1,4 @@
-import { base64url } from "rfc4648";
+import { base64url } from "./rfc4648.js";
 import { returnSuccess, returnFailure } from "./webauthnAuthenticate.js";
 
 export function initAuthenticate(input) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keycloakify/login-ui",
-  "version": "250004.2.2",
+  "version": "250004.3.0",
   "description": "React implementation of Keycloak Login v2 for Keycloakify",
   "repository": {
     "type": "git",

package/src/core/KcContext/KcContext.ts

@@ -327,6 +327,11 @@ export declare namespace KcContext {
         };
         usernameHidden?: boolean;
         social?: Login["social"];
+
+        enableWebAuthnConditionalUI?: boolean;
+        authenticators?: {
+            authenticators: WebauthnAuthenticate.WebauthnAuthenticator[];
+        };
     };
 
     export type LoginPassword = Common & {