This would not involve any FreeMarker templates, as these UIs are written in React. We would provide APIs like the one mentioned here by Erik, which will allow developers to programmatically define navigational elements, pages, tabs, forms, etc. in a declarative manner on the Java-side of things.

I didn't quite understand how I would build and style my own custom HTML pages with this API ?
With the mentioned approach I can imagine pre-defined page templates that would be customizable.
For a more concrete example: Let's say I want to make a tab in the realm settings that includes a table with all the realm attributes. Furthermore I want to add / delete / edit them. Would that be possible with this API ? If yes, how would I do that (in theory of course) ?

Yes, that would eventually be made possible with this API and other APIs that will be introduced in the future. We will likely also add the ability to register a page and render custom HTML into it, but that should always be a last resort in case existing APIs do not cover the use-case.

At this point we're still looking for feedback on what a possible 'Customization API' would look like, and what is required of it.

You wouldn't style and create custom html pages, once you implement this SPI the pages will be created for you.

For a more concrete example: Let's say I want to make a tab in the realm settings that includes a table with all the realm attributes. Furthermore I want to add / delete / edit them. Would that be possible with this API ? If yes, how would I do that (in theory of course) ?

So atm this API doesn't support the key value editor, but you could use a MULTIVALUED_LIST_TYPE to edit a specific attribute

return ProviderConfigurationBuilder.create()
                .property()
                .name("test")
                .label("Test attribute")
                .type(ProviderConfigProperty.MULTIVALUED_LIST_TYPE)
                .helpText("Realm attibutes")
// set the current values for this specific attribute
                .setOptions(realm.getAttributes().get("specific")) 

It would render something like this:

Then you'll create some json to indicate where this tab should appear, this is not jet in my draft PR.
And implement the onCreate to save this to the realm:

    @Override
    public void onCreate(KeycloakSession session, RealmModel realm, ComponentModel model) {
        realm.setAttribute(model.getAttribute());
        // save the realm
    }

My proposal wouldn't be the only way to configure the UI, just one additional one. We still would also like an client side framework that will be even more flexible.

I don't fully understand what your UIConfigurationSPI would be for in case you build a client side extension though?

We'd want to keep client-side extensions to an absolute minimum and possibly offer an entry-point mostly on the SPI side of things. There is a lot of complexity involved doing such things on the client, whereas doing so on the Java-side we already have existing systems application and extension developers are intimately familiar with.

What do you suppose would be the advantage of doing this client side? How would that look for developers of extensions and other integrations with Keycloak?

I thought of that UIConfigurationSPI as a means to provide configuration on feature-level. For example, the same configuration could be shared by a page or a tab extension.

As background information what we currently do (for the Account UI, but same is planned for Admin UI): In many cases we write completely new pages, with custom css, custom endpoints etc. Some of the pages are only relevant for a subset of our customers.
Customers can enable/disable those pages by special realm localization entries (for lang en). We could possibly simplify that by having feature-specific UIConfigurationSPI implementations, with an "enabled" property (and maybe other feature-specific properties). But such functionality is not necessary for us, because we have the "realm localization workaround".

However, customization and extension of the Account UI (V2) turned out quite difficult for us. Currently we have copied the Keycloak Account UI and overwritten parts of it. Merging upstream changes is quite time consuming and error-prone.

What would be great for us:

• publicly available npm modules for the UIs, which can just be included into an own npm module.
• the npm module should at least provide the following hooks:
  • specifying custom css and custom javascript, in addition to or even replacing Keycloak default css and javascript. From a functionality POV similar to what was possible with the ftl-approach, with styles and javascript configured in the theme.properties. But in contrast to the ftl-approach, it would be good, if those files could be properly resolved by the IDE (navigating to those files via IDE).
  • Configuration possibility to define additional "features", consisting of navigation items, with corresponding routes and pages. It would also be great if a custom condition could be implemented, whether a feature (navigation item and related route/page) is accessible or not - for example based on a role and/or whether there is a localization message containing the feature...

For the asset loading section, that is something that is definitely a thing that has been on my mind for a while. I am not a fan of defining the assets (e.g. scripts and styles) through the property files, at least not in it's current incarnation.

For example, one of the things that bothers me is the fact that a child theme has to overwrite the scripts and styles of the parent theme, meaning they have to include a full list of assets that are included by the parent theme before any custom scripts/styles can be added. This is a fragile and error prone mechanism for obvious reasons, and should be improved.

It also doesn't allow any granularity in how the scripts and styles are loaded. For example, adding a media attribute to a stylesheet, or a type="module" to a script tag is currently impossible with this API.

This is however something we don't want to solve on the client-side. Instead I would like to see a new 'asset loader' SPI that can be used to enqueue scripts and styles, and also allow extension developers to swap or remove Keycloak built-ins. See #22042 (comment) for more information about this proposal.

As for the extending the UI with navigation items, tabs, pages, etc. That is also something we want to allow using Java-based APIs, there is clearly a need for this. But we very explicitly do not want to expose our front-end stack, as that would make it hard for future upgrades to our stack.

So providing custom HTML with scripts on a page would very much be an 'escape hatch', giving you full control, but we cannot guarantee that things won't break do to changes we make to the React code-base.

It doesn't use the realm attributes, but the component API. You can still do all of the things you want with this in your getConfigProperties() you need to query keycloak for the realm attributes or the user profile attributes and then declare what fields you want to display. When "save" is triggered there is a onCreate that is called where you could do some custom logic, like calling a an endpoint.

getConfigProperties does not have realm available. It is also called before any other method. There is no lifecycle before it to initialize realm etc as class values either. It's also called once before you even navigate to the resource in a tab.

validateConfiguration is only called when you start saving/updating.

Data also seems to be saved to the component, even if you override the onCreate and onUpdate methods. These just seem to trigger after save. There is no way to prevent default save. The value is saved globally, displayed under all contexts and always initializes field with that value - i cannot tell it to use value from some other attribute (realm config, client config, idp config etc).

It's all in the RealmAdapter so it feels like this whole custom UI structure is only meant for realm level basic config? And even at a realm level - you still cannot get values from realm to prefill form.

For example, in a new page, i might want to display a dropdown of existing clients. getConfigProperties() builds the form - but i have no access to realm to fetch a list of clients. I only get access to it later when it saves.

right, there are some downsides, but there is an issue to change how some of these things work

Hello,

I really like the concept of having a 'light' extension model to expose custom attributes that we now manage via REST API calls. Thank you for spending the time working on this extension. After doing quite a number of trial and error routines, I have the same question as mentioned above, is it already possible to use the current UI scope in a UiTab. Meaning, if I am managing the data for a specific client I would be able to present the current custom attribute values for the selected client; and afterwards be able to save the updated value(s) for the selected client. Right now it seems indeed that I am not able to retrieve the current values and modified values are updated for all the clients of the selected realm.

The update statement I use is:

    public void onUpdate(KeycloakSession session, RealmModel realm, ComponentModel oldModel, ComponentModel newModel) {

        logger.info("ThemeUiTab - onUpdate : " + newModel.get("clientId"));

        var clientId = newModel.get("clientId");
        var currentIndex = oldModel.get("attribute_consuming_service_index");
        var newIndex = newModel.get("attribute_consuming_service_index");

        if(currentIndex != null && newIndex != null && !newIndex.equals(currentIndex)) {
            realm.getClientById(clientId).setAttribute("attribute_consuming_service_index", newModel.get("attribute_consuming_service_index"));
        }
    }

My understanding of Keycloak extensibility is unfortunately too shallow to contribute, my apologies.

Regards,

Mrs. Wilke Jansoone

right, there are some downsides, but there is an issue to change how some of these things work

@edewit can you provide the issue? i'd like to follow the progress

@edewit I was trying out this feature again on my way back from Keycloak Dev Day. The only thing that does not allow me to use it for my Home IdP extension currently is what @dasniko already mentioned above:

But how can I display/fill the value of the client attribute into the config property field? Currently, when hitting Save in the UI, the value will (also) be stored as a component model (globally). This value will be displayed when the tab is shown/opened. So the same value from the component will be displayed in all clients, if I extend the clients ui (with path /:realm/clients/:clientId/:tab?).

Is it somehow possible to control, which value will be shown in the generated properties field? So, that I can display e.g. a custom client attribute of the respective client, if I'm in the client section? (or if I'm in another context, then related to that context)?

Is there any solution to this? Maybe I am just missing something or is it not supported?

I was debugging this a bit this morning:
I think what may be missing here is the correct parentId for the component being created. When the component is created, the frontend sends a request like this:

{
"config":{...},
"providerId":"my-tab",
"providerType":"org.keycloak.services.ui.extend.UiTabProvider",
"parentId":"test-realm"}

But in the case that @dasniko described above (and also in my use case), the parent may not be a realm. In Niko's case it should be the client_id. For my use case it would be the identity provider's id. For this to work, one would need to create a dedicated component instance per parentId and also respect that in case of initial loading and update. Also when deleting the parent, the component may need to be deleted as well, but this may already be handled by Keycloak in the backend in a generic way.

1. When you use the onUpdate you don't need to implement this onCreate you can remove that.
2. Don't know why you want to split it up into multiple extensions but you could accomplish this by having one tab/page that uses a SPI to find the sub sections and build one List<ProviderConfigProperty>

Sounds good. Some observations and feedback:

This is essentially a duplicate of the generated UI that was already available by implementing a UserStorageProviderFactory. We have already used this in one of our extensions which isn't actually a user federation provider, but we implement UserStorageProviderFactory in order to get the "free" UI. So we have some experience with this already. From that we learned, it is useful:

1. for implementing lists of configurations that have a flat hierarchy.
2. when the config/ComponentModel is loaded elsewhere in the extension by ID or type, rather than some attribute(s)
3. for relatively small lists of entities
4. when the configuration doesn't change often

We have other extensions that we considered the above for, and would consider something like this API for extending the UI:

1. An event listener that runs a script on an event. We currently use a naming convention in realm attributes, but would prefer something isolated from the realm config. It meets the criteria above, and can be loaded by type when we process an event. 👍
2. An event listener that sends an HTTP POST on an event. As with the script event listener, we use a naming convention in realm attributes. It meets the criteria above, and can be loaded by type. 👍
3. A mechanism of programmatically creating webhooks bound to event types. While similar to the HTTP mechanism, there are some key differences. The config needs to be loaded by a combination of attributes (state, event types, etc.) on event processing. The list of webhooks can be very large and change fairly often. There is a REST API for programmatically managing the webhooks. We have already built entity/model storage layer to optimize for loading and CRUD management. 👎
4. A theme provider that allows overriding email templates at runtime. We currently use a naming convention in realm attributes, but would prefer something that didn't bloat the realm config. Because there are many types of emails, but are constrained by a set of useful ones, it wasn't clear if we would represent that as a list of ComponentModels or as a single ComponentModel with all of the templates in it. We tried both and both were a bad user experience for updating the template content. 👎
5. An admin portal for self-management of user and organization profile. We currently use a naming convention in realm attributes for things like enabling/disabling features, setting colors and styles, and setting logo images. This UI approach wasn't "bad", but it failed to give use some user friendly UX features that were necessary for the audience using it (e.g. color picker, image preview) 👎

No, it's always stored in the component table the default implementation of onUpdate is empty.

Thanks for that clarification. This does not serve the use cases where config needs to be loaded by a combination of attributes, and/or there is an existing entity/model storage layer. It is unreasonable to believe that an extension author will significantly modify their extension storage layer in order to introduce a bad design/hack of duplicate configuration. I would consider this approach to be not useful. 👎 I'll take a look at the implementation and see if I can PR something that would allow optional override of the storage layer.

To be honest I can't even imagine what a UI like that would look like with such complex configuration.

This video has our Organizations extension UI. The link should start at the right place. https://youtu.be/DNq51wWw3F4?si=HjUcsWjewRBw-OsL&t=678 To be clear, I'm not asking if it is possible or how to hack our extension into this existing method of extending the Admin UI. Instead, this should be indicative a complex extension that you may consider some aspects of as you are gathering requirements for this feature.

Cool to see that you have already extended the admin-ui it looks great! I think we can combine the page and the tab extension points to have this organization view. (btw the concept of organisations is going to be added to keycloak). So that you can have a section with multiple entities that then can be extended by adding tabs. That is something we could add to make more possible.

So what was bad about 4? What would you suggest to make the UXD better?

So that will still not enable you to have the stuff that you showed in the video with all the custom dialogs, but for that we do are planning to add a npm package that contains the "pages" of the admin ui. Then you will no longer have to fork the ui, but you can reuse the components and then add your own.

Cool to see that you have already extended the admin-ui

Yes, cool, but awful. There are breaking changes every release. Keeping it working has been a constant thorn in our side. In contrast to our additions to the "old"/angular Admin, it is a massive effort to keep it current with each release. We're actually in the process of building our Admin UI outside of the "new" Keycloak console, as it has not (at least yet) really been meant to extend.

So what was bad about 4? What would you suggest to make the UXD better?

We'd need a lot more control over what and how things are rendered on the page. Sounds like the below will take care of that.

we do are planning to add a npm package that contains the "pages" of the admin ui

Are there any discussions or design documents regarding this feature?

It's not published yet, but when it is it will work something like this:
https://github.com/keycloak/keycloak/blob/main/js/apps/account-ui/README.md

It's not published yet, but when it is it will work something like this: https://github.com/keycloak/keycloak/blob/main/js/apps/account-ui/README.md

It's published now see https://www.npmjs.com/package/@keycloak/keycloak-account-ui and we are also working on a tool to create a project quickly https://asciinema.org/a/EAEYrjjqDDSd81moa3DrVeehw

We are very open to suggestions. Before the new AdminUI we customized the old JS UI partially to our needs (via themes), but thought we should try a different approach than forking the new monolithic new React UI. Could you clarify what you mean with profile?

sorry that's a typo I meant to say: "use user profile" it uses user attributes but you can add types see the section: https://www.keycloak.org/docs/latest/server_admin/#user-profile

Similar problem still remains for custom UI.
getConfigProperties() has no access to session or realm. Cannot initialize lists with actual values.
Perhaps it should pass the session as a parameter when getConfigProperties is called.

Similar problem still remains for custom UI. getConfigProperties() has no access to session or realm. Cannot initialize lists with actual values. Perhaps it should pass the session as a parameter when getConfigProperties is called.

I really need this to be resolved. I have some properties files for customized SMTP settings per client. It would be interesting to have this working.

@edewit, can you tell if there is a solution to this for a future release?

Similar problem still remains for custom UI. getConfigProperties() has no access to session or realm. Cannot initialize lists with actual values. Perhaps it should pass the session as a parameter when getConfigProperties is called.

Yes, this is the main issue for me right now.
Since I am trying to create one interface to the client's attributes, being able to show the current values is essential.

At this example, @edewit fetches a value from the realm, but I have no idea how that is possible, since inside the getConfigProperties() one doesn't seem to get a session. Which is confusing, as this method is required both for the UiTabProvider and UiTabProviderFactory. It triggers an Exception it is called when saving, but doesn't give me a valid session when opening the tab, despite not triggering an Exception.

These issues have been addressed in #31409

Thank you @edewit ! I'll check the nightly and report back if there are issues or feedback.

I'll have a look at this and your suggestions

You might have forgotten to add the feature flag when you start your server --features="declarative-ui"

Yup, it worked. Thanks!

created a PR to address your points
#31409

I've already suggested a similar thing. Read the full comment thread above #24805 (comment) for context. I did start a PR to see if it would be possible to do this just by creating something that would override component storage, however, that's a big thread to pull on, and it would take longer than I have to give at this point.

However, I agree 100% with you in principle that this API could be much more valuable to extension developers if we could optionally override the storage and just use ComponentModel for transport.

Right, will try to address these points, might need some help from other teams to get this in though

Yes, it does not even need the full component model - just something that renders that UI. The implementation of get and set would be up to developers.
And to not break existing ComponentModel based logic - it could be a separate SPI.

Also noticed that the "page" view creates a new component model for each line you add, all with the same provider-id.
Assumed it at least saves an array/List/Map of configs under one provider model.

Also, when you edit an existing value, it does not seem to update - it looks successful but you still get the old value after reload or get.

@edewit can you help me please? I'm still with this problem

@slsilva1 It seems your port is already occupied by some process. You can check it via netstat -tnlp | grep 8080.

hello @mabartos @edewit ,

I think this error occurs because start-dev is done when keycloak is still running:

bash-5.1$ sh kc.sh start-dev --import-realm --features=declarative-ui --verbose

Updating the configuration and installing your custom providers, if any. Please wait.
2024-08-21 12:23:54,116 WARN [org.key.com.Profile] (main) Experimental features enabled: declarative-ui:v1
2024-08-21 12:23:55,161 WARN [org.key.com.Profile] (main) Experimental features enabled: declarative-ui:v1
2024-08-21 12:23:55,958 WARN [org.key.services] (build-2) KC-SERVICES0047: Tenants (com.customKeyclock.AdminUiPage) is implementing the internal SPI ui-page. This SPI is internal and may change without notice
2024-08-21 12:23:56,237 WARN [org.key.services] (build-2) KC-SERVICES0047: tenant-validation (com.customKeyclock.TenantValidatorProvider) is implementing the internal SPI validator. This SPI is internal and may change without notice
2024-08-21 12:23:56,237 WARN [org.key.services] (build-2) KC-SERVICES0047: tenant-list-validation (com.customKeyclock.TenantListValidatorProvider) is implementing the internal SPI validator. This SPI is internal and may change without notice
2024-08-21 12:23:59,332 INFO [io.qua.dep.QuarkusAugmentor] (main) Quarkus augmentation completed in 4561ms
2024-08-21 12:24:00,322 WARN [org.keycloak.common.Profile] (main) Experimental features enabled: declarative-ui:v1
2024-08-21 12:24:00,455 WARN [org.keycloak.common.Profile] (main) Experimental features enabled: declarative-ui:v1
2024-08-21 12:24:03,482 INFO [org.infinispan.CONTAINER] (ForkJoinPool.commonPool-worker-1) ISPN000556: Starting user marshaller 'org.infinispan.jboss.marshalling.core.JBossUserMarshaller'
2024-08-21 12:24:04,241 INFO [org.keycloak.broker.provider.AbstractIdentityProviderMapper] (main) Registering class org.keycloak.broker.provider.mappersync.ConfigSyncEventListener
2024-08-21 12:24:04,318 INFO [org.keycloak.connections.infinispan.DefaultInfinispanConnectionProviderFactory] (main) Node name: node_995190, Site name: null
2024-08-21 12:24:05,274 INFO [org.keycloak.exportimport.singlefile.SingleFileImportProvider] (main) Full importing from file /opt/keycloak/bin/../data/import/realm_import_mobileum.json
2024-08-21 12:24:08,281 INFO [org.keycloak.exportimport.util.ImportUtils] (main) Realm 'mobileum' imported
2024-08-21 12:24:08,351 INFO [org.keycloak.exportimport.dir.DirImportProvider] (main) Importing from directory /opt/keycloak/bin/../data/import
2024-08-21 12:24:08,351 INFO [org.keycloak.services] (main) KC-SERVICES0030: Full model import requested. Strategy: IGNORE_EXISTING
2024-08-21 12:24:08,355 INFO [org.keycloak.services] (main) KC-SERVICES0032: Import finished successfully
2024-08-21 12:24:08,539 INFO [com.arjuna.ats.jbossatx] (main) ARJUNA032014: Stopping transaction recovery manager
2024-08-21 12:24:08,562 ERROR [org.keycloak.quarkus.runtime.cli.ExecutionExceptionHandler] (main) ERROR: Failed to start server in (development) mode
2024-08-21 12:24:08,562 ERROR [org.keycloak.quarkus.runtime.cli.ExecutionExceptionHandler] (main) Error details:: java.lang.RuntimeException: Unable to start HTTP server
at io.quarkus.vertx.http.runtime.VertxHttpRecorder.doServerStart(VertxHttpRecorder.java:834)
at io.quarkus.vertx.http.runtime.VertxHttpRecorder.startServer(VertxHttpRecorder.java:315)
at io.quarkus.deployment.steps.VertxHttpProcessor$openSocket189362710.deploy_0(Unknown Source)
at io.quarkus.deployment.steps.VertxHttpProcessor$openSocket189362710.deploy(Unknown Source)
at io.quarkus.runner.ApplicationImpl.doStart(Unknown Source)
at io.quarkus.runtime.Application.start(Application.java:101)
at io.quarkus.runtime.ApplicationLifecycleManager.run(ApplicationLifecycleManager.java:111)
at io.quarkus.runtime.Quarkus.run(Quarkus.java:71)
at org.keycloak.quarkus.runtime.KeycloakMain.start(KeycloakMain.java:139)
at org.keycloak.quarkus.runtime.cli.command.AbstractStartCommand.run(AbstractStartCommand.java:35)
at picocli.CommandLine.executeUserObject(CommandLine.java:2026)
at picocli.CommandLine.access$1500(CommandLine.java:148)
at picocli.CommandLine$RunLast.executeUserObjectOfLastSubcommandWithSameParent(CommandLine.java:2461)
at picocli.CommandLine$RunLast.handle(CommandLine.java:2453)
at picocli.CommandLine$RunLast.handle(CommandLine.java:2415)
at picocli.CommandLine$AbstractParseResultHandler.execute(CommandLine.java:2273)
at picocli.CommandLine$RunLast.execute(CommandLine.java:2417)
at picocli.CommandLine.execute(CommandLine.java:2170)
at org.keycloak.quarkus.runtime.cli.Picocli.parseAndRun(Picocli.java:119)
at org.keycloak.quarkus.runtime.KeycloakMain.main(KeycloakMain.java:99)
at java.base/jdk.internal.reflect.DirectMethodHandleAccessor.invoke(DirectMethodHandleAccessor.java:103)
at java.base/java.lang.reflect.Method.invoke(Method.java:580)
at io.quarkus.bootstrap.runner.QuarkusEntryPoint.doRun(QuarkusEntryPoint.java:62)
at io.quarkus.bootstrap.runner.QuarkusEntryPoint.main(QuarkusEntryPoint.java:33)
Caused by: java.util.concurrent.ExecutionException: io.quarkus.runtime.QuarkusBindException: Port(s) already bound: 8080: Address already in use
at java.base/java.util.concurrent.CompletableFuture.reportGet(CompletableFuture.java:396)
at java.base/java.util.concurrent.CompletableFuture.get(CompletableFuture.java:2073)
at io.quarkus.vertx.http.runtime.VertxHttpRecorder.doServerStart(VertxHttpRecorder.java:755)
... 23 more
Caused by: io.quarkus.runtime.QuarkusBindException: Port(s) already bound: 8080: Address already in use
at io.quarkus.vertx.http.runtime.VertxHttpRecorder$11.handle(VertxHttpRecorder.java:727)
at io.quarkus.vertx.http.runtime.VertxHttpRecorder$11.handle(VertxHttpRecorder.java:708)
at io.vertx.core.impl.future.FutureImpl$4.onFailure(FutureImpl.java:188)
at io.vertx.core.impl.future.FutureBase.emitFailure(FutureBase.java:81)
at io.vertx.core.impl.future.FutureImpl.tryFail(FutureImpl.java:278)
at io.vertx.core.impl.future.Mapping.onFailure(Mapping.java:45)
at io.vertx.core.impl.future.FutureBase.emitFailure(FutureBase.java:81)
at io.vertx.core.impl.future.FutureImpl.tryFail(FutureImpl.java:278)
at io.vertx.core.impl.future.PromiseImpl.onFailure(PromiseImpl.java:54)
at io.vertx.core.impl.future.PromiseImpl.handle(PromiseImpl.java:43)
at io.vertx.core.impl.future.PromiseImpl.handle(PromiseImpl.java:23)
at io.vertx.core.impl.DeploymentManager.lambda$reportResult$2(DeploymentManager.java:129)
at io.vertx.core.impl.ContextInternal.dispatch(ContextInternal.java:279)
at io.vertx.core.impl.ContextInternal.dispatch(ContextInternal.java:261)
at io.vertx.core.impl.ContextInternal.lambda$runOnContext$0(ContextInternal.java:59)
at io.netty.util.concurrent.AbstractEventExecutor.runTask(AbstractEventExecutor.java:173)
at io.netty.util.concurrent.AbstractEventExecutor.safeExecute(AbstractEventExecutor.java:166)
at io.netty.util.concurrent.SingleThreadEventExecutor.runAllTasks(SingleThreadEventExecutor.java:470)
at io.netty.channel.nio.NioEventLoop.run(NioEventLoop.java:569)
at io.netty.util.concurrent.SingleThreadEventExecutor$4.run(SingleThreadEventExecutor.java:997)
at io.netty.util.internal.ThreadExecutorMap$2.run(ThreadExecutorMap.java:74)
at io.netty.util.concurrent.FastThreadLocalRunnable.run(FastThreadLocalRunnable.java:30)
at java.base/java.lang.Thread.run(Thread.java:1583)

However, if a new port is defined the error persists:

bash-5.1$ sh kc.sh start-dev --http-port=8281 --features=declarative-ui -v

2024-08-21 12:25:49,770 WARN [org.keycloak.common.Profile] (main) Experimental features enabled: declarative-ui:v1
2024-08-21 12:25:49,877 WARN [org.keycloak.common.Profile] (main) Experimental features enabled: declarative-ui:v1
2024-08-21 12:25:52,210 INFO [org.infinispan.CONTAINER] (ForkJoinPool.commonPool-worker-1) ISPN000556: Starting user marshaller 'org.infinispan.jboss.marshalling.core.JBossUserMarshaller'
2024-08-21 12:25:52,748 INFO [org.keycloak.broker.provider.AbstractIdentityProviderMapper] (main) Registering class org.keycloak.broker.provider.mappersync.ConfigSyncEventListener
2024-08-21 12:25:52,803 INFO [org.keycloak.connections.infinispan.DefaultInfinispanConnectionProviderFactory] (main) Node name: node_216127, Site name: null
2024-08-21 12:25:53,656 INFO [com.arjuna.ats.jbossatx] (main) ARJUNA032014: Stopping transaction recovery manager
2024-08-21 12:25:53,685 ERROR [org.keycloak.quarkus.runtime.cli.ExecutionExceptionHandler] (main) ERROR: Failed to start server in (development) mode
2024-08-21 12:25:53,685 ERROR [org.keycloak.quarkus.runtime.cli.ExecutionExceptionHandler] (main) Error details:: java.lang.RuntimeException: Unable to start HTTP server
at io.quarkus.vertx.http.runtime.VertxHttpRecorder.doServerStart(VertxHttpRecorder.java:834)
at io.quarkus.vertx.http.runtime.VertxHttpRecorder.startServer(VertxHttpRecorder.java:315)
at io.quarkus.deployment.steps.VertxHttpProcessor$openSocket189362710.deploy_0(Unknown Source)
at io.quarkus.deployment.steps.VertxHttpProcessor$openSocket189362710.deploy(Unknown Source)
at io.quarkus.runner.ApplicationImpl.doStart(Unknown Source)
at io.quarkus.runtime.Application.start(Application.java:101)
at io.quarkus.runtime.ApplicationLifecycleManager.run(ApplicationLifecycleManager.java:111)
at io.quarkus.runtime.Quarkus.run(Quarkus.java:71)
at org.keycloak.quarkus.runtime.KeycloakMain.start(KeycloakMain.java:139)
at org.keycloak.quarkus.runtime.cli.command.AbstractStartCommand.run(AbstractStartCommand.java:35)
at picocli.CommandLine.executeUserObject(CommandLine.java:2026)
at picocli.CommandLine.access$1500(CommandLine.java:148)
at picocli.CommandLine$RunLast.executeUserObjectOfLastSubcommandWithSameParent(CommandLine.java:2461)
at picocli.CommandLine$RunLast.handle(CommandLine.java:2453)
at picocli.CommandLine$RunLast.handle(CommandLine.java:2415)
at picocli.CommandLine$AbstractParseResultHandler.execute(CommandLine.java:2273)
at picocli.CommandLine$RunLast.execute(CommandLine.java:2417)
at picocli.CommandLine.execute(CommandLine.java:2170)
at org.keycloak.quarkus.runtime.cli.Picocli.parseAndRun(Picocli.java:119)
at org.keycloak.quarkus.runtime.KeycloakMain.main(KeycloakMain.java:99)
at java.base/jdk.internal.reflect.DirectMethodHandleAccessor.invoke(DirectMethodHandleAccessor.java:103)
at java.base/java.lang.reflect.Method.invoke(Method.java:580)
at io.quarkus.bootstrap.runner.QuarkusEntryPoint.doRun(QuarkusEntryPoint.java:62)
at io.quarkus.bootstrap.runner.QuarkusEntryPoint.main(QuarkusEntryPoint.java:33)
Caused by: java.util.concurrent.ExecutionException: java.lang.IllegalStateException: Unable to start the management interface
at java.base/java.util.concurrent.CompletableFuture.reportGet(CompletableFuture.java:396)
at java.base/java.util.concurrent.CompletableFuture.get(CompletableFuture.java:2073)
at io.quarkus.vertx.http.runtime.VertxHttpRecorder.doServerStart(VertxHttpRecorder.java:760)
... 23 more
Caused by: java.lang.IllegalStateException: Unable to start the management interface
at io.quarkus.vertx.http.runtime.VertxHttpRecorder.lambda$initializeManagementInterface$2(VertxHttpRecorder.java:629)
at io.vertx.core.impl.future.FutureImpl$4.onFailure(FutureImpl.java:188)
at io.vertx.core.impl.future.FutureBase.emitFailure(FutureBase.java:81)
at io.vertx.core.impl.future.FutureImpl.tryFail(FutureImpl.java:278)
at io.vertx.core.impl.future.FixedMapping.onFailure(FixedMapping.java:36)
at io.vertx.core.impl.future.FutureBase.emitFailure(FutureBase.java:81)
at io.vertx.core.impl.future.FutureImpl.tryFail(FutureImpl.java:278)
at io.vertx.core.impl.future.FixedMapping.onFailure(FixedMapping.java:36)
at io.vertx.core.impl.future.FutureBase.lambda$emitFailure$1(FutureBase.java:75)
at io.netty.util.concurrent.AbstractEventExecutor.runTask(AbstractEventExecutor.java:173)
at io.netty.util.concurrent.AbstractEventExecutor.safeExecute(AbstractEventExecutor.java:166)
at io.netty.util.concurrent.SingleThreadEventExecutor.runAllTasks(SingleThreadEventExecutor.java:470)
at io.netty.channel.nio.NioEventLoop.run(NioEventLoop.java:569)
at io.netty.util.concurrent.SingleThreadEventExecutor$4.run(SingleThreadEventExecutor.java:997)
at io.netty.util.internal.ThreadExecutorMap$2.run(ThreadExecutorMap.java:74)
at io.netty.util.concurrent.FastThreadLocalRunnable.run(FastThreadLocalRunnable.java:30)
at java.base/java.lang.Thread.run(Thread.java:1583)
Caused by: java.net.BindException: Address already in use
at java.base/sun.nio.ch.Net.bind0(Native Method)
at java.base/sun.nio.ch.Net.bind(Net.java:565)
at java.base/sun.nio.ch.ServerSocketChannelImpl.netBind(ServerSocketChannelImpl.java:344)
at java.base/sun.nio.ch.ServerSocketChannelImpl.bind(ServerSocketChannelImpl.java:301)
at io.netty.channel.socket.nio.NioServerSocketChannel.doBind(NioServerSocketChannel.java:141)
at io.netty.channel.AbstractChannel$AbstractUnsafe.bind(AbstractChannel.java:562)
at io.netty.channel.DefaultChannelPipeline$HeadContext.bind(DefaultChannelPipeline.java:1334)
at io.netty.channel.AbstractChannelHandlerContext.invokeBind(AbstractChannelHandlerContext.java:600)
at io.netty.channel.AbstractChannelHandlerContext.bind(AbstractChannelHandlerContext.java:579)
at io.netty.channel.DefaultChannelPipeline.bind(DefaultChannelPipeline.java:973)
at io.netty.channel.AbstractChannel.bind(AbstractChannel.java:260)
at io.netty.bootstrap.AbstractBootstrap$2.run(AbstractBootstrap.java:380)
at io.netty.util.concurrent.AbstractEventExecutor.runTask(AbstractEventExecutor.java:173)
at io.netty.util.concurrent.AbstractEventExecutor.safeExecute(AbstractEventExecutor.java:166)
at io.netty.util.concurrent.SingleThreadEventExecutor.runAllTasksFrom(SingleThreadEventExecutor.java:426)
at io.netty.util.concurrent.SingleThreadEventExecutor.runAllTasks(SingleThreadEventExecutor.java:375)
at io.netty.channel.nio.NioEventLoop.run(NioEventLoop.java:557)
... 4 more

But after running the above commands, the feature is mentioned in the config:
bash-5.1$ sh kc.sh show-config

Current Mode: development
Current Configuration:
kc.cache = local (classpath keycloak.conf)
kc.config.built = true (SysPropConfigSource)
kc.db = postgres (ENV)
kc.db-password = ******* (ENV)
kc.db-url = jdbc:postgresql://postgres:5432/keycloak (ENV)
kc.db-username = keycloak (ENV)
kc.db.password = password (ENV)
kc.db.url = jdbc:postgresql://postgres:5432/keycloak (ENV)
kc.db.username = keycloak (ENV)
kc.features = declarative-ui (Persisted)
kc.hostname-strict = false (classpath keycloak.conf)
kc.http-enabled = true (classpath keycloak.conf)
kc.log-console-output = default (classpath keycloak.conf)
kc.provider.file.customKeyclock.jar.last-modified = 1721297154962 (Persisted)
kc.run.in.container = true (ENV)
kc.spi-theme-cache-templates = false (classpath keycloak.conf)
kc.spi-theme-cache-themes = false (classpath keycloak.conf)
kc.spi-theme-static-max-age = -1 (classpath keycloak.conf)
kc.version = 25.0.2 (SysPropConfigSource)

Thank you very much for any help.

atm this is not possible, but I think we could add that issue

Thanks @MLukman I will get to that

The parameters in the path are send as well so you can get the clientId by doing:

        System.out.println("clientId = " + model.get("clientId"));

The parameters in the path are send as well so you can get the clientId by doing:

        System.out.println("clientId = " + model.get("clientId"));

The code I posted doesn't persist all the fields. So when it returns the information to the screen, only some are saved. I also tried to save using onCreate as shown below, but I don't know how to persist the Client's information and save it in its attributes.

I also need it to return the information persisted by the Client when querying the tab. Apparently it's returning the whole realm.

    @Override
    public void onCreate(KeycloakSession session, RealmModel realm, ComponentModel model) {
        String clientId = model.get("clientId");

        String host = model.get("smtpHost");
        String port = model.get("smtpPort");
        String from = model.get("smtpFrom");
        String displayName = model.get("smtpDisplayName");
        String user = model.get("smtpUser");
        String password = model.get("smtpPassword");
        boolean auth = Boolean.parseBoolean(model.get("smtpAuth"));
        boolean ssl = Boolean.parseBoolean(model.get("smtpSsl"));
        boolean tls = Boolean.parseBoolean(model.get("smtpTls"));

        ClientModel client = realm.getClientById(clientId);

        client.setAttribute("smtpHost", host);
        client.setAttribute("smtpPort", port);
        client.setAttribute("smtpFrom", from);
        client.setAttribute("smtpDisplayName", displayName);
        client.setAttribute("smtpUser", user);
        client.setAttribute("smtpPassword", password);
        client.setAttribute("smtpAuth", String.valueOf(auth));
        client.setAttribute("smtpSsl", String.valueOf(ssl));
        client.setAttribute("smtpTls", String.valueOf(tls));
    }

right, maybe I can find a better way to make this connection based on the parameters

I have the exact same problem. My implementation follows the quickstart example:

https://github.com/keycloak/keycloak-quickstarts/blob/latest/extension/extend-admin-console-spi/src/main/java/org/keycloak/admin/ui/AdminUiPage.java

Here's my code, running on Keycloak 25.0.1:

package org.keycloak.admin.ui;

import org.keycloak.Config;
import org.keycloak.component.ComponentModel;
import org.keycloak.models.KeycloakSession;
import org.keycloak.models.KeycloakSessionFactory;
import org.keycloak.models.RealmModel;
import org.keycloak.provider.ProviderConfigProperty;
import org.keycloak.provider.ProviderConfigurationBuilder;
import org.keycloak.services.ui.extend.UiTabProvider;
import org.keycloak.services.ui.extend.UiTabProviderFactory;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class ThemeUiTab implements UiTabProvider, UiTabProviderFactory<ComponentModel> {

    @Override
    public String getId() {
        return "Attributes";
    }

    @Override
    public String getHelpText() {
        return null;
    }

    @Override
    public void init(Config.Scope config) {
    }

    @Override
    public void postInit(KeycloakSessionFactory factory) {
    }

    @Override
    public void close() {
    }

    @Override
    public void onCreate(KeycloakSession session, RealmModel realm, ComponentModel model) {
        realm.setAttribute("userauthurl", model.get("userauthurl"));
    }

    @Override
    public void onUpdate(KeycloakSession session, RealmModel realm, ComponentModel oldModel, ComponentModel newModel) {
        realm.setAttribute("userauthurl", newModel.get("userauthurl"));
    }

    @Override
    public List<ProviderConfigProperty> getConfigProperties() {
        final ProviderConfigurationBuilder builder = ProviderConfigurationBuilder.create();
        builder.property()
                .name("userauthurl")
                .label("User Authorization Data URL")
                .helpText("This URL is used by Keycloak to fetch user roles and add them to the token.")
                .type(ProviderConfigProperty.STRING_TYPE)
                .add();
        return builder.build();
    }

    @Override
    public String getPath() {
        return "/:realm/realm-settings/:tab?";
    }

    @Override
    public Map<String, String> getParams() {
        Map<String, String> params = new HashMap<>();
        params.put("tab", "attributes");
        return params;
    }
}

it seems that this is really a bug on 25.0.1. I upgraded my Keycloak to 26.0.0 and everythig works fine.

Have you tried to clear the realm cache? This should not be necessary, of course, but would be interesting whether it's a caching issue.

Yes, I already tried clearing the realm cache manually. In the latest Keycloak versions, the "Clear Cache" buttons were removed, but the API endpoints still work. So, I tried clearing the cache using /admin/realms/{realm-id}/clear-realm-cache, but the problem persists.

Also, I'm testing this on an instance running with start-dev. In development mode, the realm cache is stored locally and expires every hour. So, if the issue were cache-related, the field would have been updated within that 1-hour interval.

I have the same issue, I don't think it's a cache problem but as mentioned before the values are fetched from the component model and there is currently no way to get them from the realm attributes.

Would love to see a solution for this one.

As far I understand, @edewit will work on a fix to this. Here's the issue #37170