Refactoring

app/src/App.tsx

@@ -7,8 +7,14 @@ import { AxiosInstance, AxiosResponse } from 'axios';
 import { useHttpClient } from './hooks/httpClient/UseHttpClient';
 import { useFeatureFlag } from './hooks/featureFlag/UseFeatureFlag';
 import SiteNav from './components/siteNav/SiteNav';
+import { IPublicClientApplication } from '@azure/msal-browser';
+import { MsalProvider } from '@azure/msal-react';
 
-const App: React.FC<unknown> = () => {
+interface AppProps {
+  pca: IPublicClientApplication
+}
+
+const App: React.FC<AppProps> = ({ pca }: AppProps) => {
   const httpClient: AxiosInstance = useHttpClient();
   const appContext = useAppContext();
 
@@ -36,7 +42,7 @@ const App: React.FC<unknown> = () => {
   // }, []);
 
   return (
-    <div>
+    <MsalProvider instance={pca}>
       <SiteNav />
       <Routes>
         {/* {useFeatureFlag('flying-pilots')?.enabled && ( */}
@@ -44,7 +50,7 @@ const App: React.FC<unknown> = () => {
         {/* )} */}
         <Route path="/" element={<Logbook />} />
       </Routes>
-    </div>
+    </MsalProvider>
   );
 };
 

app/src/main.tsx

@@ -5,83 +5,33 @@ import AppContextProvider from './context/appContext/AppContextProvider.tsx';
 import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import '@noahspan/noahspan-components/noahspan-components.css';
-import { Configuration, EventType, LogLevel, PublicClientApplication } from '@azure/msal-browser';
+import { AuthenticationResult, EventMessage, EventType, PublicClientApplication } from '@azure/msal-browser';
 import { MsalProvider } from '@azure/msal-react';
-
-const msalConfig: Configuration = {
-  auth: {
-    clientId: import.meta.env.VITE_CLIENT_ID,
-    authority: `https://login.microsoftonline.com/${import.meta.env.VITE_TENANT_ID}`,
-    redirectUri: import.meta.env.VITE_REDIRECT_URL,
-    postLogoutRedirectUri: '/',
-    navigateToLoginRequestUrl: false,
-  },
-  cache: {
-    cacheLocation: 'localStorage',
-    storeAuthStateInCookie: false,
-  },
-  system: {
-    loggerOptions: {
-      loggerCallback: (level, message, containsPii) => {
-        if (containsPii) {
-          return;
-        }
-        switch (level) {
-          case LogLevel.Error:
-            console.error(message);
-            return;
-          case LogLevel.Info:
-            console.info(message);
-            return;
-          case LogLevel.Verbose:
-            console.debug(message);
-            return;
-          case LogLevel.Warning:
-            console.warn(message);
-            return;
-          default:
-            return;
-        }
-      },
-    },
-  },
-};
+import { msalConfig } from './auth/msalConfig.ts';
 
 const msalInstance: PublicClientApplication = new PublicClientApplication(msalConfig);
+const accounts = msalInstance.getAllAccounts();
 
-msalInstance.initialize()
-  .then(() => {
-    console.log('Initialized!');
+console.log({ accounts, msalInstance });
 
-    if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
-      msalInstance.setActiveAccount(msalInstance.getAllAccounts()[0]);
-    }
+if (accounts.length > 0) {
+  msalInstance.setActiveAccount(accounts[0]);
+}
 
-    msalInstance.enableAccountStorageEvents();
-    msalInstance.addEventCallback((event: any) => {
-      if (
-        event.eventType === EventType.LOGIN_SUCCESS ||
-        event.eventType === EventType.ACQUIRE_TOKEN_SUCCESS ||
-        event.eventType === EventType.SSO_SILENT_SUCCESS
-      ) {
-        const account = event.payload.account;
-        msalInstance.setActiveAccount(account);
-      }
-    });
-  })
-  .catch((err) => {
-    console.error('Error during initialization');
-    console.error(err);
-  });
+msalInstance.addEventCallback((event: EventMessage) => {
+  if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
+    const payload = event.payload as AuthenticationResult;
+    const account = payload.account;
+    msalInstance.setActiveAccount(account);
+  }
+});
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <MsalProvider instance={msalInstance}>
-      <AppContextProvider>
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
-      </AppContextProvider>
-    </MsalProvider>
+    <AppContextProvider>
+      <BrowserRouter>
+        <App pca={msalInstance} />
+      </BrowserRouter>
+    </AppContextProvider>
   </React.StrictMode>
 );