frontend login forms

client/app/hooks/useAuth.ts

@@ -0,0 +1,33 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+}
+
+interface AuthStore {
+  token: string | null;
+  user: User | null;
+  setToken: (token: string | null) => void;
+  setUser: (user: User | null) => void;
+  logout: () => void;
+}
+
+export const useAuth = create<AuthStore>()(
+  persist(
+    (set) => ({
+      token: null,
+      user: null,
+      setToken: (token) => set({ token }),
+      setUser: (user) => set({ user }),
+      logout: () => set({ token: null, user: null }),
+    }),
+    {
+      name: "auth-storage",
+    },
+  ),
+);

client/app/hooks/useUser.ts

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { useAuth } from "./useAuth";
+
+export const useUser = () => {
+  const { token, user, setUser } = useAuth();
+  console.log(user);
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      if (!token || user) return;
+
+      try {
+        const response = await fetch("http://localhost:3000/api/users/me", {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (!response.ok) throw new Error("Failed to fetch user");
+
+        const userData = await response.json();
+        setUser(userData);
+      } catch (error) {
+        console.error("Error fetching user:", error);
+        useAuth.getState().logout();
+      }
+    };
+
+    fetchUser();
+  }, [token, user, setUser]);
+
+  return user;
+};