Merge pull request #3 from navi-sa/TP-28649

TP-28649 | Added Dark Knight auth changes for local server

src/App.tsx

@@ -1,61 +1,25 @@
 import React, { Suspense, useEffect, useState } from 'react';
 import { ToastContainer } from '@navi/web-ui/lib/primitives/Toast';
-import DarkKnight from '@super-app/dark-knight';
-import axios from 'axios';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import LeftSideBar from './components/LeftSideBar';
 import { useAppDispatch, useAppSelector } from './redux/hooks';
 import { setAuthData, setAuthToken } from './redux/slices/GoogleAuthSlice';
 import { getRoutesMapping } from './routes';
 import { checkAdminPermission } from './utils';
+import { AppProps } from './utils/interface';
 
-const initOptions = {
-  url: (window as any)?.config.AUTH_BASE_URL,
-  clientId: (window as any)?.config.AUTH_CLIENT_ID,
-  onLoad: 'login-required',
-};
-
-const auth = DarkKnight(initOptions);
-
-const App = () => {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
+const App = ({ auth, isAuthenticated }: AppProps) => {
   const dispatch = useAppDispatch();
 
-  const reactToken = localStorage.getItem('auth-token')
-    ? localStorage.getItem('auth-token')
-    : '';
-
   const { authData } = useAppSelector((state) => state.authStore);
   const { permissions } = authData || {};
 
   const isAdmin = checkAdminPermission(permissions);
 
   useEffect(() => {
-    if ((window as any)?.config?.ENV === 'prod' || reactToken) {
-      localStorage.removeItem('auth-token');
-      auth
-        .init({
-          onLoad: 'check-sso',
-          enableLogging: true,
-          sessionToken: reactToken ?? undefined,
-        })
-        .then((authenticated) => {
-          if (!authenticated) {
-            auth.login({
-              redirectUri: `${window.location.protocol}//${window.location.host}/agent/login/?redirectUri=${window.location.href}`,
-            });
-          }
-          axios.defaults.headers.common['X-Session-Token'] =
-            auth.sessionToken || '';
-          axios.defaults.headers.common['X-Email-Id'] =
-            auth.idTokenParsed?.emailId || '';
-          dispatch(setAuthData(auth.idTokenParsed));
-          dispatch(setAuthToken(auth.sessionToken));
-          setIsAuthenticated(true);
-          localStorage.setItem('auth-token', auth.sessionToken ?? '');
-        });
-    }
-  }, []);
+    dispatch(setAuthData(auth.idTokenParsed));
+    dispatch(setAuthToken(auth.sessionToken));
+  }, [auth]);
 
   return (
     <>

src/index.js

@@ -1,14 +1,58 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import DarkKnight from '@super-app/dark-knight';
+import axios from 'axios';
 import { Provider } from 'react-redux';
 import App from './App';
 import store from './redux/store';
+import { getToken, setToken } from './utils/authUtils';
 import './index.scss';
 
-createRoot(document.getElementById('root')).render(
-  <Provider store={store}>
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>
-  </Provider>,
-);
+const initOptions = {
+  url: window?.config.AUTH_BASE_URL,
+  clientId: window?.config.AUTH_CLIENT_ID,
+  onLoad: 'login-required',
+};
+
+const auth = DarkKnight(initOptions);
+
+const token = getToken();
+
+const renderAppInsideRoot = ({ isAuthenticated }) => {
+  const container = document.getElementById('root');
+
+  if (container) {
+    const root = createRoot(container);
+    root.render(
+      <Provider store={store}>
+        <React.StrictMode>
+          <App auth={auth} isAuthenticated={isAuthenticated} />
+        </React.StrictMode>
+      </Provider>,
+    );
+  }
+};
+
+auth
+  .init({
+    onLoad: 'check-sso',
+    enableLogging: true,
+    sessionToken: token ?? undefined,
+  })
+  .then((authenticated) => {
+    if (!authenticated) {
+      auth.login({
+        redirectUri: `${window.location.protocol}//${window.location.host}/agent/login/?redirectUri=${window.location.href}`,
+      });
+    }
+    axios.defaults.headers.common['X-Session-Token'] = auth.sessionToken || '';
+    axios.defaults.headers.common['X-Email-Id'] =
+      auth.idTokenParsed?.emailId || '';
+
+    setToken(auth.sessionToken ?? '');
+
+    renderAppInsideRoot({ isAuthenticated: true });
+  })
+  .catch(() => {
+    renderAppInsideRoot({ isAuthenticated: false });
+  });

src/utils/authUtils.ts

@@ -0,0 +1,11 @@
+const tokenKey = 'auth-token';
+
+export const setToken = (token: string) => {
+  localStorage.setItem(tokenKey, token);
+};
+
+export const getToken = () => localStorage.getItem(tokenKey);
+
+export const removeToken = () => {
+  localStorage.removeItem(tokenKey);
+};

src/utils/index.tsx

@@ -2,6 +2,7 @@ import { SelectPickerOptionProps } from '@navi/web-ui/lib/components/SelectPicke
 import { toast } from '@navi/web-ui/lib/primitives/Toast';
 import { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { removeToken } from './authUtils';
 import { ALL, LitmusColors } from './constants';
 import {
   ExperimentStatus,
@@ -441,6 +442,6 @@ export const checkAdminPermission = (permissions: any) => {
 };
 
 export const logout = () => {
-  localStorage.removeItem('auth-token');
+  removeToken();
   window.location.reload();
 };

src/utils/interface.ts

@@ -1,5 +1,11 @@
+import { DarkKnightInstance } from '@super-app/dark-knight';
 import { ExperimentStatus, MetricType, SegmentType } from './enums';
 
+export interface AppProps {
+  auth: DarkKnightInstance;
+  isAuthenticated?: boolean;
+}
+
 export interface LitmusInitialStateData {
   isLoading: boolean;
   metricsDetails: MetricsDetail;