Pass client id for Account and Admin consoles through environment (#20961)

js/apps/account-ui/pom.xml

@@ -88,8 +88,8 @@
   <script id="environment" type="application/json">
     {
       "authUrl": "${authUrl}",
-      "isRunningAsTheme": true,
       "realm": "${realm.name}",
+      "clientId": "${clientId}",
       "resourceUrl": "${resourceUrl}",
       "logo": "${properties.logo!""}",
       "logoUrl": "${properties.logoUrl!""}",

js/apps/account-ui/src/environment.ts

@@ -1,10 +1,10 @@
 export type Environment = {
   /** The URL to the root of the auth server. */
   authUrl: string;
-  /** Indicates if the application is running as a Keycloak theme. */
-  isRunningAsTheme: boolean;
-  /** The realm used to sign into. */
+  /** The realm used to authenticate the user to the Account Console. */
   realm: string;
+  /** The identifier of the client used to authenticate the user to the Account Console. */
+  clientId: string;
   /** The URL to resources such as the files in the `public` directory. */
   resourceUrl: string;
   /** Indicates the src for the Brand image */
@@ -30,8 +30,8 @@ export type Environment = {
 // The default environment, used during development.
 const defaultEnvironment: Environment = {
   authUrl: "http://localhost:8180",
-  isRunningAsTheme: false,
   realm: "master",
+  clientId: "security-admin-console-v2",
   resourceUrl: "http://localhost:8080",
   logo: "/logo.svg",
   logoUrl: "/",

js/apps/account-ui/src/keycloak.ts

@@ -4,7 +4,5 @@ import { environment } from "./environment";
 export const keycloak = new Keycloak({
   url: environment.authUrl,
   realm: environment.realm,
-  clientId: environment.isRunningAsTheme
-    ? "account-console"
-    : "security-admin-console-v2",
+  clientId: environment.clientId,
 });

js/apps/admin-ui/pom.xml

@@ -130,6 +130,7 @@
   <script id="environment" type="application/json">
     {
       "loginRealm": "${loginRealm!"master"}",
+      "clientId": "${clientId}",
       "authServerUrl": "${authServerUrl}",
       "authUrl": "${authUrl}",
       "consoleBaseUrl": "${consoleBaseUrl}",
@@ -137,8 +138,7 @@
       "masterRealm": "${masterRealm}",
       "resourceVersion": "${resourceVersion}",
       "logo": "${properties.logo!""}",
-      "logoUrl": "${properties.logoUrl!""}",
-      "isRunningAsTheme": true
+      "logoUrl": "${properties.logoUrl!""}"
     }
   </script>
 </body>

js/apps/admin-ui/src/environment.ts

@@ -1,6 +1,8 @@
 export type Environment = {
-  /** The realm which should be used when signing into the application. */
+  /** The realm used to authenticate the user to the Admin Console. */
   loginRealm: string;
+  /** The identifier of the client used to authenticate the user to the Admin Console. */
+  clientId: string;
   /** The URL to the root of the auth server. */
   authServerUrl: string;
   /** The URL to the path of the auth server where client requests can be sent. */
@@ -13,8 +15,6 @@ export type Environment = {
   masterRealm: string;
   /** The version hash of the auth server. */
   resourceVersion: string;
-  /** Indicates if the application is running as a Keycloak theme. */
-  isRunningAsTheme: boolean;
   /** Indicates the src for the Brand image */
   logo: string;
   /** Indicates the url to be followed when Brand image is clicked */
@@ -27,13 +27,13 @@ const realm = new URLSearchParams(window.location.search).get("realm");
 // The default environment, used during development.
 const defaultEnvironment: Environment = {
   loginRealm: realm ?? "master",
+  clientId: "security-admin-console-v2",
   authServerUrl: "http://localhost:8180",
   authUrl: "http://localhost:8180",
   consoleBaseUrl: "/admin/master/console/",
   resourceUrl: ".",
   masterRealm: "master",
   resourceVersion: "unknown",
-  isRunningAsTheme: false,
   logo: "/logo.svg",
   logoUrl: "",
 };

js/apps/admin-ui/src/keycloak.ts

@@ -5,9 +5,7 @@ import environment from "./environment";
 export const keycloak = new Keycloak({
   url: environment.authServerUrl,
   realm: environment.loginRealm,
-  clientId: environment.isRunningAsTheme
-    ? "security-admin-console"
-    : "security-admin-console-v2",
+  clientId: environment.clientId,
 });
 
 export async function initKeycloak() {

services/src/main/java/org/keycloak/services/resources/account/AccountConsole.java

@@ -95,6 +95,7 @@ public class AccountConsole {
             map.put("authUrl", authUrl.getPath().endsWith("/") ? authUrl : authUrl + "/");
             map.put("baseUrl", accountBaseUrl);
             map.put("realm", realm);
+            map.put("clientId", Constants.ACCOUNT_CONSOLE_CLIENT_ID);
             map.put("resourceUrl", Urls.themeRoot(authUrl).getPath() + "/" + Constants.ACCOUNT_MANAGEMENT_CLIENT_ID + "/" + theme.getName());
             map.put("resourceCommonUrl", Urls.themeRoot(adminBaseUri).getPath() + "/common/keycloak");
             map.put("resourceVersion", Version.RESOURCES_VERSION);

services/src/main/java/org/keycloak/services/resources/admin/AdminConsole.java

@@ -344,6 +344,7 @@ public class AdminConsole {
             map.put("masterRealm", Config.getAdminRealm());
             map.put("resourceVersion", Version.RESOURCES_VERSION);
             map.put("loginRealm", realm.getName());
+            map.put("clientId", Constants.ADMIN_CONSOLE_CLIENT_ID);
             map.put("properties", theme.getProperties());
 
             FreeMarkerProvider freeMarkerUtil = session.getProvider(FreeMarkerProvider.class);