keycloak · edewit · Jun 6, 2024 · Jun 4, 2024 · Jun 4, 2024 · Jun 4, 2024
@@ -438,3 +438,22 @@ An external {jdgserver_name} deployment is supported for multi-site setups as ou
 
 The Oracle Database JDBC driver is no longer part of the Keycloak distribution.
 If you wish to use Oracle DB, you must manually install a version of the Oracle Driver that is compatible with your specific environment. Instructions for this process can be found in the https://www.keycloak.org/server/db[Configuring the database] {section}.
+
+= Deprecated theme variables
+
+The following variables were deprecated in the Account theme:
+
+* `authUrl`. Use `authServerUrl` instead.
+
+The following variables from the environment script injected into the page of the Account theme are deprecated:
+
+* `authUrl`. Use `authServerUrl` instead.
+* `features.isInternationalizationEnabled`. Do not use this variable.
+
+The following variables were deprecated in the Admin theme:
+
+* `authUrl`. Do not use this variable.
+
+The following variables from the environment script injected into the page of the Admin theme are deprecated:
+
+* `authUrl`. Do not use this variable.
@@ -22,7 +22,7 @@ import { KeycloakProvider } from "@keycloak/keycloak-account-ui";
 //...
 
 <KeycloakProvider environment={{
-      authUrl: "http://localhost:8080",
+      authServerUrl: "http://localhost:8080",
       realm: "master",
       clientId: "security-admin-console"
   }}>

@@ -149,27 +149,28 @@
   <script id="environment" type="application/json">
     {
       "authUrl": "${authUrl}",
-      "baseUrl": "${baseUrl}",
+      "authServerUrl": "${authServerUrl}",
       "realm": "${realm.name}",
       "clientId": "${clientId}",
       "resourceUrl": "${resourceUrl}",
       "logo": "${properties.logo!""}",
       "logoUrl": "${properties.logoUrl!""}",
+      "baseUrl": "${baseUrl}",
       "locale": "${locale}",
+      "referrerName": "${referrerName!""}",
+      "referrerUrl": "${referrer_uri!""}",
       "features": {
-            "isRegistrationEmailAsUsername": ${realm.registrationEmailAsUsername?c},
-            "isEditUserNameAllowed": ${realm.editUsernameAllowed?c},
-            "isInternationalizationEnabled": ${realm.isInternationalizationEnabled()?c},
-            "isLinkedAccountsEnabled": ${realm.identityFederationEnabled?c},
-            "isMyResourcesEnabled": ${(realm.userManagedAccessAllowed && isAuthorizationEnabled)?c},
-            "deleteAccountAllowed": ${deleteAccountAllowed?c},
-            "updateEmailFeatureEnabled": ${updateEmailFeatureEnabled?c},
-            "updateEmailActionEnabled": ${updateEmailActionEnabled?c},
-            "isViewGroupsEnabled": ${isViewGroupsEnabled?c},
-            "isOid4VciEnabled": ${isOid4VciEnabled?c}
-        },
-        "referrerName": "${referrerName!""}",
-        "referrerUrl": "${referrer_uri!""}"
+        "isRegistrationEmailAsUsername": ${realm.registrationEmailAsUsername?c},
+        "isEditUserNameAllowed": ${realm.editUsernameAllowed?c},
+        "isInternationalizationEnabled": ${realm.isInternationalizationEnabled()?c},
+        "isLinkedAccountsEnabled": ${realm.identityFederationEnabled?c},
+        "isMyResourcesEnabled": ${(realm.userManagedAccessAllowed && isAuthorizationEnabled)?c},
+        "deleteAccountAllowed": ${deleteAccountAllowed?c},
+        "updateEmailFeatureEnabled": ${updateEmailFeatureEnabled?c},
+        "updateEmailActionEnabled": ${updateEmailActionEnabled?c},
+        "isViewGroupsEnabled": ${isViewGroupsEnabled?c},
+        "isOid4VciEnabled": ${isOid4VciEnabled?c}
+      }
     }
   </script>
 </body>

@@ -1,13 +1,16 @@
-import { KeycloakContext } from "@keycloak/keycloak-ui-shared";
-import { BaseEnvironment } from "@keycloak/keycloak-ui-shared/dist/context/environment";
+import {
+  KeycloakContext,
+  type BaseEnvironment,
+} from "@keycloak/keycloak-ui-shared";
+
 import { CallOptions } from "./api/methods";
 import { Links, parseLinks } from "./api/parse-links";
 import { parseResponse } from "./api/parse-response";
 import {
+  CredentialsIssuer,
   Permission,
   Resource,
   Scope,
-  CredentialsIssuer,
   SupportedCredentialConfiguration,
 } from "./api/representations";
 import { request } from "./api/request";
@@ -85,7 +88,7 @@ export async function getIssuer(context: KeycloakContext<BaseEnvironment>) {
     {},
     new URL(
       joinPath(
-        context.environment.authUrl +
+        context.environment.authServerUrl +
           "/realms/" +
           context.environment.realm +
           "/.well-known/openid-credential-issuer",

@@ -1,8 +1,8 @@
 import {
-  AccountEnvironment,
-  KeycloakContext,
+  BaseEnvironment,
+  type KeycloakContext,
 } from "@keycloak/keycloak-ui-shared";
-import { BaseEnvironment } from "@keycloak/keycloak-ui-shared/dist/context/environment";
+
 import { joinPath } from "../utils/joinPath";
 import { parseResponse } from "./parse-response";
 import {
@@ -45,7 +45,7 @@ export async function getSupportedLocales({
 }
 
 export async function savePersonalInfo(
-  context: KeycloakContext<AccountEnvironment>,
+  context: KeycloakContext<BaseEnvironment>,
   info: UserRepresentation,
 ): Promise<void> {
   const response = await request("/", context, { body: info, method: "POST" });
@@ -134,7 +134,7 @@ export async function linkAccount(
 ) {
   const redirectUri = encodeURIComponent(
     joinPath(
-      context.environment.authUrl,
+      context.environment.authServerUrl,
       "realms",
       context.environment.realm,
       "account",

@@ -1,6 +1,9 @@
-import { KeycloakContext } from "@keycloak/keycloak-ui-shared";
-import { BaseEnvironment } from "@keycloak/keycloak-ui-shared/dist/context/environment";
+import {
+  KeycloakContext,
+  type BaseEnvironment,
+} from "@keycloak/keycloak-ui-shared";
 import Keycloak from "keycloak-js";
+
 import { joinPath } from "../utils/joinPath";
 import { CONTENT_TYPE_HEADER, CONTENT_TYPE_JSON } from "./constants";
 
@@ -50,7 +53,13 @@ export async function request(
 
 export const url = (environment: BaseEnvironment, path: string) =>
   new URL(
-    joinPath(environment.authUrl, "realms", environment.realm, "account", path),
+    joinPath(
+      environment.authServerUrl,
+      "realms",
+      environment.realm,
+      "account",
+      path,
+    ),
   );
 
 export const token = (keycloak: Keycloak) =>

@@ -0,0 +1,61 @@
+import {
+  getInjectedEnvironment,
+  type BaseEnvironment,
+} from "@keycloak/keycloak-ui-shared";
+
+export type Environment = BaseEnvironment & {
+  /** The URL to the root of the account console. */
+  baseUrl: string;
+  /** The locale of the user */
+  locale: string;
+  /** Name of the referrer application in the back link */
+  referrerName?: string;
+  /** UR to the referrer application in the back link */
+  referrerUrl?: string;
+  /** Feature flags */
+  features: Feature;
+};
+
+export type Feature = {
+  isRegistrationEmailAsUsername: boolean;
+  isEditUserNameAllowed: boolean;
+  isLinkedAccountsEnabled: boolean;
+  isMyResourcesEnabled: boolean;
+  deleteAccountAllowed: boolean;
+  updateEmailFeatureEnabled: boolean;
+  updateEmailActionEnabled: boolean;
+  isViewGroupsEnabled: boolean;
+  isOid4VciEnabled: boolean;
+};
+
+// During development the realm can be passed as a query parameter when redirecting back from Keycloak.
+const realm =
+  new URLSearchParams(window.location.search).get("realm") ||
+  location.pathname.match("/realms/(.*?)/account")?.[1] ||
+  "master";
+
+const defaultEnvironment: Environment = {
+  // Base environment variables
+  authServerUrl: "http://localhost:8180",
+  realm: realm,
+  clientId: "security-admin-console-v2",
+  resourceUrl: "http://localhost:8080",
+  logo: "/logo.svg",
+  logoUrl: "/",
+  // Account Console specific environment variables
+  baseUrl: `http://localhost:8180/realms/${realm}/account/`,
+  locale: "en",
+  features: {
+    isRegistrationEmailAsUsername: false,
+    isEditUserNameAllowed: true,
+    isLinkedAccountsEnabled: true,
+    isMyResourcesEnabled: true,
+    deleteAccountAllowed: true,
+    updateEmailFeatureEnabled: true,
+    updateEmailActionEnabled: true,
+    isViewGroupsEnabled: true,
+    isOid4VciEnabled: true,
+  },
+};
+
+export const environment = getInjectedEnvironment(defaultEnvironment);
@@ -1,7 +1,8 @@
 import { LanguageDetectorModule, createInstance } from "i18next";
 import HttpBackend from "i18next-http-backend";
 import { initReactI18next } from "react-i18next";
-import { environment } from "@keycloak/keycloak-ui-shared";
+
+import { environment } from "./environment";
 import { joinPath } from "./utils/joinPath";
 
 const DEFAULT_LOCALE = "en";
@@ -28,7 +29,7 @@ export const i18n = createInstance({
   },
   backend: {
     loadPath: joinPath(
-      environment.authUrl,
+      environment.authServerUrl,
       `resources/${environment.realm}/account/{{lng}}`,
     ),
     parse: (data: string) => {

@@ -1,5 +1,4 @@
 import {
-  AccountEnvironment,
   UserProfileFields,
   beerify,
   debeerify,
@@ -20,6 +19,7 @@ import { TFunction } from "i18next";
 import { useState } from "react";
 import { ErrorOption, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import {
   getPersonalInfo,
   getSupportedLocales,
@@ -30,12 +30,13 @@ import {
   UserRepresentation,
 } from "../api/representations";
 import { Page } from "../components/page/Page";
+import type { Environment } from "../environment";
 import { TFuncKey, i18n } from "../i18n";
 import { usePromise } from "../utils/usePromise";
 
 export const PersonalInfo = () => {
   const { t } = useTranslation();
-  const context = useEnvironment<AccountEnvironment>();
+  const context = useEnvironment<Environment>();
   const [userProfileMetadata, setUserProfileMetadata] =
     useState<UserProfileMetadata>();
   const [supportedLocales, setSupportedLocales] = useState<string[]>([]);

@@ -1,13 +1,14 @@
-import { Button } from "@patternfly/react-core";
-import { ExternalLinkSquareAltIcon } from "@patternfly/react-icons";
-import { useTranslation } from "react-i18next";
-import { useHref } from "react-router-dom";
 import {
   KeycloakMasthead,
-  environment,
   label,
   useEnvironment,
 } from "@keycloak/keycloak-ui-shared";
+import { Button } from "@patternfly/react-core";
+import { ExternalLinkSquareAltIcon } from "@patternfly/react-icons";
+import { useTranslation } from "react-i18next";
+import { useHref } from "react-router-dom";
+
+import { environment } from "../environment";
 import { joinPath } from "../utils/joinPath";
 
 import style from "./header.module.css";

@@ -1,3 +1,4 @@
+import { useEnvironment } from "@keycloak/keycloak-ui-shared";
 import {
   Nav,
   NavExpandable,
@@ -22,13 +23,9 @@ import {
   useLinkClickHandler,
   useLocation,
 } from "react-router-dom";
-import {
-  AccountEnvironment,
-  environment,
-  useEnvironment,
-  type Feature,
-} from "@keycloak/keycloak-ui-shared";
+
 import fetchContentJson from "../content/fetchContent";
+import { environment, type Environment, type Feature } from "../environment";
 import { TFuncKey } from "../i18n";
 import { usePromise } from "../utils/usePromise";
 
@@ -49,7 +46,7 @@ export type MenuItem = RootMenuItem | MenuItemWithChildren;
 
 export const PageNav = () => {
   const [menuItems, setMenuItems] = useState<MenuItem[]>();
-  const context = useEnvironment<AccountEnvironment>();
+  const context = useEnvironment<Environment>();
 
   usePromise((signal) => fetchContentJson({ signal, context }), setMenuItems);
   return (
@@ -86,7 +83,7 @@ function NavMenuItem({ menuItem }: NavMenuItemProps) {
   const { t } = useTranslation();
   const {
     environment: { features },
-  } = useEnvironment<AccountEnvironment>();
+  } = useEnvironment<Environment>();
   const { pathname } = useLocation();
   const isActive = useMemo(
     () => matchMenuItem(pathname, menuItem),

@@ -1,7 +1,9 @@
-import { KeycloakProvider, environment } from "@keycloak/keycloak-ui-shared";
+import { KeycloakProvider } from "@keycloak/keycloak-ui-shared";
 import { Page, Spinner } from "@patternfly/react-core";
 import { Suspense } from "react";
 import { Outlet } from "react-router-dom";
+
+import { environment } from "../environment";
 import { Header } from "./Header";
 import { PageNav } from "./PageNav";
 

@@ -1,6 +1,7 @@
 import { lazy } from "react";
 import type { IndexRouteObject, RouteObject } from "react-router-dom";
-import { environment } from "@keycloak/keycloak-ui-shared";
+
+import { environment } from "./environment";
 import { ErrorPage } from "./root/ErrorPage";
 import { Root } from "./root/Root";
 

@@ -124,16 +124,16 @@
 <![CDATA[
   <script id="environment" type="application/json">
     {
+      "authUrl": "${authUrl}",
+      "authServerUrl": "${authServerUrl}",
       "realm": "${loginRealm!"master"}",
       "clientId": "${clientId}",
-      "authServerUrl": "${authServerUrl}",
-      "authUrl": "${authUrl}",
-      "consoleBaseUrl": "${consoleBaseUrl}",
       "resourceUrl": "${resourceUrl}",
-      "masterRealm": "${masterRealm}",
-      "resourceVersion": "${resourceVersion}",
       "logo": "${properties.logo!""}",
-      "logoUrl": "${properties.logoUrl!""}"
+      "logoUrl": "${properties.logoUrl!""}",
+      "consoleBaseUrl": "${consoleBaseUrl}",
+      "masterRealm": "${masterRealm}",
+      "resourceVersion": "${resourceVersion}"
     }
   </script>
 </body>