Handle user auth api wait time

MTES-MCT · Oct 16, 2024 · 3971f30 · 3971f30
1 parent b0a743e
commit 3971f30
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/frontend/cypress/e2e/main_window/vessel_sidebar/offline_management.spec.ts b/frontend/cypress/e2e/main_window/vessel_sidebar/offline_management.spec.ts
@@ -135,7 +135,7 @@ context('Offline management', () => {
     cy.intercept(
       {
         method: 'GET',
-        pathname: '/bff/v1/vessels/reporting',
+        pathname: '/bff/v1/vessels/reportings',
         times: 2
       },
       { statusCode: 400 }

diff --git a/frontend/src/auth/components/RequireAuth.tsx b/frontend/src/auth/components/RequireAuth.tsx
@@ -1,12 +1,22 @@
 import { Navigate } from 'react-router-dom'
 
+import { LoginBackground } from './Login'
 import { UserAccountContext } from '../../context/UserAccountContext'
 import { paths } from '../../paths'
+import { LoadingSpinnerWall } from '../../ui/LoadingSpinnerWall'
 import { useGetUserAccount } from '../hooks/useGetUserAccount'
 
 export function RequireAuth({ children, redirect = false, requireSuperUser = false }) {
   const userAccount = useGetUserAccount()
 
+  if (!userAccount) {
+    return (
+      <LoginBackground>
+        <LoadingSpinnerWall isVesselShowed />
+      </LoginBackground>
+    )
+  }
+
   const handleRedirect = (path: string, shouldRedirect: boolean) => {
     if (shouldRedirect) {
       return <Navigate replace to={path} />

diff --git a/frontend/src/auth/hooks/useGetUserAccount.tsx b/frontend/src/auth/hooks/useGetUserAccount.tsx
@@ -8,12 +8,12 @@ import { useGetCurrentUserAuthorizationQueryOverride } from './useGetCurrentUser
 
 import type { UserAccountContextType } from '../../context/UserAccountContext'
 
-const IS_CYPRESS = isCypress() || true
+const IS_CYPRESS = isCypress()
 
 /**
  * When using Cypress, we stub `useAuth()`
  */
-export function useGetUserAccount(): UserAccountContextType {
+export function useGetUserAccount(): UserAccountContextType | undefined {
   // `| undefined` because it's undefined if the OIDC is disabled which is the case for Cypress tests
   const auth = useAuth() as AuthContextProps | undefined
   const { trackUserId } = useTracking()
@@ -38,6 +38,10 @@ export function useGetUserAccount(): UserAccountContextType {
   }, [auth])
 
   const userAccount = useMemo(() => {
+    if (!user) {
+      return undefined
+    }
+
     if (IS_CYPRESS) {
       return {
         email: 'dummy@cypress.test',