keycloak · jonkoops · Mar 7, 2024 · Mar 6, 2024
@@ -5,19 +5,16 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-import { environment } from "./environment";
 import { i18n } from "./i18n";
 import { routes } from "./routes";
-import { getRootPath } from "./utils/getRootPath";
 
 // Initialize required components before rendering app.
 await i18n.init();
 
 const container = document.getElementById("app");
 const root = createRoot(container!);
 
-const basename = getRootPath(environment.realm);
-const router = createBrowserRouter(routes, { basename });
+const router = createBrowserRouter(routes);
 
 root.render(
   <StrictMode>

@@ -20,12 +20,14 @@ import {
   useHref,
   useLinkClickHandler,
   useLocation,
+  useParams,
 } from "react-router-dom";
 import fetchContentJson from "../content/fetchContent";
 import type { Feature } from "../environment";
 import { TFuncKey } from "../i18n";
 import { usePromise } from "../utils/usePromise";
 import { useEnvironment } from "./KeycloakContext";
+import { getRootPath } from "../utils/getRootPath";
 
 type RootMenuItem = {
   label: TFuncKey;
@@ -132,8 +134,11 @@ export const NavLink = ({
   isActive,
   children,
 }: PropsWithChildren<NavLinkProps>) => {
-  const href = useHref(to);
-  const handleClick = useLinkClickHandler(to);
+  const { realm } = useParams();
+
+  const menuItemPath = `${getRootPath(realm)}/${to}`;
+  const href = useHref(menuItemPath);
+  const handleClick = useLinkClickHandler(menuItemPath);
 
   return (
     <NavItem

@@ -48,7 +48,7 @@ export type ContentComponentParams = {
 };
 
 export const ContentRoute: RouteObject = {
-  path: "/content/:componentId",
+  path: "content/:componentId",
   element: <ContentComponent />,
 };
 
@@ -58,7 +58,7 @@ export const PersonalInfoRoute: IndexRouteObject = {
 };
 
 export const RootRoute: RouteObject = {
-  path: "/",
+  path: "/realms/:realm/account",
   element: <Root />,
   errorElement: <ErrorPage />,
   children: [

@@ -14,7 +14,7 @@ import {
   inRealm,
 } from "../admin-client";
 import groupsIdPClient from "../realms/groups-idp.json" assert { type: "json" };
-import { getBaseUrl } from "../utils";
+import { getKeycloakServerUrl } from "../utils";
 
 const realm = "groups";
 
@@ -32,7 +32,7 @@ test.describe("Account linking", () => {
     groupIdPClientId = await createClient(
       groupsIdPClient as ClientRepresentation,
     );
-    const baseUrl = getBaseUrl();
+    const baseUrl = getKeycloakServerUrl();
     const idp: IdentityProviderRepresentation = {
       alias: "master-idp",
       providerId: "oidc",
@@ -65,9 +65,7 @@ test.describe("Account linking", () => {
 
   test("Linking", async ({ page }) => {
     // If refactoring this, consider introduction of helper functions for individual pages - login, update profile etc.
-    await page.goto(
-      process.env.CI ? `/realms/${realm}/account` : `/?realm=${realm}`,
-    );
+    await page.goto(`/realms/${realm}/account`);
 
     // Click the login via master-idp provider button
     await loginWithIdp(page, "master-idp");

@@ -6,10 +6,10 @@ import type { UserProfileConfig } from "@keycloak/keycloak-admin-client/lib/defs
 import UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
 
 import { DEFAULT_REALM } from "../src/constants";
-import { getBaseUrl } from "./utils";
+import { getKeycloakServerUrl } from "./utils";
 
 const adminClient = new KeycloakAdminClient({
-  baseUrl: getBaseUrl(),
+  baseUrl: getKeycloakServerUrl(),
   realmName: DEFAULT_REALM,
 });
 

@@ -1,13 +1,18 @@
 import { getRootPath } from "../src/utils/getRootPath";
 
-export function getBaseUrl(): string {
+function getTestServerUrl(): string {
   return process.env.KEYCLOAK_SERVER ?? "http://localhost:8080";
 }
 
+export function getKeycloakServerUrl(): string {
+  // In CI, the Keycloak server is running in the same server as tested console, while in dev, it is running on a different port
+  return process.env.CI ? getTestServerUrl() : "http://localhost:8180";
+}
+
 export function getAccountUrl() {
-  return getBaseUrl() + getRootPath();
+  return getTestServerUrl() + getRootPath();
 }
 
 export function getAdminUrl() {
-  return getBaseUrl() + "/admin/master/console/";
+  return getKeycloakServerUrl() + "/admin/master/console/";
 }