diff --git a/js/apps/admin-ui/src/clients/credentials/Credentials.tsx b/js/apps/admin-ui/src/clients/credentials/Credentials.tsx
index ffe49eaece..c6407aac52 100644
--- a/js/apps/admin-ui/src/clients/credentials/Credentials.tsx
+++ b/js/apps/admin-ui/src/clients/credentials/Credentials.tsx
@@ -16,17 +16,20 @@ import {
CardBody,
ClipboardCopy,
Divider,
+ Form,
FormGroup,
PageSection,
Split,
SplitItem,
} from "@patternfly/react-core";
-import { useState } from "react";
+import { useMemo, useState } from "react";
import { useFormContext, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../../admin-client";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
+import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
import { FormAccess } from "../../components/form/FormAccess";
+import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
import { FormFields } from "../ClientDetails";
import { ClientSecret } from "./ClientSecret";
import { SignedJWT } from "./SignedJWT";
@@ -72,6 +75,15 @@ export const Credentials = ({ client, save, refresh }: CredentialsProps) => {
(provider) => provider.id === clientAuthenticatorType,
);
+ const { componentTypes } = useServerInfo();
+ const providerProperties = useMemo(
+ () =>
+ componentTypes?.["org.keycloak.authentication.ClientAuthenticator"]?.find(
+ (p) => p.id === clientAuthenticatorType,
+ )?.properties,
+ [clientAuthenticatorType, componentTypes],
+ );
+
useFetch(
() =>
Promise.all([
@@ -170,6 +182,11 @@ export const Credentials = ({ client, save, refresh }: CredentialsProps) => {
)}
{clientAuthenticatorType === "client-x509" &&