hook up auth

apps/backend/src/controllers/users.ts

@@ -55,7 +55,7 @@ export async function login(req: Request, res: Response, next: NextFunction) {
 
         req.login(user, (loginErr) => {
           if (loginErr) return next(loginErr);
-          res.json({ id: user.id, email: user.email, name: user.name });
+          res.redirect("/");
         });
       },
     )(req, res, next);

apps/frontend/src/components/header.tsx

@@ -1,10 +1,21 @@
+import { useAuth } from "../providers/AuthProvider";
+
 export default function Header() {
+  const auth = useAuth();
+
   return (
     <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-4">
       <h1 className="font-bold">
         Alex <span className="font-normal text-blue-500">/</span> dev + QA
       </h1>
       <div className="flex gap-3 text-sm sm:text-base">
+        {auth.user !== null ? (
+          <a href="#" onClick={() => auth.logout()}>
+            Log Out
+          </a>
+        ) : (
+          <a href="/login">Log In</a>
+        )}
         <a
           href="https://github.com/azpha"
           target="_blank"

apps/frontend/src/main.tsx

@@ -1,19 +1,27 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { AuthProvider } from "./providers/AuthProvider";
 import "./assets/index.css";
 
 import Home from "./pages/home";
+import LogIn from "./pages/login";
 
 const router = createBrowserRouter([
   {
     path: "/",
     element: <Home />,
   },
+  {
+    path: "/login",
+    element: <LogIn />,
+  },
 ]);
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <RouterProvider router={router} />
+    <AuthProvider>
+      <RouterProvider router={router} />
+    </AuthProvider>
   </StrictMode>,
 );

apps/frontend/src/pages/login.tsx

@@ -0,0 +1,54 @@
+import { useAuth } from "../providers/AuthProvider";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+type InputType = {
+  label: string;
+  forLabel: string;
+  type: "password" | "email";
+};
+const Input = ({ label, forLabel, type }: InputType) => {
+  return (
+    <div>
+      <label htmlFor={forLabel} className="text-sm">
+        {label}
+      </label>
+      <input
+        id={forLabel}
+        type={type}
+        required
+        name={forLabel}
+        className="bg-black text-white rounded-lg border-white block"
+      />
+    </div>
+  );
+};
+
+export default function LogIn() {
+  const auth = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (auth.user) navigate("/");
+  }, [auth.user]);
+
+  return (
+    <div className="flex justify-center items-center min-h-screen bg-black">
+      <div className="bg-zinc-600 text-white rounded-lg p-2">
+        <h1 className="font-semibold">Login</h1>
+        <hr className="my-2" />
+        <form method="post" action="/api/users/login">
+          <div className="space-y-2">
+            <Input type={"email"} forLabel="email" label="Email" />
+            <Input type={"password"} forLabel="password" label="Password" />
+          </div>
+          <div className="my-2">
+            <button className="bg-black p-2 rounded-lg w-full" type="submit">
+              Submit
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/providers/AuthProvider.tsx

@@ -0,0 +1,59 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useMemo,
+  type ReactNode,
+  useEffect,
+} from "react";
+
+interface User {
+  id: number;
+  email: string;
+  name: string;
+}
+interface AuthContextType {
+  user: User | null;
+  refetch: () => void;
+  logout: () => void;
+}
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+
+  const refetch = async () => {
+    const data = await fetch("/api/users/@me", {
+      credentials: "include",
+    });
+
+    if (data.ok) {
+      const refetchedUser = await data.json();
+      setUser(refetchedUser);
+    }
+  };
+
+  const logout = async () => {
+    const res = await fetch("/api/users/logout", {
+      credentials: "include",
+      method: "POST",
+    });
+
+    if (res.ok) {
+      setUser(null);
+    }
+  };
+
+  useEffect(() => {
+    refetch();
+  }, []);
+
+  const value = useMemo(() => ({ user, refetch, logout }), [user]);
+  return <AuthContext value={value}>{children}</AuthContext>;
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used inside of AuthProvider");
+  return ctx;
+}

apps/frontend/vite.config.ts

@@ -5,4 +5,13 @@ import tailwindcss from "@tailwindcss/vite";
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:3000",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
+  },
 });