RequireAuth with requireSuperUser & redirect props

MTES-MCT · Jun 6, 2024 · 976b7f0 · 976b7f0
1 parent aeea225
commit 976b7f0
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 48 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -52,7 +52,7 @@ export function App() {
 
                     <Route
                       element={
-                        <RequireAuth>
+                        <RequireAuth redirect requireSuperUser>
                           <BackOfficePage />
                         </RequireAuth>
                       }
@@ -61,7 +61,7 @@ export function App() {
 
                     <Route
                       element={
-                        <RequireAuth>
+                        <RequireAuth redirect requireSuperUser>
                           <SideWindow />
                         </RequireAuth>
                       }
@@ -70,7 +70,7 @@ export function App() {
 
                     <Route
                       element={
-                        <RequireAuth>
+                        <RequireAuth redirect>
                           <HomePage />
                         </RequireAuth>
                       }
@@ -79,7 +79,7 @@ export function App() {
 
                     <Route
                       element={
-                        <RequireAuth>
+                        <RequireAuth redirect requireSuperUser>
                           <HomePage />
                         </RequireAuth>
                       }

diff --git a/frontend/src/api/api.ts b/frontend/src/api/api.ts
@@ -1,8 +1,7 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-import { getOIDCUser } from 'auth/getOIDCUser'
 
+import { setAuthorizationHeader } from './utils/setAuthorizationHeaders'
 import { normalizeRtkBaseQuery } from '../utils/normalizeRtkBaseQuery'
-import { sha256 } from '../utils/sha256'
 
 import type { BackendApiErrorResponse } from './types'
 
@@ -18,26 +17,6 @@ export const geoserverApi = createApi({
 // =============================================================================
 // Monitorenv Private API
 
-const AUTHORIZATION_HEADER = 'authorization'
-const CORRELATION_HEADER = 'X-Correlation-Id'
-
-const setAuthorizationHeader = async headers => {
-  const user = getOIDCUser()
-  const token = user?.access_token
-
-  // If we have a token set in state, we pass it.
-  if (token) {
-    headers.set(AUTHORIZATION_HEADER, `Bearer ${token}`)
-
-    if (crypto?.subtle) {
-      const hashedToken = await sha256(token)
-
-      headers.set(CORRELATION_HEADER, hashedToken)
-    }
-  }
-
-  return headers
-}
 // We'll need that later on for authentication.
 const monitorenvPrivateApiQuery = fetchBaseQuery({
   baseUrl: '/bff',

diff --git a/frontend/src/api/utils/setAuthorizationHeaders.ts b/frontend/src/api/utils/setAuthorizationHeaders.ts
@@ -0,0 +1,23 @@
+import { sha256 } from '@utils/sha256'
+import { getOIDCUser } from 'auth/getOIDCUser'
+
+const AUTHORIZATION_HEADER = 'authorization'
+const CORRELATION_HEADER = 'X-Correlation-Id'
+
+export const setAuthorizationHeader = async headers => {
+  const user = getOIDCUser()
+  const token = user?.access_token
+
+  // If we have a token set in state, we pass it.
+  if (token) {
+    headers.set(AUTHORIZATION_HEADER, `Bearer ${token}`)
+
+    if (crypto?.subtle) {
+      const hashedToken = await sha256(token)
+
+      headers.set(CORRELATION_HEADER, hashedToken)
+    }
+  }
+
+  return headers
+}
diff --git a/frontend/src/components/RequireAuth.tsx b/frontend/src/components/RequireAuth.tsx
@@ -3,7 +3,7 @@ import { getOIDCConfig } from 'auth/getOIDCConfig'
 import { useAuth } from 'react-oidc-context'
 import { Navigate } from 'react-router-dom'
 
-export function RequireAuth({ children, requireSuperUser = false }) {
+export function RequireAuth({ children, redirect = false, requireSuperUser = false }) {
   const oidcConfig = getOIDCConfig()
   const auth = useAuth()
   const { data: user } = useGetCurrentUserAuthorizationQuery(undefined, { skip: !auth?.isAuthenticated })
@@ -13,11 +13,19 @@ export function RequireAuth({ children, requireSuperUser = false }) {
   }
 
   if (!auth.isAuthenticated) {
-    return <Navigate replace to="/login" />
+    if (redirect) {
+      return <Navigate replace to="/login" />
+    }
+
+    return null
   }
 
   if (requireSuperUser && !user?.isSuperUser) {
-    return <Navigate replace to="/register" />
+    if (redirect) {
+      return <Navigate replace to="/register" />
+    }
+
+    return null
   }
 
   return children

diff --git a/frontend/src/features/Account/components/Account.tsx b/frontend/src/features/Account/components/Account.tsx
@@ -3,6 +3,7 @@ import { ButtonWrapper } from '@features/MainWindow/components/RightMenu/ButtonW
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { Accent, Button, Icon, MapMenuDialog, Size } from '@mtes-mct/monitor-ui'
+import { getOIDCConfig } from 'auth/getOIDCConfig'
 import { globalActions } from 'domain/shared_slices/Global'
 import { useAuth } from 'react-oidc-context'
 import styled from 'styled-components'
@@ -14,6 +15,8 @@ export function Account() {
   const isAccountVisible = useAppSelector(state => state.global.isAccountDialogVisible)
   const auth = useAuth()
 
+  const oidcConfig = getOIDCConfig()
+
   const logout = () => {
     auth.signoutRedirect()
   }
@@ -22,6 +25,10 @@ export function Account() {
     dispatch(globalActions.setDisplayedItems({ isAccountDialogVisible: !isAccountVisible }))
   }
 
+  if (!oidcConfig.IS_OIDC_ENABLED) {
+    return null
+  }
+
   return (
     <ButtonWrapper topPosition={MARGIN_TOP}>
       {isAccountVisible && (

diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
@@ -10,11 +10,7 @@ import { LoadingSpinnerWall } from 'ui/LoadingSpinnerWall'
 export function Login() {
   const oidcConfig = getOIDCConfig()
   const auth = useAuth()
-  const {
-    data: user,
-    isError,
-    isSuccess
-  } = useGetCurrentUserAuthorizationQuery(undefined, { skip: !auth?.isAuthenticated })
+  const { data: user, isSuccess } = useGetCurrentUserAuthorizationQuery(undefined, { skip: !auth?.isAuthenticated })
 
   const logout = () => {
     auth.removeUser()
@@ -45,19 +41,6 @@ export function Login() {
       break
   }
 
-  if (auth.isLoading) {
-    return (
-      <Wrapper>
-        Chargement...
-        <LoadingSpinnerWall isVesselShowed />
-      </Wrapper>
-    )
-  }
-
-  if (auth.error || isError) {
-    return <div>Oops... {auth?.error?.message}</div>
-  }
-
   if (auth.isAuthenticated) {
     return (
       <Wrapper>
@@ -70,7 +53,14 @@ export function Login() {
 
   return (
     <Wrapper>
-      <Button onClick={() => auth.signinRedirect()}>Se connecter</Button>
+      {auth.isLoading && (
+        <>
+          Chargement...
+          <LoadingSpinnerWall isVesselShowed />
+        </>
+      )}
+      {auth.error && <div>Oops... {auth.error?.message}</div>}
+      {!auth.isLoading && <Button onClick={() => auth.signinRedirect()}>Se connecter</Button>}
       <ToastContainer />
     </Wrapper>
   )