feat: add custom authen hooks and context

frontend/context/SessionContext.tsx

@@ -7,6 +7,7 @@ interface SessionContextType {
   user: any | null;
   setToken: (token: string | null) => void;
   setUser: (user: any | null) => void;
+  loading: boolean;
 }
 
 const SessionContext = createContext<SessionContextType | undefined>(undefined);
@@ -18,7 +19,9 @@ interface SessionProviderProps {
 export function SessionProvider({ children }: SessionProviderProps) {
   const [token, setTokenState] = useState<string | null>(null);
   const [user, setUserState] = useState<any | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
 
+  // Save or remove token from localStorage accordingly
   const setToken = (newToken: string | null) => {
     if (newToken) {
       localStorage.setItem("token", newToken);
@@ -28,6 +31,7 @@ export function SessionProvider({ children }: SessionProviderProps) {
     setTokenState(newToken);
   };
 
+  // Save or remove user from localStorage accordingly
   const setUser = (newUser: any | null) => {
     if (newUser) {
       localStorage.setItem("user", JSON.stringify(newUser));
@@ -37,6 +41,7 @@ export function SessionProvider({ children }: SessionProviderProps) {
     setUserState(newUser);
   };
 
+  // On mount, check localStorage for token and user data
   useEffect(() => {
     const storedToken = localStorage.getItem("token");
     const storedUser = localStorage.getItem("user");
@@ -50,7 +55,12 @@ export function SessionProvider({ children }: SessionProviderProps) {
         console.error("Failed to parse stored user.", error);
       }
     }
+    setLoading(false);
   }, []);
 
-  return <SessionContext.Provider value={{ token, user, setToken, setUser }}>{children}</SessionContext.Provider>;
+  return (
+    <SessionContext.Provider value={{ token, user, setToken, setUser, loading }}>{children}</SessionContext.Provider>
+  );
 }
+
+export { SessionContext };

frontend/hooks/useLogout.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useContext } from "react";
+import { useRouter } from "next/navigation";
+import { SessionContext } from "@/context/SessionContext";
+
+export function useLogout() {
+  const router = useRouter();
+  const context = useContext(SessionContext);
+
+  if (!context) {
+    throw new Error("useLogout must be used within a SessionProvider");
+  }
+
+  const { setToken, setUser } = context;
+
+  const logout = () => {
+    setToken(null);
+    setUser(null);
+
+    router.push("/");
+  };
+
+  return logout;
+}

frontend/hooks/useProtectedRoute.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useSession } from "./useSession";
+
+export function useProtectedRoute() {
+  const { data: session } = useSession();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!session?.token) {
+      router.push("/signin");
+    }
+  }, [session?.token, router]);
+
+  return session?.token;
+}

frontend/hooks/useSession.tsx

@@ -1,12 +1,22 @@
 "use client";
 
-import { SessionContext } from "next-auth/react";
 import { useContext } from "react";
+import { SessionContext } from "@/context/SessionContext";
 
 export function useSession() {
   const context = useContext(SessionContext);
   if (!context) {
     throw new Error("useSession must be used within a SessionProvider");
   }
-  return context;
+
+  const { token, user, loading } = context;
+  let status: "loading" | "authenticated" | "unauthenticated";
+
+  if (loading) status = "loading";
+  else if (token) status = "authenticated";
+  else status = "unauthenticated";
+
+  const session = token ? { token, user } : null;
+
+  return { data: session, status };
 }