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">
-            <BrowserRouter>
+            <Auth>
-                <Routes>
+                <BrowserRouter>
-                    <Route path="/" element={<Index />} />
+                    <Routes>
-                    <Route path="/test" element={<Test />} />
+                        <Route path="/" element={<Index />} />
-                </Routes>
+                        <Route path="/test" element={<Test />} />
-            </BrowserRouter>
+                    </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,42 +49,51 @@ function Index() {
     return (
         <main className="w-full h-full p-1">
             {/* header area */}
-            <div className="flex gap-4 items-center">
+            <div className="flex gap-4 items-center justify-between">
-                <Select
+                <div className="flex gap-4 items-center">
-                    onValueChange={(value) => {
+                    <Select
-                        if (value === "NONE") {
+                        onValueChange={(value) => {
-                            setSelectedProject(null);
+                            if (value === "NONE") {
-                            setSelectedIssue(null);
+                                setSelectedProject(null);
-                            setIssues([]);
+                                setSelectedIssue(null);
-                        }
+                                setIssues([]);
-                        const project = projects.find((p) => p.Project.id === Number(value));
-                        if (!project) {
-                            // TODO: toast here
-                            console.error(`NO PROJECT FOUND FOR ID: ${value}`);
-                            return;
-                        }
-                        setSelectedProject(project);
-                        setSelectedIssue(null);
-                    }}
-                >
-                    <SelectTrigger className="h-8 lg:flex">
-                        <SelectValue
-                            placeholder={
-                                selectedProject ? `P: ${selectedProject.Project.name}` : "Select Project"
                             }
-                        />
+                            const project = projects.find((p) => p.Project.id === Number(value));
-                    </SelectTrigger>
+                            if (!project) {
-                    <SelectContent side="bottom" position="popper">
+                                // TODO: toast here
-                        {projects.map((project) => (
+                                console.error(`NO PROJECT FOUND FOR ID: ${value}`);
-                            <SelectItem key={project.Project.id} value={`${project.Project.id}`}>
+                                return;
-                                {project.Project.name}
+                            }
-                            </SelectItem>
+                            setSelectedProject(project);
-                        ))}
+                            setSelectedIssue(null);
-                    </SelectContent>
+                        }}
-                </Select>
+                    >
-                {selectedProject && (
+                        <SelectTrigger className="h-8 lg:flex">
+                            <SelectValue
+                                placeholder={
+                                    selectedProject ? `P: ${selectedProject.Project.name}` : "Select Project"
+                                }
+                            />
+                        </SelectTrigger>
+                        <SelectContent side="bottom" position="popper">
+                            {projects.map((project) => (
+                                <SelectItem key={project.Project.id} value={`${project.Project.id}`}>
+                                    {project.Project.name}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                    {selectedProject && (
+                        <div className="flex items-center gap-2">
+                            Owner: <SmallUserDisplay user={selectedProject?.User} />
+                        </div>
+                    )}
+                </div>
+
+                {user && (
                     <div className="flex items-center gap-2">
-                        Owner: <SmallUserDisplay user={selectedProject?.User} />
+                        You:
+                        <SmallUserDisplay user={user} />
                     </div>
                 )}
             </div>
@@ -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...</>;
+}