keycloakify 11.11.3 → 11.13.0

package/src/login/pages/Login.tsx

@@ -1,3 +1,7 @@
+/**
+ * Combined Username + Password login page (login.ftl) with optional WebAuthn passkey support.
+ * Renders standard login form plus conditional passkey authenticator section.
+ */
 import type { JSX } from "keycloakify/tools/JSX";
 import { useState } from "react";
 import { kcSanitize } from "keycloakify/lib/kcSanitize";
@@ -7,6 +11,7 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
+import { useScript } from "keycloakify/login/pages/Login.useScript";
 
 export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -16,12 +21,21 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
         classes
     });
 
-    const { social, realm, url, usernameHidden, login, auth, registrationDisabled, messagesPerField } = kcContext;
+    const { social, realm, url, usernameHidden, login, auth, registrationDisabled, messagesPerField, enableWebAuthnConditionalUI, authenticators } =
+        kcContext;
 
     const { msg, msgStr } = i18n;
 
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
+    const webAuthnButtonId = "authenticateWebAuthnButton";
+
+    useScript({
+        webAuthnButtonId,
+        kcContext,
+        i18n
+    });
+
     return (
         <Template
             kcContext={kcContext}
@@ -191,6 +205,36 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                     )}
                 </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 && authenticators.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>
+                        </>
+                    )}
+                    <br />
+
+                    <input
+                        id={webAuthnButtonId}
+                        type="button"
+                        className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                        value={msgStr("passkey-doAuthenticate")}
+                    />
+                </>
+            )}
         </Template>
     );
 }

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

@@ -0,0 +1,71 @@
+import { useEffect } from "react";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { assert } from "keycloakify/tools/assert";
+import { KcContext } from "keycloakify/login/KcContext/KcContext";
+import { waitForElementMountedOnDom } from "keycloakify/tools/waitForElementMountedOnDom";
+
+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.Login ? true : false>();
+assert<KcContext.Login extends KcContextLike ? true : false>();
+
+type I18nLike = {
+    msgStr: (key: "webauthn-unsupported-browser-text") => string;
+    isFetchingTranslations: boolean;
+};
+
+export function useScript(params: { webAuthnButtonId: string; kcContext: KcContextLike; i18n: I18nLike }) {
+    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";
+                    const authButton = document.getElementById('${webAuthnButtonId}');
+                    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;
+        }
+
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: webAuthnButtonId
+            });
+
+            insertScriptTags();
+        })();
+    }, [isFetchingTranslations]);
+}

package/src/login/pages/LoginPassword.tsx

@@ -1,3 +1,7 @@
+/**
+ * Password step (login-password.ftl) for flows where username is already captured.
+ * Adds conditional WebAuthn passkey authenticate section when enabled.
+ */
 import type { JSX } from "keycloakify/tools/JSX";
 import { useState } from "react";
 import { kcSanitize } from "keycloakify/lib/kcSanitize";
@@ -7,6 +11,7 @@ import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
+import { useScript } from "keycloakify/login/pages/LoginPassword.useScript";
 
 export default function LoginPassword(props: PageProps<Extract<KcContext, { pageId: "login-password.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -16,12 +21,20 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { page
         classes
     });
 
-    const { realm, url, messagesPerField } = kcContext;
+    const { realm, url, messagesPerField, enableWebAuthnConditionalUI, authenticators } = kcContext;
 
     const { msg, msgStr } = i18n;
 
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
+    const webAuthnButtonId = "authenticateWebAuthnButton";
+
+    useScript({
+        webAuthnButtonId,
+        kcContext,
+        i18n
+    });
+
     return (
         <Template
             kcContext={kcContext}
@@ -98,6 +111,36 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { page
                     </form>
                 </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 && authenticators.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>
+                        </>
+                    )}
+                    <br />
+
+                    <input
+                        id={webAuthnButtonId}
+                        type="button"
+                        className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
+                        value={msgStr("passkey-doAuthenticate")}
+                    />
+                </>
+            )}
         </Template>
     );
 }

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

@@ -0,0 +1,71 @@
+import { useEffect } from "react";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { assert } from "keycloakify/tools/assert";
+import { KcContext } from "keycloakify/login/KcContext/KcContext";
+import { waitForElementMountedOnDom } from "keycloakify/tools/waitForElementMountedOnDom";
+
+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.LoginPassword ? true : false>();
+assert<KcContext.LoginPassword extends KcContextLike ? true : false>();
+
+type I18nLike = {
+    msgStr: (key: "webauthn-unsupported-browser-text") => string;
+    isFetchingTranslations: boolean;
+};
+
+export function useScript(params: { webAuthnButtonId: string; kcContext: KcContextLike; i18n: I18nLike }) {
+    const { webAuthnButtonId, kcContext, i18n } = params;
+
+    const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
+
+    const { msgStr, isFetchingTranslations } = i18n;
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "LoginPassword",
+        scriptTags: [
+            {
+                type: "module",
+                textContent: () => `
+
+                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+                    const authButton = document.getElementById('${webAuthnButtonId}');
+                    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;
+        }
+
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: webAuthnButtonId
+            });
+
+            insertScriptTags();
+        })();
+    }, [isFetchingTranslations]);
+}

package/src/login/pages/LoginUsername.tsx

@@ -21,10 +21,10 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
 
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
-    const authButtonId = "authenticateWebAuthnButton";
+    const webAuthnButtonId = "authenticateWebAuthnButton";
 
     useScript({
-        authButtonId,
+        webAuthnButtonId,
         kcContext,
         i18n
     });
@@ -164,7 +164,7 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                         <input type="hidden" id="error" name="error" />
                     </form>
 
-                    {authenticators !== undefined && Object.keys(authenticators).length !== 0 && (
+                    {authenticators !== undefined && authenticators.authenticators.length !== 0 && (
                         <>
                             <form id="authn_select" className={kcClsx("kcFormClass")}>
                                 {authenticators.authenticators.map((authenticator, i) => (
@@ -174,13 +174,13 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                         </>
                     )}
                     <br />
-                    
+
                     <input
-                        id={authButtonId}
+                        id={webAuthnButtonId}
                         type="button"
                         className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                         value={msgStr("passkey-doAuthenticate")}
-                        />
+                    />
                 </>
             )}
         </Template>

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

@@ -23,8 +23,8 @@ type I18nLike = {
     isFetchingTranslations: boolean;
 };
 
-export function useScript(params: { authButtonId: string; kcContext: KcContextLike; i18n: I18nLike }) {
-    const { authButtonId, kcContext, i18n } = params;
+export function useScript(params: { webAuthnButtonId: string; kcContext: KcContextLike; i18n: I18nLike }) {
+    const { webAuthnButtonId, kcContext, i18n } = params;
 
     const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
 
@@ -38,7 +38,7 @@ export function useScript(params: { authButtonId: string; kcContext: KcContextLi
                 textContent: () => `
 
                     import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
-                    const authButton = document.getElementById('${authButtonId}');
+                    const authButton = document.getElementById('${webAuthnButtonId}');
                     authButton.addEventListener("click", function() {
                         const input = {
                             isUserIdentified : ${isUserIdentified},
@@ -62,7 +62,7 @@ export function useScript(params: { authButtonId: string; kcContext: KcContextLi
 
         (async () => {
             await waitForElementMountedOnDom({
-                elementId: authButtonId
+                elementId: webAuthnButtonId
             });
 
             insertScriptTags();

package/stories/login/pages/LinkIdpAction.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "link-idp-action.ftl" });
+
+const meta = {
+    title: "login/link-idp-action.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                idpDisplayName: "GitHub",
+                url: { loginAction: "/mock-login-action" }
+            }}
+        />
+    )
+};
+
+export const DifferentProvider: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                idpDisplayName: "Google",
+                url: { loginAction: "/custom-login-action" }
+            }}
+        />
+    )
+};

package/vite-plugin/index.js

@@ -1018,8 +1018,8 @@ __nccwpck_require__.r(__webpack_exports__);
 /* harmony export */   "CONTAINER_NAME": () => (/* binding */ CONTAINER_NAME),
 /* harmony export */   "CUSTOM_HANDLER_ENV_NAMES": () => (/* binding */ CUSTOM_HANDLER_ENV_NAMES),
 /* harmony export */   "FALLBACK_LANGUAGE_TAG": () => (/* binding */ FALLBACK_LANGUAGE_TAG),
+/* harmony export */   "KEYCLOAKIFY_LOGGING_JAR_BASENAME": () => (/* binding */ KEYCLOAKIFY_LOGGING_JAR_BASENAME),
 /* harmony export */   "KEYCLOAKIFY_LOGGING_VERSION": () => (/* binding */ KEYCLOAKIFY_LOGGING_VERSION),
-/* harmony export */   "KEYCLOAKIFY_LOGIN_JAR_BASENAME": () => (/* binding */ KEYCLOAKIFY_LOGIN_JAR_BASENAME),
 /* harmony export */   "KEYCLOAKIFY_SPA_DEV_SERVER_PORT": () => (/* binding */ KEYCLOAKIFY_SPA_DEV_SERVER_PORT),
 /* harmony export */   "KEYCLOAK_THEME": () => (/* binding */ KEYCLOAK_THEME),
 /* harmony export */   "LOGIN_THEME_PAGE_IDS": () => (/* binding */ LOGIN_THEME_PAGE_IDS),
@@ -1057,6 +1057,7 @@ const LOGIN_THEME_PAGE_IDS = [
     "login-otp.ftl",
     "login-update-profile.ftl",
     "login-update-password.ftl",
+    "link-idp-action.ftl",
     "login-idp-link-confirm.ftl",
     "login-idp-link-email.ftl",
     "login-page-expired.ftl",
@@ -1097,7 +1098,7 @@ const CUSTOM_HANDLER_ENV_NAMES = {
 const KEYCLOAK_THEME = "keycloak-theme";
 const KEYCLOAKIFY_SPA_DEV_SERVER_PORT = "KEYCLOAKIFY_SPA_DEV_SERVER_PORT";
 const KEYCLOAKIFY_LOGGING_VERSION = "1.0.3";
-const KEYCLOAKIFY_LOGIN_JAR_BASENAME = `keycloakify-logging-${KEYCLOAKIFY_LOGGING_VERSION}.jar`;
+const KEYCLOAKIFY_LOGGING_JAR_BASENAME = `keycloakify-logging-${KEYCLOAKIFY_LOGGING_VERSION}.jar`;
 const TEST_APP_URL = "https://my-theme.keycloakify.dev";
 //# sourceMappingURL=constants.js.map