feat: implement authentication store and add organization fetching logic

Author: abhishek-nexgen-dev

package.json

@@ -39,7 +39,8 @@
     "react-router-dom": "^7.15.0",
     "recharts": "^3.8.1",
     "tailwind-merge": "^3.5.0",
-    "zod": "^4.4.3"
+    "zod": "^4.4.3",
+    "zustand": "^5.0.13"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ const AUTH_ENDPOINTS = {
   LOGIN: "/signIn",
   REGISTER: "/auth/register",
   REFRESH: "/auth/refresh",
+  GET_ORGANIZATION_BY_ID: "/organization",
 };
 
 export default AUTH_ENDPOINTS;

src/features/Auth/v1/Constant/Auth.Endpoint.Constant.ts

@@ -0,0 +1,43 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+export interface User {
+  _id: string;
+
+  email: string;
+  role: string;
+
+}
+
+interface AuthState {
+  // token: string | null;
+  user: User | null;
+
+  setAuthData: (user: User) => void;
+  clearAuthData: () => void;
+}
+
+const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      token: null,
+      user: null,
+
+      setAuthData: (user) =>
+        set({
+          user,
+        }),
+
+      clearAuthData: () =>
+        set({
+        
+          user: null,
+        }),
+    }),
+    {
+      name: "auth-storage",
+    },
+  ),
+);
+
+export default useAuthStore;

src/features/Auth/v1/Store/Auth.Store.ts

@@ -1,6 +1,8 @@
 import api from "@/utils/axios.utils";
 import { useMutation } from "@tanstack/react-query";
+
 import AUTH_ENDPOINTS from "../Constant/Auth.Endpoint.Constant";
+import useAuthStore from "../Store/Auth.Store";
 
 const baseUrl = import.meta.env.VITE_API_BASE_URL || "http://localhost:8000/api/v1";
 
@@ -14,17 +16,49 @@ const useLoginMutation = () => {
 
     mutationFn: async (credentials: { email: string; password: string }) => {
       try {
-        console.log("Attempting login with credentials:", credentials);
         const response = await api.post(`${baseUrl}${AUTH_ENDPOINTS.LOGIN}`, credentials);
         return response.data;
       } catch (error) {
         console.error("Login failed:", error);
         throw error;
       }
     },
+
+
+
+    onSuccess: (response) => {
+      
+      const user = response.data;
+      console.log("Login successful:", user);
+
+      if(user.role === "organization"){
+          let {mutate} = useGetOrganization_Mutation() 
+           mutate(user._id)
+
+      }
+
+      useAuthStore.getState().setAuthData(user);
+    },
   });
 };
 
+
+const useGetOrganization_Mutation = () => {
+  return useMutation({
+    mutationKey: ["organization"],
+
+    mutationFn: async (id: string) => {
+      try {
+        const response = await api.get(`${baseUrl}${AUTH_ENDPOINTS.GET_ORGANIZATION_BY_ID}?id=${id}`);
+        return response.data;
+      } catch (error) {
+        console.error("Failed to fetch organization data:", error);
+        throw error;
+      }
+    },
+  });
+}
+
 // =========================
 // AUTH HOOK
 // =========================

src/features/Auth/v1/hooks/useAuth.ts

@@ -13,10 +13,15 @@ import { ThemeToggle } from "@/Component/ui/ThemeToggle";
 
 import SideBarLink from "../Components/SideBarLink";
 import { dashboardData } from "@/features/Member/v1/mock/dashboardData";
+import useAuthStore from "@/features/Auth/v1/Store/Auth.Store";
+import { useEffect } from "react";
 
 const SideBar = () => {
+  const user = useAuthStore((state) => state.user);
   const { theme } = useTheme();
 
+
+
   return (
     <div
       className="w-[25%] 2xl:w-[18%] min-h-screen hidden lg:flex flex-col"
@@ -81,10 +86,10 @@ const SideBar = () => {
             />
             <div className="min-w-0 flex-1 flex flex-col justify-center gap-0.5">
               <p className="text-sm font-semibold truncate" style={{ color: theme.text.primary }}>
-                {dashboardData.user.name}
+                {/* {data?.user?.name} */}
               </p>
               <p className="text-xs truncate font-medium" style={{ color: theme.primary.default }}>
-                {dashboardData.user.role}
+                {user?.role}
               </p>
             </div>
           </div>