Switch to use login with redirect through MSAL (#241)

Author: dkhalife

frontend/src/App.tsx

@@ -31,7 +31,7 @@ class AppImpl extends React.Component<AppProps> {
   private initializingAuthenticated = false
 
   private onVisibilityChange = () => {
-    if (!document.hidden) {
+    if (!document.hidden && this.initializedAuthenticated) {
       this.refreshStaleData()
     }
   }

frontend/src/main.tsx

@@ -13,7 +13,7 @@ window.onerror = (message, source, lineno, colno) => {
     return
   }
 
-  try {  
+  try {
     LogError(`${source}:${lineno}:${colno} ${message}`, window.location.pathname)
   } catch {
     console.debug('Fatal error: ', message, source, lineno, colno)

frontend/src/utils/msal.ts

@@ -25,6 +25,18 @@ export const initializeMsal = async () => {
       cacheLocation: 'localStorage',
     },
   })
+
+  const pca = await pcaPromise
+
+  try {
+    const response = await pca.handleRedirectPromise()
+    if (response?.account) {
+      pca.setActiveAccount(response.account)
+      cachedAuthResult = response
+    }
+  } catch {
+    // Allow the app to continue in unauthenticated state
+  }
 }
 
 const getScopes = (): string[] => {
@@ -48,13 +60,10 @@ export const isAuthEnabled = (): boolean => {
   return authConfig?.enabled ?? false
 }
 
-export const loginWithPopup = async () => {
+export const loginWithRedirect = async () => {
   if (!authConfig?.enabled || !pcaPromise) return
   const pca = await pcaPromise
-  cachedAuthResult = await pca.loginPopup({ scopes: getScopes() })
-  if (cachedAuthResult.account) {
-    pca.setActiveAccount(cachedAuthResult.account)
-  }
+  await pca.loginRedirect({ scopes: getScopes() })
 }
 
 export const loginSilently = async (): Promise<boolean> => {
@@ -87,10 +96,6 @@ export const logout = async () => {
     return
   }
   const pca = await pcaPromise
-  const account = pca.getActiveAccount() ?? pca.getAllAccounts()[0]
-  if (account) {
-    await pca.logoutPopup({ account })
-  }
   cachedAuthResult = null
-  window.location.href = '/'
+  await pca.logoutRedirect({ postLogoutRedirectUri: window.location.origin })
 }

frontend/src/views/Authorization/LoginView.tsx

@@ -7,9 +7,9 @@ import {
   Button,
 } from '@mui/joy'
 import React from 'react'
-import { loginWithPopup } from '@/utils/msal'
+import { loginWithRedirect } from '@/utils/msal'
 import { setTitle } from '@/utils/dom'
-import { NavigationPaths, WithNavigate } from '@/utils/navigation'
+import { WithNavigate } from '@/utils/navigation'
 import { connect } from 'react-redux'
 import { AppDispatch } from '@/store/store'
 import { pushStatus } from '@/store/statusSlice'
@@ -26,8 +26,7 @@ class LoginViewImpl extends React.Component<LoginViewProps> {
 
   private handleLogin = async () => {
     try {
-      await loginWithPopup()
-      this.props.navigate(NavigationPaths.HomeView())
+      await loginWithRedirect()
     } catch (error) {
       this.props.pushStatus((error as Error).message, 'error', 5000)
     }