diff --git a/src/frontend/src/components/authGuard/index.tsx b/src/frontend/src/components/authGuard/index.tsx index e75559423..9b21a1c9f 100644 --- a/src/frontend/src/components/authGuard/index.tsx +++ b/src/frontend/src/components/authGuard/index.tsx @@ -5,7 +5,6 @@ import { AuthContext } from "../../contexts/authContext"; export const ProtectedRoute = ({ children }) => { const { isAuthenticated, logout, getAuthentication } = useContext(AuthContext); - if (!isAuthenticated && !getAuthentication()) { logout(); return ; diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index 26cc05289..81ee6270b 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -14,6 +14,7 @@ const initialValue: AuthContextType = { userData: null, setUserData: () => {}, getAuthentication: () => false, + authenticationErrorCount: 0 }; export const AuthContext = createContext(initialValue); @@ -35,7 +36,7 @@ export function AuthProvider({ children }): React.ReactElement { function getAuthentication(){ const storedRefreshToken = cookies.get('refresh_token'); - const storedAccess = cookies.get('refresh_token'); + const storedAccess = cookies.get('access_token'); const auth = storedAccess && storedRefreshToken ? true : false; return auth; } @@ -49,12 +50,11 @@ export function AuthProvider({ children }): React.ReactElement { } function logout() { - cookies.remove('access_token'); - cookies.remove('refresh_token'); + cookies.remove('access_token', { path: '/' }); + cookies.remove('refresh_token', { path: '/' }); setAccessToken(null); setRefreshToken(null); setIsAuthenticated(false); - } async function refreshAccessToken(refreshToken: string) { @@ -91,7 +91,8 @@ export function AuthProvider({ children }): React.ReactElement { refreshAccessToken, setUserData, userData, - getAuthentication + getAuthentication, + authenticationErrorCount: 0 }} > {children} diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index 6b163182c..0e1d52c41 100644 --- a/src/frontend/src/controllers/API/api.tsx +++ b/src/frontend/src/controllers/API/api.tsx @@ -5,6 +5,7 @@ import { renewAccessToken } from "."; import { URL_EXCLUDED_FROM_ERROR_RETRIES } from "../../constants/constants"; import { alertContext } from "../../contexts/alertContext"; import { AuthContext } from "../../contexts/authContext"; +import { Cookies } from "react-cookie"; // Create a new Axios instance const api: AxiosInstance = axios.create({ @@ -13,23 +14,29 @@ const api: AxiosInstance = axios.create({ function ApiInterceptor() { const { setErrorData } = useContext(alertContext); - const { accessToken, login, logout } = useContext(AuthContext); + let { accessToken, login, logout, authenticationErrorCount } = useContext(AuthContext); const navigate = useNavigate(); + const cookies = new Cookies(); useEffect(() => { const interceptor = api.interceptors.response.use( (response) => response, async (error: AxiosError) => { - if (URL_EXCLUDED_FROM_ERROR_RETRIES.includes(error.config?.url)) { - return Promise.reject(error); - } if (error.response?.status === 401) { - const refreshToken = localStorage.getItem("refresh_token"); + const refreshToken = cookies.get('refresh_token'); + if (refreshToken) { + authenticationErrorCount = authenticationErrorCount + 1; + if(authenticationErrorCount > 3){ + authenticationErrorCount = 0; + logout(); + navigate("/login"); + } + const res = await renewAccessToken(refreshToken); login(res.data.access_token, res.data.refresh_token); try { - const accessToken = localStorage.getItem("access_token"); + const accessToken = cookies.get('access_token'); delete error.config.headers["Authorization"]; error.config.headers["Authorization"] = `Bearer ${accessToken}`; const response = await axios.request(error.config); @@ -41,30 +48,40 @@ function ApiInterceptor() { } } } - } else { - let retryCount = 0; - while (retryCount < 4) { - await sleep(5000); // Sleep for 5 seconds - retryCount++; - try { - const response = await axios.request(error.config); - return response; - } catch (error) { - if (retryCount === 3) { - setErrorData({ - title: "There was an error on web connection, please: ", - list: [ - "Refresh the page", - "Use a new flow tab", - "Check if the backend is up", - "Endpoint: " + error.config?.url, - ], - }); - return Promise.reject(error); - } - } + else{ + logout(); + navigate("/login"); } + } + else{ + // if (URL_EXCLUDED_FROM_ERROR_RETRIES.includes(error.config?.url)) { + return Promise.reject(error); + // } } + // else { + // let retryCount = 0; + // while (retryCount < 4) { + // await sleep(5000); // Sleep for 5 seconds + // retryCount++; + // try { + // const response = await axios.request(error.config); + // return response; + // } catch (error) { + // if (retryCount === 3) { + // setErrorData({ + // title: "There was an error on web connection, please: ", + // list: [ + // "Refresh the page", + // "Use a new flow tab", + // "Check if the backend is up", + // "Endpoint: " + error.config?.url, + // ], + // }); + // return Promise.reject(error); + // } + // } + // } + // } } ); diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 1b4fd30d6..fb923243d 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -388,7 +388,7 @@ export async function renewAccessToken(token: string) { } } -export async function getUsers(): Promise { +export async function getAllUsers(): Promise { try { return await api.get(`${BASE_URL_API}user`); } catch (error) { diff --git a/src/frontend/src/modals/UserManagementModal/index.tsx b/src/frontend/src/modals/UserManagementModal/index.tsx index b5d6194dd..98ec5642d 100644 --- a/src/frontend/src/modals/UserManagementModal/index.tsx +++ b/src/frontend/src/modals/UserManagementModal/index.tsx @@ -23,18 +23,16 @@ export default function UserManagementModal({ index, onConfirm, }: UserManagementType) { + const Icon: any = nodeIconsLucide[icon]; const [pwdVisible, setPwdVisible] = useState(false); const [confirmPwdVisible, setConfirmPwdVisible] = useState(false); - const [open, setOpen] = useState(false); - const [password, setPassword] = useState(data?.password ?? ""); const [username, setUserName] = useState(data?.username ?? ""); const [confirmPassword, setConfirmPassword] = useState(data?.password ?? ""); const [isDisabled, setIsDisabled] = useState(data?.is_disabled ?? false); const [isSuperUser, setIsSuperUser] = useState(data?.is_superuser ?? false); - const [inputState, setInputState] = useState(CONTROL_NEW_USER); function handleInput({ @@ -47,6 +45,11 @@ export default function UserManagementModal({ if (!data) { resetForm(); } + else{ + handleInput({ target: { name: "username", value: username } }); + handleInput({ target: { name: "is_disabled", value: isDisabled } }); + handleInput({ target: { name: "is_superuser", value: isSuperUser } }); + } }, [open]); function resetForm() { @@ -149,7 +152,7 @@ export default function UserManagementModal({ }} value={password} className="primary-input" - required + required={data ? false : true} type={pwdVisible ? "text" : "password"} /> @@ -203,7 +206,7 @@ export default function UserManagementModal({ }} value={confirmPassword} className="primary-input" - required + required={data ? false : true} type={confirmPwdVisible ? "text" : "password"} /> diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx index 4dec9ced2..6e638440b 100644 --- a/src/frontend/src/pages/AdminPage/index.tsx +++ b/src/frontend/src/pages/AdminPage/index.tsx @@ -31,6 +31,7 @@ export default function AdminPage() { const [size, setPageSize] = useState(10); const [index, setPageIndex] = useState(0); const [loadingUsers, setLoadingUsers] = useState(true); + const [totalRowsCount, setTotalRowsCount] = useState(0); const { setErrorData, setSuccessData } = useContext(alertContext); const userList = useRef([]); diff --git a/src/frontend/src/types/contexts/auth.ts b/src/frontend/src/types/contexts/auth.ts index 7d6ccce12..c65e1d1de 100644 --- a/src/frontend/src/types/contexts/auth.ts +++ b/src/frontend/src/types/contexts/auth.ts @@ -8,6 +8,7 @@ export type AuthContextType = { userData: userData | null; setUserData: (userData: userData | null) => void; getAuthentication: () => boolean; + authenticationErrorCount: number; }; export type userData = {