completed magic link

.devcontainer/docker-compose.yml

@@ -9,3 +9,5 @@ services:
     command: sleep infinity
     volumes:
       - ..:/workspaces/monorepo
+    extra_hosts:
+      - "host.docker.internal:host-gateway"

stripe_to_invoice/app/login/page.tsx

@@ -0,0 +1,102 @@
+// app/login/page.tsx
+"use client";
+
+import { useState } from "react";
+
+type Step = "email" | "sent";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [step, setStep] = useState<Step>("email");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function submit() {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/auth/request-link", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      });
+
+      if (!res.ok) {
+        throw new Error("Failed to send login link");
+      }
+
+      setStep("sent");
+    } catch (e) {
+      setError("Something went wrong. Try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main className="max-w-md mx-auto p-8 space-y-8">
+      <Progress step={step} />
+
+      {step === "email" && (
+        <>
+          <h1 className="text-xl font-semibold">Log in</h1>
+
+          <input
+            type="email"
+            placeholder="you@company.com"
+            className="w-full border rounded p-2"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            disabled={loading}
+          />
+
+          <button
+            onClick={submit}
+            disabled={loading || !email}
+            className="w-full bg-black text-white py-2 rounded"
+          >
+            {loading ? "Sending…" : "Send login link"}
+          </button>
+
+          {error && (
+            <p className="text-sm text-red-600">{error}</p>
+          )}
+        </>
+      )}
+
+      {step === "sent" && (
+        <>
+          <h1 className="text-xl font-semibold">Check your email</h1>
+
+          <p className="text-gray-600">
+            We sent a login link to <strong>{email}</strong>.
+          </p>
+
+          <p className="text-gray-500 text-sm">
+            The link expires in 15 minutes.
+          </p>
+        </>
+      )}
+    </main>
+  );
+}
+
+function Progress({ step }: { step: Step }) {
+  const percent = step === "email" ? 50 : 100;
+
+  return (
+    <div>
+      <div className="h-2 bg-gray-200 rounded">
+        <div
+          className="h-2 bg-black rounded transition-all"
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+
+      <p className="text-sm text-gray-600 mt-2">
+        {step === "email" ? "Enter email" : "Check inbox"}
+      </p>
+    </div>
+  );
+}

stripe_to_invoice/package.json

@@ -9,7 +9,10 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@aws-sdk/client-ses": "^3.958.0",
+    "drizzle-orm": "^0.45.1",
     "next": "16.0.10",
+    "pg": "^8.16.3",
     "react": "19.2.1",
     "react-dom": "19.2.1"
   },
@@ -18,6 +21,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "drizzle-kit": "^0.31.8",
     "eslint": "^9",
     "eslint-config-next": "16.0.10",
     "tailwindcss": "^4",