feat(frontend): added Protection to Frontend

src/App.jsx

@@ -4,22 +4,31 @@ import Login from "./pages/Login/Login";
 import { Routes, Route, Navigate } from "react-router-dom";
 import Home from "./pages/Home/Home.jsx";
 import Callback from "./pages/Callback/Callback";
+import NotFound from "./pages/404/404";
+import MainLayout from "./layouts/MainLayout.jsx";
 import Preloader from "./pages/Preloader/Preloader";
-import NotFound from './pages/404/404'
 import ProfilePage from "./pages/Profile/ProfilePage.jsx";
+import PrivateRoutesWrapper from "./components/ProtectedRoutes/PrivateRoutesWrapper.jsx";
 
 function App() {
   return (
     <Routes>
-      <Route path="/" element={<Landingpage />} />
-      <Route path="/home" element={<Home />} />
-      <Route path="/login" element={<Login />} />
-      <Route path="/callback" element={<Callback />} />
-      <Route path="/preloader" element={<Preloader />} />
-      <Route path="/profile" element={<ProfilePage />} />
+      <Route element={<MainLayout />}>
+        <Route path="/" element={<Landingpage />} />
+        <Route path="/login" element={<Login />} />
+        <Route element={<PrivateRoutesWrapper />}>
+          <Route path="/home" element={<Home />} />
+          <Route path="/profile" element={<ProfilePage />} />
+          <Route path="/preloader" element={<Preloader />} />
+          {/* Add more protected routes here */}
+        </Route>
+        <Route path="/callback" element={<Callback />} />
+      </Route>
+
+
       <Route path="*" element={<NotFound />} />
-     </Routes>
-  )
+    </Routes>
+  );
 }
 
 export default App;

src/components/Navbar/Navbar.css

@@ -10,6 +10,7 @@
     background-color: transparent;
     border: none;
     margin-bottom: 2px;
+    z-index: 9999;
   }
   .nav-middle{
     flex: 1;

src/components/Navbar/Navbar.jsx

@@ -5,9 +5,7 @@ import YDO from '../../assets/navbar-images/YDO-logo.png'
 import notification from '../../assets/navbar-images/notification-YDO.png'
 import Account from '../../assets/navbar-images/Account-YDO.png'
 import Settings from '../../assets/navbar-images/Settings-YDO.png'
-
 function Navbar() {
-
   return (
     <>
       <svg width="0" height="0">

src/components/ProtectedRoutes/PrivateRoutesWrapper.jsx

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import { Outlet, Navigate } from "react-router-dom";
+import { checkLoginStatus } from "../../utils/checkLoginStatus";
+import Preloader from "../../pages/Preloader/Preloader";
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || "";
+
+const PrivateRoutesWrapper = () => {
+  const [isAuthenticated, setIsAuthenticated] = useState(null);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const loggedIn = await checkLoginStatus(API_BASE_URL);
+      setIsAuthenticated(loggedIn);
+    };
+    checkAuth();
+  }, []);
+
+  if (isAuthenticated === null) return <Preloader />;
+  if (!isAuthenticated) return <Navigate to="/login" replace />;
+
+  return <Outlet />;
+};
+
+export default PrivateRoutesWrapper;

src/layouts/MainLayout.jsx

@@ -0,0 +1,16 @@
+import {Outlet, useLocation } from "react-router-dom";
+import Navbar from "../components/Navbar/Navbar";
+
+const MainLayout=()=>{
+    const location=useLocation();
+    const hideNavBarRoutes=["/","/login"];
+    const showNavBar= !hideNavBarRoutes.includes(location.pathname)
+    return(
+        <>
+        {showNavBar && <Navbar/>}
+        <Outlet/>
+        </>
+    );
+};
+
+export default MainLayout;

src/pages/Login/Login.jsx

@@ -27,9 +27,11 @@ const Login = ({ onLogin }) => {
     window.location = `${API_BASE_URL}/auth/signin/google`;
   };
 
-  if (loggedIn) {
-    window.location.href = "/";
-  }
+    useEffect(() => {
+    if (loggedIn) {
+      window.location.href = "/home";
+    }
+  }, [loggedIn]);
   return (
     <>
     <div className="container" style={{backgroundImage:`url(${backgroundImage})`}}>
@@ -53,4 +55,6 @@ const Login = ({ onLogin }) => {
   );
 };
 
+
+
 export default Login;