Use correct environment variables in Account Console v3 (#19934)

js/apps/account-ui/pom.xml

@@ -77,10 +77,10 @@
 <![CDATA[
   <script id="environment" type="application/json">
     {
-      "loginRealm": "${loginRealm!"master"}",
+      "authUrl": "${authUrl}",
-      "authServerUrl": "${authUrl}",
+      "isRunningAsTheme": true,
-      "resourceUrl": "${resourceUrl}",
+      "realm": "${realm.name}",
-      "isRunningAsTheme": true
+      "resourceUrl": "${resourceUrl}"
     }
   </script>
 </body>

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

@@ -67,9 +67,9 @@ function checkResponse<T>(response: T) {
 
 async function get(path: string, params: RequestInit): Promise<Response> {
   const url = joinPath(
-    environment.authServerUrl,
+    environment.authUrl,
     "realms",
-    environment.loginRealm,
+    environment.realm,
     "account",
     path
   );

js/apps/account-ui/src/api/methods.ts

@@ -103,12 +103,7 @@ export async function unLinkAccount(account: LinkedAccountRepresentation) {
 
 export async function linkAccount(account: LinkedAccountRepresentation) {
   const redirectUri = encodeURIComponent(
-    joinPath(
+    joinPath(environment.authUrl, "realms", environment.realm, "account")
-      environment.authServerUrl,
-      "realms",
-      environment.loginRealm,
-      "account"
-    )
   );
   const response = await request("/linked-accounts/" + account.providerName, {
     searchParams: { providerId: account.providerName, redirectUri },

js/apps/account-ui/src/api/request.ts

@@ -15,13 +15,7 @@ export async function request(
   { signal, method, searchParams, body }: RequestOptions = {}
 ): Promise<Response> {
   const url = new URL(
-    joinPath(
+    joinPath(environment.authUrl, "realms", environment.realm, "account", path)
-      environment.authServerUrl,
-      "realms",
-      environment.loginRealm,
-      "account",
-      path
-    )
   );
 
   if (searchParams) {

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

@@ -1,20 +1,20 @@
 export type Environment = {
-  /** The realm which should be used when signing into the application. */
-  loginRealm: string;
   /** The URL to the root of the auth server. */
-  authServerUrl: string;
+  authUrl: string;
-  /** The URL to resources such as the files in the `public` directory. */
-  resourceUrl: string;
   /** Indicates if the application is running as a Keycloak theme. */
   isRunningAsTheme: boolean;
+  /** The realm used to sign into. */
+  realm: string;
+  /** The URL to resources such as the files in the `public` directory. */
+  resourceUrl: string;
 };
 
 // The default environment, used during development.
 const defaultEnvironment: Environment = {
-  loginRealm: "master",
+  authUrl: "http://localhost:8180",
-  authServerUrl: "http://localhost:8180",
-  resourceUrl: "http://localhost:8080",
   isRunningAsTheme: false,
+  realm: "master",
+  resourceUrl: "http://localhost:8080",
 };
 
 // Merge the default and injected environment variables together.

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

@@ -2,8 +2,8 @@ import Keycloak from "keycloak-js";
 import { environment } from "./environment";
 
 export const keycloak = new Keycloak({
-  url: environment.authServerUrl,
+  url: environment.authUrl,
-  realm: environment.loginRealm,
+  realm: environment.realm,
   clientId: environment.isRunningAsTheme
     ? "account-console"
     : "security-admin-console-v2",

js/apps/keycloak-server/scripts/start-server.mjs

@@ -26,7 +26,7 @@ async function startServer() {
     [
       "start-dev",
       "--http-port=8180",
-      "--features=admin2,admin-fine-grained-authz,declarative-user-profile",
+      "--features=account3,admin-fine-grained-authz,declarative-user-profile",
       ...args,
     ],
     {