From 92371806086baee841b85844b6d3223d8370994d Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Wed, 3 Jun 2026 01:19:30 +0000
Subject: [PATCH] Accounts Phase 1c: sign-in UI, magic-link landing, auth store
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Shared reactive auth store (auth.user) + postJSON helper (sends the cookie).
- SignIn modal: email -> "check your inbox" (calm, no password); Google slots in
  here in Phase 2.
- /auth/verify route exchanges the magic-link token for a session, then home.
- Header shows "Sign in" or an account avatar; the You sheet gains "Signed in as
  …" + Sign out (or a Sign in row). Anonymous browsing is unchanged.
---
 frontend/src/lib/api.js                      |  20 +++
 frontend/src/lib/auth.svelte.js              |  35 +++++
 frontend/src/lib/components/Header.svelte    |  19 ++-
 frontend/src/lib/components/SignIn.svelte    | 149 +++++++++++++++++++
 frontend/src/routes/+page.svelte             |  35 ++++-
 frontend/src/routes/auth/verify/+page.svelte |  54 +++++++
 6 files changed, 310 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/lib/auth.svelte.js
 create mode 100644 frontend/src/lib/components/SignIn.svelte
 create mode 100644 frontend/src/routes/auth/verify/+page.svelte

diff --git a/frontend/src/lib/api.js b/frontend/src/lib/api.js
index 5649389..ff5334e 100644
--- a/frontend/src/lib/api.js
+++ b/frontend/src/lib/api.js
@@ -3,3 +3,23 @@ export async function getJSON(url) {
   if (!r.ok) throw new Error((await r.text().catch(() => '')) || r.statusText);
   return r.json();
 }
+
+export async function postJSON(url, body) {
+  const r = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body ?? {}),
+    credentials: 'same-origin', // send/receive the session cookie
+  });
+  if (!r.ok) {
+    let msg = r.statusText;
+    try {
+      const j = await r.json();
+      if (j && j.detail) msg = j.detail;
+    } catch {
+      /* non-JSON error body */
+    }
+    throw new Error(msg);
+  }
+  return r.json();
+}
diff --git a/frontend/src/lib/auth.svelte.js b/frontend/src/lib/auth.svelte.js
new file mode 100644
index 0000000..fdefa6a
--- /dev/null
+++ b/frontend/src/lib/auth.svelte.js
@@ -0,0 +1,35 @@
+// Shared, reactive auth state (Svelte 5 runes in a module). Components read
+// `auth.user` and it stays reactive across the app.
+import { getJSON, postJSON } from './api.js';
+
+export const auth = $state({ user: null, ready: false });
+
+export async function refresh() {
+  try {
+    auth.user = await getJSON('/api/auth/me');
+  } catch {
+    auth.user = null;
+  } finally {
+    auth.ready = true;
+  }
+}
+
+// Request a magic link. Reply is intentionally identical for any address.
+export function startEmail(email) {
+  return postJSON('/api/auth/email/start', { email });
+}
+
+// Exchange a magic-link token for a session (cookie set server-side).
+export async function verifyToken(token) {
+  const res = await postJSON('/api/auth/email/verify', { token });
+  auth.user = res.user;
+  return res;
+}
+
+export async function logout() {
+  try {
+    await postJSON('/api/auth/logout', {});
+  } finally {
+    auth.user = null;
+  }
+}
diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
index b49df73..256c86b 100644
--- a/frontend/src/lib/components/Header.svelte
+++ b/frontend/src/lib/components/Header.svelte
@@ -1,5 +1,6 @@
 <script>
-  let { onBoundaries, onHistory, filtersOn = false } = $props();
+  let { onBoundaries, onHistory, onaccount, user = null, filtersOn = false } = $props();
+  let initial = $derived((user?.display_name || user?.email || '?').trim()[0].toUpperCase());
 </script>
 
 <header class="appbar">
@@ -20,6 +21,13 @@
           stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
         <span>History</span>
       </button>
+      {#if user}
+        <button class="acct" onclick={onaccount} title={user.email} aria-label="Your account">
+          <span class="avatar">{initial}</span>
+        </button>
+      {:else}
+        <button class="signin" onclick={onaccount}>Sign in</button>
+      {/if}
     </nav>
   </div>
 </header>
@@ -49,6 +57,15 @@
   .utils button svg { width: 17px; height: 17px; }
   .utils button:hover { background: var(--accent-soft); color: var(--accent-deep); }
   .utils button.on { color: var(--accent-deep); }
+  .utils .signin { border-color: var(--line); color: var(--accent-deep); }
+  .utils .signin:hover { background: var(--accent-soft); }
+  .acct { padding: 4px; }
+  .avatar {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 30px; height: 30px; border-radius: 999px;
+    background: var(--accent); color: #fff; font-weight: 600; font-size: 0.8rem;
+    font-family: var(--label);
+  }
 
   /* On phones the utilities live in the bottom tab bar ("You") instead. */
   @media (max-width: 720px) {
diff --git a/frontend/src/lib/components/SignIn.svelte b/frontend/src/lib/components/SignIn.svelte
new file mode 100644
index 0000000..fb8cf2f
--- /dev/null
+++ b/frontend/src/lib/components/SignIn.svelte
@@ -0,0 +1,149 @@
+<script>
+  import { startEmail } from '$lib/auth.svelte.js';
+
+  let { onclose } = $props();
+  let email = $state('');
+  let status = $state('idle'); // idle | sending | sent | error
+  let error = $state('');
+
+  async function submit(e) {
+    e.preventDefault();
+    if (!email || status === 'sending') return;
+    status = 'sending';
+    error = '';
+    try {
+      await startEmail(email);
+      status = 'sent';
+    } catch (err) {
+      status = 'error';
+      error = err?.message || 'Something went wrong — try again in a moment.';
+    }
+  }
+</script>
+
+<div class="overlay" onclick={onclose} role="presentation">
+  <div class="sheet rise" role="dialog" aria-modal="true" aria-label="Sign in" onclick={(e) => e.stopPropagation()}>
+    <button class="x" onclick={onclose} aria-label="Close">×</button>
+
+    {#if status === 'sent'}
+      <h2>Check your inbox</h2>
+      <p class="sub">
+        We've sent a one-time sign-in link to <strong>{email}</strong>. It works once and
+        expires in 15 minutes.
+      </p>
+      <button class="primary" onclick={onclose}>Done</button>
+    {:else}
+      <h2>Sign in to Upbeat Bytes</h2>
+      <p class="sub">
+        Save articles and keep your history across devices. We'll email you a one-time
+        link — no password to remember.
+      </p>
+
+      <form onsubmit={submit}>
+        <input
+          type="email"
+          bind:value={email}
+          placeholder="you@example.com"
+          autocomplete="email"
+          required
+        />
+        <button class="primary" type="submit" disabled={status === 'sending'}>
+          {status === 'sending' ? 'Sending…' : 'Email me a link'}
+        </button>
+      </form>
+
+      {#if status === 'error'}<p class="err">{error}</p>{/if}
+      <!-- Phase 2: "Continue with Google" button slots in here -->
+      <p class="fine">No account needed to browse — signing in just saves your stuff.</p>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(10, 22, 38, 0.32);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    z-index: 40;
+  }
+  .sheet {
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    width: 100%;
+    max-width: 400px;
+    padding: 28px 26px 22px;
+    position: relative;
+  }
+  .x {
+    position: absolute;
+    top: 12px;
+    right: 14px;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    line-height: 1;
+    color: var(--muted);
+    cursor: pointer;
+  }
+  h2 {
+    font-size: 1.5rem;
+    margin: 0 0 8px;
+  }
+  .sub {
+    margin: 0 0 18px;
+    color: var(--muted);
+    font-size: 0.95rem;
+  }
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  input {
+    font: inherit;
+    padding: 11px 14px;
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    background: var(--bg);
+    color: var(--ink);
+  }
+  input:focus {
+    outline: none;
+    border-color: var(--accent);
+  }
+  .primary {
+    font: inherit;
+    font-weight: 600;
+    background: var(--accent);
+    color: #fff;
+    border: none;
+    border-radius: 999px;
+    padding: 11px 16px;
+    cursor: pointer;
+    transition: background 0.14s ease;
+  }
+  .primary:hover {
+    background: var(--accent-deep);
+  }
+  .primary:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+  .err {
+    margin: 10px 0 0;
+    color: #9a3b3b;
+    font-size: 0.86rem;
+  }
+  .fine {
+    margin: 16px 0 0;
+    color: var(--muted);
+    font-size: 0.8rem;
+    text-align: center;
+  }
+</style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index b714dd2..a1c43b0 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -7,6 +7,8 @@
   import MoodNav from '$lib/components/MoodNav.svelte';
   import ArticleCard from '$lib/components/ArticleCard.svelte';
   import BoundariesPanel from '$lib/components/BoundariesPanel.svelte';
+  import SignIn from '$lib/components/SignIn.svelte';
+  import { auth, refresh as refreshAuth, logout as authLogout } from '$lib/auth.svelte.js';
 
   let moods = $state([]);
   let topics = $state([]);
@@ -19,6 +21,17 @@
   let showBoundaries = $state(false);
   let showHistory = $state(false);
   let showYou = $state(false); // mobile "You" sheet
+  let showSignIn = $state(false);
+
+  function openAccount() {
+    showYou = false;
+    if (auth.user) showYou = true; // account lives in the You sheet
+    else showSignIn = true;
+  }
+  async function signOut() {
+    await authLogout();
+    showYou = false;
+  }
   let loading = $state(true);
   let error = $state('');
 
@@ -227,6 +240,7 @@
     seenIds = new Set(P.loadJSON(SEEN_KEY, []));
     dismissed = new Set(P.loadJSON(DISMISSED_KEY, []));
     history = P.loadJSON(HISTORY_KEY, []);
+    refreshAuth(); // resolve any existing session (non-blocking)
     try {
       moods = await getJSON('/api/moods');
       topics = (await getJSON('/api/categories')).topics;
@@ -242,7 +256,15 @@
   });
 </script>
 
-<Header onBoundaries={() => (showBoundaries = !showBoundaries)} onHistory={() => (showHistory = !showHistory)} {filtersOn} />
+<Header
+  onBoundaries={() => (showBoundaries = !showBoundaries)}
+  onHistory={() => (showHistory = !showHistory)}
+  onaccount={openAccount}
+  user={auth.user}
+  {filtersOn}
+/>
+
+{#if showSignIn}<SignIn onclose={() => (showSignIn = false)} />{/if}
 
 <main class="container">
   {#if moods.length}
@@ -278,12 +300,22 @@
   {#if showYou}
     <section class="panel rise youmenu">
       <div class="phead"><h2>You</h2><button class="close" onclick={() => (showYou = false)}>done</button></div>
+      {#if auth.user}
+        <div class="acctline">Signed in as <strong>{auth.user.email}</strong></div>
+      {/if}
       <button class="yourow" onclick={() => { showYou = false; showBoundaries = true; }}>
         <span>Your boundaries</span>{#if filtersOn}<span class="dot">on</span>{/if}
       </button>
       <button class="yourow" onclick={() => { showYou = false; showHistory = true; }}>
         <span>What you've seen</span>{#if history.length}<span class="dot">{history.length}</span>{/if}
       </button>
+      {#if auth.user}
+        <button class="yourow" onclick={signOut}><span>Sign out</span></button>
+      {:else}
+        <button class="yourow" onclick={() => { showYou = false; showSignIn = true; }}>
+          <span>Sign in</span><span class="dot">save & sync</span>
+        </button>
+      {/if}
     </section>
   {/if}
 
@@ -413,6 +445,7 @@
   }
   .youmenu .yourow:last-child { border-bottom: none; }
   .youmenu .dot { background: var(--accent-soft); color: var(--accent-deep); border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; }
+  .youmenu .acctline { color: var(--muted); font-size: 0.85rem; padding: 4px 2px 10px; border-bottom: 1px solid var(--line); }
 
   .notice {
     text-align: center; color: var(--accent-deep); background: var(--accent-soft);
diff --git a/frontend/src/routes/auth/verify/+page.svelte b/frontend/src/routes/auth/verify/+page.svelte
new file mode 100644
index 0000000..b83bb5c
--- /dev/null
+++ b/frontend/src/routes/auth/verify/+page.svelte
@@ -0,0 +1,54 @@
+<script>
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { verifyToken } from '$lib/auth.svelte.js';
+
+  let status = $state('verifying'); // verifying | error
+  let error = $state('');
+
+  onMount(async () => {
+    const token = new URLSearchParams(window.location.search).get('token');
+    if (!token) {
+      status = 'error';
+      error = 'This sign-in link is missing its token.';
+      return;
+    }
+    try {
+      await verifyToken(token);
+      goto('/', { replaceState: true }); // signed in — back home
+    } catch (e) {
+      status = 'error';
+      error = e?.message || 'This sign-in link is invalid or has expired.';
+    }
+  });
+</script>
+
+<main class="container verify">
+  {#if status === 'verifying'}
+    <p class="muted">Signing you in…</p>
+  {:else}
+    <h1>Couldn't sign you in</h1>
+    <p class="muted">{error}</p>
+    <a class="back" href="/">← Back to Upbeat Bytes</a>
+  {/if}
+</main>
+
+<style>
+  .verify {
+    min-height: 60vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 12px;
+    padding: 60px 20px;
+  }
+  h1 {
+    font-size: 1.8rem;
+  }
+  .back {
+    color: var(--accent-deep);
+    text-decoration: underline;
+  }
+</style>