:fix remplacement du package react-oidc-context par auth reducer

anct-cnum · Oct 15, 2024 · 2e1cc22 · 2e1cc22
1 parent 1bbbd0f
commit 2e1cc22
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,6 @@
     "react-datepicker": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-loader-spinner": "^6.1.6",
-    "react-oidc-context": "^3.0.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.0",
     "react-select": "^5.8.0",

diff --git a/src/App.js b/src/App.js
@@ -37,6 +37,7 @@ function App() {
   const isLoading = useSelector(state => state.alerteEtSpinner?.isLoading);
   const accessToken = useSelector(state => state.authentication?.accessToken) || getAccessToken();
   const isAuthenticated = useSelector(state => state.authentication?.isAuthenticated);
+  const isLoggingOut = useSelector(state => state.authentication?.isLoggingOut);
   const dispatch = useDispatch();
   const location = useLocation();
 
@@ -55,7 +56,7 @@ function App() {
       { isLoading === true &&
       <div className="wrapperModal"></div>
       }
-      <Spinner loading={!(!localStorage.getItem('logoutAction'))} />
+      <Spinner loading={isLoggingOut} />
       <Header />
       <Alerte />
       <Routes>

diff --git a/src/actions/authenticationActions.js b/src/actions/authenticationActions.js
@@ -1,3 +1,5 @@
+import signOut from '../services/auth/logout';
+
 export const authenticationActions = {
   login,
   logout,
@@ -35,7 +37,24 @@ function resetApplication() {
 }
 
 function logout() {
-  localStorage.removeItem('user');
-  localStorage.removeItem('roleActivated');
-  return { type: 'LOGOUT' };
+  return dispatch => {
+    dispatch(request());
+    signOut()
+    .then(() => {
+      dispatch(success());
+    })
+    .catch(error => {
+      dispatch(failure(error));
+    });
+  };
+
+  function request() {
+    return { type: 'LOGOUT_REQUEST' };
+  }
+  function success() {
+    return { type: 'LOGOUT_SUCCESS' };
+  }
+  function failure(error) {
+    return { type: 'LOGOUT_FAILURE', error };
+  }
 }
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import logo from '../assets/brands/logo-conseiller-numerique-min.svg';
 import { menuActions, authenticationActions } from '../actions';
 import Menu from './Menu';
 import UserMenu from './UserMenu';
-import signOut from '../services/auth/logout';
 import Spinner from './Spinner';
 
 function Header() {
@@ -17,22 +16,14 @@ function Header() {
   const roles = useSelector(state => state.authentication?.rolesAllowed)?.filter(role => !['admin_coop', 'structure_coop', 'conseiller'].includes(role));
   const roleActivated = useSelector(state => state.authentication?.roleActivated);
   const user = useSelector(state => state.authentication?.user);
-  const [loading, setLoading] = useState(false);
+  const isLoggingOut = useSelector(state => state.authentication?.isLoggingOut);
 
-  const clickButtonLogout = async e => {
-    setLoading(true);
+  const clickButtonLogout = () => {
     try {
-      await signOut();
-      if (e?.target?.className.includes('button-disconnect-auth')) {
-        localStorage.setItem('logoutAction', JSON.stringify('Déconnexion en cours...'));
-        authenticationActions.logout();
-      } else {
-        navigate('/login');
-      }
+      dispatch(authenticationActions.logout());
+      navigate('/login');
     } catch (error) {
       navigate('/login');
-    } finally {
-      setLoading(false);
     }
   };
 
@@ -47,7 +38,7 @@ function Header() {
 
   return (
     <>
-      <Spinner loading={loading} />
+      <Spinner loading={isLoggingOut} />
       <header role="banner" className="fr-header">
         <div className="fr-header__body">
           <div className="fr-container">

diff --git a/src/reducers/authenticationReducer.js b/src/reducers/authenticationReducer.js
@@ -6,7 +6,10 @@ const initialState = {
   rolesAllowed: rolesUser(),
   user: getUser(),
   accessToken: getAccessToken(),
-  isAuthenticated: !!getAccessToken()
+  isAuthenticated: !!getAccessToken(),
+  error: null,
+  isLoggingOut: false,
+  loading: false
 };
 
 export default function authentication(state = initialState, action) {
@@ -37,10 +40,24 @@ export default function authentication(state = initialState, action) {
         ...initialState,
         isAuthenticated: false
       };
-    case 'LOGOUT':
+    case 'LOGOUT_REQUEST':
+      return {
+        ...state,
+        loading: true,
+        isLoggingOut: true,
+        error: null
+      };
+    case 'LOGOUT_SUCCESS':
       return {
         ...initialState,
-        isAuthenticated: false
+        isLoggingOut: false
+      };
+    case 'LOGOUT_FAILURE':
+      return {
+        ...state,
+        loading: false,
+        isLoggingOut: false,
+        error: action.error
       };
     case 'CHANGE_ROLE':
       return {

diff --git a/src/services/auth/logout.js b/src/services/auth/logout.js
@@ -2,9 +2,6 @@ import axios from 'axios';
 import apiUrlRoot from '../../helpers/apiUrl';
 
 const signOut = async () => {
-  localStorage.removeItem(
-    'oidc.user'
-  );
   localStorage.removeItem('user');
   localStorage.removeItem('roleActivated');
   try {

diff --git a/src/views/anonymous/Login.js b/src/views/anonymous/Login.js
@@ -22,6 +22,7 @@ export default function Login() {
   const [proConnectLoading, setProConnectLoading] = useState(false);
   const [showAccountNotFound, setShowAccountNotFound] = useState(false);
   const { username, password } = inputs;
+  const isLoggingOut = useSelector(state => state.authentication?.isLoggingOut);
   const user = useSelector(state => state.authentication?.user);
 
   const navigate = useNavigate();
@@ -33,7 +34,6 @@ export default function Login() {
       localStorage.removeItem('user');
       dispatch(userActions.verifyToken(verificationToken));
     }
-    localStorage.removeItem('logoutAction');
     const storedError = JSON.parse(localStorage.getItem('loginError'));
     if (storedError === 'Connexion refusée') {
       setShowAccountNotFound(true);
@@ -63,7 +63,7 @@ export default function Login() {
 
   return (
     <div className="login">
-      <Spinner loading={!(localStorage.getItem('user') && localStorage.getItem('user') !== '{}') && proConnectLoading} />
+      <Spinner loading={!(localStorage.getItem('user') && localStorage.getItem('user') !== '{}') && (proConnectLoading || isLoggingOut)} />
       <div className="fr-container fr-my-10w">
         {showAccountNotFound && <AccountNotFound/>}
         <div className="fr-grid-row fr-grid-row--center" style={{ textAlign: 'center' }}>

diff --git a/src/views/connected/PrivateRoute.js b/src/views/connected/PrivateRoute.js
@@ -1,9 +1,12 @@
 import React from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 
 export default function PrivateRoute() {
-  if (!localStorage.getItem('logoutAction')) { // Pour éviter le double navigate /login lors de la déconnexion
-    return localStorage.getItem('user') && localStorage.getItem('user') !== '{}' ? <Outlet /> : <Navigate to="/login" />;
+  const isAuthenticated = useSelector(state => state.authentication?.isAuthenticated);
+  const isLoggingOut = useSelector(state => state.authentication?.isLoggingOut);
+  if (isLoggingOut) {
+    return null;
   }
-  return;
+  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
 }