feat(lst): added in basic authentication

apps/frontend/package.json

@@ -13,6 +13,7 @@
     "@antfu/ni": "^23.3.1",
     "@radix-ui/react-slot": "^1.1.2",
     "@tailwindcss/vite": "^4.0.6",
+    "@tanstack/react-query": "^5.66.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",
@@ -21,7 +22,8 @@
     "shadcn": "^2.4.0-canary.6",
     "tailwind-merge": "^3.0.1",
     "tailwindcss": "^4.0.6",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",

apps/frontend/src/App.tsx

@@ -1,13 +1,24 @@
+import LoginForm from "./components/LoginForm";
+import {useSession} from "./lib/hooks/useSession";
 import "./styles.css";
-import { funnyFunction } from "@shared/lib";
 
 function App() {
-  funnyFunction();
-  return (
-    <>
-      <p>lstv2</p>
-    </>
-  );
+    const {session, status} = useSession();
+
+    if (!session || status === "error") {
+        return (
+            <p>
+                no session please login <LoginForm />
+            </p>
+        );
+    }
+
+    return (
+        <>
+            <p>Logged in user: {session.user.username}</p>
+            <p>Status: {JSON.stringify(status)}</p>
+        </>
+    );
 }
 
 export default App;

apps/frontend/src/components/LoginForm.tsx

@@ -0,0 +1,72 @@
+import {useState} from "react";
+import {useSessionStore} from "../lib/store/sessionStore";
+import {useQueryClient} from "@tanstack/react-query";
+
+const LoginForm = () => {
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState("");
+    const {setSession} = useSessionStore();
+    const queryClient = useQueryClient();
+
+    const handleLogin = async (e: React.FormEvent) => {
+        e.preventDefault();
+        console.log("Form data", {username, password});
+        try {
+            const response = await fetch("/api/auth/login", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({username, password}),
+            });
+
+            console.log("Response", response);
+
+            // if (!response.ok) {
+            //     throw new Error("Invalid credentials");
+            // }
+
+            const data = await response.json();
+            console.log("Response", data);
+            setSession(data.user, data.token);
+
+            // Refetch the session data to reflect the logged-in state
+            queryClient.invalidateQueries(["session"]);
+
+            setUsername("");
+            setPassword("");
+        } catch (err) {
+            setError("Invalid credentials");
+        }
+    };
+
+    return (
+        <form onSubmit={handleLogin}>
+            <div>
+                <label htmlFor="username">Username</label>
+                <input
+                    id="username"
+                    type="text"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    required
+                />
+            </div>
+            <div>
+                <label htmlFor="password">Password</label>
+                <input
+                    id="password"
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                />
+            </div>
+            {error && <p>{error}</p>}
+            <button type="submit">Login</button>
+        </form>
+    );
+};
+
+export default LoginForm;

apps/frontend/src/components/providers/Providers.tsx

@@ -0,0 +1,7 @@
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+export const SessionProvider = ({children}: {children: React.ReactNode}) => {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+};

apps/frontend/src/lib/hooks/useSession.ts

@@ -0,0 +1,35 @@
+import {useQuery} from "@tanstack/react-query";
+import {useSessionStore} from "../store/sessionStore";
+import {useEffect} from "react";
+
+const fetchSession = async () => {
+    const res = await fetch("/api/auth/session", {credentials: "include"});
+
+    if (!res.ok) {
+        throw new Error("Session not found");
+    }
+
+    return res.json();
+};
+
+export const useSession = () => {
+    const {setSession, clearSession} = useSessionStore();
+    const {data, status, error} = useQuery({
+        queryKey: ["session"],
+        queryFn: fetchSession,
+        staleTime: 5 * 60 * 1000, // 5 mins
+        gcTime: 10 * 60 * 1000, // 10 mins
+        refetchOnWindowFocus: true,
+    });
+
+    useEffect(() => {
+        if (data) {
+            setSession(data.user, data.token);
+        }
+        if (error) {
+            clearSession();
+        }
+    }, [data, error]);
+
+    return {session: data, status, error};
+};

apps/frontend/src/lib/store/sessionStore.ts

@@ -0,0 +1,20 @@
+import {create} from "zustand";
+
+type User = {
+    id: number;
+    username: string;
+};
+
+type SessionState = {
+    user: User | null;
+    token: string | null;
+    setSession: (user: SessionState["user"], token: string) => void;
+    clearSession: () => void;
+};
+
+export const useSessionStore = create<SessionState>((set) => ({
+    user: null,
+    token: null,
+    setSession: (user, token) => set({user, token}),
+    clearSession: () => set({user: null}),
+}));

apps/frontend/src/main.tsx

@@ -1,10 +1,13 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
+import {StrictMode} from "react";
+import {createRoot} from "react-dom/client";
 import "./styles.css";
 import App from "./App.tsx";
+import {SessionProvider} from "./components/providers/Providers.tsx";
 
 createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
+    <StrictMode>
+        <SessionProvider>
+            <App />
+        </SessionProvider>
+    </StrictMode>
 );

apps/frontend/vite.config.ts

@@ -1,23 +1,23 @@
-import { defineConfig } from "vite";
+import {defineConfig} from "vite";
 import react from "@vitejs/plugin-react-swc";
 import tailwindcss from "@tailwindcss/vite";
 import path from "path";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  build: {
-    outDir: path.resolve(__dirname, "../../dist/frontend/dist"),
-    emptyOutDir: true,
-  },
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
+    plugins: [react(), tailwindcss()],
+    // build: {
+    //   outDir: path.resolve(__dirname, "../../dist/frontend/dist"),
+    //   emptyOutDir: true,
+    // },
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src"),
+        },
     },
-  },
-  server: {
-    proxy: {
-      "/api": { target: "http://localhost:4000", changeOrigin: true },
+    server: {
+        proxy: {
+            "/api": {target: "http://localhost:4000", changeOrigin: true},
+        },
     },
-  },
 });