From 5b3d816a77d0e6e91504410e0e4b38ad005cfdb7 Mon Sep 17 00:00:00 2001
From: Mohammad Akash <mhakash160@gmail.com>
Date: Sun, 25 Oct 2026 11:31:09 +0600
Subject: [PATCH 1/4] feat: add login provider options

---
 app/connect/page.tsx | 345 ++++++++++++++++++++++++++++++++++++-------
 src/oidc.ts          |   6 +-
 test/oidc.test.ts    |  25 +++-
 3 files changed, 322 insertions(+), 54 deletions(-)

diff --git a/app/connect/page.tsx b/app/connect/page.tsx
index 13aeaa9..89a4331 100644
--- a/app/connect/page.tsx
+++ b/app/connect/page.tsx
@@ -1,38 +1,50 @@
 "use client";
 
-import { useEffect, useState, type FormEvent } from "react";
-import { api, DEMO_ACCOUNT_EMAIL, isDemoSession, oidcConfig, saveTokens, session, startDemoSession } from "@/src/api/client";
-import type { ClientConfig } from "@/src/api/types";
+import { type FormEvent, useCallback, useEffect, useState } from "react";
+import {
+  api,
+  DEMO_ACCOUNT_EMAIL,
+  isDemoSession,
+  oidcConfig,
+  saveTokens,
+  session,
+  startDemoSession,
+} from "@/src/api/client";
 import type { DevToken } from "@/src/api/generated";
+import type { ClientConfig } from "@/src/api/types";
 import * as oidc from "@/src/oidc";
 
 export default function ConnectPage() {
   const [config, setConfig] = useState<ClientConfig | null>(null);
   const [email, setEmail] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [phoneFormOpen, setPhoneFormOpen] = useState(false);
   const [error, setError] = useState("");
   const [ready, setReady] = useState(false);
 
-  const destination = () => {
+  const destination = useCallback(() => {
     const requested = new URLSearchParams(window.location.search).get("returnTo");
     return requested?.startsWith("/") && !requested.startsWith("//") ? requested : "/";
-  };
+  }, []);
 
   useEffect(() => {
-    void api<ClientConfig>("/v1/config").then(async (clientConfig) => {
-      session.config = clientConfig;
-      setConfig(clientConfig);
-      const oidcSettings = oidcConfig();
-      if (oidcSettings) {
-        const tokens = await oidc.finish(oidcSettings);
-        if (tokens) saveTokens(tokens);
-      }
-      if (session.token || isDemoSession()) window.location.assign(destination());
-      setReady(true);
-    }).catch(() => {
-      setError(`Couldn't reach the API. You can still preview the app with ${DEMO_ACCOUNT_EMAIL}.`);
-      setReady(true);
-    });
-  }, []);
+    void api<ClientConfig>("/v1/config")
+      .then(async (clientConfig) => {
+        session.config = clientConfig;
+        setConfig(clientConfig);
+        const oidcSettings = oidcConfig();
+        if (oidcSettings) {
+          const tokens = await oidc.finish(oidcSettings);
+          if (tokens) saveTokens(tokens);
+        }
+        if (session.token || isDemoSession()) window.location.assign(destination());
+        setReady(true);
+      })
+      .catch(() => {
+        setError(`Couldn't reach the API. You can still preview the app with ${DEMO_ACCOUNT_EMAIL}.`);
+        setReady(true);
+      });
+  }, [destination]);
 
   const signInDev = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -52,7 +64,7 @@ export default function ConnectPage() {
         body: JSON.stringify({ email: email.trim() }),
       });
       if (!response.ok) throw new Error("Couldn't sign in. Check the email address.");
-      const token = await response.json() as DevToken;
+      const token = (await response.json()) as DevToken;
       saveTokens({ access_token: token.access_token, expires_in: 12 * 3600 });
       window.location.assign(destination());
     } catch (cause) {
@@ -60,51 +72,280 @@ export default function ConnectPage() {
     }
   };
 
-  const login = (prompt?: string) => {
+  const login = (prompt?: string, loginHint?: string) => {
     const settings = oidcConfig();
-    if (settings) void oidc.login(settings, { prompt }).catch(() => setError("Couldn't reach the sign-in page. Try again."));
+    if (settings)
+      void oidc
+        .login(settings, { prompt, loginHint })
+        .catch(() => setError("Couldn't reach the sign-in page. Try again."));
+  };
+
+  const loginWithProvider = (provider: "Google" | "Microsoft") => {
+    if (!oidcConfig()) {
+      setError(`${provider} sign-in will be available when an identity provider is configured.`);
+      return;
+    }
+    setError("");
+    login();
+  };
+
+  const signInWithPhone = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!oidcConfig()) {
+      setError("Phone sign-in will be available when an identity provider is configured.");
+      return;
+    }
+    setError("");
+    login(undefined, phoneNumber.trim());
   };
 
   return (
-    <main className="relative grid min-h-screen place-items-center overflow-hidden px-4 py-10">
-      <div aria-hidden="true" className="pointer-events-none absolute -top-36 left-1/2 h-80 w-[34rem] -translate-x-1/2 rounded-full bg-ledger/10 blur-3xl" />
-      <section className="relative w-full max-w-md overflow-hidden rounded-2xl border border-line bg-card p-6 shadow-[0_28px_90px_rgba(0,0,0,0.4)] sm:p-8">
-        <div className="flex items-center gap-3">
-          <span className="grid h-11 w-11 place-items-center rounded-2xl bg-[var(--brand-tile)] text-lg font-bold text-[var(--brand-ink)]">S</span>
-          <div>
-            <p className="font-semibold tracking-tight text-ink">ScribbleScan</p>
-            <p className="text-xs text-quiet">Personal finance, in focus</p>
-          </div>
+    <main className="relative flex min-h-screen flex-col overflow-hidden px-5 py-6 sm:px-8 sm:py-8">
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute left-1/2 top-12 h-72 w-[42rem] max-w-[90vw] -translate-x-1/2 rounded-full bg-ledger/[0.07] blur-3xl"
+      />
+      <header className="relative flex items-center gap-3">
+        <span className="grid h-9 w-9 place-items-center rounded-xl bg-[var(--brand-tile)] text-base font-bold text-[var(--brand-ink)]">
+          S
+        </span>
+        <span className="text-base font-semibold tracking-tight text-ink">ScribbleScan</span>
+      </header>
+
+      <section className="relative mx-auto flex w-full max-w-[27.5rem] flex-1 flex-col justify-center py-14 text-center">
+        <p className="text-sm font-medium text-ledger">Receipts and spending, together</p>
+        <h1 className="mt-3 text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
+          Sign in to ScribbleScan
+        </h1>
+        <p className="mx-auto mt-3 max-w-sm text-base leading-7 text-quiet">
+          Keep your purchases, budgets, and spaces in one clear view.
+        </p>
+        <div aria-hidden="true" className="mx-auto mt-7 flex h-px w-28 overflow-hidden bg-line">
+          <span className="w-9 bg-ledger" />
         </div>
-        <p className="mt-8 text-xs font-bold uppercase tracking-[0.18em] text-ledger">Welcome back</p>
-        <h1 className="mt-2 text-3xl font-semibold tracking-tight text-ink">Sign in to continue</h1>
-        <p className="mt-2 leading-6 text-quiet">Your budgets, receipts, and spaces are waiting.</p>
 
-        {!ready ? <p className="mt-6 text-sm text-quiet">Checking the connection…</p> : null}
+        {!ready ? (
+          <p role="status" className="mt-8 text-sm text-quiet">
+            Checking the connection…
+          </p>
+        ) : null}
         {ready && (config?.auth === "dev" || config === null) ? (
-          <form onSubmit={(event) => void signInDev(event)} className="mt-6 space-y-4">
-            <div>
-              <label htmlFor="email" className="text-sm font-semibold text-ink">Email</label>
-              <input id="email" type="email" required autoComplete="email" value={email} onChange={(event) => setEmail(event.target.value)} placeholder={DEMO_ACCOUNT_EMAIL} className="mt-1.5 w-full rounded-lg border border-line bg-paper px-3 py-2.5 outline-none focus:border-ledger" />
-              <p className="mt-1.5 text-xs text-quiet">Sample account: {DEMO_ACCOUNT_EMAIL}</p>
-            </div>
-            <button type="submit" className="w-full rounded-lg bg-ledger-button px-5 py-2.5 font-semibold text-white transition hover:bg-[#0a5948]">Sign in</button>
+          <form onSubmit={(event) => void signInDev(event)} className="mt-8 space-y-3 text-left">
+            <label htmlFor="email" className="sr-only">
+              Email address
+            </label>
+            <input
+              id="email"
+              type="email"
+              required
+              autoComplete="email"
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+              placeholder="Email address"
+              className="w-full rounded-full border border-line bg-card px-5 py-3 text-base text-ink outline-none transition placeholder:text-quiet focus:border-ledger"
+            />
+            <button
+              type="submit"
+              className="w-full rounded-full bg-ledger-button px-5 py-3 font-semibold text-white transition hover:bg-[#0a5948]"
+            >
+              Continue
+            </button>
+            <p className="px-1 text-center text-sm text-quiet">
+              For the sample account, use {DEMO_ACCOUNT_EMAIL}.
+            </p>
           </form>
         ) : null}
         {ready && config?.auth === "oidc" ? (
-          <div className="mt-6 space-y-3">
-            <button type="button" onClick={() => login()} className="w-full rounded-lg bg-ledger-button px-5 py-2.5 font-semibold text-white transition hover:bg-[#0a5948]">Sign in</button>
-            <button type="button" onClick={() => login("create")} className="w-full rounded-lg border border-line px-5 py-2.5 font-semibold text-ink hover:bg-paper">Create an account</button>
+          <div className="mt-8 space-y-3">
+            <button
+              type="button"
+              onClick={() => login()}
+              className="w-full rounded-full bg-ledger-button px-5 py-3 font-semibold text-white transition hover:bg-[#0a5948]"
+            >
+              Continue
+            </button>
+            <button
+              type="button"
+              onClick={() => login("create")}
+              className="w-full rounded-full border border-line bg-card px-5 py-3 font-semibold text-ink transition hover:border-ledger hover:bg-raised"
+            >
+              Create an account
+            </button>
           </div>
         ) : null}
-        <div className="mt-6 rounded-xl border border-line bg-paper/60 p-3">
-          <p className="text-xs text-quiet">Want to explore the app first?</p>
-          <button type="button" onClick={() => { startDemoSession(DEMO_ACCOUNT_EMAIL); window.location.assign(destination()); }} className="mt-2 w-full rounded-lg border border-line px-4 py-2.5 text-sm font-semibold text-ink hover:bg-paper">Preview sample account · {DEMO_ACCOUNT_EMAIL}</button>
+
+        {ready ? (
+          <>
+            <div className="my-6 flex items-center gap-4 text-xs font-medium uppercase tracking-[0.14em] text-quiet">
+              <span className="h-px flex-1 bg-line" />
+              <span>or continue with</span>
+              <span className="h-px flex-1 bg-line" />
+            </div>
+            <div className="space-y-3">
+              <button
+                type="button"
+                onClick={() => loginWithProvider("Google")}
+                className="flex w-full items-center justify-center gap-3 rounded-full border border-line bg-card px-5 py-3 font-medium text-ink transition hover:border-ledger hover:bg-raised"
+              >
+                <GoogleMark />
+                Continue with Google
+              </button>
+              <button
+                type="button"
+                onClick={() => loginWithProvider("Microsoft")}
+                className="flex w-full items-center justify-center gap-3 rounded-full border border-line bg-card px-5 py-3 font-medium text-ink transition hover:border-ledger hover:bg-raised"
+              >
+                <MicrosoftMark />
+                Continue with Microsoft
+              </button>
+              <button
+                type="button"
+                aria-expanded={phoneFormOpen}
+                aria-controls="phone-sign-in-form"
+                onClick={() => {
+                  setPhoneFormOpen((open) => !open);
+                  setError("");
+                }}
+                className="flex w-full items-center justify-center gap-3 rounded-full border border-line bg-card px-5 py-3 font-medium text-ink transition hover:border-ledger hover:bg-raised"
+              >
+                <PhoneMark />
+                Continue with phone
+              </button>
+              {phoneFormOpen ? (
+                <form id="phone-sign-in-form" onSubmit={signInWithPhone} className="space-y-3 pt-1 text-left">
+                  <label htmlFor="phone-number" className="sr-only">
+                    Phone number
+                  </label>
+                  <input
+                    id="phone-number"
+                    type="tel"
+                    required
+                    autoComplete="tel"
+                    value={phoneNumber}
+                    onChange={(event) => setPhoneNumber(event.target.value)}
+                    placeholder="Phone number, including country code"
+                    className="w-full rounded-full border border-line bg-card px-5 py-3 text-base text-ink outline-none transition placeholder:text-quiet focus:border-ledger"
+                  />
+                  <button
+                    type="submit"
+                    className="w-full rounded-full bg-ledger-button px-5 py-3 font-semibold text-white transition hover:bg-[#0a5948]"
+                  >
+                    Continue with phone
+                  </button>
+                </form>
+              ) : null}
+            </div>
+            {config?.auth === "oidc" ? (
+              <p className="mt-3 text-xs leading-5 text-quiet">
+                Google and Microsoft use your configured identity provider. Phone sign-in passes your number
+                as a sign-in hint.
+              </p>
+            ) : null}
+          </>
+        ) : null}
+
+        <div className="my-6 flex items-center gap-4 text-xs font-medium uppercase tracking-[0.14em] text-quiet">
+          <span className="h-px flex-1 bg-line" />
+          <span>or</span>
+          <span className="h-px flex-1 bg-line" />
         </div>
-        {error ? <p role="alert" className="mt-4 rounded-lg bg-amber-soft px-3 py-2.5 text-sm text-amber">{error}</p> : null}
-        {ready && !config && !error ? <p role="alert" className="mt-4 text-sm text-quiet">Sign in is unavailable while the API is offline.</p> : null}
-        <p className="mt-6 border-t border-line pt-4 text-xs leading-5 text-quiet">Development sign-in is for local use only. Production sign-in uses your configured identity provider.</p>
+        <button
+          type="button"
+          onClick={() => {
+            startDemoSession(DEMO_ACCOUNT_EMAIL);
+            window.location.assign(destination());
+          }}
+          className="w-full rounded-full border border-line bg-transparent px-5 py-3 font-medium text-ink transition hover:border-ledger hover:bg-card"
+        >
+          Preview the sample account
+        </button>
+
+        {error ? (
+          <p
+            role="alert"
+            className="mt-4 rounded-xl border border-amber/20 bg-amber-soft px-4 py-3 text-left text-sm text-amber"
+          >
+            {error}
+          </p>
+        ) : null}
+        {ready && !config && !error ? (
+          <p role="alert" className="mt-4 text-sm text-quiet">
+            Sign in is unavailable while the API is offline.
+          </p>
+        ) : null}
+        <p className="mt-5 text-xs leading-5 text-quiet">
+          Development sign-in is for local use. Production sign-in uses your configured identity provider.
+        </p>
+      </section>
+
+      <section
+        aria-label="ScribbleScan features"
+        className="relative mx-auto grid w-full max-w-5xl gap-3 sm:grid-cols-3"
+      >
+        <article className="rounded-xl border border-line bg-card/70 p-4 sm:p-5">
+          <p className="text-sm font-semibold text-ink">Receipts</p>
+          <p className="mt-1 text-sm leading-5 text-quiet">
+            Capture purchases and review the details read from each receipt.
+          </p>
+        </article>
+        <article className="rounded-xl border border-line bg-card/70 p-4 sm:p-5">
+          <p className="text-sm font-semibold text-ink">Budgets</p>
+          <p className="mt-1 text-sm leading-5 text-quiet">
+            Set monthly limits and follow spending by category.
+          </p>
+        </article>
+        <article className="rounded-xl border border-line bg-card/70 p-4 sm:p-5">
+          <p className="text-sm font-semibold text-ink">Spaces</p>
+          <p className="mt-1 text-sm leading-5 text-quiet">
+            Keep personal and business records in separate spaces.
+          </p>
+        </article>
       </section>
     </main>
   );
 }
+
+function GoogleMark() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 18 18" className="h-[18px] w-[18px]">
+      <path
+        fill="#4285F4"
+        d="M17.64 9.2c0-.63-.06-1.24-.16-1.82H9v3.44h4.84a4.14 4.14 0 0 1-1.8 2.72v2.23h2.92c1.7-1.57 2.68-3.88 2.68-6.57Z"
+      />
+      <path
+        fill="#34A853"
+        d="M9 18c2.43 0 4.47-.8 5.96-2.23l-2.92-2.23c-.8.54-1.83.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.95v2.3A9 9 0 0 0 9 18Z"
+      />
+      <path fill="#FBBC05" d="M3.97 10.7a5.4 5.4 0 0 1 0-3.4V5H.95a9 9 0 0 0 0 8l3.02-2.3Z" />
+      <path
+        fill="#EA4335"
+        d="M9 3.58c1.32 0 2.5.45 3.43 1.34l2.58-2.58A8.63 8.63 0 0 0 9 0a9 9 0 0 0-8.05 5l3.02 2.3C4.68 5.16 6.66 3.58 9 3.58Z"
+      />
+    </svg>
+  );
+}
+
+function MicrosoftMark() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 18 18" className="h-[18px] w-[18px]">
+      <path fill="#F25022" d="M1 1h7.2v7.2H1z" />
+      <path fill="#7FBA00" d="M9.8 1H17v7.2H9.8z" />
+      <path fill="#00A4EF" d="M1 9.8h7.2V17H1z" />
+      <path fill="#FFB900" d="M9.8 9.8H17V17H9.8z" />
+    </svg>
+  );
+}
+
+function PhoneMark() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" className="h-5 w-5">
+      <path
+        d="M6.2 2.5H4.1c-.9 0-1.6.7-1.5 1.6.7 7.1 6.2 12.6 13.3 13.3.9.1 1.6-.6 1.6-1.5v-2.1c0-.7-.5-1.3-1.2-1.5l-2.1-.5c-.6-.1-1.2.1-1.6.5l-.9.9a13.7 13.7 0 0 1-4.8-4.8l.9-.9c.4-.4.6-1 .5-1.6l-.5-2.1c-.2-.7-.8-1.2-1.5-1.2Z"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/oidc.ts b/src/oidc.ts
index 3825ea4..37d1863 100644
--- a/src/oidc.ts
+++ b/src/oidc.ts
@@ -63,7 +63,10 @@ async function tokenRequest(cfg: OidcConfig, params: Record<string, string>): Pr
 }
 
 /** Go to the provider's sign-in page. `prompt: "create"` opens registration instead. */
-export async function login(cfg: OidcConfig, { prompt }: { prompt?: string } = {}): Promise<void> {
+export async function login(
+  cfg: OidcConfig,
+  { prompt, loginHint }: { prompt?: string; loginHint?: string } = {},
+): Promise<void> {
   const { authorization_endpoint } = await discover(cfg.issuer);
   const verifier = randomString(32);
   const state = randomString(16);
@@ -78,6 +81,7 @@ export async function login(cfg: OidcConfig, { prompt }: { prompt?: string } = {
     code_challenge_method: "S256",
   });
   if (prompt) q.set("prompt", prompt);
+  if (loginHint) q.set("login_hint", loginHint);
   location.assign(`${authorization_endpoint}?${q}`);
 }
 
diff --git a/test/oidc.test.ts b/test/oidc.test.ts
index 878bd98..eb4b626 100644
--- a/test/oidc.test.ts
+++ b/test/oidc.test.ts
@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { b64url, finish, pkceChallenge } from "../src/oidc";
+import { b64url, finish, login, pkceChallenge } from "../src/oidc";
 
 describe("PKCE", () => {
   it("matches the RFC 7636 example", async () => {
@@ -48,3 +48,26 @@ describe("finish", () => {
     vi.unstubAllGlobals();
   });
 });
+
+describe("login", () => {
+  afterEach(() => {
+    sessionStorage.clear();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it("passes a phone number as the OIDC login_hint", async () => {
+    const assign = vi.spyOn(window.location, "assign").mockImplementation(() => {});
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => Response.json({ authorization_endpoint: "https://auth.example.com/authorize" })),
+    );
+    const cfg = { issuer: "https://auth.example.com", client_id: "web", scopes: "openid" };
+
+    await login(cfg, { loginHint: "+8801915366317" });
+
+    expect(assign).toHaveBeenCalledOnce();
+    expect(assign.mock.calls[0][0]).toContain("login_hint=%2B8801915366317");
+    expect(assign.mock.calls[0][0]).toContain("code_challenge_method=S256");
+  });
+});

From 394c1f7a963d29b90dca5833145930b8b15d5eb4 Mon Sep 17 00:00:00 2001
From: faizur_almas <kutsnalmas@gmail.com>
Date: Tue, 27 Oct 2026 10:45:43 +0600
Subject: [PATCH 2/4] Passwordless sign-in page: email code, Google and Apple

Replaces the email/phone/Microsoft draft with three choices, styled after
OpenAI's sign-in: Continue with email (then a "Check your inbox" code step,
or the link in the email), Google and Apple, through the API's /v1/auth/*
routes.

- oidc.begin() makes the PKCE verifier and keeps it in localStorage, so the
  emailed link also works in a new tab; the API only sees the challenge.
- The app shell hands the provider's /?code= return to /connect, which was
  lost on the redirect before.
- login_methods from /v1/config decides which buttons work; empty with oidc
  falls back to Zitadel's hosted pages, and dev mode signs in from the email
  step without a code.
- openapi.json gets the new sign-in routes (merged in, keeping
  /v1/notifications) and the generated types are refreshed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CLAUDE.md                      |   2 +
 app/connect/page.tsx           | 567 +++++++++++++++++++--------------
 app/globals.css                |   5 +
 openapi.json                   | 339 ++++++++++++++++++++
 src/api/generated/index.ts     |   2 +-
 src/api/generated/types.gen.ts | 259 ++++++++++++++-
 src/components/app-shell.tsx   |   6 +
 src/oidc.ts                    |  37 ++-
 test/oidc.test.ts              |  28 +-
 9 files changed, 982 insertions(+), 263 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 646b86b..a3f3633 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -15,6 +15,8 @@ The web frontend is a Bangladesh-first budget and receipt tracking prototype. Th
 
 Connected mode uses the existing ScribbleScan API only through `/v1`. Response types are generated from `openapi.json` into `src/api/generated`; never edit generated files by hand. The Next.js rewrites in `next.config.ts` target `http://127.0.0.1:8000` by default and can be overridden with `SCRIBBLESCAN_API`.
 
+Sign-in (`app/connect/page.tsx`) is passwordless: **Continue with email** (a code, or the link in the email), **Google** and **Apple**, through `/v1/auth/*`. The page makes the PKCE verifier (`oidc.begin()`, kept in localStorage so the emailed link works in a new tab), the API runs the sign-in with Zitadel, and the browser lands on `/?code=...`, which the app shell hands to `/connect` for `oidc.finish()`. `GET /v1/config`'s `login_methods` says which choices work; empty with `auth: "oidc"` means Zitadel's hosted pages, and dev mode signs in from the email step without a code.
+
 The phone pairing secret belongs only in the scan URL fragment. QR SVGs must come from `POST /v1/qr`, never from a URL containing the secret.
 
 ## Commands
diff --git a/app/connect/page.tsx b/app/connect/page.tsx
index 89a4331..2bc5ea7 100644
--- a/app/connect/page.tsx
+++ b/app/connect/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { type FormEvent, useCallback, useEffect, useState } from "react";
+import { type FormEvent, type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import {
   api,
   DEMO_ACCOUNT_EMAIL,
@@ -10,298 +10,420 @@ import {
   session,
   startDemoSession,
 } from "@/src/api/client";
-import type { DevToken } from "@/src/api/generated";
+import type { DevToken, EmailCodeSent, Redirect } from "@/src/api/generated";
 import type { ClientConfig } from "@/src/api/types";
 import * as oidc from "@/src/oidc";
+import { store } from "@/src/store";
+
+// Passwordless sign-in: a code by email, Google, or Apple. The API runs the sign-in with
+// Zitadel and answers with the usual ?code= redirect, which oidc.finish() completes here.
+// Without a login client on the server it falls back to Zitadel's hosted pages; in dev
+// mode the email step signs in directly.
+
+type Provider = "google" | "apple";
+type Step =
+  | { name: "choose" }
+  | { name: "email" }
+  | { name: "code"; flow: string; email: string; resendAt: number }
+  | { name: "busy"; note: string };
+
+const RETURN_TO = "ss.returnTo";
+const PROVIDER_NAMES: Record<Provider, string> = { google: "Google", apple: "Apple" };
 
 export default function ConnectPage() {
   const [config, setConfig] = useState<ClientConfig | null>(null);
+  const [step, setStep] = useState<Step>({ name: "busy", note: "Checking the connection…" });
   const [email, setEmail] = useState("");
-  const [phoneNumber, setPhoneNumber] = useState("");
-  const [phoneFormOpen, setPhoneFormOpen] = useState(false);
+  const [code, setCode] = useState("");
   const [error, setError] = useState("");
-  const [ready, setReady] = useState(false);
+  const [now, setNow] = useState(() => Date.now());
+  const heading = useRef<HTMLHeadingElement>(null);
 
   const destination = useCallback(() => {
-    const requested = new URLSearchParams(window.location.search).get("returnTo");
+    const requested = new URLSearchParams(window.location.search).get("returnTo") ?? store.get(RETURN_TO);
+    store.set(RETURN_TO, null);
     return requested?.startsWith("/") && !requested.startsWith("//") ? requested : "/";
   }, []);
 
   useEffect(() => {
+    const go = (url: string) => {
+      setStep({ name: "busy", note: "Signing you in…" });
+      window.location.assign(url);
+    };
+    const failed = (cause: unknown) => {
+      setError(cause instanceof Error ? cause.message : "Couldn't sign in. Try again.");
+      setStep({ name: "choose" });
+    };
     void api<ClientConfig>("/v1/config")
       .then(async (clientConfig) => {
         session.config = clientConfig;
         setConfig(clientConfig);
+        const q = new URLSearchParams(window.location.search);
+        const flow = q.get("flow");
+        if (flow) {
+          // The link in a sign-in email, or the way back from Google or Apple.
+          history.replaceState(null, "", window.location.pathname);
+          if (q.get("code")) {
+            setStep({ name: "busy", note: "Checking your code…" });
+            const next = await api<Redirect>("/v1/auth/email/verify", {
+              method: "POST",
+              body: { flow, code: q.get("code") },
+            });
+            return go(next.url);
+          }
+          if (q.get("id") && q.get("token")) {
+            setStep({ name: "busy", note: "Signing you in…" });
+            const next = await api<Redirect>("/v1/auth/provider/finish", {
+              method: "POST",
+              body: { flow, intent_id: q.get("id"), intent_token: q.get("token") },
+            });
+            return go(next.url);
+          }
+          throw new Error("Sign-in was cancelled. Try again.");
+        }
         const oidcSettings = oidcConfig();
         if (oidcSettings) {
           const tokens = await oidc.finish(oidcSettings);
           if (tokens) saveTokens(tokens);
         }
-        if (session.token || isDemoSession()) window.location.assign(destination());
-        setReady(true);
+        if (session.token || isDemoSession()) return window.location.assign(destination());
+        setStep({ name: "choose" });
       })
-      .catch(() => {
+      .catch((cause) => {
+        if (session.config) return failed(cause);
         setError(`Couldn't reach the API. You can still preview the app with ${DEMO_ACCOUNT_EMAIL}.`);
-        setReady(true);
+        setStep({ name: "choose" });
       });
   }, [destination]);
 
-  const signInDev = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  // Move focus to each step's heading, so keyboard and screen reader users follow along.
+  useEffect(() => {
+    if (step.name !== "busy") heading.current?.focus();
+  }, [step.name]);
+
+  useEffect(() => {
+    if (step.name !== "code") return;
+    const timer = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, [step.name]);
+
+  const methods = config?.login_methods ?? [];
+  const passwordless = config?.auth === "oidc" && methods.length > 0;
+  const hosted = config?.auth === "oidc" && methods.length === 0;
+  const available = (provider: Provider) => passwordless && methods.includes(provider);
+
+  const leaving = () => store.set(RETURN_TO, destination());
+
+  const goHosted = () => {
+    const settings = oidcConfig();
+    if (!settings) return;
+    leaving();
+    setStep({ name: "busy", note: "Taking you to sign in…" });
+    void oidc.login(settings).catch(() => {
+      setError("Couldn't reach the sign-in page. Try again.");
+      setStep({ name: "choose" });
+    });
+  };
+
+  const chooseProvider = async (provider: Provider) => {
     setError("");
-    if (startDemoSession(email)) {
-      window.location.assign(destination());
-      return;
-    }
-    if (config?.auth !== "dev") {
-      setError(`Live sign-in needs the API. Use ${DEMO_ACCOUNT_EMAIL} to preview the app.`);
+    if (hosted) return goHosted();
+    if (!available(provider)) {
+      setError(`${PROVIDER_NAMES[provider]} sign-in isn't set up on this server yet. Continue with email.`);
       return;
     }
     try {
-      const response = await fetch("/v1/dev/token", {
+      setStep({ name: "busy", note: `Opening ${PROVIDER_NAMES[provider]}…` });
+      leaving();
+      const next = await api<Redirect>("/v1/auth/provider", {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email: email.trim() }),
+        body: { provider, ...(await oidc.begin()) },
       });
-      if (!response.ok) throw new Error("Couldn't sign in. Check the email address.");
-      const token = (await response.json()) as DevToken;
-      saveTokens({ access_token: token.access_token, expires_in: 12 * 3600 });
-      window.location.assign(destination());
+      window.location.assign(next.url);
     } catch (cause) {
-      setError(cause instanceof Error ? cause.message : "Couldn't sign in. Try again.");
+      setError(cause instanceof Error ? cause.message : "Couldn't start the sign-in. Try again.");
+      setStep({ name: "choose" });
     }
   };
 
-  const login = (prompt?: string, loginHint?: string) => {
-    const settings = oidcConfig();
-    if (settings)
-      void oidc
-        .login(settings, { prompt, loginHint })
-        .catch(() => setError("Couldn't reach the sign-in page. Try again."));
+  const chooseEmail = () => {
+    setError("");
+    if (hosted) return goHosted();
+    setStep({ name: "email" });
   };
 
-  const loginWithProvider = (provider: "Google" | "Microsoft") => {
-    if (!oidcConfig()) {
-      setError(`${provider} sign-in will be available when an identity provider is configured.`);
+  const sendCode = async (address: string) => {
+    setError("");
+    if (startDemoSession(address)) {
+      window.location.assign(destination());
       return;
     }
-    setError("");
-    login();
+    if (config === null) {
+      setError(`Live sign-in needs the API. Use ${DEMO_ACCOUNT_EMAIL} to preview the app.`);
+      return;
+    }
+    try {
+      if (config.auth === "dev") {
+        const token = await api<DevToken>("/v1/dev/token", {
+          method: "POST",
+          body: { email: address.trim() },
+        });
+        saveTokens({ access_token: token.access_token, expires_in: 12 * 3600 });
+        window.location.assign(destination());
+        return;
+      }
+      leaving();
+      const sent = await api<EmailCodeSent>("/v1/auth/email", {
+        method: "POST",
+        body: { email: address, ...(await oidc.begin()) },
+      });
+      setCode("");
+      setStep({
+        name: "code",
+        flow: sent.flow,
+        email: sent.email,
+        resendAt: Date.now() + sent.resend_after * 1000,
+      });
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Couldn't send a code. Try again.");
+    }
   };
 
-  const signInWithPhone = (event: FormEvent<HTMLFormElement>) => {
+  const submitEmail = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (!oidcConfig()) {
-      setError("Phone sign-in will be available when an identity provider is configured.");
-      return;
-    }
+    void sendCode(email);
+  };
+
+  const submitCode = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (step.name !== "code") return;
     setError("");
-    login(undefined, phoneNumber.trim());
+    const current = step;
+    try {
+      setStep({ name: "busy", note: "Checking your code…" });
+      const next = await api<Redirect>("/v1/auth/email/verify", {
+        method: "POST",
+        body: { flow: current.flow, code: code.trim() },
+      });
+      window.location.assign(next.url);
+    } catch (cause) {
+      const message = cause instanceof Error ? cause.message : "Couldn't check the code. Try again.";
+      setError(message.charAt(0).toUpperCase() + message.slice(1));
+      setStep(/start again/.test(message) ? { name: "email" } : current);
+    }
   };
 
+  const resendIn = step.name === "code" ? Math.max(0, Math.ceil((step.resendAt - now) / 1000)) : 0;
+
   return (
-    <main className="relative flex min-h-screen flex-col overflow-hidden px-5 py-6 sm:px-8 sm:py-8">
-      <div
-        aria-hidden="true"
-        className="pointer-events-none absolute left-1/2 top-12 h-72 w-[42rem] max-w-[90vw] -translate-x-1/2 rounded-full bg-ledger/[0.07] blur-3xl"
-      />
-      <header className="relative flex items-center gap-3">
+    <main className="flex min-h-screen flex-col px-4 py-6 sm:px-8 sm:py-8">
+      <header className="flex items-center gap-3">
         <span className="grid h-9 w-9 place-items-center rounded-xl bg-[var(--brand-tile)] text-base font-bold text-[var(--brand-ink)]">
           S
         </span>
         <span className="text-base font-semibold tracking-tight text-ink">ScribbleScan</span>
       </header>
 
-      <section className="relative mx-auto flex w-full max-w-[27.5rem] flex-1 flex-col justify-center py-14 text-center">
-        <p className="text-sm font-medium text-ledger">Receipts and spending, together</p>
-        <h1 className="mt-3 text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
-          Sign in to ScribbleScan
-        </h1>
-        <p className="mx-auto mt-3 max-w-sm text-base leading-7 text-quiet">
-          Keep your purchases, budgets, and spaces in one clear view.
-        </p>
-        <div aria-hidden="true" className="mx-auto mt-7 flex h-px w-28 overflow-hidden bg-line">
-          <span className="w-9 bg-ledger" />
-        </div>
-
-        {!ready ? (
-          <p role="status" className="mt-8 text-sm text-quiet">
-            Checking the connection…
+      <section className="mx-auto flex w-full max-w-[25rem] flex-1 flex-col justify-center py-12">
+        {step.name === "busy" ? (
+          <p role="status" className="text-center text-base text-quiet">
+            {step.note}
           </p>
         ) : null}
-        {ready && (config?.auth === "dev" || config === null) ? (
-          <form onSubmit={(event) => void signInDev(event)} className="mt-8 space-y-3 text-left">
-            <label htmlFor="email" className="sr-only">
-              Email address
-            </label>
-            <input
-              id="email"
-              type="email"
-              required
-              autoComplete="email"
-              value={email}
-              onChange={(event) => setEmail(event.target.value)}
-              placeholder="Email address"
-              className="w-full rounded-full border border-line bg-card px-5 py-3 text-base text-ink outline-none transition placeholder:text-quiet focus:border-ledger"
-            />
-            <button
-              type="submit"
-              className="w-full rounded-full bg-ledger-button px-5 py-3 font-semibold text-white transition hover:bg-[#0a5948]"
-            >
-              Continue
-            </button>
-            <p className="px-1 text-center text-sm text-quiet">
-              For the sample account, use {DEMO_ACCOUNT_EMAIL}.
-            </p>
-          </form>
-        ) : null}
-        {ready && config?.auth === "oidc" ? (
-          <div className="mt-8 space-y-3">
-            <button
-              type="button"
-              onClick={() => login()}
-              className="w-full rounded-full bg-ledger-button px-5 py-3 font-semibold text-white transition hover:bg-[#0a5948]"
-            >
-              Continue
-            </button>
-            <button
-              type="button"
-              onClick={() => login("create")}
-              className="w-full rounded-full border border-line bg-card px-5 py-3 font-semibold text-ink transition hover:border-ledger hover:bg-raised"
-            >
-              Create an account
-            </button>
-          </div>
-        ) : null}
 
-        {ready ? (
+        {step.name === "choose" ? (
           <>
-            <div className="my-6 flex items-center gap-4 text-xs font-medium uppercase tracking-[0.14em] text-quiet">
-              <span className="h-px flex-1 bg-line" />
-              <span>or continue with</span>
-              <span className="h-px flex-1 bg-line" />
-            </div>
-            <div className="space-y-3">
-              <button
-                type="button"
-                onClick={() => loginWithProvider("Google")}
-                className="flex w-full items-center justify-center gap-3 rounded-full border border-line bg-card px-5 py-3 font-medium text-ink transition hover:border-ledger hover:bg-raised"
+            <Title headingRef={heading} title="Log in or sign up">
+              Keep your receipts, budgets and spaces in one clear view.
+            </Title>
+            <div className="mt-8 space-y-3">
+              <ChoiceButton onClick={chooseEmail} icon={<MailMark />}>
+                Continue with email
+              </ChoiceButton>
+              <ChoiceButton
+                onClick={() => void chooseProvider("google")}
+                icon={<GoogleMark />}
+                unavailable={!hosted && !available("google")}
               >
-                <GoogleMark />
                 Continue with Google
-              </button>
-              <button
-                type="button"
-                onClick={() => loginWithProvider("Microsoft")}
-                className="flex w-full items-center justify-center gap-3 rounded-full border border-line bg-card px-5 py-3 font-medium text-ink transition hover:border-ledger hover:bg-raised"
+              </ChoiceButton>
+              <ChoiceButton
+                onClick={() => void chooseProvider("apple")}
+                icon={<AppleMark />}
+                unavailable={!hosted && !available("apple")}
               >
-                <MicrosoftMark />
-                Continue with Microsoft
+                Continue with Apple
+              </ChoiceButton>
+            </div>
+          </>
+        ) : null}
+
+        {step.name === "email" ? (
+          <>
+            <Title headingRef={heading} title="Continue with email">
+              We'll send you a code to sign in. No password needed.
+            </Title>
+            <form onSubmit={submitEmail} className="mt-8 space-y-3">
+              <label htmlFor="email" className="sr-only">
+                Email address
+              </label>
+              <input
+                id="email"
+                type="email"
+                required
+                autoComplete="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                placeholder="Email address"
+                className={FIELD}
+              />
+              <button type="submit" className={PRIMARY}>
+                Continue
+              </button>
+              <button type="button" onClick={() => setStep({ name: "choose" })} className={LINK}>
+                Back
               </button>
+            </form>
+            {config?.auth === "dev" ? (
+              <p className="mt-4 text-center text-xs leading-5 text-quiet">
+                Development sign-in: any email signs in at once, no code. For the sample account, use{" "}
+                {DEMO_ACCOUNT_EMAIL}.
+              </p>
+            ) : null}
+          </>
+        ) : null}
+
+        {step.name === "code" ? (
+          <>
+            <Title headingRef={heading} title="Check your inbox">
+              Enter the code we sent to <span className="font-medium text-ink">{step.email}</span>, or open
+              the link in that email.
+            </Title>
+            <form onSubmit={(event) => void submitCode(event)} className="mt-8 space-y-3">
+              <label htmlFor="code" className="sr-only">
+                Code
+              </label>
+              <input
+                id="code"
+                required
+                autoComplete="one-time-code"
+                autoCapitalize="characters"
+                spellCheck={false}
+                minLength={4}
+                maxLength={12}
+                value={code}
+                onChange={(event) => setCode(event.target.value.toUpperCase())}
+                placeholder="Code"
+                className={`${FIELD} text-center font-semibold tracking-[0.3em] placeholder:font-normal placeholder:tracking-normal`}
+              />
+              <button type="submit" className={PRIMARY}>
+                Continue
+              </button>
+            </form>
+            <div className="mt-4 flex flex-col items-center gap-1 text-sm">
               <button
                 type="button"
-                aria-expanded={phoneFormOpen}
-                aria-controls="phone-sign-in-form"
-                onClick={() => {
-                  setPhoneFormOpen((open) => !open);
-                  setError("");
-                }}
-                className="flex w-full items-center justify-center gap-3 rounded-full border border-line bg-card px-5 py-3 font-medium text-ink transition hover:border-ledger hover:bg-raised"
+                disabled={resendIn > 0}
+                onClick={() => void sendCode(step.email)}
+                className="rounded-full px-3 py-1.5 font-medium text-ledger transition hover:underline disabled:cursor-default disabled:text-quiet disabled:no-underline"
               >
-                <PhoneMark />
-                Continue with phone
+                {resendIn > 0 ? `Resend email in ${resendIn}s` : "Resend email"}
+              </button>
+              <button type="button" onClick={() => setStep({ name: "email" })} className={LINK}>
+                Use a different email
               </button>
-              {phoneFormOpen ? (
-                <form id="phone-sign-in-form" onSubmit={signInWithPhone} className="space-y-3 pt-1 text-left">
-                  <label htmlFor="phone-number" className="sr-only">
-                    Phone number
-                  </label>
-                  <input
-                    id="phone-number"
-                    type="tel"
-                    required
-                    autoComplete="tel"
-                    value={phoneNumber}
-                    onChange={(event) => setPhoneNumber(event.target.value)}
-                    placeholder="Phone number, including country code"
-                    className="w-full rounded-full border border-line bg-card px-5 py-3 text-base text-ink outline-none transition placeholder:text-quiet focus:border-ledger"
-                  />
-                  <button
-                    type="submit"
-                    className="w-full rounded-full bg-ledger-button px-5 py-3 font-semibold text-white transition hover:bg-[#0a5948]"
-                  >
-                    Continue with phone
-                  </button>
-                </form>
-              ) : null}
             </div>
-            {config?.auth === "oidc" ? (
-              <p className="mt-3 text-xs leading-5 text-quiet">
-                Google and Microsoft use your configured identity provider. Phone sign-in passes your number
-                as a sign-in hint.
-              </p>
-            ) : null}
           </>
         ) : null}
 
-        <div className="my-6 flex items-center gap-4 text-xs font-medium uppercase tracking-[0.14em] text-quiet">
-          <span className="h-px flex-1 bg-line" />
-          <span>or</span>
-          <span className="h-px flex-1 bg-line" />
-        </div>
-        <button
-          type="button"
-          onClick={() => {
-            startDemoSession(DEMO_ACCOUNT_EMAIL);
-            window.location.assign(destination());
-          }}
-          className="w-full rounded-full border border-line bg-transparent px-5 py-3 font-medium text-ink transition hover:border-ledger hover:bg-card"
-        >
-          Preview the sample account
-        </button>
-
         {error ? (
           <p
             role="alert"
-            className="mt-4 rounded-xl border border-amber/20 bg-amber-soft px-4 py-3 text-left text-sm text-amber"
+            className="mt-5 rounded-xl border border-amber/20 bg-amber-soft px-4 py-3 text-left text-sm text-amber"
           >
             {error}
           </p>
         ) : null}
-        {ready && !config && !error ? (
-          <p role="alert" className="mt-4 text-sm text-quiet">
-            Sign in is unavailable while the API is offline.
+
+        {step.name === "choose" ? (
+          <p className="mt-8 text-center text-sm text-quiet">
+            Just looking?{" "}
+            <button
+              type="button"
+              onClick={() => {
+                startDemoSession(DEMO_ACCOUNT_EMAIL);
+                window.location.assign(destination());
+              }}
+              className="rounded font-medium text-ink underline-offset-4 hover:underline"
+            >
+              Preview the sample account
+            </button>
           </p>
         ) : null}
-        <p className="mt-5 text-xs leading-5 text-quiet">
-          Development sign-in is for local use. Production sign-in uses your configured identity provider.
-        </p>
       </section>
+    </main>
+  );
+}
+
+const FIELD =
+  "w-full rounded-full border border-line bg-transparent px-5 py-3.5 text-base text-ink outline-none transition placeholder:text-quiet focus:border-ledger";
+const PRIMARY =
+  "w-full rounded-full bg-[var(--brand-tile)] px-5 py-3.5 text-base font-semibold text-[var(--brand-ink)] transition hover:opacity-90";
+const LINK = "w-full rounded-full px-5 py-2 text-sm font-medium text-quiet transition hover:text-ink";
 
-      <section
-        aria-label="ScribbleScan features"
-        className="relative mx-auto grid w-full max-w-5xl gap-3 sm:grid-cols-3"
+function Title({
+  title,
+  children,
+  headingRef,
+}: {
+  title: string;
+  children: ReactNode;
+  headingRef: React.RefObject<HTMLHeadingElement | null>;
+}) {
+  return (
+    <div className="text-center">
+      <h1
+        ref={headingRef}
+        tabIndex={-1}
+        className="text-3xl font-semibold tracking-tight text-ink outline-none"
       >
-        <article className="rounded-xl border border-line bg-card/70 p-4 sm:p-5">
-          <p className="text-sm font-semibold text-ink">Receipts</p>
-          <p className="mt-1 text-sm leading-5 text-quiet">
-            Capture purchases and review the details read from each receipt.
-          </p>
-        </article>
-        <article className="rounded-xl border border-line bg-card/70 p-4 sm:p-5">
-          <p className="text-sm font-semibold text-ink">Budgets</p>
-          <p className="mt-1 text-sm leading-5 text-quiet">
-            Set monthly limits and follow spending by category.
-          </p>
-        </article>
-        <article className="rounded-xl border border-line bg-card/70 p-4 sm:p-5">
-          <p className="text-sm font-semibold text-ink">Spaces</p>
-          <p className="mt-1 text-sm leading-5 text-quiet">
-            Keep personal and business records in separate spaces.
-          </p>
-        </article>
-      </section>
-    </main>
+        {title}
+      </h1>
+      <p className="mx-auto mt-3 max-w-sm text-base leading-7 text-quiet">{children}</p>
+    </div>
+  );
+}
+
+function ChoiceButton({
+  onClick,
+  icon,
+  unavailable = false,
+  children,
+}: {
+  onClick: () => void;
+  icon: ReactNode;
+  unavailable?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-disabled={unavailable || undefined}
+      className={`flex w-full items-center justify-center gap-3 rounded-full border border-line bg-transparent px-5 py-3.5 text-base font-medium text-ink transition hover:bg-raised ${unavailable ? "opacity-50" : ""}`}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+}
+
+function MailMark() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" className="h-5 w-5 text-quiet">
+      <rect x="2.5" y="4.5" width="15" height="11" rx="2" stroke="currentColor" strokeWidth="1.5" />
+      <path d="m3 5.5 7 5.5 7-5.5" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+    </svg>
   );
 }
 
@@ -325,27 +447,10 @@ function GoogleMark() {
   );
 }
 
-function MicrosoftMark() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 18 18" className="h-[18px] w-[18px]">
-      <path fill="#F25022" d="M1 1h7.2v7.2H1z" />
-      <path fill="#7FBA00" d="M9.8 1H17v7.2H9.8z" />
-      <path fill="#00A4EF" d="M1 9.8h7.2V17H1z" />
-      <path fill="#FFB900" d="M9.8 9.8H17V17H9.8z" />
-    </svg>
-  );
-}
-
-function PhoneMark() {
+function AppleMark() {
   return (
-    <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" className="h-5 w-5">
-      <path
-        d="M6.2 2.5H4.1c-.9 0-1.6.7-1.5 1.6.7 7.1 6.2 12.6 13.3 13.3.9.1 1.6-.6 1.6-1.5v-2.1c0-.7-.5-1.3-1.2-1.5l-2.1-.5c-.6-.1-1.2.1-1.6.5l-.9.9a13.7 13.7 0 0 1-4.8-4.8l.9-.9c.4-.4.6-1 .5-1.6l-.5-2.1c-.2-.7-.8-1.2-1.5-1.2Z"
-        stroke="currentColor"
-        strokeWidth="1.6"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+    <svg aria-hidden="true" viewBox="0 0 18 18" fill="currentColor" className="h-[18px] w-[18px] text-quiet">
+      <path d="M14.94 9.56c-.02-2.02 1.65-3 1.73-3.04-.94-1.38-2.41-1.57-2.93-1.59-1.25-.13-2.44.73-3.07.73-.64 0-1.61-.71-2.65-.69-1.36.02-2.62.79-3.32 2.01-1.42 2.46-.36 6.1 1.02 8.1.68.98 1.48 2.07 2.53 2.04 1.02-.04 1.4-.66 2.63-.66 1.22 0 1.57.66 2.64.64 1.09-.02 1.78-.99 2.45-1.98.77-1.13 1.09-2.23 1.11-2.29-.03-.01-2.12-.81-2.14-3.23ZM12.92 3.62c.56-.68.94-1.62.83-2.56-.81.03-1.79.54-2.37 1.22-.52.6-.98 1.56-.85 2.48.9.07 1.82-.46 2.39-1.14Z" />
     </svg>
   );
 }
diff --git a/app/globals.css b/app/globals.css
index e2c8264..f873727 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -108,6 +108,11 @@ select {
   outline-offset: 2px;
 }
 
+/* Headings get focus from code (so screen readers follow a step change), not from Tab. */
+[tabindex="-1"]:focus-visible {
+  outline: none;
+}
+
 ::selection {
   background: #285b4d;
   color: #fff;
diff --git a/openapi.json b/openapi.json
index 1c1e855..0b7b125 100644
--- a/openapi.json
+++ b/openapi.json
@@ -1298,6 +1298,174 @@
           }
         }
       }
+    },
+    "/v1/auth/email": {
+      "post": {
+        "tags": [
+          "sign-in"
+        ],
+        "summary": "Email Code",
+        "description": "Email a sign-in code. New addresses get an account once the code is entered.",
+        "operationId": "email_code_v1_auth_email_post",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/EmailCodeIn"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/EmailCodeSent"
+                }
+              }
+            }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/HTTPValidationError"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/v1/auth/email/verify": {
+      "post": {
+        "tags": [
+          "sign-in"
+        ],
+        "summary": "Email Code Check",
+        "description": "Check the code; the browser then goes to the returned URL to collect its tokens.",
+        "operationId": "email_code_check_v1_auth_email_verify_post",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/EmailCodeCheck"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Redirect"
+                }
+              }
+            }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/HTTPValidationError"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/v1/auth/provider": {
+      "post": {
+        "tags": [
+          "sign-in"
+        ],
+        "summary": "Provider Start",
+        "description": "Where to send the browser to sign in with Google or Apple.",
+        "operationId": "provider_start_v1_auth_provider_post",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/ProviderIn"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Redirect"
+                }
+              }
+            }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/HTTPValidationError"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/v1/auth/provider/finish": {
+      "post": {
+        "tags": [
+          "sign-in"
+        ],
+        "summary": "Provider Finish",
+        "description": "Back from Google or Apple: complete the sign-in.",
+        "operationId": "provider_finish_v1_auth_provider_finish_post",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/ProviderReturn"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Redirect"
+                }
+              }
+            }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/HTTPValidationError"
+                }
+              }
+            }
+          }
+        }
+      }
     }
   },
   "components": {
@@ -1501,6 +1669,19 @@
               }
             ],
             "title": "Scopes"
+          },
+          "login_methods": {
+            "items": {
+              "type": "string",
+              "enum": [
+                "email",
+                "google",
+                "apple"
+              ]
+            },
+            "type": "array",
+            "title": "Login Methods",
+            "default": []
           }
         },
         "type": "object",
@@ -1837,6 +2018,87 @@
         "type": "object",
         "title": "DocumentPatch"
       },
+      "EmailCodeCheck": {
+        "properties": {
+          "flow": {
+            "type": "string",
+            "maxLength": 64,
+            "minLength": 1,
+            "title": "Flow"
+          },
+          "code": {
+            "type": "string",
+            "maxLength": 16,
+            "minLength": 4,
+            "title": "Code"
+          }
+        },
+        "type": "object",
+        "required": [
+          "flow",
+          "code"
+        ],
+        "title": "EmailCodeCheck"
+      },
+      "EmailCodeIn": {
+        "properties": {
+          "code_challenge": {
+            "type": "string",
+            "maxLength": 128,
+            "minLength": 43,
+            "pattern": "^[A-Za-z0-9_-]+$",
+            "title": "Code Challenge"
+          },
+          "state": {
+            "type": "string",
+            "maxLength": 128,
+            "minLength": 8,
+            "pattern": "^[A-Za-z0-9_-]+$",
+            "title": "State"
+          },
+          "email": {
+            "type": "string",
+            "maxLength": 320,
+            "minLength": 3,
+            "title": "Email"
+          }
+        },
+        "type": "object",
+        "required": [
+          "code_challenge",
+          "state",
+          "email"
+        ],
+        "title": "EmailCodeIn"
+      },
+      "EmailCodeSent": {
+        "properties": {
+          "flow": {
+            "type": "string",
+            "title": "Flow"
+          },
+          "email": {
+            "type": "string",
+            "title": "Email"
+          },
+          "expires_in": {
+            "type": "integer",
+            "title": "Expires In"
+          },
+          "resend_after": {
+            "type": "integer",
+            "title": "Resend After"
+          }
+        },
+        "type": "object",
+        "required": [
+          "flow",
+          "email",
+          "expires_in",
+          "resend_after"
+        ],
+        "title": "EmailCodeSent"
+      },
       "Expenses": {
         "properties": {
           "month": {
@@ -2156,6 +2418,69 @@
         "title": "PairOffer",
         "description": "Show qr_url as a QR code. shower_key opens the offer's event stream (/v1/pair/offers/{id}/events)."
       },
+      "ProviderIn": {
+        "properties": {
+          "code_challenge": {
+            "type": "string",
+            "maxLength": 128,
+            "minLength": 43,
+            "pattern": "^[A-Za-z0-9_-]+$",
+            "title": "Code Challenge"
+          },
+          "state": {
+            "type": "string",
+            "maxLength": 128,
+            "minLength": 8,
+            "pattern": "^[A-Za-z0-9_-]+$",
+            "title": "State"
+          },
+          "provider": {
+            "type": "string",
+            "enum": [
+              "google",
+              "apple"
+            ],
+            "title": "Provider"
+          }
+        },
+        "type": "object",
+        "required": [
+          "code_challenge",
+          "state",
+          "provider"
+        ],
+        "title": "ProviderIn"
+      },
+      "ProviderReturn": {
+        "properties": {
+          "flow": {
+            "type": "string",
+            "maxLength": 64,
+            "minLength": 1,
+            "title": "Flow"
+          },
+          "intent_id": {
+            "type": "string",
+            "maxLength": 64,
+            "minLength": 1,
+            "title": "Intent Id"
+          },
+          "intent_token": {
+            "type": "string",
+            "maxLength": 4096,
+            "minLength": 1,
+            "title": "Intent Token"
+          }
+        },
+        "type": "object",
+        "required": [
+          "flow",
+          "intent_id",
+          "intent_token"
+        ],
+        "title": "ProviderReturn",
+        "description": "What Zitadel appended to the return URL after Google or Apple."
+      },
       "QrIn": {
         "properties": {
           "data": {
@@ -2171,6 +2496,20 @@
         ],
         "title": "QrIn"
       },
+      "Redirect": {
+        "properties": {
+          "url": {
+            "type": "string",
+            "title": "Url"
+          }
+        },
+        "type": "object",
+        "required": [
+          "url"
+        ],
+        "title": "Redirect",
+        "description": "Send the browser here next."
+      },
       "SpaceIn": {
         "properties": {
           "name": {
diff --git a/src/api/generated/index.ts b/src/api/generated/index.ts
index 14a541f..fc6e6f8 100644
--- a/src/api/generated/index.ts
+++ b/src/api/generated/index.ts
@@ -1,3 +1,3 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-export type { ApproveV1PairOffersOfferIdApprovePostData, ApproveV1PairOffersOfferIdApprovePostError, ApproveV1PairOffersOfferIdApprovePostErrors, ApproveV1PairOffersOfferIdApprovePostResponse, ApproveV1PairOffersOfferIdApprovePostResponses, BodyUploadV1SpacesSpaceIdDocumentsPost, BudgetsIn, CategoriesV1CategoriesGetData, CategoriesV1CategoriesGetResponse, CategoriesV1CategoriesGetResponses, CategorySpend, Claimed, ClaimIn, ClaimV1PairClaimPostData, ClaimV1PairClaimPostError, ClaimV1PairClaimPostErrors, ClaimV1PairClaimPostResponse, ClaimV1PairClaimPostResponses, ClientConfig, ClientConfigV1ConfigGetData, ClientConfigV1ConfigGetResponse, ClientConfigV1ConfigGetResponses, ClientOptions, Collected, CollectV1PairOffersOfferIdCollectPostData, CollectV1PairOffersOfferIdCollectPostError, CollectV1PairOffersOfferIdCollectPostErrors, CollectV1PairOffersOfferIdCollectPostResponse, CollectV1PairOffersOfferIdCollectPostResponses, CreateOfferIn, CreateOfferV1PairOffersPostData, CreateOfferV1PairOffersPostError, CreateOfferV1PairOffersPostErrors, CreateOfferV1PairOffersPostResponse, CreateOfferV1PairOffersPostResponses, CreateSpaceV1SpacesPostData, CreateSpaceV1SpacesPostError, CreateSpaceV1SpacesPostErrors, CreateSpaceV1SpacesPostResponse, CreateSpaceV1SpacesPostResponses, DeleteDocumentV1DocumentsDocIdDeleteData, DeleteDocumentV1DocumentsDocIdDeleteError, DeleteDocumentV1DocumentsDocIdDeleteErrors, DeleteDocumentV1DocumentsDocIdDeleteResponse, DeleteDocumentV1DocumentsDocIdDeleteResponses, DenyV1PairOffersOfferIdDenyPostData, DenyV1PairOffersOfferIdDenyPostError, DenyV1PairOffersOfferIdDenyPostErrors, DenyV1PairOffersOfferIdDenyPostResponse, DenyV1PairOffersOfferIdDenyPostResponses, Device, DevicesV1DevicesGetData, DevicesV1DevicesGetResponse, DevicesV1DevicesGetResponses, DevicesV1PairDevicesGetData, DevicesV1PairDevicesGetResponse, DevicesV1PairDevicesGetResponses, DeviceUnlinked, DevToken, DevTokenIn, DevTokenV1DevTokenPostData, DevTokenV1DevTokenPostError, DevTokenV1DevTokenPostErrors, DevTokenV1DevTokenPostResponse, DevTokenV1DevTokenPostResponses, DocStatus, DocumentOut, DocumentPatch, EventsV1PairOffersOfferIdEventsGetData, EventsV1PairOffersOfferIdEventsGetError, EventsV1PairOffersOfferIdEventsGetErrors, EventsV1PairOffersOfferIdEventsGetResponses, Expenses, ExpensesV1SpacesSpaceIdExpensesGetData, ExpensesV1SpacesSpaceIdExpensesGetError, ExpensesV1SpacesSpaceIdExpensesGetErrors, ExpensesV1SpacesSpaceIdExpensesGetResponse, ExpensesV1SpacesSpaceIdExpensesGetResponses, ExportV1SpacesSpaceIdExportGetData, ExportV1SpacesSpaceIdExportGetError, ExportV1SpacesSpaceIdExportGetErrors, ExportV1SpacesSpaceIdExportGetResponses, GetDocumentV1DocumentsDocIdGetData, GetDocumentV1DocumentsDocIdGetError, GetDocumentV1DocumentsDocIdGetErrors, GetDocumentV1DocumentsDocIdGetResponse, GetDocumentV1DocumentsDocIdGetResponses, GetFileV1DocumentsDocIdFileGetData, GetFileV1DocumentsDocIdFileGetError, GetFileV1DocumentsDocIdFileGetErrors, GetFileV1DocumentsDocIdFileGetResponses, GrantTo, HttpValidationError, Issue, LinkedDeviceOut, ListSpacesV1SpacesGetData, ListSpacesV1SpacesGetResponse, ListSpacesV1SpacesGetResponses, Me, MeV1MeGetData, MeV1MeGetResponse, MeV1MeGetResponses, MonthTotal, NotificationOut, NotificationsOut, OfferCreated, OfferStatus, PairOffer, PairPhoneV1SpacesSpaceIdPairPostData, PairPhoneV1SpacesSpaceIdPairPostError, PairPhoneV1SpacesSpaceIdPairPostErrors, PairPhoneV1SpacesSpaceIdPairPostResponse, PairPhoneV1SpacesSpaceIdPairPostResponses, PatchDocumentV1DocumentsDocIdPatchData, PatchDocumentV1DocumentsDocIdPatchError, PatchDocumentV1DocumentsDocIdPatchErrors, PatchDocumentV1DocumentsDocIdPatchResponse, PatchDocumentV1DocumentsDocIdPatchResponses, QrIn, QrV1QrPostData, QrV1QrPostError, QrV1QrPostErrors, QrV1QrPostResponse, QrV1QrPostResponses, SchemaV1SchemasDocTypeGetData, SchemaV1SchemasDocTypeGetError, SchemaV1SchemasDocTypeGetErrors, SchemaV1SchemasDocTypeGetResponse, SchemaV1SchemasDocTypeGetResponses, SetBudgetsV1SpacesSpaceIdBudgetsPutData, SetBudgetsV1SpacesSpaceIdBudgetsPutError, SetBudgetsV1SpacesSpaceIdBudgetsPutErrors, SetBudgetsV1SpacesSpaceIdBudgetsPutResponse, SetBudgetsV1SpacesSpaceIdBudgetsPutResponses, SpaceIn, SpaceKind, SpaceOut, State, StatusV1PairOffersOfferIdGetData, StatusV1PairOffersOfferIdGetError, StatusV1PairOffersOfferIdGetErrors, StatusV1PairOffersOfferIdGetResponse, StatusV1PairOffersOfferIdGetResponses, Summary, SummaryV1SpacesSpaceIdSummaryGetData, SummaryV1SpacesSpaceIdSummaryGetError, SummaryV1SpacesSpaceIdSummaryGetErrors, SummaryV1SpacesSpaceIdSummaryGetResponse, SummaryV1SpacesSpaceIdSummaryGetResponses, UnlinkV1DevicesDeviceTokenIdDeleteData, UnlinkV1DevicesDeviceTokenIdDeleteError, UnlinkV1DevicesDeviceTokenIdDeleteErrors, UnlinkV1DevicesDeviceTokenIdDeleteResponse, UnlinkV1DevicesDeviceTokenIdDeleteResponses, UnlinkV1PairDevicesDeviceIdDeleteData, UnlinkV1PairDevicesDeviceIdDeleteError, UnlinkV1PairDevicesDeviceIdDeleteErrors, UnlinkV1PairDevicesDeviceIdDeleteResponse, UnlinkV1PairDevicesDeviceIdDeleteResponses, UploadV1SpacesSpaceIdDocumentsPostData, UploadV1SpacesSpaceIdDocumentsPostError, UploadV1SpacesSpaceIdDocumentsPostErrors, UploadV1SpacesSpaceIdDocumentsPostResponse, UploadV1SpacesSpaceIdDocumentsPostResponses, ValidationError } from './types.gen';
+export type { ApproveV1PairOffersOfferIdApprovePostData, ApproveV1PairOffersOfferIdApprovePostError, ApproveV1PairOffersOfferIdApprovePostErrors, ApproveV1PairOffersOfferIdApprovePostResponse, ApproveV1PairOffersOfferIdApprovePostResponses, BodyUploadV1SpacesSpaceIdDocumentsPost, BudgetsIn, CategoriesV1CategoriesGetData, CategoriesV1CategoriesGetResponse, CategoriesV1CategoriesGetResponses, CategorySpend, Claimed, ClaimIn, ClaimV1PairClaimPostData, ClaimV1PairClaimPostError, ClaimV1PairClaimPostErrors, ClaimV1PairClaimPostResponse, ClaimV1PairClaimPostResponses, ClientConfig, ClientConfigV1ConfigGetData, ClientConfigV1ConfigGetResponse, ClientConfigV1ConfigGetResponses, ClientOptions, Collected, CollectV1PairOffersOfferIdCollectPostData, CollectV1PairOffersOfferIdCollectPostError, CollectV1PairOffersOfferIdCollectPostErrors, CollectV1PairOffersOfferIdCollectPostResponse, CollectV1PairOffersOfferIdCollectPostResponses, CreateOfferIn, CreateOfferV1PairOffersPostData, CreateOfferV1PairOffersPostError, CreateOfferV1PairOffersPostErrors, CreateOfferV1PairOffersPostResponse, CreateOfferV1PairOffersPostResponses, CreateSpaceV1SpacesPostData, CreateSpaceV1SpacesPostError, CreateSpaceV1SpacesPostErrors, CreateSpaceV1SpacesPostResponse, CreateSpaceV1SpacesPostResponses, DeleteDocumentV1DocumentsDocIdDeleteData, DeleteDocumentV1DocumentsDocIdDeleteError, DeleteDocumentV1DocumentsDocIdDeleteErrors, DeleteDocumentV1DocumentsDocIdDeleteResponse, DeleteDocumentV1DocumentsDocIdDeleteResponses, DenyV1PairOffersOfferIdDenyPostData, DenyV1PairOffersOfferIdDenyPostError, DenyV1PairOffersOfferIdDenyPostErrors, DenyV1PairOffersOfferIdDenyPostResponse, DenyV1PairOffersOfferIdDenyPostResponses, Device, DevicesV1DevicesGetData, DevicesV1DevicesGetResponse, DevicesV1DevicesGetResponses, DevicesV1PairDevicesGetData, DevicesV1PairDevicesGetResponse, DevicesV1PairDevicesGetResponses, DeviceUnlinked, DevToken, DevTokenIn, DevTokenV1DevTokenPostData, DevTokenV1DevTokenPostError, DevTokenV1DevTokenPostErrors, DevTokenV1DevTokenPostResponse, DevTokenV1DevTokenPostResponses, DocStatus, DocumentOut, DocumentPatch, EmailCodeCheck, EmailCodeCheckV1AuthEmailVerifyPostData, EmailCodeCheckV1AuthEmailVerifyPostError, EmailCodeCheckV1AuthEmailVerifyPostErrors, EmailCodeCheckV1AuthEmailVerifyPostResponse, EmailCodeCheckV1AuthEmailVerifyPostResponses, EmailCodeIn, EmailCodeSent, EmailCodeV1AuthEmailPostData, EmailCodeV1AuthEmailPostError, EmailCodeV1AuthEmailPostErrors, EmailCodeV1AuthEmailPostResponse, EmailCodeV1AuthEmailPostResponses, EventsV1PairOffersOfferIdEventsGetData, EventsV1PairOffersOfferIdEventsGetError, EventsV1PairOffersOfferIdEventsGetErrors, EventsV1PairOffersOfferIdEventsGetResponses, Expenses, ExpensesV1SpacesSpaceIdExpensesGetData, ExpensesV1SpacesSpaceIdExpensesGetError, ExpensesV1SpacesSpaceIdExpensesGetErrors, ExpensesV1SpacesSpaceIdExpensesGetResponse, ExpensesV1SpacesSpaceIdExpensesGetResponses, ExportV1SpacesSpaceIdExportGetData, ExportV1SpacesSpaceIdExportGetError, ExportV1SpacesSpaceIdExportGetErrors, ExportV1SpacesSpaceIdExportGetResponses, GetDocumentV1DocumentsDocIdGetData, GetDocumentV1DocumentsDocIdGetError, GetDocumentV1DocumentsDocIdGetErrors, GetDocumentV1DocumentsDocIdGetResponse, GetDocumentV1DocumentsDocIdGetResponses, GetFileV1DocumentsDocIdFileGetData, GetFileV1DocumentsDocIdFileGetError, GetFileV1DocumentsDocIdFileGetErrors, GetFileV1DocumentsDocIdFileGetResponses, GrantTo, HttpValidationError, Issue, LinkedDeviceOut, ListNotificationsV1NotificationsGetData, ListNotificationsV1NotificationsGetResponse, ListNotificationsV1NotificationsGetResponses, ListSpacesV1SpacesGetData, ListSpacesV1SpacesGetResponse, ListSpacesV1SpacesGetResponses, MarkNotificationsReadV1NotificationsReadPostData, MarkNotificationsReadV1NotificationsReadPostResponse, MarkNotificationsReadV1NotificationsReadPostResponses, Me, MeV1MeGetData, MeV1MeGetResponse, MeV1MeGetResponses, MonthTotal, NotificationOut, NotificationsOut, OfferCreated, OfferStatus, PairOffer, PairPhoneV1SpacesSpaceIdPairPostData, PairPhoneV1SpacesSpaceIdPairPostError, PairPhoneV1SpacesSpaceIdPairPostErrors, PairPhoneV1SpacesSpaceIdPairPostResponse, PairPhoneV1SpacesSpaceIdPairPostResponses, PatchDocumentV1DocumentsDocIdPatchData, PatchDocumentV1DocumentsDocIdPatchError, PatchDocumentV1DocumentsDocIdPatchErrors, PatchDocumentV1DocumentsDocIdPatchResponse, PatchDocumentV1DocumentsDocIdPatchResponses, ProviderFinishV1AuthProviderFinishPostData, ProviderFinishV1AuthProviderFinishPostError, ProviderFinishV1AuthProviderFinishPostErrors, ProviderFinishV1AuthProviderFinishPostResponse, ProviderFinishV1AuthProviderFinishPostResponses, ProviderIn, ProviderReturn, ProviderStartV1AuthProviderPostData, ProviderStartV1AuthProviderPostError, ProviderStartV1AuthProviderPostErrors, ProviderStartV1AuthProviderPostResponse, ProviderStartV1AuthProviderPostResponses, QrIn, QrV1QrPostData, QrV1QrPostError, QrV1QrPostErrors, QrV1QrPostResponse, QrV1QrPostResponses, Redirect, SchemaV1SchemasDocTypeGetData, SchemaV1SchemasDocTypeGetError, SchemaV1SchemasDocTypeGetErrors, SchemaV1SchemasDocTypeGetResponse, SchemaV1SchemasDocTypeGetResponses, SetBudgetsV1SpacesSpaceIdBudgetsPutData, SetBudgetsV1SpacesSpaceIdBudgetsPutError, SetBudgetsV1SpacesSpaceIdBudgetsPutErrors, SetBudgetsV1SpacesSpaceIdBudgetsPutResponse, SetBudgetsV1SpacesSpaceIdBudgetsPutResponses, SpaceIn, SpaceKind, SpaceOut, State, StatusV1PairOffersOfferIdGetData, StatusV1PairOffersOfferIdGetError, StatusV1PairOffersOfferIdGetErrors, StatusV1PairOffersOfferIdGetResponse, StatusV1PairOffersOfferIdGetResponses, Summary, SummaryV1SpacesSpaceIdSummaryGetData, SummaryV1SpacesSpaceIdSummaryGetError, SummaryV1SpacesSpaceIdSummaryGetErrors, SummaryV1SpacesSpaceIdSummaryGetResponse, SummaryV1SpacesSpaceIdSummaryGetResponses, UnlinkV1DevicesDeviceTokenIdDeleteData, UnlinkV1DevicesDeviceTokenIdDeleteError, UnlinkV1DevicesDeviceTokenIdDeleteErrors, UnlinkV1DevicesDeviceTokenIdDeleteResponse, UnlinkV1DevicesDeviceTokenIdDeleteResponses, UnlinkV1PairDevicesDeviceIdDeleteData, UnlinkV1PairDevicesDeviceIdDeleteError, UnlinkV1PairDevicesDeviceIdDeleteErrors, UnlinkV1PairDevicesDeviceIdDeleteResponse, UnlinkV1PairDevicesDeviceIdDeleteResponses, UploadV1SpacesSpaceIdDocumentsPostData, UploadV1SpacesSpaceIdDocumentsPostError, UploadV1SpacesSpaceIdDocumentsPostErrors, UploadV1SpacesSpaceIdDocumentsPostResponse, UploadV1SpacesSpaceIdDocumentsPostResponses, ValidationError } from './types.gen';
diff --git a/src/api/generated/types.gen.ts b/src/api/generated/types.gen.ts
index 7d7168c..6db9936 100644
--- a/src/api/generated/types.gen.ts
+++ b/src/api/generated/types.gen.ts
@@ -125,6 +125,10 @@ export type ClientConfig = {
      * Scopes
      */
     scopes?: string | null;
+    /**
+     * Login Methods
+     */
+    login_methods?: Array<'email' | 'google' | 'apple'>;
 };
 
 /**
@@ -319,6 +323,60 @@ export type DocumentPatch = {
     confirmed?: boolean;
 };
 
+/**
+ * EmailCodeCheck
+ */
+export type EmailCodeCheck = {
+    /**
+     * Flow
+     */
+    flow: string;
+    /**
+     * Code
+     */
+    code: string;
+};
+
+/**
+ * EmailCodeIn
+ */
+export type EmailCodeIn = {
+    /**
+     * Code Challenge
+     */
+    code_challenge: string;
+    /**
+     * State
+     */
+    state: string;
+    /**
+     * Email
+     */
+    email: string;
+};
+
+/**
+ * EmailCodeSent
+ */
+export type EmailCodeSent = {
+    /**
+     * Flow
+     */
+    flow: string;
+    /**
+     * Email
+     */
+    email: string;
+    /**
+     * Expires In
+     */
+    expires_in: number;
+    /**
+     * Resend After
+     */
+    resend_after: number;
+};
+
 /**
  * Expenses
  */
@@ -429,10 +487,25 @@ export type MonthTotal = {
  * NotificationOut
  */
 export type NotificationOut = {
+    /**
+     * Id
+     */
     id: string;
+    /**
+     * Title
+     */
     title: string;
+    /**
+     * Detail
+     */
     detail: string;
+    /**
+     * Href
+     */
     href: string;
+    /**
+     * Unread
+     */
     unread: boolean;
 };
 
@@ -440,7 +513,13 @@ export type NotificationOut = {
  * NotificationsOut
  */
 export type NotificationsOut = {
+    /**
+     * Items
+     */
     items: Array<NotificationOut>;
+    /**
+     * Unread Count
+     */
     unread_count: number;
 };
 
@@ -528,6 +607,44 @@ export type PairOffer = {
     qr_url: string;
 };
 
+/**
+ * ProviderIn
+ */
+export type ProviderIn = {
+    /**
+     * Code Challenge
+     */
+    code_challenge: string;
+    /**
+     * State
+     */
+    state: string;
+    /**
+     * Provider
+     */
+    provider: 'google' | 'apple';
+};
+
+/**
+ * ProviderReturn
+ *
+ * What Zitadel appended to the return URL after Google or Apple.
+ */
+export type ProviderReturn = {
+    /**
+     * Flow
+     */
+    flow: string;
+    /**
+     * Intent Id
+     */
+    intent_id: string;
+    /**
+     * Intent Token
+     */
+    intent_token: string;
+};
+
 /**
  * QrIn
  */
@@ -538,6 +655,18 @@ export type QrIn = {
     data: string;
 };
 
+/**
+ * Redirect
+ *
+ * Send the browser here next.
+ */
+export type Redirect = {
+    /**
+     * Url
+     */
+    url: string;
+};
+
 /**
  * SpaceIn
  */
@@ -649,6 +778,38 @@ export type ValidationError = {
     };
 };
 
+export type ListNotificationsV1NotificationsGetData = {
+    body?: never;
+    path?: never;
+    query?: never;
+    url: '/v1/notifications';
+};
+
+export type ListNotificationsV1NotificationsGetResponses = {
+    /**
+     * Successful Response
+     */
+    200: NotificationsOut;
+};
+
+export type ListNotificationsV1NotificationsGetResponse = ListNotificationsV1NotificationsGetResponses[keyof ListNotificationsV1NotificationsGetResponses];
+
+export type MarkNotificationsReadV1NotificationsReadPostData = {
+    body?: never;
+    path?: never;
+    query?: never;
+    url: '/v1/notifications/read';
+};
+
+export type MarkNotificationsReadV1NotificationsReadPostResponses = {
+    /**
+     * Successful Response
+     */
+    200: NotificationsOut;
+};
+
+export type MarkNotificationsReadV1NotificationsReadPostResponse = MarkNotificationsReadV1NotificationsReadPostResponses[keyof MarkNotificationsReadV1NotificationsReadPostResponses];
+
 export type CreateOfferV1PairOffersPostData = {
     body: CreateOfferIn;
     path?: never;
@@ -1471,28 +1632,102 @@ export type QrV1QrPostResponses = {
 
 export type QrV1QrPostResponse = QrV1QrPostResponses[keyof QrV1QrPostResponses];
 
-export type ListNotificationsV1NotificationsGetData = {
-    body?: never;
+export type EmailCodeV1AuthEmailPostData = {
+    body: EmailCodeIn;
     path?: never;
     query?: never;
-    url: '/v1/notifications';
+    url: '/v1/auth/email';
 };
 
-export type ListNotificationsV1NotificationsGetResponses = {
-    200: NotificationsOut;
+export type EmailCodeV1AuthEmailPostErrors = {
+    /**
+     * Validation Error
+     */
+    422: HttpValidationError;
 };
 
-export type ListNotificationsV1NotificationsGetResponse = ListNotificationsV1NotificationsGetResponses[keyof ListNotificationsV1NotificationsGetResponses];
+export type EmailCodeV1AuthEmailPostError = EmailCodeV1AuthEmailPostErrors[keyof EmailCodeV1AuthEmailPostErrors];
 
-export type MarkNotificationsReadV1NotificationsReadPostData = {
-    body?: never;
+export type EmailCodeV1AuthEmailPostResponses = {
+    /**
+     * Successful Response
+     */
+    200: EmailCodeSent;
+};
+
+export type EmailCodeV1AuthEmailPostResponse = EmailCodeV1AuthEmailPostResponses[keyof EmailCodeV1AuthEmailPostResponses];
+
+export type EmailCodeCheckV1AuthEmailVerifyPostData = {
+    body: EmailCodeCheck;
     path?: never;
     query?: never;
-    url: '/v1/notifications/read';
+    url: '/v1/auth/email/verify';
 };
 
-export type MarkNotificationsReadV1NotificationsReadPostResponses = {
-    200: NotificationsOut;
+export type EmailCodeCheckV1AuthEmailVerifyPostErrors = {
+    /**
+     * Validation Error
+     */
+    422: HttpValidationError;
 };
 
-export type MarkNotificationsReadV1NotificationsReadPostResponse = MarkNotificationsReadV1NotificationsReadPostResponses[keyof MarkNotificationsReadV1NotificationsReadPostResponses];
+export type EmailCodeCheckV1AuthEmailVerifyPostError = EmailCodeCheckV1AuthEmailVerifyPostErrors[keyof EmailCodeCheckV1AuthEmailVerifyPostErrors];
+
+export type EmailCodeCheckV1AuthEmailVerifyPostResponses = {
+    /**
+     * Successful Response
+     */
+    200: Redirect;
+};
+
+export type EmailCodeCheckV1AuthEmailVerifyPostResponse = EmailCodeCheckV1AuthEmailVerifyPostResponses[keyof EmailCodeCheckV1AuthEmailVerifyPostResponses];
+
+export type ProviderStartV1AuthProviderPostData = {
+    body: ProviderIn;
+    path?: never;
+    query?: never;
+    url: '/v1/auth/provider';
+};
+
+export type ProviderStartV1AuthProviderPostErrors = {
+    /**
+     * Validation Error
+     */
+    422: HttpValidationError;
+};
+
+export type ProviderStartV1AuthProviderPostError = ProviderStartV1AuthProviderPostErrors[keyof ProviderStartV1AuthProviderPostErrors];
+
+export type ProviderStartV1AuthProviderPostResponses = {
+    /**
+     * Successful Response
+     */
+    200: Redirect;
+};
+
+export type ProviderStartV1AuthProviderPostResponse = ProviderStartV1AuthProviderPostResponses[keyof ProviderStartV1AuthProviderPostResponses];
+
+export type ProviderFinishV1AuthProviderFinishPostData = {
+    body: ProviderReturn;
+    path?: never;
+    query?: never;
+    url: '/v1/auth/provider/finish';
+};
+
+export type ProviderFinishV1AuthProviderFinishPostErrors = {
+    /**
+     * Validation Error
+     */
+    422: HttpValidationError;
+};
+
+export type ProviderFinishV1AuthProviderFinishPostError = ProviderFinishV1AuthProviderFinishPostErrors[keyof ProviderFinishV1AuthProviderFinishPostErrors];
+
+export type ProviderFinishV1AuthProviderFinishPostResponses = {
+    /**
+     * Successful Response
+     */
+    200: Redirect;
+};
+
+export type ProviderFinishV1AuthProviderFinishPostResponse = ProviderFinishV1AuthProviderFinishPostResponses[keyof ProviderFinishV1AuthProviderFinishPostResponses];
diff --git a/src/components/app-shell.tsx b/src/components/app-shell.tsx
index 21eabfc..dc4e3db 100644
--- a/src/components/app-shell.tsx
+++ b/src/components/app-shell.tsx
@@ -86,6 +86,12 @@ export function AppShell({ children }: { children: ReactNode }) {
     }
     setAuthorized(false);
     setChecked(true);
+    // Back from signing in (?code=...): the sign-in page swaps the code for tokens.
+    const back = new URLSearchParams(window.location.search);
+    if (back.has("code") || back.has("error")) {
+      router.replace(`/connect${window.location.search}`);
+      return;
+    }
     const returnTo = pathname.startsWith("/") ? pathname : "/";
     router.replace(`/connect?returnTo=${encodeURIComponent(returnTo)}`);
   }, [isPublicRoute, pathname, router]);
diff --git a/src/oidc.ts b/src/oidc.ts
index 37d1863..f694c4a 100644
--- a/src/oidc.ts
+++ b/src/oidc.ts
@@ -1,6 +1,11 @@
 // Sign-in with an OIDC provider (Zitadel in production): Authorization Code flow with
 // PKCE, so the browser needs no client secret. The provider redirects back to this page
 // with ?code=...; finish() swaps it for tokens.
+//
+// The sign-in page can also run the sign-in itself (email code, Google, Apple): begin()
+// gives the API the PKCE challenge, and the API hands back the same ?code= redirect.
+
+import { store } from "./store";
 
 export interface OidcConfig {
   issuer: string;
@@ -62,26 +67,36 @@ async function tokenRequest(cfg: OidcConfig, params: Record<string, string>): Pr
   return r.json() as Promise<Tokens>;
 }
 
-/** Go to the provider's sign-in page. `prompt: "create"` opens registration instead. */
-export async function login(
-  cfg: OidcConfig,
-  { prompt, loginHint }: { prompt?: string; loginHint?: string } = {},
-): Promise<void> {
-  const { authorization_endpoint } = await discover(cfg.issuer);
+export interface Pkce {
+  code_challenge: string;
+  state: string;
+}
+
+/**
+ * Start a sign-in: a new verifier and state, kept until the browser comes back. Kept in
+ * localStorage, not sessionStorage, so the link in a sign-in email works in a new tab.
+ */
+export async function begin(): Promise<Pkce> {
   const verifier = randomString(32);
   const state = randomString(16);
-  sessionStorage.setItem(PENDING, JSON.stringify({ verifier, state }));
+  store.set(PENDING, JSON.stringify({ verifier, state }));
+  return { code_challenge: await pkceChallenge(verifier), state };
+}
+
+/** Go to the provider's sign-in page. `prompt: "create"` opens registration instead. */
+export async function login(cfg: OidcConfig, { prompt }: { prompt?: string } = {}): Promise<void> {
+  const { authorization_endpoint } = await discover(cfg.issuer);
+  const { code_challenge, state } = await begin();
   const q = new URLSearchParams({
     response_type: "code",
     client_id: cfg.client_id,
     redirect_uri: redirectUri(),
     scope: cfg.scopes,
     state,
-    code_challenge: await pkceChallenge(verifier),
+    code_challenge,
     code_challenge_method: "S256",
   });
   if (prompt) q.set("prompt", prompt);
-  if (loginHint) q.set("login_hint", loginHint);
   location.assign(`${authorization_endpoint}?${q}`);
 }
 
@@ -90,11 +105,11 @@ export async function finish(cfg: OidcConfig): Promise<Tokens | null> {
   const q = new URLSearchParams(location.search);
   if (!q.has("code") && !q.has("error")) return null;
   history.replaceState(null, "", location.pathname + location.hash); // keep the code out of history
-  const pending = JSON.parse(sessionStorage.getItem(PENDING) ?? "null") as {
+  const pending = JSON.parse(store.get(PENDING) ?? "null") as {
     verifier: string;
     state: string;
   } | null;
-  sessionStorage.removeItem(PENDING);
+  store.set(PENDING, null);
   if (q.has("error")) throw new Error(q.get("error_description") || "sign-in was cancelled");
   const code = q.get("code");
   if (!pending || !code || pending.state !== q.get("state")) throw new Error("sign-in expired; try again");
diff --git a/test/oidc.test.ts b/test/oidc.test.ts
index eb4b626..4854439 100644
--- a/test/oidc.test.ts
+++ b/test/oidc.test.ts
@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { b64url, finish, login, pkceChallenge } from "../src/oidc";
+import { b64url, begin, finish, login, pkceChallenge } from "../src/oidc";
 
 describe("PKCE", () => {
   it("matches the RFC 7636 example", async () => {
@@ -16,7 +16,7 @@ describe("PKCE", () => {
 describe("finish", () => {
   const cfg = { issuer: "https://auth.example.com", client_id: "web", scopes: "openid" };
   afterEach(() => {
-    sessionStorage.clear();
+    localStorage.clear();
     history.replaceState(null, "", "/");
   });
 
@@ -25,14 +25,14 @@ describe("finish", () => {
   });
 
   it("rejects a return whose state doesn't match (a forged or stale sign-in)", async () => {
-    sessionStorage.setItem("ss.oidc.pending", JSON.stringify({ verifier: "v", state: "expected" }));
+    localStorage.setItem("ss.oidc.pending", JSON.stringify({ verifier: "v", state: "expected" }));
     history.replaceState(null, "", "/?code=abc&state=attacker");
     await expect(finish(cfg)).rejects.toThrow("sign-in expired");
     expect(location.search).toBe(""); // the code is removed from the address bar either way
   });
 
   it("swaps the code for tokens, sending the PKCE verifier", async () => {
-    sessionStorage.setItem("ss.oidc.pending", JSON.stringify({ verifier: "the-verifier", state: "s1" }));
+    localStorage.setItem("ss.oidc.pending", JSON.stringify({ verifier: "the-verifier", state: "s1" }));
     history.replaceState(null, "", "/?code=abc&state=s1");
     const fetchMock = vi.fn(async (url: string, init?: RequestInit) => {
       if (url.endsWith("/.well-known/openid-configuration"))
@@ -49,14 +49,26 @@ describe("finish", () => {
   });
 });
 
+describe("begin", () => {
+  afterEach(() => localStorage.clear());
+
+  it("keeps the verifier and gives out only its challenge", async () => {
+    const { code_challenge, state } = await begin();
+    const pending = JSON.parse(localStorage.getItem("ss.oidc.pending") ?? "{}");
+    expect(pending.state).toBe(state);
+    expect(code_challenge).toBe(await pkceChallenge(pending.verifier));
+    expect(code_challenge).toMatch(/^[A-Za-z0-9_-]{43}$/);
+  });
+});
+
 describe("login", () => {
   afterEach(() => {
-    sessionStorage.clear();
+    localStorage.clear();
     vi.unstubAllGlobals();
     vi.restoreAllMocks();
   });
 
-  it("passes a phone number as the OIDC login_hint", async () => {
+  it("goes to the provider with a PKCE challenge", async () => {
     const assign = vi.spyOn(window.location, "assign").mockImplementation(() => {});
     vi.stubGlobal(
       "fetch",
@@ -64,10 +76,10 @@ describe("login", () => {
     );
     const cfg = { issuer: "https://auth.example.com", client_id: "web", scopes: "openid" };
 
-    await login(cfg, { loginHint: "+8801915366317" });
+    await login(cfg);
 
     expect(assign).toHaveBeenCalledOnce();
-    expect(assign.mock.calls[0][0]).toContain("login_hint=%2B8801915366317");
     expect(assign.mock.calls[0][0]).toContain("code_challenge_method=S256");
+    expect(assign.mock.calls[0][0]).not.toContain("login_hint");
   });
 });

From 26062c1d5f47bf81d7eefb940a315378dd7f7599 Mon Sep 17 00:00:00 2001
From: faizur_almas <kutsnalmas@gmail.com>
Date: Tue, 27 Oct 2026 11:33:04 +0600
Subject: [PATCH 3/4] Only offer the email step when the server allows email
 sign-in

With passwordless sign-in on and login_methods lacking "email" (say only
Google is set up), the email button now shows as unavailable and explains,
instead of opening a step whose request the server would refuse.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/connect/page.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/connect/page.tsx b/app/connect/page.tsx
index 2bc5ea7..d404293 100644
--- a/app/connect/page.tsx
+++ b/app/connect/page.tsx
@@ -111,6 +111,8 @@ export default function ConnectPage() {
   const passwordless = config?.auth === "oidc" && methods.length > 0;
   const hosted = config?.auth === "oidc" && methods.length === 0;
   const available = (provider: Provider) => passwordless && methods.includes(provider);
+  // Dev mode, the hosted fallback and an offline API each handle the email step their own way.
+  const emailAvailable = !passwordless || methods.includes("email");
 
   const leaving = () => store.set(RETURN_TO, destination());
 
@@ -129,7 +131,8 @@ export default function ConnectPage() {
     setError("");
     if (hosted) return goHosted();
     if (!available(provider)) {
-      setError(`${PROVIDER_NAMES[provider]} sign-in isn't set up on this server yet. Continue with email.`);
+      const instead = emailAvailable ? " Continue with email." : "";
+      setError(`${PROVIDER_NAMES[provider]} sign-in isn't set up on this server yet.${instead}`);
       return;
     }
     try {
@@ -149,6 +152,10 @@ export default function ConnectPage() {
   const chooseEmail = () => {
     setError("");
     if (hosted) return goHosted();
+    if (!emailAvailable) {
+      setError("Email sign-in isn't set up on this server yet.");
+      return;
+    }
     setStep({ name: "email" });
   };
 
@@ -237,7 +244,7 @@ export default function ConnectPage() {
               Keep your receipts, budgets and spaces in one clear view.
             </Title>
             <div className="mt-8 space-y-3">
-              <ChoiceButton onClick={chooseEmail} icon={<MailMark />}>
+              <ChoiceButton onClick={chooseEmail} icon={<MailMark />} unavailable={!emailAvailable}>
                 Continue with email
               </ChoiceButton>
               <ChoiceButton

From f2ce80175a8f2657e2559ea72b2106046f4039fc Mon Sep 17 00:00:00 2001
From: faizur_almas <kutsnalmas@gmail.com>
Date: Tue, 27 Oct 2026 15:48:23 +0600
Subject: [PATCH 4/4] Biome: skip the .next build output

CI now runs the lint after the build (#4), so Biome was checking the
generated .next folder: 15,411 findings, all in build output.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
(cherry picked from commit 6ded0c683c419df139f6aa169a958657f074304a)
---
 biome.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/biome.json b/biome.json
index bfdcade..b40c846 100644
--- a/biome.json
+++ b/biome.json
@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
   "files": {
-    "includes": ["**", "!src/api/generated", "!dist", "!openapi.json"]
+    "includes": ["**", "!.next", "!src/api/generated", "!dist", "!openapi.json"]
   },
   "formatter": {
     "indentStyle": "space",