TP-45354 | Dark version upgrade (#66)

* TP-45354 | updated dark knight dependency and fixing houston-ui login bug

* TP-45354 | fixing darknight issue

* P-45354 | qa fix

* TP-45354 | Added authentication

* TP-45354 | resolving pr reviews

* TP-45354 | resolving pr reviews'2

.gitignore

@@ -1,7 +1,5 @@
 node_modules
 
-.npmrc
-
 dist
 
 yarn-debug.log*

.npmrc

@@ -0,0 +1,3 @@
+@navi:registry=https://nexus.cmd.navi-tech.in/repository/npm-packages/
+
+//https://nexus.cmd.navi-tech.in/repository/npm-packages/:__authToken=NpmToken.1a3d3462-fb82-364c-bc64-0051e24635b3

package.json

@@ -31,8 +31,8 @@
     ]
   },
   "dependencies": {
-    "@navi/web-ui": "^1.49.8",
-    "@super-app/dark-knight": "^1.0.6",
+    "@navi/dark-knight": "^1.0.13",
+    "@navi/web-ui": "^1.58.13",
     "axios": "^1.3.4",
     "classnames": "^2.3.2",
     "node-sass": "^8.0.0",

src/App.tsx

@@ -1,55 +1,16 @@
-import { useEffect } from 'react';
-
-import DarkKnight from '@super-app/dark-knight';
-import { toast } from '@navi/web-ui/lib/primitives/Toast/index';
-
+import { DarkKnightInstance } from '@navi/dark-knight';
 import AppRouter from './AppRouter';
+import FallbackComponent from './components/Fallback';
+import React from 'react';
 
-const config = window.config ?? {};
+interface AppProps {
+  auth: DarkKnightInstance;
+}
 
-const initOptions = {
-  url: config.AUTH_BASE_URL,
-  clientId: config.AUTH_CLIENT_ID,
-  onLoad: 'login-required',
-};
-
-const auth = DarkKnight(initOptions);
-
-const App = () => {
-  useEffect(() => {
-    if (window?.config?.ENVIRONMENT === 'production') {
-      const token = localStorage.getItem('react-token');
-      auth
-        .init({
-          onLoad: 'check-sso',
-          sessionToken: token ?? undefined,
-          enableLogging: true,
-        })
-        .then((authenticated: boolean) => {
-          if (!authenticated) {
-            auth.login({
-              redirectUri: `${window.location.protocol}//${window.location.host}/agent/login/?redirectUri=${window.location.href}`,
-            });
-          }
-          localStorage.setItem('react-token', auth.sessionToken ?? '');
-          localStorage.setItem(
-            'user-data',
-            JSON.stringify(auth.idTokenParsed) ?? '',
-          );
-          localStorage.setItem('email-id', `${auth.idTokenParsed?.emailId}`);
-        })
-        .catch(error => {
-          if (error?.response?.status === 403) {
-            toast.error(
-              'You are not authorized to perform this action. Permission denied!',
-            );
-          }
-          localStorage.setItem('react-token', 'null');
-          localStorage.setItem('user-data', 'null');
-        });
-    }
-  }, []);
+const App: React.FC<AppProps> = props => {
+  const { auth } = props;
 
+  if (!auth.sessionToken) return <FallbackComponent />;
   return <AppRouter />;
 };
 

src/main.tsx

@@ -1,19 +1,29 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-
+import { createRoot } from 'react-dom/client';
 import '@navi/web-ui/lib/styles/index.css';
 
 import App from './App';
 import ToastWrapper from './components/ToastWrapper/index';
-
+import { DarkKnightInstance } from '@navi/dark-knight';
+import { initAuth } from '@src/services/auth';
 import './index.css';
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <ToastWrapper />
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>,
-);
+const renderHoustonApp = (auth: DarkKnightInstance) => {
+  const container = document.getElementById('root');
+  if (container) {
+    const root = createRoot(container);
+    root.render(
+      <React.StrictMode>
+        <ToastWrapper />
+        <BrowserRouter>
+          <App auth={auth} />
+        </BrowserRouter>
+      </React.StrictMode>,
+    );
+  }
+};
+
+initAuth({
+  renderApp: renderHoustonApp,
+});

src/services/auth.ts

@@ -0,0 +1,77 @@
+import { toast } from '@navi/web-ui/lib/primitives/Toast';
+import DarkKnight, { DarkKnightInstance } from '@navi/dark-knight';
+import { removeFromLocalStorage, setLocalStorage } from '@src/services/storage';
+import { setToken, getToken } from '@src/services/token';
+
+interface InitAuth {
+  renderApp: (auth: DarkKnightInstance) => void;
+}
+
+const config = window.config ?? {};
+
+const initOptions = {
+  url: config.AUTH_BASE_URL,
+  clientId: config.AUTH_CLIENT_ID,
+  onLoad: 'login-required',
+};
+
+const initAuth = ({ renderApp }: InitAuth): void => {
+  const auth = DarkKnight(initOptions);
+
+  if (!getToken()) {
+    removeFromLocalStorage('search-with-filter');
+  }
+
+  const onAuthSuccess = (auth: DarkKnightInstance) => {
+    setToken(auth.sessionToken || '');
+    setLocalStorage('email-id', `${auth?.idTokenParsed?.emailId}`);
+  };
+
+  const onAuthError = (error: any): void => {
+    renderApp(auth);
+
+    if (error?.response?.status === 403)
+      toast.error('You are not authorized. Permission denied!');
+
+    if (error?.response?.status === 404)
+      toast.error('You are not authorized. Please get access!');
+
+    toast.error('You are not authorized. Permission denied!');
+
+    setTimeout(() => {
+      window?.location?.reload();
+    }, 2000);
+
+    return;
+  };
+
+  auth
+    .init({
+      onLoad: 'check-sso',
+      sessionToken: getToken() ?? undefined,
+      enableLogging: true,
+    })
+    .then((authenticated: boolean) => {
+      if (!authenticated) {
+        auth.login({
+          redirectUri: `${window.location.protocol}//${window.location.host}/agent/login/?redirectUri=${window.location.href}`,
+        });
+      }
+
+      setToken(auth.sessionToken || '');
+      setLocalStorage('email-id', `${auth?.idTokenParsed?.emailId}`);
+      setLocalStorage('user-data', JSON.stringify(auth?.idTokenParsed));
+      onAuthSuccess(auth);
+      renderApp(auth);
+    })
+    .catch(error => {
+      toast.error(
+        'You are not authorized to perform this action. Permission denied!',
+      );
+      setToken('');
+      setLocalStorage('user-data', '');
+      onAuthError(error);
+    });
+};
+
+export { initAuth };

src/services/storage.ts

@@ -0,0 +1,27 @@
+const getFromLocalStorage = (key: string) => {
+  try {
+    return localStorage.getItem(key);
+  } catch (error) {
+    return '';
+  }
+};
+
+const setLocalStorage = (key: string, value: string) => {
+  try {
+    localStorage.setItem(key, value);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
+
+const removeFromLocalStorage = (key: string) => {
+  try {
+    localStorage.removeItem(key);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
+
+export { getFromLocalStorage, setLocalStorage, removeFromLocalStorage };

src/services/token.ts

@@ -0,0 +1,21 @@
+import {
+  getFromLocalStorage,
+  removeFromLocalStorage,
+  setLocalStorage,
+} from '@src/services/storage';
+
+const REACT_TOKEN = 'react-token';
+
+const getToken = (): string => {
+  return getFromLocalStorage(REACT_TOKEN) || '';
+};
+
+const setToken = (token: string): void => {
+  setLocalStorage(REACT_TOKEN, token);
+};
+
+const removeToken = (): void => {
+  removeFromLocalStorage(REACT_TOKEN);
+};
+
+export { setToken, getToken, removeToken };