feat(confidence-engine): establish authenticated product boundary

2026-09-08 16:30:07 +01:00
parent 1c17452bee
commit 30bf44f2e5
22 changed files with 487 additions and 8 deletions
@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { createClient, magicLinkRedirectTo } from "@/lib/supabase/browser.js";
+
+export default function LoginForm() {
+  const [email, setEmail] = useState("");
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState("");
+
+  async function sendMagicLink(event) {
+    event.preventDefault();
+    setStatus("pending");
+    setError("");
+    const { error: signInError } = await createClient().auth.signInWithOtp({
+      email,
+      options: { emailRedirectTo: magicLinkRedirectTo(window.location.origin) },
+    });
+    if (signInError) {
+      setError("We could not send a magic link. Please try again.");
+      setStatus("idle");
+      return;
+    }
+    setStatus("sent");
+  }
+
+  return (
+    <main className="mx-auto flex min-h-[calc(100vh-57px)] max-w-[640px] items-center px-6 py-16">
+      <section className="w-full rounded-xl border-[2.5px] border-teal-300/70 bg-gradient-to-b from-teal-50/60 to-white px-8 py-9 shadow-sm">
+        <p className="mb-3 text-[11px] font-bold uppercase tracking-[.18em] text-teal-700/70">Welcome</p>
+        <h1 className="text-3xl font-bold tracking-tight">Confidence Engine</h1>
+        <p className="mt-3 text-sm leading-relaxed text-gray-600">Enter your email and we will send you a secure link to continue.</p>
+        <form className="mt-7 space-y-4" onSubmit={sendMagicLink}>
+          <label className="block text-sm font-medium text-gray-700" htmlFor="email">Email address</label>
+          <input id="email" type="email" autoComplete="email" required value={email} onChange={(event) => setEmail(event.target.value)} className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-teal-600 focus:outline-none focus:ring-2 focus:ring-teal-400" />
+          <button type="submit" disabled={status === "pending"} className="rounded-lg bg-teal-700 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-teal-600 disabled:cursor-wait disabled:opacity-60">
+            {status === "pending" ? "Sending magic link…" : "Send magic link"}
+          </button>
+        </form>
+        {status === "sent" && <p className="mt-5 text-sm text-green-700" role="status">Check your email for your magic link.</p>}
+        {error && <p className="mt-5 text-sm text-red-700" role="alert">{error}</p>}
+      </section>
+    </main>
+  );
+}