add keycloak js

Author: zivglik

package-lock.json

@@ -41,6 +41,7 @@
     "express": "^4.17.1",
     "graphql": "^15.5.2",
     "isnumber": "^1.0.0",
+    "keycloak-js": "^26.1.0",
     "qs": "^6.10.1",
     "react-apexcharts": "^1.4.0",
     "react-collapse": "^5.1.0",

package.json

@@ -14,6 +14,7 @@ import { selectors } from 'reducers';
 import GlobalThemes from './styles/themes/GlobalThemes';
 import Root from './Routes';
 import store from './store';
+import KeycloakServices from './keycloak/keycloakServices';
 import _ from 'lodash';
 
 const ConfigProviderApp = () => {
@@ -81,17 +82,22 @@ const ConfigProviderApp = () => {
   ) : null;
 };
 
-const App = () => {
-  return (
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+const renderApp = () => {
+  root.render(
     <Provider store={store}>
       <ConfigProviderApp />
     </Provider>
   );
 };
 
-const container = document.getElementById('root');
-const root = createRoot(container);
-root.render(<App />);
+const renderErrorPreRenderApp = () => {
+  root.render(<>error</>);
+};
+
+KeycloakServices.initKeycloak(renderApp, renderErrorPreRenderApp);
 // root.unmount();
 
 // webpack Hot Module Replacement API

src/index.js

@@ -0,0 +1,64 @@
+/* eslint-disable import/no-unresolved */
+import Keycloak from 'keycloak-js';
+
+const KeycloakConfig = {
+  clientId: 'simulator-ui-app',
+  realm: 'Hkube',
+  url: 'https://cicd.hkube.org/hkube/keycloak/auth',
+  // resource: 'simulator-ui-app',
+  enableCors: true,
+  allowedOrigins: '*',
+  clientUId: '23c95f69-17a2-4b9d-9001-39a5cb8f05fb',
+  checkLoginIframe: true,
+  checkLoginIframeInterval: 30,
+};
+
+const _kc = new Keycloak(KeycloakConfig);
+
+const initKeycloak = (appToRender, renderError) => {
+  _kc
+    .init({
+      onLoad: 'login-required',
+    })
+    .then(authenticated => {
+      if (!authenticated) {
+        console.log('user is not authenticated..!');
+      }
+
+      appToRender();
+    })
+    .catch(authenticatedError => {
+      console.error(authenticatedError);
+      return renderError(authenticatedError);
+    });
+};
+
+const doLogin = _kc.login.bind(_kc);
+const doLogout = _kc.logout.bind(_kc);
+
+const getToken = () => _kc.token;
+
+const isLoggedIn = () => !!_kc.token;
+
+const updateToken = (minSecValidity, successCallback) =>
+  _kc.updateToken(minSecValidity).then(successCallback).catch(doLogin);
+
+const getUsername = () => _kc.tokenParsed?.preferred_username;
+
+const hasRole = roles => roles.some(role => _kc.hasRealmRole(role));
+
+const isTokenExpired = minSecValidity => _kc.isTokenExpired(minSecValidity);
+
+const KeycloakServices = {
+  initKeycloak,
+  doLogin,
+  doLogout,
+  isLoggedIn,
+  getToken,
+  updateToken,
+  isTokenExpired,
+  getUsername,
+  hasRole,
+};
+
+export default KeycloakServices;