simple auth setup

packages/frontend/src/App.tsx

@@ -1,4 +1,5 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { Auth } from "@/components/auth-provider";
 import { ThemeProvider } from "@/components/theme-provider";
 import Index from "./Index";
 import Test from "./Test";
@@ -6,12 +7,14 @@ import Test from "./Test";
 function App() {
     return (
         <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+            <Auth>
                 <BrowserRouter>
                     <Routes>
                         <Route path="/" element={<Index />} />
                         <Route path="/test" element={<Test />} />
                     </Routes>
                 </BrowserRouter>
+            </Auth>
         </ThemeProvider>
     );
 }

packages/frontend/src/Index.tsx

@@ -1,11 +1,17 @@
-import type { IssueResponse, ProjectResponse } from "@issue/shared";
+import type { IssueResponse, ProjectResponse, UserRecord } from "@issue/shared";
 import { useEffect, useRef, useState } from "react";
 import { IssueDetailPane } from "@/components/issue-detail-pane";
 import { IssuesTable } from "@/components/issues-table";
+import SmallUserDisplay from "@/components/small-user-display";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import SmallUserDisplay from "./components/small-user-display";
+import LogOutButton from "./components/log-out-button";
+import { getAuthHeaders } from "./lib/utils";
 
 function Index() {
+    const serverURL = import.meta.env.SERVER_URL?.trim() || "http://localhost:3000";
+
+    const user = JSON.parse(localStorage.getItem("user") || "{}") as UserRecord;
+
     const [selectedProject, setSelectedProject] = useState<ProjectResponse | null>(null);
     const [projects, setProjects] = useState<ProjectResponse[]>([]);
     const projectsRef = useRef(false);
@@ -14,7 +20,7 @@ function Index() {
         if (projectsRef.current) return;
         projectsRef.current = true;
 
-        fetch("http://localhost:3000/projects/all")
+        fetch(`${serverURL}/projects/all`, { headers: getAuthHeaders() })
             .then((res) => res.json())
             .then((data: ProjectResponse[]) => {
                 setProjects(data);
@@ -27,12 +33,10 @@ function Index() {
     const [selectedIssue, setSelectedIssue] = useState<IssueResponse | null>(null);
     const [issuesData, setIssues] = useState<IssueResponse[]>([]);
 
-    const serverURL = import.meta.env.SERVER_URL?.trim() || "http://localhost:3000";
-
     useEffect(() => {
         if (!selectedProject) return;
 
-        fetch(`${serverURL}/issues/${selectedProject.Project.blob}`)
+        fetch(`${serverURL}/issues/${selectedProject.Project.blob}`, { headers: getAuthHeaders() })
             .then((res) => res.json())
             .then((data: IssueResponse[]) => {
                 setIssues(data);
@@ -45,6 +49,7 @@ function Index() {
     return (
         <main className="w-full h-full p-1">
             {/* header area */}
+            <div className="flex gap-4 items-center justify-between">
                 <div className="flex gap-4 items-center">
                     <Select
                         onValueChange={(value) => {
@@ -84,6 +89,14 @@ function Index() {
                         </div>
                     )}
                 </div>
+
+                {user && (
+                    <div className="flex items-center gap-2">
+                        You:
+                        <SmallUserDisplay user={user} />
+                    </div>
+                )}
+            </div>
             {/* main body */}
             <div className="w-full h-full flex items-start justify-between pt-1 gap-2">
                 {selectedProject && issuesData.length > 0 && (
@@ -109,6 +122,8 @@ function Index() {
                     </>
                 )}
             </div>
+
+            <LogOutButton />
         </main>
     );
 }

packages/frontend/src/components/auth-provider.tsx

@@ -0,0 +1,52 @@
+import type { UserRecord } from "@issue/shared";
+import { useEffect, useRef, useState } from "react";
+import LogInForm from "./login-form";
+
+type AuthProviderProps = {
+    children: React.ReactNode;
+    loggedInDefault?: boolean;
+};
+
+export function Auth({ children }: AuthProviderProps) {
+    const serverURL = import.meta.env.SERVER_URL?.trim() || "http://localhost:3000";
+
+    const [loggedIn, setLoggedIn] = useState<boolean>();
+    const fetched = useRef(false);
+
+    useEffect(() => {
+        if (fetched.current) return;
+        fetched.current = true;
+        const token = localStorage.getItem("token");
+        if (!token) {
+            return setLoggedIn(false);
+        }
+        fetch(`${serverURL}/auth/me`, {
+            headers: { Authorization: `Bearer ${token}` },
+        })
+            .then((res) => res.json())
+            .then((data: UserRecord) => {
+                if (data) {
+                    setLoggedIn(true);
+                    localStorage.setItem("user", JSON.stringify(data));
+                }
+            })
+            .catch((err) => {
+                setLoggedIn(false);
+                localStorage.removeItem("token");
+                localStorage.removeItem("user");
+                console.error("user not logged in:", err);
+            });
+    }, []);
+
+    if (loggedIn) {
+        return <>{children}</>;
+    }
+    if (loggedIn === false)
+        return (
+            <div className="flex flex-col items-center justify-center gap-4 w-full h-[100vh]">
+                <LogInForm />
+            </div>
+        );
+
+    return <>loading...</>;
+}