From 2e1cc2298368b107ea5549b50a982c240b1fd95d Mon Sep 17 00:00:00 2001 From: dienamo Date: Tue, 15 Oct 2024 11:46:28 +0100 Subject: [PATCH] :fix remplacement du package react-oidc-context par auth reducer --- package.json | 1 - src/App.js | 3 ++- src/actions/authenticationActions.js | 25 ++++++++++++++++++++++--- src/components/Header.js | 21 ++++++--------------- src/reducers/authenticationReducer.js | 23 ++++++++++++++++++++--- src/services/auth/logout.js | 3 --- src/views/anonymous/Login.js | 4 ++-- src/views/connected/PrivateRoute.js | 9 ++++++--- 8 files changed, 58 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index a549e4b8b..5263dd104 100644 --- 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 index 08ac2e2eb..ff7ec843e 100644 --- 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 &&
} - +
diff --git a/src/actions/authenticationActions.js b/src/actions/authenticationActions.js index 420daac64..14219d9e9 100644 --- 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 index 01968979c..0ff4d1cf5 100644 --- 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 ( <> - +
diff --git a/src/reducers/authenticationReducer.js b/src/reducers/authenticationReducer.js index 32367e0d3..02589352c 100644 --- 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 index a4618db3e..ca3eeb835 100644 --- 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 index 1427631d3..0c0b7a62e 100644 --- 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 (
- +
{showAccountNotFound && }
diff --git a/src/views/connected/PrivateRoute.js b/src/views/connected/PrivateRoute.js index 072bf8465..2b678e18d 100644 --- 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') !== '{}' ? : ; + const isAuthenticated = useSelector(state => state.authentication?.isAuthenticated); + const isLoggingOut = useSelector(state => state.authentication?.isLoggingOut); + if (isLoggingOut) { + return null; } - return; + return isAuthenticated ? : ; }