@keycloakify/login-ui 250004.2.3 → 250004.3.2

package/core/KcContext/KcContext.d.ts

@@ -265,6 +265,15 @@ export declare namespace KcContext {
         };
         usernameHidden?: boolean;
         social?: Login["social"];
+        enableWebAuthnConditionalUI?: boolean;
+        authenticators?: {
+            authenticators: WebauthnAuthenticate.WebauthnAuthenticator[];
+        };
+        isUserIdentified: "true" | "false";
+        challenge: string;
+        userVerification: UserVerificationRequirement | "not specified";
+        rpId: string;
+        createTimeout: string | number;
     };
     type LoginPassword = Common & {
         pageId: "login-password.ftl";

package/core/KcContext/kcContextMocks.js

@@ -219,7 +219,7 @@ export const kcContextMocks = [
         } })),
     id(Object.assign(Object.assign({}, kcContextCommonMock), { pageId: "login-username.ftl", url: loginUrl, realm: Object.assign(Object.assign({}, kcContextCommonMock.realm), { loginWithEmailAllowed: true, rememberMe: true, password: true, resetPasswordAllowed: true, registrationAllowed: true }), social: {
             displayInfo: true
-        }, usernameHidden: false, login: {}, registrationDisabled: false })),
+        }, usernameHidden: false, login: {}, registrationDisabled: false, challenge: "", userVerification: "not specified", rpId: "", createTimeout: "0", isUserIdentified: "false" })),
     id(Object.assign(Object.assign({}, kcContextCommonMock), { pageId: "login-password.ftl", url: loginUrl, realm: Object.assign(Object.assign({}, kcContextCommonMock.realm), { resetPasswordAllowed: true }) })),
     id(Object.assign(Object.assign({}, kcContextCommonMock), { pageId: "webauthn-authenticate.ftl", url: loginUrl, authenticators: {
             authenticators: []

package/core/kcClsx.d.ts

@@ -1,4 +1,4 @@
-export type ClassKey = "kcBodyClass" | "kcHeaderWrapperClass" | "kcLocaleWrapperClass" | "kcInfoAreaWrapperClass" | "kcFormButtonsWrapperClass" | "kcFormOptionsWrapperClass" | "kcCheckboxInputClass" | "kcLocaleDropDownClass" | "kcLocaleListItemClass" | "kcContentWrapperClass" | "kcLogoIdP-facebook" | "kcAuthenticatorOTPClass" | "kcLogoIdP-bitbucket" | "kcAuthenticatorWebAuthnClass" | "kcWebAuthnDefaultIcon" | "kcLogoIdP-stackoverflow" | "kcSelectAuthListItemClass" | "kcLogoIdP-microsoft" | "kcLoginOTPListItemHeaderClass" | "kcLocaleItemClass" | "kcLoginOTPListItemIconBodyClass" | "kcInputHelperTextAfterClass" | "kcFormClass" | "kcSelectAuthListClass" | "kcInputClassRadioCheckboxLabelDisabled" | "kcSelectAuthListItemIconClass" | "kcRecoveryCodesWarning" | "kcFormSettingClass" | "kcWebAuthnBLE" | "kcInputWrapperClass" | "kcSelectAuthListItemArrowIconClass" | "kcFeedbackAreaClass" | "kcFormPasswordVisibilityButtonClass" | "kcLogoIdP-google" | "kcCheckLabelClass" | "kcSelectAuthListItemFillClass" | "kcAuthenticatorDefaultClass" | "kcLogoIdP-gitlab" | "kcFormAreaClass" | "kcFormButtonsClass" | "kcInputClassRadioLabel" | "kcAuthenticatorWebAuthnPasswordlessClass" | "kcSelectAuthListItemHeadingClass" | "kcInfoAreaClass" | "kcContainerClass" | "kcSelectAuthListItemTitle" | "kcHtmlClass" | "kcLoginOTPListItemTitleClass" | "kcLogoIdP-openshift-v4" | "kcWebAuthnUnknownIcon" | "kcFormSocialAccountNameClass" | "kcLogoIdP-openshift-v3" | "kcLoginOTPListInputClass" | "kcWebAuthnUSB" | "kcInputClassRadio" | "kcWebAuthnKeyIcon" | "kcFeedbackInfoIcon" | "kcCommonLogoIdP" | "kcRecoveryCodesActions" | "kcFormGroupHeader" | "kcFormSocialAccountSectionClass" | "kcLogoIdP-instagram" | "kcAlertClass" | "kcHeaderClass" | "kcLabelWrapperClass" | "kcFormPasswordVisibilityIconShow" | "kcFormSocialAccountLinkClass" | "kcLocaleMainClass" | "kcInputGroup" | "kcTextareaClass" | "kcButtonBlockClass" | "kcButtonClass" | "kcWebAuthnNFC" | "kcLocaleClass" | "kcInputClassCheckboxInput" | "kcFeedbackErrorIcon" | "kcInputLargeClass" | "kcInputErrorMessageClass" | "kcRecoveryCodesList" | "kcFormSocialAccountListClass" | "kcAlertTitleClass" | "kcAuthenticatorPasswordClass" | "kcCheckInputClass" | "kcLogoIdP-linkedin" | "kcLogoIdP-twitter" | "kcFeedbackWarningIcon" | "kcResetFlowIcon" | "kcSelectAuthListItemIconPropertyClass" | "kcFeedbackSuccessIcon" | "kcLoginOTPListClass" | "kcSrOnlyClass" | "kcFormSocialAccountListGridClass" | "kcButtonDefaultClass" | "kcFormGroupErrorClass" | "kcSelectAuthListItemDescriptionClass" | "kcSelectAuthListItemBodyClass" | "kcWebAuthnInternal" | "kcSelectAuthListItemArrowClass" | "kcCheckClass" | "kcContentClass" | "kcLogoClass" | "kcLoginOTPListItemIconClass" | "kcLoginClass" | "kcSignUpClass" | "kcButtonLargeClass" | "kcFormCardClass" | "kcLocaleListClass" | "kcInputClass" | "kcFormGroupClass" | "kcLogoIdP-paypal" | "kcInputClassCheckbox" | "kcRecoveryCodesConfirmation" | "kcFormPasswordVisibilityIconHide" | "kcInputClassRadioInput" | "kcFormSocialAccountListButtonClass" | "kcInputClassCheckboxLabel" | "kcFormOptionsClass" | "kcFormHeaderClass" | "kcFormSocialAccountGridItem" | "kcButtonPrimaryClass" | "kcInputHelperTextBeforeClass" | "kcLogoIdP-github" | "kcLabelClass";
+export type ClassKey = "kcBodyClass" | "kcHeaderWrapperClass" | "kcLocaleWrapperClass" | "kcInfoAreaWrapperClass" | "kcFormButtonsWrapperClass" | "kcFormOptionsWrapperClass" | "kcCheckboxInputClass" | "kcLocaleDropDownClass" | "kcLocaleListItemClass" | "kcContentWrapperClass" | "kcLogoIdP-facebook" | "kcAuthenticatorOTPClass" | "kcLogoIdP-bitbucket" | "kcAuthenticatorWebAuthnClass" | "kcWebAuthnDefaultIcon" | "kcLogoIdP-stackoverflow" | "kcSelectAuthListItemClass" | "kcLogoIdP-microsoft" | "kcLoginOTPListItemHeaderClass" | "kcLocaleItemClass" | "kcLoginOTPListItemIconBodyClass" | "kcInputHelperTextAfterClass" | "kcFormClass" | "kcSelectAuthListClass" | "kcInputClassRadioCheckboxLabelDisabled" | "kcSelectAuthListItemIconClass" | "kcRecoveryCodesWarning" | "kcFormSettingClass" | "kcWebAuthnBLE" | "kcInputWrapperClass" | "kcSelectAuthListItemArrowIconClass" | "kcFeedbackAreaClass" | "kcFormPasswordVisibilityButtonClass" | "kcLogoIdP-google" | "kcCheckLabelClass" | "kcSelectAuthListItemFillClass" | "kcAuthenticatorDefaultClass" | "kcLogoIdP-gitlab" | "kcFormAreaClass" | "kcFormButtonsClass" | "kcInputClassRadioLabel" | "kcAuthenticatorWebAuthnPasswordlessClass" | "kcSelectAuthListItemHeadingClass" | "kcInfoAreaClass" | "kcContainerClass" | "kcSelectAuthListItemTitle" | "kcHtmlClass" | "kcLoginOTPListItemTitleClass" | "kcLogoIdP-openshift-v4" | "kcWebAuthnUnknownIcon" | "kcFormSocialAccountNameClass" | "kcLogoIdP-openshift-v3" | "kcLoginOTPListInputClass" | "kcWebAuthnUSB" | "kcInputClassRadio" | "kcWebAuthnKeyIcon" | "kcFeedbackInfoIcon" | "kcCommonLogoIdP" | "kcRecoveryCodesActions" | "kcFormGroupHeader" | "kcFormSocialAccountSectionClass" | "kcLogoIdP-instagram" | "kcAlertClass" | "kcHeaderClass" | "kcLabelWrapperClass" | "kcFormPasswordVisibilityIconShow" | "kcFormSocialAccountLinkClass" | "kcLocaleMainClass" | "kcInputGroup" | "kcTextareaClass" | "kcButtonBlockClass" | "kcButtonClass" | "kcWebAuthnNFC" | "kcLocaleClass" | "kcInputClassCheckboxInput" | "kcFeedbackErrorIcon" | "kcInputLargeClass" | "kcInputErrorMessageClass" | "kcRecoveryCodesList" | "kcFormSocialAccountListClass" | "kcAlertTitleClass" | "kcAuthenticatorPasswordClass" | "kcCheckInputClass" | "kcLogoIdP-linkedin" | "kcLogoIdP-twitter" | "kcFeedbackWarningIcon" | "kcResetFlowIcon" | "kcSelectAuthListItemIconPropertyClass" | "kcFeedbackSuccessIcon" | "kcLoginOTPListClass" | "kcSrOnlyClass" | "kcFormSocialAccountListGridClass" | "kcButtonDefaultClass" | "kcFormGroupErrorClass" | "kcSelectAuthListItemDescriptionClass" | "kcSelectAuthListItemBodyClass" | "kcWebAuthnInternal" | "kcSelectAuthListItemArrowClass" | "kcCheckClass" | "kcContentClass" | "kcLogoClass" | "kcLoginOTPListItemIconClass" | "kcLoginClass" | "kcSignUpClass" | "kcButtonLargeClass" | "kcFormCardClass" | "kcLocaleListClass" | "kcInputClass" | "kcFormGroupClass" | "kcLogoIdP-paypal" | "kcInputClassCheckbox" | "kcRecoveryCodesConfirmation" | "kcFormPasswordVisibilityIconHide" | "kcInputClassRadioInput" | "kcFormSocialAccountListButtonClass" | "kcInputClassCheckboxLabel" | "kcFormOptionsClass" | "kcFormHeaderClass" | "kcFormSocialAccountGridItem" | "kcButtonPrimaryClass" | "kcButtonSecondaryClass" | "kcInputHelperTextBeforeClass" | "kcLogoIdP-github" | "kcLabelClass";
 export declare const getKcClsx: (params: {
     doUseDefaultCss: boolean;
     classes: Partial<Record<ClassKey, string>> | undefined;

package/core/kcClsx.js

@@ -121,6 +121,7 @@ export const { getKcClsx } = createGetKcClsx({
         kcFormHeaderClass: "login-pf-header",
         kcFormSocialAccountGridItem: "pf-l-grid__item",
         kcButtonPrimaryClass: "pf-m-primary",
+        kcButtonSecondaryClass: "pf-m-secondary",
         kcInputHelperTextBeforeClass: "pf-c-form__helper-text pf-c-form__helper-text-before",
         "kcLogoIdP-github": "fa fa-github",
         kcLabelClass: "pf-c-form__label pf-c-form__label-text"

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>
+                        </>
+                    )}
+                    <br /> {/* We use a br here because kcMarginTopClass is not defined in login v1 */}
+                    <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/package.json

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

package/src/core/KcContext/KcContext.ts

@@ -327,6 +327,16 @@ export declare namespace KcContext {
         };
         usernameHidden?: boolean;
         social?: Login["social"];
+
+        enableWebAuthnConditionalUI?: boolean;
+        authenticators?: {
+            authenticators: WebauthnAuthenticate.WebauthnAuthenticator[];
+        };
+        isUserIdentified: "true" | "false";
+        challenge: string;
+        userVerification: UserVerificationRequirement | "not specified";
+        rpId: string;
+        createTimeout: string | number;
     };
 
     export type LoginPassword = Common & {

package/src/core/KcContext/kcContextMocks.ts

@@ -333,7 +333,13 @@ export const kcContextMocks = [
         },
         usernameHidden: false,
         login: {},
-        registrationDisabled: false
+        registrationDisabled: false,
+
+        challenge: "",
+        userVerification: "not specified",
+        rpId: "",
+        createTimeout: "0",
+        isUserIdentified: "false"
     }),
     id<KcContext.LoginPassword>({
         ...kcContextCommonMock,

package/src/core/kcClsx.ts

@@ -121,6 +121,7 @@ export type ClassKey =
     | "kcFormHeaderClass"
     | "kcFormSocialAccountGridItem"
     | "kcButtonPrimaryClass"
+    | "kcButtonSecondaryClass"
     | "kcInputHelperTextBeforeClass"
     | "kcLogoIdP-github"
     | "kcLabelClass";
@@ -249,6 +250,7 @@ export const { getKcClsx } = createGetKcClsx<ClassKey>({
         kcFormHeaderClass: "login-pf-header",
         kcFormSocialAccountGridItem: "pf-l-grid__item",
         kcButtonPrimaryClass: "pf-m-primary",
+        kcButtonSecondaryClass: "pf-m-secondary",
         kcInputHelperTextBeforeClass: "pf-c-form__helper-text pf-c-form__helper-text-before",
         "kcLogoIdP-github": "fa fa-github",
         kcLabelClass: "pf-c-form__label pf-c-form__label-text"