feat(confidence-engine): establish authenticated product boundary

components/login-form.jsx

@@ -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>
+  );
+}

components/logout-button.jsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createClient } from "@/lib/supabase/browser.js";
+
+export default function LogoutButton() {
+  const [visible, setVisible] = useState(false);
+  const [error, setError] = useState("");
+  const [loggingOut, setLoggingOut] = useState(false);
+
+  useEffect(() => {
+    const client = createClient();
+
+    async function checkSession() {
+      const { data: { session } } = await client.auth.getSession();
+      setVisible(!!session);
+    }
+
+    checkSession();
+
+    const { data: { subscription } } = client.auth.onAuthStateChange((_event, session) => {
+      setVisible(!!session);
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  async function handleLogout() {
+    setLoggingOut(true);
+    setError("");
+    try {
+      const client = createClient();
+      await client.auth.signOut();
+      window.location.href = "/login";
+    } catch (err) {
+      setError("Could not logout. Try again.");
+      setLoggingOut(false);
+    }
+  }
+
+  if (!visible) return null;
+
+  return (
+    <div className="flex items-center gap-2">
+      <button
+        type="button"
+        onClick={handleLogout}
+        disabled={loggingOut}
+        aria-label="Logout"
+        className="rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium text-gray-600 transition hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 disabled:cursor-wait disabled:opacity-60"
+      >
+        {loggingOut ? "Logging out…" : "Logout"}
+      </button>
+      {error && (
+        <p className="text-xs text-red-600" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}