Authenticate user at top level of app

Author: andchiind

frontend/src/App.tsx

@@ -1,6 +1,5 @@
 import { ApplicationInsights } from '@microsoft/applicationinsights-web'
 import { AuthenticatedTemplate, UnauthenticatedTemplate } from '@azure/msal-react'
-import { LoginPage } from 'pages/LoginPage/LoginPage'
 import { FlotillaSite } from 'pages/FlotillaSite'
 import { LanguageProvider } from 'components/Contexts/LanguageContext'
 import { MissionControlProvider } from 'components/Contexts/MissionControlContext'
@@ -30,34 +29,30 @@ export const queryClient = new QueryClient()
 
 const App = () => (
     <AuthProvider>
-        <LanguageProvider>
-            <SignalRProvider>
-                <QueryClientProvider client={queryClient}>
-                    <AssetProvider>
-                        <InspectionsProvider>
-                            <MissionDefinitionsProvider>
-                                <MissionRunsProvider>
-                                    <AlertProvider>
-                                        <MissionControlProvider>
-                                            <UnauthenticatedTemplate>
-                                                <div className="sign-in-page">
-                                                    <LoginPage />
-                                                </div>
-                                            </UnauthenticatedTemplate>
-                                            <AuthenticatedTemplate>
+        <UnauthenticatedTemplate />
+        <AuthenticatedTemplate>
+            <LanguageProvider>
+                <SignalRProvider>
+                    <QueryClientProvider client={queryClient}>
+                        <AssetProvider>
+                            <InspectionsProvider>
+                                <MissionDefinitionsProvider>
+                                    <MissionRunsProvider>
+                                        <AlertProvider>
+                                            <MissionControlProvider>
                                                 <MediaStreamProvider>
                                                     <FlotillaSite />
                                                 </MediaStreamProvider>
-                                            </AuthenticatedTemplate>
-                                        </MissionControlProvider>
-                                    </AlertProvider>
-                                </MissionRunsProvider>
-                            </MissionDefinitionsProvider>
-                        </InspectionsProvider>
-                    </AssetProvider>
-                </QueryClientProvider>
-            </SignalRProvider>
-        </LanguageProvider>
+                                            </MissionControlProvider>
+                                        </AlertProvider>
+                                    </MissionRunsProvider>
+                                </MissionDefinitionsProvider>
+                            </InspectionsProvider>
+                        </AssetProvider>
+                    </QueryClientProvider>
+                </SignalRProvider>
+            </LanguageProvider>
+        </AuthenticatedTemplate>
     </AuthProvider>
 )
 

frontend/src/components/Contexts/AuthProvider.tsx

@@ -1,5 +1,6 @@
 import { useMsal } from '@azure/msal-react'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
+import { InteractionStatus } from '@azure/msal-browser'
 import { loginRequest } from 'api/AuthConfig'
 import { AuthContext } from './AuthContext'
 import { InteractionRequiredAuthError } from '@azure/msal-browser'
@@ -44,6 +45,14 @@ export const AuthProvider = ({ children }: Props) => {
         }
     }, [accounts, inProgress, instance])
 
+    useEffect(() => {
+        if (accounts.length > 0 || instance.getActiveAccount()) return
+
+        if (inProgress !== InteractionStatus.None) return
+
+        instance.loginRedirect(loginRequest)
+    }, [accounts.length, inProgress, instance])
+
     const value = useMemo(() => ({ getAccessToken, isAuthenticated }), [getAccessToken, isAuthenticated])
 
     return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>