diff --git a/src/frontend/src/components/authAdminGuard/index.tsx b/src/frontend/src/components/authAdminGuard/index.tsx new file mode 100644 index 000000000..3b57de8a2 --- /dev/null +++ b/src/frontend/src/components/authAdminGuard/index.tsx @@ -0,0 +1,28 @@ +import { useContext, useEffect } from "react"; +import { Navigate } from "react-router-dom"; +import { AuthContext } from "../../contexts/authContext"; + +export const ProtectedAdminRoute = ({ children }) => { + const { isAuthenticated, logout, getAuthentication, userData } = + useContext(AuthContext); + useEffect(() => { + if (!isAuthenticated && !getAuthentication()) { + window.location.replace("/login"); + logout(); + } + + if (userData && userData?.is_superuser === false) { + logout(); + } + }, [isAuthenticated, getAuthentication, logout, userData]); + + if (!isAuthenticated && !getAuthentication()) { + return ; + } + + if (userData && userData?.is_superuser === false) { + return ; + } + + return children; +}; diff --git a/src/frontend/src/components/catchAllRoutes/index.tsx b/src/frontend/src/components/catchAllRoutes/index.tsx new file mode 100644 index 000000000..f6fc70883 --- /dev/null +++ b/src/frontend/src/components/catchAllRoutes/index.tsx @@ -0,0 +1,13 @@ +import { useEffect } from "react"; +import { useNavigate } from "react-router-dom"; + +export const CatchAllRoute = () => { + const navigate = useNavigate(); + + // Redirect to the root ("/") when the catch-all route is matched + useEffect(() => { + navigate('/'); + }, []); + + return null; +}; diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index d798e72d5..132c3e29a 100644 --- a/src/frontend/src/controllers/API/api.tsx +++ b/src/frontend/src/controllers/API/api.tsx @@ -18,8 +18,6 @@ function ApiInterceptor() { const navigate = useNavigate(); const cookies = new Cookies(); - console.log(accessToken); - useEffect(() => { const interceptor = api.interceptors.response.use( (response) => response, @@ -49,7 +47,14 @@ function ApiInterceptor() { navigate("/login"); } } - } else { + } + + if(!refreshToken && error?.config?.url?.includes( + "login" + ) ){ + return Promise.reject(error); + } + else{ logout(); navigate("/login"); } @@ -58,30 +63,7 @@ function ApiInterceptor() { 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/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx index ae35a5a5a..267133fe3 100644 --- a/src/frontend/src/pages/AdminPage/index.tsx +++ b/src/frontend/src/pages/AdminPage/index.tsx @@ -23,6 +23,7 @@ import { } from "../../controllers/API"; import ConfirmationModal from "../../modals/ConfirmationModal"; import UserManagementModal from "../../modals/UserManagementModal"; +import { AuthContext } from "../../contexts/authContext"; export default function AdminPage() { const [inputValue, setInputValue] = useState(""); @@ -31,6 +32,7 @@ export default function AdminPage() { const [index, setPageIndex] = useState(0); const [loadingUsers, setLoadingUsers] = useState(true); const { setErrorData, setSuccessData } = useContext(alertContext); + const { userData } = useContext(AuthContext); const userList = useRef([]); @@ -136,8 +138,13 @@ export default function AdminPage() { } return ( + <> -
+ { + userData && ( + + +
@@ -249,14 +256,12 @@ export default function AdminPage() { @@ -338,6 +343,9 @@ export default function AdminPage() {
+ ) + } + ); } diff --git a/src/frontend/src/pages/loginPage/index.tsx b/src/frontend/src/pages/loginPage/index.tsx index 6bf033fb6..56ce90f75 100644 --- a/src/frontend/src/pages/loginPage/index.tsx +++ b/src/frontend/src/pages/loginPage/index.tsx @@ -131,7 +131,7 @@ export default function LoginPage(): JSX.Element {
- + diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index 4875478f9..4c417b3bb 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -1,5 +1,4 @@ import { Route, Routes } from "react-router-dom"; -import { ProtectedRoute } from "./components/authGuard"; import { ProtectedLoginRoute } from "./components/authLoginGuard"; import AdminPage from "./pages/AdminPage"; import LoginAdminPage from "./pages/AdminPage/LoginPage"; @@ -9,6 +8,9 @@ import HomePage from "./pages/MainPage"; import DeleteAccountPage from "./pages/deleteAccountPage"; import LoginPage from "./pages/loginPage"; import SignUp from "./pages/signUpPage"; +import { CatchAllRoute } from "./components/catchAllRoutes"; +import { ProtectedRoute } from "./components/authGuard"; +import { ProtectedAdminRoute } from "./components/authAdminGuard"; const Router = () => { return ( @@ -43,7 +45,7 @@ const Router = () => { path="*" element={ - + } /> @@ -76,9 +78,9 @@ const Router = () => { + - + } />