https://github.com/keycloakify/keycloakify/issues/377

package.json

@@ -29,7 +29,7 @@
         "evt": "^2.4.15",
         "jwt-decode": "^3.1.2",
         "keycloak-js": "^21.0.1",
-        "keycloakify": "^7.14.1",
+        "keycloakify": "^7.14.3",
         "powerhooks": "^0.26.8",
         "react": "18.1.0",
         "react-dom": "18.1.0",

src/keycloak-theme/login/pages/shared/UserProfileFormFields.tsx

@@ -25,7 +25,17 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
         attributesWithPassword
     } = useFormValidation({
         kcContext,
-        i18n
+        i18n,
+        // Unfortunately, the password policies that you might have defined on the server
+        // are not made available by Keycloak on the client side.  See: https://keycloak.discourse.group/t/make-password-policies-available-to-freemarker/11632  
+        // Therefore, we have to hardcode the password policies here if we want real-time validation.
+        // Don't worry, the server will still validate the password when the form is submitted.
+        "passwordValidators": {
+            "length": {
+                "ignore.empty.value": true,
+                "min": "4"
+            }
+        }
     });
 
     useEffect(() => {