Implement authentication and state management with Zustand; add useAuth hook, update Header and HomePage components, and create auth and preferences stores.

Author: typescript-any

package-lock.json

@@ -30,7 +30,8 @@
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.7",
-    "zod": "^3.25.28"
+    "zod": "^3.25.28",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

package.json

@@ -1,6 +1,10 @@
-import { Link } from "react-router";
+import { Link, useNavigate } from "react-router";
+import { Button } from "../ui/button";
+import { useAuth } from "@/hooks";
 
 const Header = () => {
+  const { isAuthenticated, user, logout } = useAuth();
+  const navigate = useNavigate();
   return (
     <header className="bg-white shadow-sm border-b">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -33,12 +37,27 @@ const Header = () => {
           </nav>
 
           <div className="flex items-center space-x-4">
-            <Link
-              to="/login"
-              className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
-            >
-              Login
-            </Link>
+            {isAuthenticated ? (
+              <>
+                <span className="text-sm text-gray-700">
+                  Hello, {user?.name}
+                </span>
+                <Button
+                  variant="outline"
+                  onClick={() => logout(navigate)}
+                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+                >
+                  Logout
+                </Button>
+              </>
+            ) : (
+              <Link
+                to="/login"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+              >
+                Login
+              </Link>
+            )}
           </div>
         </div>
       </div>

src/components/layout/header.tsx

@@ -0,0 +1 @@
+export { default as useAuth } from "@/hooks/use-auth";

src/hooks/index.ts

@@ -0,0 +1,9 @@
+import { useAuthStore } from "@/store";
+
+const useAuth = () => {
+  const authState = useAuthStore();
+  // We can add any additional logic here if needed
+  return { ...authState };
+};
+
+export default useAuth;

src/hooks/use-auth.ts

@@ -1,9 +1,8 @@
-import type { RouteGuard, RouteMode } from "@/models/route-type";
-import { getCurrentUser, hasPermission } from "@/services/auth-service";
-
+import type { RouteGuard, RouteMode } from "@/types/route-type";
 import type { ComponentType } from "react";
 import { Navigate } from "react-router";
 import { ROUTE_CONSTANTS } from "../constants";
+import { useAuth } from "@/hooks";
 
 type GuardOptions = {
   redirectPath?: string;
@@ -18,10 +17,10 @@ const withGuards = <P extends object>(
   const { mode = "private", redirectPath } = options;
 
   const GuardedRouteComponent = (props: P) => {
-    const user = getCurrentUser();
+    const { isAuthenticated, hasPermission } = useAuth();
 
     if (mode === "private") {
-      if (!user) {
+      if (!isAuthenticated) {
         return <Navigate to={ROUTE_CONSTANTS.LOGIN} />;
       }
 
@@ -30,7 +29,7 @@ const withGuards = <P extends object>(
       }
     }
 
-    if (mode === "auth" && user) {
+    if (mode === "auth" && isAuthenticated) {
       return <Navigate to={redirectPath || "/"} />;
     }
 

src/lib/utils/with-guards.tsx

@@ -1,13 +1,15 @@
 import MetaData from "@/components/meta-data";
 import { Button } from "@/components/ui/button";
-import { logout } from "@/services/api/auth-api";
-import { getCurrentUser } from "@/services/auth-service";
+import { useAuth } from "@/hooks";
 import { Link, useNavigate } from "react-router";
 
 const HomePage = () => {
-  const user = getCurrentUser();
+  const { user, logout } = useAuth();
   const navigate = useNavigate();
-  // console.log(user);
+
+  const handleLogout = () => {
+    logout(navigate);
+  };
   return (
     <>
       <MetaData />
@@ -32,7 +34,7 @@ const HomePage = () => {
             </Link>
 
             <Button
-              onClick={() => logout(navigate)}
+              onClick={handleLogout}
               variant="destructive"
               className="mt-4"
             >

src/pages/home/home-page.tsx

@@ -11,9 +11,11 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { login } from "@/services/api/auth-api";
 import { useNavigate } from "react-router";
 import { ROUTE_CONSTANTS } from "@/lib/constants";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useAuth } from "@/hooks";
 
 const loginSchema = z.object({
   email: z.string().email("Invalid email"),
@@ -24,6 +26,9 @@ type LoginSchema = z.infer<typeof loginSchema>;
 
 export function LoginForm() {
   const navigate = useNavigate();
+  const { login, isLoading } = useAuth();
+  const [error, setError] = useState<string | null>(null);
+
   const form = useForm<LoginSchema>({
     resolver: zodResolver(loginSchema),
     defaultValues: {
@@ -32,13 +37,22 @@ export function LoginForm() {
     },
   });
 
-  const onSubmit = (values: LoginSchema) => {
-    console.log("Login values:", values);
-    login(values.email, values.password)
-      .then(() => {
+  const onSubmit = async (values: LoginSchema) => {
+    setError(null);
+    try {
+      const result = await login(values.email, values.password);
+      if (result.success) {
+        toast.success("Login successful");
         navigate(ROUTE_CONSTANTS.HOME);
-      })
-      .catch(() => {});
+      } else {
+        setError(result.message || "Invalid credentials");
+        toast.error(result.message || "Login failed");
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Login failed";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    }
   };
 
   // Helper function to autofill and submit
@@ -82,22 +96,26 @@ export function LoginForm() {
           )}
         />
 
-        <Button type="submit" className="w-full">
-          Login
+        {error && <div className="text-red-500 text-sm">{error}</div>}
+
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? "Logging in..." : "Login"}
         </Button>
 
         <div className="flex justify-between mt-4">
           <Button
             type="button"
             variant="outline"
             onClick={() => loginAs("user@gmail.com", "password")}
+            disabled={isLoading}
           >
             Login as User
           </Button>
           <Button
             type="button"
             variant="outline"
             onClick={() => loginAs("admin@gmail.com", "password")}
+            disabled={isLoading}
           >
             Login as Admin
           </Button>

src/pages/login/components/login-form.tsx

@@ -1,6 +1,6 @@
 import LOCAL_STORAGE_CONSTANTS from "@/lib/constants/local-storage-constants";
 import httpService from "../http-service";
-import type { User } from "@/models/user-type";
+import type { User } from "@/types/user-type";
 import { ROUTE_CONSTANTS } from "@/lib/constants";
 
 export const login = async (email: string, password: string) => {

src/services/api/auth-api.ts

@@ -4,7 +4,7 @@ import type {
   User,
   UserRole,
   UserScope,
-} from "@/models/user-type";
+} from "@/types/user-type";
 import { jwtDecode } from "jwt-decode";
 
 /**