Refactoring

app/src/components/siteNav/SiteNav.tsx

@@ -43,8 +43,8 @@ const SiteNav: React.FC<unknown> = () => {
       url: '/pilots'
     }
   ];
-  const handleSignIn = async () => {
+  const handleSignIn = () => {
-    await instance.loginRedirect({
+    instance.loginRedirect({
       scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`]
     });
   };
@@ -98,44 +98,44 @@ const SiteNav: React.FC<unknown> = () => {
     );
   };
 
-  useEffect(() => {
+  // useEffect(() => {
-    const callback = instance.addEventCallback(
+  //   const callback = instance.addEventCallback(
-      async (message: EventMessage) => {
+  //     async (message: EventMessage) => {
-        if (message.eventType === EventType.LOGIN_SUCCESS) {
+  //       if (message.eventType === EventType.LOGIN_SUCCESS) {
-          try {
+  //         try {
-            setLoading(true);
+  //           setLoading(true);
 
-            const eventPayload: EventPayloadExtended =
+  //           const eventPayload: EventPayloadExtended =
-              message.payload as EventPayloadExtended;
+  //             message.payload as EventPayloadExtended;
-            const userProfile: User = await getUserProfile(
+  //           const userProfile: User = await getUserProfile(
-              eventPayload.accessToken
+  //             eventPayload.accessToken
-            );
+  //           );
-            const userPhoto = await getUserPhoto(eventPayload.accessToken);
+  //           const userPhoto = await getUserPhoto(eventPayload.accessToken);
 
-            appContext.dispatch({
+  //           appContext.dispatch({
-              type: 'SET_USER_PROFILE',
+  //             type: 'SET_USER_PROFILE',
-              payload: userProfile
+  //             payload: userProfile
-            });
+  //           });
-          } catch (error) {
+  //         } catch (error) {
-            console.log(error);
+  //           console.log(error);
-          } finally {
+  //         } finally {
-            setLoading(false);
+  //           setLoading(false);
-          }
+  //         }
-        }
+  //       }
-      }
+  //     }
-    );
+  //   );
 
-    instance.handleRedirectPromise().then((response) => {
+  //   instance.handleRedirectPromise().then((response) => {
-      console.log(response)
+  //     console.log(response)
-    })
+  //   })
 
-    return () => {
+  //   return () => {
-      if (callback) {
+  //     if (callback) {
-        instance.removeEventCallback(callback);
+  //       instance.removeEventCallback(callback);
-        appContext.dispatch({ type: 'SET_USER_PROFILE', payload: {} });
+  //       appContext.dispatch({ type: 'SET_USER_PROFILE', payload: {} });
-      }
+  //     }
-    };
+  //   };
-  }, []);
+  // }, []);
 
   useEffect(() => {
     const setUserProfile = async () => {

app/src/main.tsx

@@ -5,35 +5,83 @@ import AppContextProvider from './context/appContext/AppContextProvider.tsx';
 import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import '@noahspan/noahspan-components/noahspan-components.css';
-import { PublicClientApplication } from '@azure/msal-browser';
+import { Configuration, EventType, LogLevel, PublicClientApplication } from '@azure/msal-browser';
 import { MsalProvider } from '@azure/msal-react';
 
-const msalInstance: PublicClientApplication = new PublicClientApplication({
+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
+    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;
+        }
+      },
+    },
+  },
+};
 
-console.log(msalInstance);
+const msalInstance: PublicClientApplication = new PublicClientApplication(msalConfig);
 
-console.log('ClientId :' + import.meta.env.VITE_CLIENT_ID)
+msalInstance.initialize()
-console.log('TenantId :' + import.meta.env.VITE_TENANT_ID)
+  .then(() => {
-console.log('RedirectUrl :' + import.meta.env.VITE_REDIRECT_URL)
+    console.log('Initialized!');
 
+    if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
+      msalInstance.setActiveAccount(msalInstance.getAllAccounts()[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.initialize().then(() => {
+ReactDOM.createRoot(document.getElementById('root')!).render(
-  ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
-    <React.StrictMode>
+    <MsalProvider instance={msalInstance}>
-      <MsalProvider instance={msalInstance}>
+      <AppContextProvider>
-        <AppContextProvider>
+        <BrowserRouter>
-          <BrowserRouter>
+          <App />
-            <App />
+        </BrowserRouter>
-          </BrowserRouter>
+      </AppContextProvider>
-        </AppContextProvider>
+    </MsalProvider>
-      </MsalProvider>
+  </React.StrictMode>
-    </React.StrictMode>
+);
-  );
-});

infrastructure/config/main.tf

@@ -17,6 +17,10 @@ locals {
     prod = "flying-app-prod"
   }
 
+  container_app_app_redirect_url = {
+    dev = "https://flying-app-dev.greensea-e83e7646.centralus.azurecontainerapps.io"
+  }
+  
   container_app_api_name = {
     dev = "flying-api-dev"
     test = "flying-api-test"

infrastructure/config/outputs.tf

@@ -14,6 +14,10 @@ output "container_app_api_name" {
   value = local.container_app_api_name[var.environment]
 }
 
+output "container_app_app_redirect_url" {
+  value = local.container_app_app_redirect_url[var.environment]
+}
+
 output "container_app_api_container_image" {
   value = local.container_app_api_container_image[var.environment]
 }

infrastructure/main.tf

@@ -128,6 +128,26 @@ resource "azurerm_container_app" "container_app_app" {
       image = module.environment.container_app_app_container_image
       cpu = 0.25
       memory = "0.5Gi"
+
+      env {
+        name = "VITE_API_URL"
+        value = azurerm_container_app.container_app_api.latest_revision_fqdn
+      }
+
+      env {
+        name = "VITE_CLIENT_ID"
+        secret_name = "client-id"
+      }
+
+      env {
+        name = "VITE_REDIRECT_URL"
+        value = module.environment.container_app_app_redirect_url
+      }
+
+      env {
+        name = "VITE_TENANT_ID"
+        secret_name = "tenant-id"
+      }
     }
   }
 
@@ -143,11 +163,21 @@ resource "azurerm_container_app" "container_app_app" {
     }
   }
 
+  secret {
+    name = "client-id"
+    value = var.CLIENT_ID
+  }
+
   secret {
     name = "docker-io-password"
     value = var.DOCKER_IO_PASSWORD
   }
 
+  secret {
+    name = "tenant-id"
+    value = var.TENANT_ID
+  }
+
   lifecycle {
     ignore_changes = [ template[0].container[0].image ]
   }