add persistent store for auth

Author: Kurtyjlee

peerprep-fe/src/app/signin/page.tsx

@@ -9,12 +9,14 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { axiosUserClient } from '@/network/axiosClient';
 import { login } from '@/lib/auth';
 import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/state/useAuthStore';
 
 export default function LoginForm() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const router = useRouter();
+  const setAuth = useAuthStore((state) => state.setAuth);
 
   // handle login here
   const handleLogin = async (e: React.FormEvent) => {
@@ -31,6 +33,7 @@ export default function LoginForm() {
       const token = data.accessToken;
       const res = await login(token);
       if (res) {
+        setAuth(true, token);
         router.push('/');
         return;
       }

peerprep-fe/src/components/navbar/Navbar.tsx

@@ -10,15 +10,15 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/state/useAuthStore';
 
 export default function Navbar() {
-  const router = useRouter();
+  const { isAuth, clearAuth } = useAuthStore();
 
   const handleLogout = async () => {
     const res = await logout();
     if (res) {
-      router.push('/signin');
+      clearAuth();
       return;
     }
   };
@@ -36,7 +36,7 @@ export default function Navbar() {
           <Link href="/match" className="text-gray-300 hover:text-white">
             Match
           </Link>
-          {true ? (
+          {isAuth ? (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button

peerprep-fe/src/state/useAuthStore.ts

@@ -0,0 +1,27 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+// Define the store interface
+interface AuthState {
+  isAuth: boolean;
+  token: string | null;
+  setAuth: (isAuth: boolean, token: string | null) => void;
+  clearAuth: () => void;
+}
+
+// Create the persistent store with JSON storage
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      isAuth: false,
+      token: null,
+      setAuth: (isAuth: boolean, token: string | null) =>
+        set({ isAuth, token }),
+      clearAuth: () => set({ isAuth: false, token: null }),
+    }),
+    {
+      name: 'auth-storage',
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+);