Index: client/src/LogIn/LogIn.jsx
===================================================================
--- client/src/LogIn/LogIn.jsx (revision 75b85d750e2432274289f6cd6f6428233880dc45)
+++ client/src/LogIn/LogIn.jsx (revision 5b23e0b24ab67d803a8c90a818ac65e5c54b75fb)
@@ -2,5 +2,5 @@
import { Link, useNavigate } from "react-router-dom";
import { supabase } from "../contexts/AuthContext";
-import { loginUser } from "@/services/registerLoginService";
+import { useAuth } from "../contexts/AuthContext";
const Login = () => {
const [email, setEmail] = useState("");
@@ -9,4 +9,5 @@
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
+ const { login } = useAuth();
const navigate = useNavigate();
@@ -20,45 +21,13 @@
setLoading(true);
- try {
- const { data: supabaseAuthData, error: supabaseAuthError } =
- await supabase.auth.signInWithPassword({
- email,
- password,
- });
+ const result = await login(email, password);
- if (supabaseAuthError) {
- setError(supabaseAuthError.message);
- setLoading(false);
- return;
- }
+ if (result.success) {
+ navigate("/dashboard");
+ } else {
+ setError(result.error);
+ }
- if (!supabaseAuthData.session?.access_token) {
- setError("Failed to retrieve session token from Supabase.");
- setLoading(false);
- return;
- }
-
- localStorage.setItem("jwt", supabaseAuthData.session.access_token);
- const backendLoginData = await loginUser({ email, password });
-
- if (backendLoginData.success) {
- localStorage.setItem("user", JSON.stringify(backendLoginData.user));
- navigate("/dashboard");
- } else {
- localStorage.removeItem("jwt");
- setError(backendLoginData.message || "Login failed on backend.");
- }
- } catch (err) {
- console.error("Login error caught in component:", err);
- if (err.response && err.response.data && err.response.data.message) {
- setError(err.response.data.message);
- } else if (err.message) {
- setError(err.message);
- } else {
- setError("An unexpected error occurred during login.");
- }
- } finally {
- setLoading(false);
- }
+ setLoading(false);
};
return (
Index: client/src/contexts/AuthContext.jsx
===================================================================
--- client/src/contexts/AuthContext.jsx (revision 75b85d750e2432274289f6cd6f6428233880dc45)
+++ client/src/contexts/AuthContext.jsx (revision 5b23e0b24ab67d803a8c90a818ac65e5c54b75fb)
@@ -9,4 +9,5 @@
import { useNavigate } from "react-router-dom";
import { createClient } from "@supabase/supabase-js";
+import { loginUser } from "@/services/registerLoginService";
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
@@ -39,4 +40,5 @@
export const AuthContext = createContext();
export const useAuth = () => useContext(AuthContext);
+const INACTIVITY_TIMEOUT = 120 * 60 * 1000;
export const AuthProvider = ({ children }) => {
@@ -50,9 +52,49 @@
const navigate = useNavigate();
- const INACTIVITY_TIMEOUT = 120 * 60 * 1000;
-
useEffect(() => {
userRef.current = user?.id || null;
}, [user]);
+
+ const login = useCallback(async (email, password) => {
+ try {
+ const { data: supabaseAuthData, error: supabaseAuthError } =
+ await supabase.auth.signInWithPassword({
+ email,
+ password,
+ });
+
+ if (supabaseAuthError) {
+ return { success: false, error: supabaseAuthError.message };
+ }
+
+ if (!supabaseAuthData.session?.access_token) {
+ return {
+ success: false,
+ error: "Failed to retrieve session token from Supabase.",
+ };
+ }
+
+ const backendLoginData = await loginUser({ email });
+
+ if (backendLoginData.success) {
+ setUser(backendLoginData.user);
+
+ return { success: true };
+ } else {
+ await supabase.auth.signOut();
+ return {
+ success: false,
+ error: backendLoginData.message || "Login failed on backend.",
+ };
+ }
+ } catch (err) {
+ console.error("Login error caught in AuthContext:", err);
+ const message =
+ err.response?.data?.message ||
+ err.message ||
+ "An unexpected error occurred during login.";
+ return { success: false, error: message };
+ }
+ }, []);
const logout = useCallback(async () => {
@@ -68,21 +110,24 @@
tokenExpiryTimeoutRef.current = null;
}
-
localStorage.removeItem("lastActivityTimestamp");
localStorage.removeItem("jwt");
localStorage.removeItem("token_exp");
+ localStorage.removeItem("lastResetDate");
localStorage.removeItem("user");
await supabase.auth.signOut();
+
+ localStorage.setItem("logout", "true");
+ setTimeout(() => localStorage.removeItem("logout"), 1000);
+
setUser(null);
userRef.current = null;
- navigate("/");
-
- setTimeout(() => setIsLoggingOut(false), 1000);
+
+ setTimeout(() => setIsLoggingOut(false), 500);
} catch (error) {
console.error("Error during logout:", error);
setIsLoggingOut(false);
}
- }, [navigate]);
+ }, []);
const resetInactivityTimer = useCallback(() => {
@@ -102,4 +147,10 @@
}
}, [logout]);
+
+ const updateUser = useCallback((newUserData) => {
+ setUser(newUserData);
+
+ localStorage.setItem("user", JSON.stringify(newUserData));
+ }, []);
useEffect(() => {
@@ -174,16 +225,38 @@
useEffect(() => {
- const initializeAuth = async () => {
+ console.log("AuthContext mounted");
+ const initializeAndVerifyAuth = async () => {
try {
+ setLoading(true);
+
+ const storedUserJson = localStorage.getItem("user");
+ if (storedUserJson) {
+ setUser(JSON.parse(storedUserJson));
+ }
+
const { data } = await supabase.auth.getSession();
const session = data?.session;
if (session?.user) {
- setUser(session.user);
+ const backendLoginData = await loginUser({
+ email: session.user.email,
+ });
+
+ if (backendLoginData.success) {
+ setUser(backendLoginData.user);
+ localStorage.setItem("user", JSON.stringify(backendLoginData.user));
+ } else {
+ logout();
+ return;
+ }
+
localStorage.setItem("jwt", session.access_token);
setupTokenExpiryLogout(session.access_token);
+ } else if (storedUserJson) {
+ logout();
}
} catch (error) {
- console.error("Error retrieving session:", error);
+ console.error("Error initializing/verifying auth:", error);
+ logout();
} finally {
setLoading(false);
@@ -191,31 +264,26 @@
};
- initializeAuth();
+ initializeAndVerifyAuth();
const { data: authListener } = supabase.auth.onAuthStateChange(
(event, session) => {
- if (event === "SIGNED_IN" && session?.user) {
- setUser(session.user);
-
- localStorage.setItem("jwt", session.access_token);
- setupTokenExpiryLogout(session.access_token);
- } else if (event === "SIGNED_OUT") {
- setUser(null);
- localStorage.removeItem("jwt");
-
- if (inactivityTimeoutRef.current) {
- clearTimeout(inactivityTimeoutRef.current);
- inactivityTimeoutRef.current = null;
+ if (event === "SIGNED_IN" || event === "TOKEN_REFRESHED") {
+ if (session?.user) {
+ initializeAndVerifyAuth();
}
- if (tokenExpiryTimeoutRef.current) {
- clearTimeout(tokenExpiryTimeoutRef.current);
- tokenExpiryTimeoutRef.current = null;
- }
- } else if (event === "TOKEN_REFRESHED" && session) {
- localStorage.setItem("jwt", session.access_token);
- setupTokenExpiryLogout(session.access_token);
- }
+ }
+ // } else if (event === "SIGNED_OUT") {
+ // logout();
+ // }
}
);
+
+ const handleVisibilityChange = () => {
+ if (document.visibilityState === "visible") {
+ initializeAndVerifyAuth();
+ }
+ };
+
+ document.addEventListener("visibilitychange", handleVisibilityChange);
return () => {
@@ -223,6 +291,7 @@
authListener.subscription.unsubscribe();
}
- };
- }, [setupTokenExpiryLogout]);
+ document.removeEventListener("visibilitychange", handleVisibilityChange);
+ };
+ }, [logout, setupTokenExpiryLogout]);
useEffect(() => {
@@ -258,4 +327,19 @@
}, [resetInactivityTimer, user]);
+ //Sync actions between tabs
+ useEffect(() => {
+ const handleStorageChange = (event) => {
+ if (event.key === "logout" && event.newValue === "true") {
+ logout();
+ }
+ };
+
+ window.addEventListener("storage", handleStorageChange);
+
+ return () => {
+ window.removeEventListener("storage", handleStorageChange);
+ };
+ }, [logout]);
+
return (
Index: client/src/main.jsx
===================================================================
--- client/src/main.jsx (revision 75b85d750e2432274289f6cd6f6428233880dc45)
+++ client/src/main.jsx (revision 5b23e0b24ab67d803a8c90a818ac65e5c54b75fb)
@@ -1,85 +1,13 @@
-import { StrictMode } from "react";
+import React from "react";
import { createRoot } from "react-dom/client";
+import { BrowserRouter as Router } from "react-router-dom";
+import { AuthProvider } from "./contexts/AuthContext";
+import App from "./App";
import "./index.css";
-
-import ProtectedRoute from "./routes/ProtectedRoute";
-import LandingPage from "./LandingPage/LandingPage";
-import Register from "./Register/Register";
-import Login from "./LogIn/LogIn";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import CreatePost from "./CreatePost/CreatePost";
-import Task from "./Dashboard/components/Task";
-import Forum from "./Dashboard/components/Forum";
-import ForumPostDetail from "./Dashboard/components/ForumPostDetail";
-import Profile from "./Dashboard/components/Profile";
-import LeaderBoardEx from "./LandingPage/components/LeaderBoardEx";
-import ManagePosts from "@/Dashboard/components/ManagePosts.jsx";
-import { AuthProvider } from "./contexts/AuthContext";
createRoot(document.getElementById("root")).render(
-
- } />
- } />
- } />
-
-
-
-
- }
- />
-
-
-
- }
- />
-
-
-
- }
- />
-
-
-
- }
- />
-
-
-
- }
- />
-
-
-
- }
- />
-
-
-
- }
- />
-
+
Index: client/src/routes/ProtectedRoute.jsx
===================================================================
--- client/src/routes/ProtectedRoute.jsx (revision 75b85d750e2432274289f6cd6f6428233880dc45)
+++ client/src/routes/ProtectedRoute.jsx (revision 5b23e0b24ab67d803a8c90a818ac65e5c54b75fb)
@@ -1,25 +1,21 @@
-import { Navigate, useLocation } from 'react-router-dom';
-import { useAuth } from '../contexts/AuthContext';
-import React from 'react';
+import { useAuth } from "../contexts/AuthContext";
+import { Navigate, useLocation } from "react-router-dom";
const ProtectedRoute = ({ children }) => {
- const { user, loading, isLoggingOut } = useAuth();
+ const { user, loading } = useAuth();
const location = useLocation();
+ // if (loading) {
+ // return (
+ //
+ //
+ //
+ // );
+ // }
- if (loading) {
- return (
-
-
-
- );
- }
-
- if (!user && !isLoggingOut) {
- return (
-
- );
+ if (!user && !loading) {
+ return ;
}
Index: client/src/services/registerLoginService.js
===================================================================
--- client/src/services/registerLoginService.js (revision 75b85d750e2432274289f6cd6f6428233880dc45)
+++ client/src/services/registerLoginService.js (revision 5b23e0b24ab67d803a8c90a818ac65e5c54b75fb)
@@ -3,5 +3,5 @@
export const registerUser = async (userData) => {
try {
- const response = await apiClient.post("api/register", userData);
+ const response = await apiClient.post("/api/register", userData);
return response;
} catch (error) {
@@ -13,5 +13,5 @@
export const loginUser = async (credentials) => {
try {
- const response = await apiClient.post("api/login", credentials);
+ const response = await apiClient.post("/api/login", credentials);
return response;
} catch (error) {