Improved auth and routing for better structure and navigation.

frontend/src/App.css

@@ -1,5 +1,5 @@
-@import "tailwindcss";
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@import "tailwindcss";
 
 * {
     font-family: "Inter", sans-serif;

frontend/src/App.jsx

@@ -8,8 +8,9 @@ import HomePage from "./pages/HomePage.jsx";
 import ErrorPage from './pages/ErrorPage.jsx';
 import ProfilePage from './pages/ProfilePage.jsx';
 import CartPage from "./pages/CartPage.jsx";
-import RefreshHandler from './RefreshHandler';
+import RefreshHandler from './utils/RefreshHandler.jsx';
 import BottomNavBar from './components/BottomNavBar.jsx';
+import PrivateRoute from './utils/PrivateRoute';
 
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
@@ -41,11 +42,15 @@ const AppContent = ({ isAuthenticated, setIsAuthenticated, mode, setMode }) => {
             <RefreshHandler setIsAuthenticated={setIsAuthenticated} />
             <Routes>
                 <Route path="/" element={<LandingPage />} />
-                <Route path="/home" element={<HomePage />} />
-                <Route path="/auth" element={<GoogleLogin />} />
-                <Route path="/explore" element={<ExplorePage />} />
-                <Route path="/cart" element={<CartPage />} />
-                <Route path="/profile" element={<ProfilePage mode={mode} setMode={setMode} />} />
+                <Route path="/auth" element={<GoogleLogin setIsAuthenticated={setIsAuthenticated} />} />
+
+                <Route element={<PrivateRoute isAuthenticated={isAuthenticated} />}>
+                    <Route path="/home" element={<HomePage />} />
+                    <Route path="/explore" element={<ExplorePage />} />
+                    <Route path="/cart" element={<CartPage />} />
+                    <Route path="/profile" element={<ProfilePage mode={mode} setMode={setMode} />} />
+                </Route>
+
                 <Route path="*" element={<ErrorPage />} />
             </Routes>
             {location.pathname !== '/auth' && location.pathname !== "/" && <BottomNavBar />}

frontend/src/components/GoogleLogin.jsx

@@ -1,23 +1,35 @@
 import { useState } from "react";
 import { useGoogleLogin } from "@react-oauth/google";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { googleAuth } from "../api/apiFetch.js";
 
-const GoogleLogin = () => {
+const GoogleLogin = ({ setIsAuthenticated }) => {
 	const [user, setUser] = useState(null);
 	const navigate = useNavigate();
+	const location = useLocation();
 
 	const responseGoogle = async (authResult) => {
 		try {
 			if (authResult["code"]) {
 				const result = await googleAuth(authResult.code); //Fetch the user data from the backend using the code received from Google
 				const { email, name, picture } = result.data.user;
-				console.log("Google Auth User result: ", result.data.user);
+				// console.log("Google Auth User result: ", result.data.user);
 
 				const token = result.data.token;
 				const obj = { email, name, token, picture };
 				localStorage.setItem("user-info", JSON.stringify(obj));
-				navigate("/home");
+
+				// Set the user authentication state right after the user loogs in
+				if (setIsAuthenticated) {
+                    setIsAuthenticated(true);
+                    // console.log("Authentication state set to true");
+                } else {
+                    console.error("GoogleLogin: setIsAuthenticated prop was not received!");
+                }
+
+                const targetPath = location.state?.from || '/home';
+				navigate(targetPath, { replace: true });
+
 			} else {
 				console.log("Google Auth failed", authResult);
 				throw new Error(authResult);

frontend/src/utils/PrivateRoute.jsx

@@ -0,0 +1,9 @@
+import { Navigate, Outlet, useLocation } from 'react-router-dom';
+
+const PrivateRoute = ({ isAuthenticated }) => {
+  const location = useLocation();
+  return isAuthenticated ? <Outlet /> :  <Navigate to="/auth" replace state={{ from: location.pathname }} 
+/>;
+};
+
+export default PrivateRoute;

frontend/src/utils/RefreshHandler.jsx

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+function RefreshHandler({ setIsAuthenticated }) {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const data = localStorage.getItem('user-info');
+        const token = JSON.parse(data)?.token;
+
+        if (token) {
+            setIsAuthenticated(true);
+            if (location.pathname === '/auth') {
+                const targetPath = location.state?.from || '/home';
+                navigate(targetPath, { replace: true });
+            }
+        } else {
+            setIsAuthenticated(false);
+            if (location.pathname !== '/' && location.pathname !== '/auth') {
+                navigate('/auth', { replace: true, state: { from: location.pathname } });
+            }
+        }
+    }, [location.pathname, navigate, setIsAuthenticated]);
+
+    return null;
+}
+
+export default RefreshHandler;