build(deps): bump keycloak-js from 25.0.6 to 26.0.0

Credits.md

@@ -0,0 +1,15 @@
+## Credits
+
+This project adapts source code from the following libraries:
+
+-   CSG javascript library <https://github.com/manthrax/THREE-CSGMesh>
+    -   parts of its code copied into `src/ThreeEditor/js/libs/csg/`
+    -   adapted by adding types in a separate file
+-   ThreeJS Editor <https://threejs.org/editor/>
+    -   most of its code is copied from [mrdoob's GitHub repo](https://github.com/mrdoob/three.js/tree/r132/editor) into `src/ThreeEditor`, starting from v.132
+    -   the copied code is heavily adapted to "yaptide needs"
+-   Keycloak-react-web <https://www.npmjs.com/package/keycloak-react-web>
+    -   most of its code was copied from <https://github.com/keycloak-react/keycloak-react/tree/main/src/keycloak> into `src/util/keycloak`
+    -   adapted to newer version of react and keycloak-js
+
+This work was partially funded by EuroHPC PL Project, Smart Growth Operational Programme 4.2

README.md

@@ -111,16 +111,3 @@ The command below will run the docker container named `ui` and serve the UI on p
 ```bash
 docker run --rm -d -p 80:80/tcp --name ui ghcr.io/yaptide/ui-web:master
 ```
-
-## Credits
-
-This project adapts source code from the following libraries:
-
-- CSG javascript library <https://github.com/manthrax/THREE-CSGMesh>
-  - parts of its code copied into `src/ThreeEditor/js/libs/csg/`
-  - adapted by adding types in a separate file
-- ThreeJS Editor <https://threejs.org/editor/>
-  - most of its code is copied from [mrdoob's GitHub repo](https://github.com/mrdoob/three.js/tree/r132/editor) into `src/ThreeEditor`, starting from v.132
-  - the copied code is heavily adapted to "yaptide needs"
-
-This work was partially funded by EuroHPC PL Project, Smart Growth Operational Programme 4.2

package.json

@@ -27,9 +27,8 @@
 		"convert-units": "^3.0.0-beta.7",
 		"date-fns": "^4.1.0",
 		"glob": "^11.0.0",
+		"keycloak-js": "^26.0.1",
 		"jsroot": "^7.7.5",
-		"keycloak-js": "^25.0.6",
-		"keycloak-react-web": "^0.1.19",
 		"ky": "^1.7.2",
 		"material-ui-popup-state": "^5.3.1",
 		"notistack": "^3.0.1",

src/ThreeEditor/components/Sidebar/SidebarTree/SidebarTree.tsx

@@ -4,7 +4,7 @@ import { Tree, TreeMethods } from '@minoru/react-dnd-treeview';
 import { Divider } from '@mui/material';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Object3D } from 'three';
-import { generateUUID } from 'three/src/math/MathUtils';
+import { generateUUID } from 'three/src/math/MathUtils.js';
 
 import { hasVisibleChildren } from '../../../../util/hooks/useKeyboardEditorControls';
 import { ChangeObjectOrderCommand } from '../../../js/commands/ChangeObjectOrderCommand';

src/ThreeEditor/components/Sidebar/properties/fields/PropertyField.tsx

@@ -1,7 +1,7 @@
 import { Box, Checkbox, Grid, Stack, TextField, Typography } from '@mui/material';
 import { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Vector2 } from 'three';
-import { Vector3 } from 'three/src/math/Vector3';
+import { Vector3 } from 'three/src/math/Vector3.js';
 
 import { InfoTooltip } from '../../../../../shared/components/tooltip/InfoTooltip';
 import {

src/ThreeEditor/js/viewport/Viewport.ClippedViewCSG.ts

@@ -1,6 +1,6 @@
 import { Signal } from 'signals';
 import * as THREE from 'three';
-import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min';
+import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 import { debounce } from 'throttle-debounce';
 
 import { CSG } from '../../CSG/CSG';

src/services/AuthService.tsx

@@ -1,7 +1,6 @@
 import { Backdrop, CircularProgress, Theme, Typography } from '@mui/material';
 import { KeycloakTokenParsed } from 'keycloak-js';
-import ky, { HTTPError } from 'ky';
-import { KyInstance } from 'ky/distribution/types/ky';
+import ky, { HTTPError, KyInstance } from 'ky';
 import { useSnackbar } from 'notistack';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 

src/services/KeycloakAuthService.tsx

@@ -1,14 +1,15 @@
 import Keycloak, { KeycloakInitOptions } from 'keycloak-js';
-import { KeycloakProvider, useKeycloak } from 'keycloak-react-web';
-import { ReactNode, useCallback } from 'react';
+import React, { ReactNode, useCallback } from 'react';
+import KeycloakProvider from '../util/keycloak/KeycloakProvider';
+import { useKeycloak } from '../util/keycloak/useKeycloak';
 
 import { useConfig } from '../config/ConfigService';
 import { createSubstituteContext, GenericContextProviderProps } from './GenericContext';
 
 const keycloakParams = {
 	url: `${process.env.REACT_APP_KEYCLOAK_BASE_URL ?? 'https://localhost:8080'}/auth/`,
-	realm: `${process.env.REACT_APP_KEYCLOAK_REALM ?? ''}`,
-	clientId: `${process.env.REACT_APP_KEYCLOAK_CLIENT_ID ?? ''}`
+	realm: `${process.env.REACT_APP_KEYCLOAK_REALM ?? 'master'}`,
+	clientId: `${process.env.REACT_APP_KEYCLOAK_CLIENT_ID ?? 'my-client'}`
 };
 
 const authInstance = new Keycloak(keycloakParams) as any;
@@ -60,4 +61,4 @@ const KeycloakAuth = ({ children }: GenericContextProviderProps) => {
 	);
 };
 
-export { KeycloakAuth, useKeycloakAuth };
+export { KeycloakAuth, useKeycloakAuth };

src/util/keycloak/KeycloakProvider.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { KeycloakInitOptions } from "keycloak-js";
+import { IAuthContextProps, keycloakContext } from "./keycloakContext";
+import type { KeycloakAuthProviderProps } from "./interfaces";
+
+const defaultOptions: KeycloakInitOptions = {
+  onLoad: "check-sso",
+};
+
+function createAuthProvider(AuthContext: React.Context<IAuthContextProps>) {
+  const KeycloakAuthProvider: React.FC<KeycloakAuthProviderProps> = (props) => {
+    const { client, children } = props;
+    const [initialized, setInitialized] = React.useState<boolean>(false);
+
+    React.useEffect(() => {
+      const { client, initOptions } = props;
+      const initialize = () => {
+        client
+          .init({ ...defaultOptions, ...initOptions })
+          .then(() => {
+            setInitialized(true);
+          })
+          .catch((err: string) => {
+            throw new Error(err);
+          });
+      };
+      initialize();
+    }, []);
+
+    return (
+      <AuthContext.Provider value={{ initialized, client }}>
+        {children}
+      </AuthContext.Provider>
+    );
+  };
+
+  return KeycloakAuthProvider;
+}
+
+const KeycloakProvider = createAuthProvider(keycloakContext);
+export const KeycloakConsumer = keycloakContext.Consumer;
+export default KeycloakProvider;

src/util/keycloak/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 keycloak-react
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/util/keycloak/Readme.md

@@ -0,0 +1,8 @@
+Files in this directory were copied from keycloak-react-web library:
+- npm - <https://www.npmjs.com/package/keycloak-react-web>
+- github - <https://github.com/keycloak-react/keycloak-react/tree/main/src/keycloak>
+
+Why we copied it instead of using as dependency:
+- This library is not supported since 2023 and because of this it's not compatible with newest official keycloak-js library.
+Compatibility issue: Keycloak object in newest keycloak-js library changed in version 26.0.0
+and is not assignable to object from older versions (keycloak-react-web uses version 19.0.2 of keycloak-js).

src/util/keycloak/interfaces.ts

@@ -0,0 +1,9 @@
+import Keycloak, { KeycloakInitOptions } from 'keycloak-js';
+
+interface KeycloakAuthProviderProps {
+  client: Keycloak;
+  initOptions?: KeycloakInitOptions;
+  children: any
+}
+
+export type { KeycloakAuthProviderProps }

src/util/keycloak/keycloakContext.ts

@@ -0,0 +1,22 @@
+import Keycloak from 'keycloak-js';
+import React, { createContext } from 'react';
+
+export type IAuthContextProps = {
+  client?: Keycloak;
+  initialized: boolean;
+};
+
+export function createAuthContext(
+  initialContext?: Partial<IAuthContextProps>
+): React.Context<IAuthContextProps> {
+  return createContext({
+    initialized: false,
+    ...initialContext
+  });
+}
+
+export default createAuthContext;
+
+export const keycloakContext = createAuthContext();
+
+export const KeycloakContextConsumer = keycloakContext.Consumer;

src/util/keycloak/useKeycloak.ts

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { keycloakContext } from './keycloakContext';
+
+export function useKeycloak() {
+  const context = useContext(keycloakContext);
+
+  if (!context.client) {
+    throw new Error('keycloak client has not been assigned to KeycloakProvider');
+  }
+
+  const { client, initialized } = context;
+  return {
+    initialized,
+    keycloak: client
+  };
+}

tsconfig.json

@@ -10,7 +10,7 @@
 		"forceConsistentCasingInFileNames": true,
 		"noFallthroughCasesInSwitch": true,
 		"module": "esnext",
-		"moduleResolution": "node",
+		"moduleResolution": "bundler",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
 		"noEmit": true,