From 4db809bd2001b999ef799516c42c90732d88b07a Mon Sep 17 00:00:00 2001
From: DjimoSerodio <132837131+DjimoSerodio@users.noreply.github.com>
Date: Thu, 15 Oct 2026 08:16:52 -0400
Subject: [PATCH 1/7] fix(auth): make the Google/GitHub sign-in buttons POST to
 /sign-in/social

The login page rendered the social buttons as links to
/api/auth/sign-in/social?provider=...&callbackURL=/auth/complete. A link
click is a GET, but better-auth 1.4.18 registers /sign-in/social as
POST-only, so every click ended on a 404 and the buttons could never start
a sign-in on an instance with GOOGLE_CLIENT_ID/SECRET or
GITHUB_CLIENT_ID/SECRET set.

Render them as <button type="button" data-social-provider="google|github">
and add one click handler to the existing page script: it POSTs
{ provider, callbackURL: '/auth/complete' } to authBasePath +
'/sign-in/social' (same origin, so already inside connect-src 'self') and
follows the provider URL better-auth returns. On any failure it shows the
page's standard error flash and re-enables the button. The button stays
disabled while the POST is in flight, because a second POST would replace
the first one's OAuth state cookie, and is re-enabled when the page comes
back from the back/forward cache.

No new endpoint, configuration or dependency; /auth/complete is unchanged.

Tests: new login-page-social-buttons.test.ts runs the page's real inline
script in a node:vm context against a stand-in DOM and clicks the buttons
(all 10 cases fail against main). The documentation-style assertions in
social-providers.test.ts that still described a GET link now describe the
POST.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/social-sign-in-buttons-post.md     |  11 +
 .../login-page-social-buttons.test.ts         | 239 ++++++++++++++++++
 .../src/__tests__/social-providers.test.ts    |  34 +--
 .../auth-service/src/routes/login-page.ts     |  58 ++++-
 4 files changed, 320 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/social-sign-in-buttons-post.md
 create mode 100644 packages/auth-service/src/__tests__/login-page-social-buttons.test.ts

diff --git a/.changeset/social-sign-in-buttons-post.md b/.changeset/social-sign-in-buttons-post.md
new file mode 100644
index 00000000..19e770df
--- /dev/null
+++ b/.changeset/social-sign-in-buttons-post.md
@@ -0,0 +1,11 @@
+---
+'ePDS': patch
+---
+
+The "Sign in with Google" and "Sign in with GitHub" buttons now work.
+
+**Affects:** End users, Operators
+
+**End users:** Clicking either button used to end on a "not found" page. If a sign-in cannot be started, the page now says so and the button can be pressed again.
+
+**Operators:** The buttons now POST `{ provider, callbackURL: '/auth/complete' }` to `/api/auth/sign-in/social` instead of linking to it with a GET, which better-auth answers with 404. Instances with `GOOGLE_CLIENT_ID`/`GOOGLE_CLIENT_SECRET` or `GITHUB_CLIENT_ID`/`GITHUB_CLIENT_SECRET` set need no change. Branding CSS that targeted `a.btn-google` / `a.btn-github` should target `.btn-google` / `.btn-github` instead.
diff --git a/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts b/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
new file mode 100644
index 00000000..8d4844c3
--- /dev/null
+++ b/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
@@ -0,0 +1,239 @@
+/**
+ * The social sign-in buttons must POST to better-auth's /sign-in/social.
+ *
+ * better-auth registers that endpoint as POST-only, so the plain
+ * `<a href=".../sign-in/social?provider=google...">` link the page used to
+ * render sent a GET and got a 404: the Google and GitHub buttons could never
+ * start a sign-in.
+ *
+ * The behavioural tests run the page's real inline script in a `node:vm`
+ * context against a minimal stand-in DOM, then click a button: there is no
+ * DOM test environment in this repo, and asserting on the script's source
+ * text alone would not show that the handler is wired up.
+ */
+import * as vm from 'node:vm'
+import { describe, it, expect, vi } from 'vitest'
+
+vi.mock('../better-auth.js', () => ({
+  socialProviders: {
+    google: { clientId: 'google-id', clientSecret: 'google-secret' },
+    github: { clientId: 'github-id', clientSecret: 'github-secret' },
+  },
+}))
+
+const { renderLoginPage } = await import('../routes/login-page.js')
+
+function render(): string {
+  return renderLoginPage({
+    flowId: 'flow-1',
+    clientId: 'https://example.com/client-metadata.json',
+    clientName: 'Example',
+    branding: {},
+    customCss: null,
+    customFaviconUrl: null,
+    customFaviconUrlDark: null,
+    loginHint: '',
+    initialStep: 'email',
+    otpAlreadySent: false,
+    csrfToken: 'csrf',
+    authBasePath: '/api/auth',
+    pdsPublicUrl: 'https://pds.example.com',
+    otpLength: 6,
+    otpCharset: 'numeric',
+    heartbeatEnabled: false,
+  })
+}
+
+/** The page's main inline script (the one that owns the login flow). */
+function mainScript(html: string): string {
+  const scripts = [...html.matchAll(/<script>([\s\S]*?)<\/script>/g)].map(
+    (m) => m[1],
+  )
+  const main = scripts.find((s) => s.includes('var authBasePath'))
+  if (!main) throw new Error('login page main script not found')
+  return main
+}
+
+/**
+ * A value that absorbs any property read, call or construction by returning
+ * itself, so page-script initialisation that does not concern the social
+ * buttons (OTP boxes, typo guard, heartbeat) runs without a real DOM.
+ */
+function absorbing(): unknown {
+  const target = function () {}
+  const proxy: unknown = new Proxy(target, {
+    get: (_t, key) => {
+      if (key === Symbol.toPrimitive) return () => ''
+      if (key === 'length') return 0
+      return proxy
+    },
+    set: () => true,
+    apply: () => proxy,
+    construct: () => proxy as object,
+  })
+  return proxy
+}
+
+interface FakeButton {
+  disabled: boolean
+  getAttribute: (name: string) => string | null
+  addEventListener: (type: string, fn: () => unknown) => void
+  click: () => unknown
+}
+
+function fakeButton(provider: string): FakeButton {
+  let onClick: (() => unknown) | undefined
+  return {
+    disabled: false,
+    getAttribute: (name) => (name === 'data-social-provider' ? provider : null),
+    addEventListener: (type, fn) => {
+      if (type === 'click') onClick = fn
+    },
+    click: () => onClick?.(),
+  }
+}
+
+/**
+ * Run the page script with fake Google/GitHub buttons and a stubbed
+ * `fetch`, and return the handles a test needs to drive and observe it.
+ */
+function runPage(fetchImpl: (url: string, init: RequestInit) => unknown) {
+  const buttons = { google: fakeButton('google'), github: fakeButton('github') }
+  const assign = vi.fn()
+  const fetchSpy = vi.fn(fetchImpl)
+  const windowListeners: Partial<Record<string, ((e: unknown) => void)[]>> = {}
+  // The shared flash region: records the text of the last message shown.
+  const flash = { text: '' }
+  const errorEl = {
+    classList: { add: () => undefined, remove: () => undefined },
+    replaceChildren: (frag?: { children: { textContent: string }[] }) => {
+      flash.text = frag ? frag.children.map((c) => c.textContent).join('') : ''
+    },
+  }
+  const fakeDocument: Record<string, unknown> = {
+    querySelectorAll: (selector: string) =>
+      selector === '[data-social-provider]'
+        ? [buttons.google, buttons.github]
+        : [],
+    getElementById: (id: string) =>
+      id === 'error-msg' ? errorEl : absorbing(),
+    createDocumentFragment: () => {
+      const children: unknown[] = []
+      return { children, appendChild: (n: unknown) => children.push(n) }
+    },
+    createElement: () => ({ textContent: '' }),
+  }
+  const document = new Proxy(absorbing() as object, {
+    get: (target, key) =>
+      typeof key === 'string' && key in fakeDocument
+        ? fakeDocument[key]
+        : (target as Record<PropertyKey, unknown>)[key],
+  })
+  const window = {
+    location: { assign, href: '', search: '' },
+    addEventListener: (type: string, fn: (e: unknown) => void) => {
+      ;(windowListeners[type] ??= []).push(fn)
+    },
+  }
+  vm.runInNewContext(mainScript(render()), {
+    document,
+    window,
+    fetch: fetchSpy,
+    setInterval: () => 0,
+    clearInterval: () => undefined,
+    setTimeout: () => 0,
+    clearTimeout: () => undefined,
+    navigator: absorbing(),
+    console,
+  })
+  return { buttons, assign, fetchSpy, windowListeners, flash }
+}
+
+function jsonResponse(status: number, body: unknown) {
+  return Promise.resolve({
+    ok: status >= 200 && status < 300,
+    status,
+    json: () => Promise.resolve(body),
+  })
+}
+
+describe('renderLoginPage social sign-in buttons', () => {
+  it('never links to /sign-in/social with a GET', () => {
+    expect(render()).not.toContain('/sign-in/social?provider=')
+  })
+
+  it.each(['google', 'github'])('renders %s as a button, not a link', (p) => {
+    expect(render()).toContain(
+      `<button type="button" class="btn-social btn-${p}" data-social-provider="${p}">`,
+    )
+  })
+
+  it.each(['google', 'github'] as const)(
+    'clicking %s POSTs the provider and follows the returned URL',
+    async (provider) => {
+      const providerUrl = `https://${provider}.example/authorize?state=s`
+      const { buttons, assign, fetchSpy } = runPage(() =>
+        jsonResponse(200, { url: providerUrl, redirect: true }),
+      )
+
+      await buttons[provider].click()
+
+      expect(fetchSpy).toHaveBeenCalledTimes(1)
+      const [url, init] = fetchSpy.mock.calls[0]
+      expect(url).toBe('/api/auth/sign-in/social')
+      expect(init.method).toBe('POST')
+      expect(JSON.parse(init.body as string)).toEqual({
+        provider,
+        callbackURL: '/auth/complete',
+      })
+      expect(assign).toHaveBeenCalledWith(providerUrl)
+    },
+  )
+
+  it('ignores a second click while the first POST is in flight', async () => {
+    let resolveFetch: (v: unknown) => void = () => undefined
+    const { buttons, fetchSpy } = runPage(
+      () =>
+        new Promise((resolve) => {
+          resolveFetch = resolve
+        }),
+    )
+
+    const first = buttons.google.click()
+    await buttons.google.click()
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+
+    resolveFetch(await jsonResponse(200, { url: 'https://google.example/' }))
+    await first
+  })
+
+  it.each([
+    ['an error status', () => jsonResponse(404, {})],
+    ['a response without a URL', () => jsonResponse(200, {})],
+    ['a network failure', () => Promise.reject(new Error('offline'))],
+  ])(
+    'shows an error and re-enables the button after %s',
+    async (_label, impl) => {
+      const { buttons, assign, fetchSpy, flash } = runPage(impl)
+
+      await buttons.github.click()
+
+      expect(fetchSpy).toHaveBeenCalledTimes(1)
+      expect(assign).not.toHaveBeenCalled()
+      expect(flash.text).toBe('Could not start sign-in. Please try again.')
+      expect(buttons.github.disabled).toBe(false)
+    },
+  )
+
+  it('re-enables the buttons when the page is restored from the back/forward cache', async () => {
+    const { buttons, windowListeners } = runPage(() =>
+      jsonResponse(200, { url: 'https://google.example/' }),
+    )
+    await buttons.google.click()
+    expect(buttons.google.disabled).toBe(true)
+
+    for (const fn of windowListeners.pageshow ?? []) fn({ persisted: true })
+
+    expect(buttons.google.disabled).toBe(false)
+  })
+})
diff --git a/packages/auth-service/src/__tests__/social-providers.test.ts b/packages/auth-service/src/__tests__/social-providers.test.ts
index af2e4004..f2d2d263 100644
--- a/packages/auth-service/src/__tests__/social-providers.test.ts
+++ b/packages/auth-service/src/__tests__/social-providers.test.ts
@@ -5,10 +5,12 @@
  * - GOOGLE_CLIENT_ID + GOOGLE_CLIENT_SECRET
  * - GITHUB_CLIENT_ID + GITHUB_CLIENT_SECRET
  *
- * When configured, the login page renders social login buttons that redirect
- * to better-auth's provider endpoints (/api/auth/sign-in/social?provider=...).
- * After OAuth exchange, better-auth redirects to /auth/complete (bridge route)
- * which reads the session and issues an HMAC-signed epds-callback.
+ * When configured, the login page renders social login buttons whose click
+ * handler POSTs { provider, callbackURL } to better-auth's
+ * /api/auth/sign-in/social (POST-only) and follows the provider URL it
+ * returns (see login-page-social-buttons.test.ts). After the OAuth exchange,
+ * better-auth redirects to /auth/complete (bridge route) which reads the
+ * session and issues an HMAC-signed epds-callback.
  */
 import { describe, it, expect } from 'vitest'
 
@@ -96,17 +98,19 @@ describe('Social provider detection', () => {
 })
 
 describe('Social login flow (unit)', () => {
-  it('social login URLs follow better-auth convention', () => {
-    // Social login should redirect to /api/auth/sign-in/social?provider=...
-    const googleUrl =
-      '/api/auth/sign-in/social?provider=google&callbackURL=/auth/complete'
-    const githubUrl =
-      '/api/auth/sign-in/social?provider=github&callbackURL=/auth/complete'
-
-    expect(googleUrl).toContain('provider=google')
-    expect(googleUrl).toContain('callbackURL=/auth/complete')
-    expect(githubUrl).toContain('provider=github')
-    expect(githubUrl).toContain('callbackURL=/auth/complete')
+  it('social sign-in follows better-auth convention', () => {
+    // Social sign-in starts with a POST to /api/auth/sign-in/social; a GET
+    // with the same fields as query parameters is a 404 (the endpoint is
+    // POST-only). better-auth answers with the provider URL to follow.
+    const endpoint = '/api/auth/sign-in/social'
+    const googleBody = { provider: 'google', callbackURL: '/auth/complete' }
+    const githubBody = { provider: 'github', callbackURL: '/auth/complete' }
+
+    expect(endpoint).not.toContain('?')
+    expect(googleBody.provider).toBe('google')
+    expect(githubBody.provider).toBe('github')
+    expect(googleBody.callbackURL).toBe('/auth/complete')
+    expect(githubBody.callbackURL).toBe('/auth/complete')
   })
 
   it('bridge route /auth/complete is the callback for all auth methods', () => {
diff --git a/packages/auth-service/src/routes/login-page.ts b/packages/auth-service/src/routes/login-page.ts
index 8a9858dc..0810385c 100644
--- a/packages/auth-service/src/routes/login-page.ts
+++ b/packages/auth-service/src/routes/login-page.ts
@@ -17,7 +17,8 @@
  *
  * The better-auth flow after login:
  *   - Email OTP: user submits code to /api/auth/sign-in/email-otp/verify
- *   - Social: user clicks button → /api/auth/sign-in/{provider} → OAuth exchange
+ *   - Social: user clicks button → page script POSTs /api/auth/sign-in/social
+ *     → browser follows the returned provider URL → OAuth exchange
  *   - On success, better-auth redirects to /auth/complete (the bridge route)
  *   - Bridge reads epds_auth_flow cookie → auth_flow → HMAC-signed redirect
  */
@@ -568,7 +569,9 @@ export function renderLoginPage(opts: {
   const flashRegionHtml =
     '<div id="error-msg" class="flash-msg hidden" role="status" aria-live="polite"></div>'
 
-  // Social login buttons — redirect to better-auth provider endpoints
+  // Social login buttons. better-auth's /sign-in/social is POST-only, so
+  // these are buttons handled by the page script, not links (a link's GET
+  // is a 404).
   const socialButtonsHtml = hasSocialProviders
     ? `
     <div class="divider"><span>or continue with</span></div>
@@ -576,7 +579,7 @@ export function renderLoginPage(opts: {
       ${
         hasGoogle
           ? `
-      <a href="${opts.authBasePath}/sign-in/social?provider=google&callbackURL=/auth/complete" class="btn-social btn-google">
+      <button type="button" class="btn-social btn-google" data-social-provider="google">
         <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
           <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
           <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
@@ -584,18 +587,18 @@ export function renderLoginPage(opts: {
           <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
         </svg>
         Sign in with Google
-      </a>`
+      </button>`
           : ''
       }
       ${
         hasGithub
           ? `
-      <a href="${opts.authBasePath}/sign-in/social?provider=github&callbackURL=/auth/complete" class="btn-social btn-github">
+      <button type="button" class="btn-social btn-github" data-social-provider="github">
         <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
           <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
         </svg>
         Sign in with GitHub
-      </a>`
+      </button>`
           : ''
       }
     </div>
@@ -643,7 +646,7 @@ export function renderLoginPage(opts: {
     .btn-secondary { display: inline-block; color: var(--muted-foreground); background: none; border: none; font-size: 14px; font-weight: 500; cursor: pointer; padding: 4px 0; border-radius: 4px; text-decoration: none; }
     .btn-secondary:hover { color: #1A130F; }
     .btn-secondary:focus-visible { outline: 2px solid var(--focus-border, #2563eb); outline-offset: 2px; }
-    .btn-social { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 20px; border: 1px solid var(--btn-secondary-border); border-radius: 9999px; font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; background: white; color: #333; margin-bottom: 8px; transition: background 0.15s; }
+    .btn-social { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 20px; border: 1px solid var(--btn-secondary-border); border-radius: 9999px; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; background: white; color: #333; margin-bottom: 8px; transition: background 0.15s; }
     .btn-social:hover { background: #fafafa; }
     .btn-atproto { margin-top: 12px; margin-bottom: 0; color: #1A130F !important; background: var(--input-bg) !important; border-color: var(--input-border) !important; }
     .divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted-foreground); font-size: 13px; }
@@ -1227,6 +1230,47 @@ export function renderLoginPage(opts: {
         });
       }
 
+      // better-auth's /sign-in/social is POST-only (a GET is a 404), so
+      // the social buttons POST it and follow the provider URL it returns.
+      // The button stays disabled while the request is in flight: a second
+      // POST would replace the first one's OAuth state, and the provider
+      // round trip started by the first click would then fail.
+      var socialButtons = Array.prototype.slice.call(
+        document.querySelectorAll('[data-social-provider]'),
+      );
+      // A page restored from the back/forward cache keeps its script
+      // state, so a button disabled on the way out to the provider would
+      // otherwise still be disabled when the user comes back.
+      window.addEventListener('pageshow', function(e) {
+        if (e.persisted) {
+          socialButtons.forEach(function(btn) { btn.disabled = false; });
+        }
+      });
+      socialButtons.forEach(function(btn) {
+        btn.addEventListener('click', async function() {
+          if (btn.disabled) return;
+          btn.disabled = true;
+          clearError();
+          try {
+            var res = await fetch(authBasePath + '/sign-in/social', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                provider: btn.getAttribute('data-social-provider'),
+                callbackURL: '/auth/complete',
+              }),
+            });
+            var data = await res.json().catch(function() { return {}; });
+            if (res.ok && data.url) {
+              window.location.assign(data.url);
+              return;
+            }
+          } catch (err) {}
+          btn.disabled = false;
+          showError('Could not start sign-in. Please try again.');
+        });
+      });
+
       function showOtpStep(email) {
         currentEmail = email;
         otpEmailInput.value = email;

From 818eb978b9c0a31ea4b89cf4634d587c8e573b7b Mon Sep 17 00:00:00 2001
From: DjimoSerodio <132837131+DjimoSerodio@users.noreply.github.com>
Date: Thu, 15 Oct 2026 13:50:51 -0400
Subject: [PATCH 2/7] feat(auth): let each client opt in to social sign-in
 buttons

A provider's button now renders only when the operator configured it and
the OAuth client lists it in epds_social_providers, the same way
epds_handle_login_url gates the ATProto/Bluesky button. Configuring Google
on a shared PDS therefore leaves the login page of every other client
unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/social-sign-in-buttons-post.md     |  8 +++--
 docs/configuration.md                         |  6 ++--
 docs/tutorial.md                              | 18 +++++++++++
 .../login-page-social-buttons.test.ts         | 31 +++++++++++++++++--
 .../auth-service/src/routes/login-page.ts     | 14 +++++++--
 packages/shared/src/client-metadata.ts        | 11 +++++++
 6 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/.changeset/social-sign-in-buttons-post.md b/.changeset/social-sign-in-buttons-post.md
index 19e770df..c0935848 100644
--- a/.changeset/social-sign-in-buttons-post.md
+++ b/.changeset/social-sign-in-buttons-post.md
@@ -2,10 +2,12 @@
 'ePDS': patch
 ---
 
-The "Sign in with Google" and "Sign in with GitHub" buttons now work.
+The "Sign in with Google" and "Sign in with GitHub" buttons now work, and each client app chooses whether to show them.
 
-**Affects:** End users, Operators
+**Affects:** End users, Client app developers, Operators
 
 **End users:** Clicking either button used to end on a "not found" page. If a sign-in cannot be started, the page now says so and the button can be pressed again.
 
-**Operators:** The buttons now POST `{ provider, callbackURL: '/auth/complete' }` to `/api/auth/sign-in/social` instead of linking to it with a GET, which better-auth answers with 404. Instances with `GOOGLE_CLIENT_ID`/`GOOGLE_CLIENT_SECRET` or `GITHUB_CLIENT_ID`/`GITHUB_CLIENT_SECRET` set need no change. Branding CSS that targeted `a.btn-google` / `a.btn-github` should target `.btn-google` / `.btn-github` instead.
+**Operators:** The buttons now POST `{ provider, callbackURL: '/auth/complete' }` to `/api/auth/sign-in/social` instead of linking to it with a GET, which better-auth answers with 404. Configuring a provider no longer adds its button to every client's login page; only clients that list it in `epds_social_providers` get it. Because the buttons never worked before this change (every click returned 404), no client loses a working sign-in. Branding CSS that targeted `a.btn-google` / `a.btn-github` should target `.btn-google` / `.btn-github` instead.
+
+**Client app developers:** Social buttons are now opt-in per client, like the ATProto/Bluesky button. Add `"epds_social_providers": ["google"]` (and/or `"github"`) to your client metadata to show them. Clients that do not list a provider see no social buttons, even when the operator has configured it.
diff --git a/docs/configuration.md b/docs/configuration.md
index 94427468..3f04a465 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -169,8 +169,10 @@ card when both `PDS_TERMS_OF_SERVICE_URL` and `PDS_PRIVACY_POLICY_URL`
 
 ### Social providers (optional)
 
-Both ID and SECRET must be set to enable a provider. When set, social login
-buttons appear on the login page.
+Both ID and SECRET must be set to enable a provider. A provider's button
+appears on the login page only for OAuth clients that also list it in their
+client metadata (`"epds_social_providers": ["google"]`), so enabling a
+provider does not change the login page of clients that did not ask for it.
 
 | Variable               | Description                                                                                  |
 | ---------------------- | -------------------------------------------------------------------------------------------- |
diff --git a/docs/tutorial.md b/docs/tutorial.md
index 9b33f34e..39c0dd56 100644
--- a/docs/tutorial.md
+++ b/docs/tutorial.md
@@ -381,6 +381,24 @@ Constraints:
 - If `epds_handle_login_url` is unset or invalid, the button is not
   rendered. Existing clients see no behaviour change.
 
+#### Optional: offer Google or GitHub sign-in
+
+If the PDS operator has configured a social provider (see
+[Social providers](./configuration.md#social-providers-optional)), opt in
+by listing it in your client metadata:
+
+```json
+{
+  "epds_social_providers": ["google"]
+}
+```
+
+The login page then renders that provider's button above the email form.
+A button appears only when both the operator configured the provider and
+your client lists it, so a provider enabled for one app does not appear on
+other apps' login pages. Accepted values: `"google"`, `"github"`. Unknown
+values are ignored; if the field is unset, no social buttons are rendered.
+
 #### Optional: custom CSS and favicon for ePDS pages (trusted clients)
 
 If your app is in the PDS operator's `PDS_OAUTH_TRUSTED_CLIENTS`, you can
diff --git a/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts b/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
index 8d4844c3..9c8811fa 100644
--- a/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
+++ b/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
@@ -23,12 +23,16 @@ vi.mock('../better-auth.js', () => ({
 
 const { renderLoginPage } = await import('../routes/login-page.js')
 
-function render(): string {
+function render(
+  branding: Record<string, unknown> = {
+    epds_social_providers: ['google', 'github'],
+  },
+): string {
   return renderLoginPage({
     flowId: 'flow-1',
     clientId: 'https://example.com/client-metadata.json',
     clientName: 'Example',
-    branding: {},
+    branding,
     customCss: null,
     customFaviconUrl: null,
     customFaviconUrlDark: null,
@@ -237,3 +241,26 @@ describe('renderLoginPage social sign-in buttons', () => {
     expect(buttons.google.disabled).toBe(false)
   })
 })
+
+describe('renderLoginPage social sign-in opt-in', () => {
+  it('renders no social buttons when the client does not ask for any', () => {
+    const html = render({})
+    expect(html).not.toContain('data-social-provider="')
+    expect(html).not.toContain('or continue with')
+  })
+
+  it('renders only the providers the client lists', () => {
+    const html = render({ epds_social_providers: ['google'] })
+    expect(html).toContain('data-social-provider="google"')
+    expect(html).not.toContain('data-social-provider="github"')
+  })
+
+  it('ignores unknown providers and a non-array value', () => {
+    expect(render({ epds_social_providers: ['facebook'] })).not.toContain(
+      'data-social-provider="',
+    )
+    expect(render({ epds_social_providers: 'google' })).not.toContain(
+      'data-social-provider="',
+    )
+  })
+})
diff --git a/packages/auth-service/src/routes/login-page.ts b/packages/auth-service/src/routes/login-page.ts
index 0810385c..57ab1c42 100644
--- a/packages/auth-service/src/routes/login-page.ts
+++ b/packages/auth-service/src/routes/login-page.ts
@@ -557,8 +557,18 @@ export function renderLoginPage(opts: {
       )}" class="terms-link" target="_blank" rel="noopener noreferrer">Privacy Policy</a>.</div>`
     : ''
 
-  const hasGoogle = 'google' in socialProviders
-  const hasGithub = 'github' in socialProviders
+  // Social buttons are opt-in per client: a provider's button renders only
+  // when the operator configured it AND the client lists it in
+  // `epds_social_providers`, the same way `epds_handle_login_url` gates the
+  // ATProto/Bluesky button. Configuring Google on a shared PDS therefore
+  // leaves the login page of every other client unchanged.
+  const requestedSocial = Array.isArray(b.epds_social_providers)
+    ? b.epds_social_providers
+    : []
+  const hasGoogle =
+    'google' in socialProviders && requestedSocial.includes('google')
+  const hasGithub =
+    'github' in socialProviders && requestedSocial.includes('github')
   const hasSocialProviders = hasGoogle || hasGithub
 
   // The flash region is a single element shared by both steps, so there
diff --git a/packages/shared/src/client-metadata.ts b/packages/shared/src/client-metadata.ts
index 730dc5ad..7e13da72 100644
--- a/packages/shared/src/client-metadata.ts
+++ b/packages/shared/src/client-metadata.ts
@@ -89,6 +89,17 @@ export interface ClientMetadata {
    * parseable as http(s), the button is not rendered.
    */
   epds_handle_login_url?: string
+  /**
+   * ePDS extension — the social sign-in buttons this client wants on the
+   * login page, e.g. `["google"]`. A provider's button is rendered only when
+   * the client lists it here AND the operator has configured that provider
+   * (`GOOGLE_CLIENT_ID`/`GOOGLE_CLIENT_SECRET`, `GITHUB_CLIENT_ID`/
+   * `GITHUB_CLIENT_SECRET`). Opt-in per client, like `epds_handle_login_url`,
+   * so configuring a provider on a shared PDS does not change the login page
+   * of clients that did not ask for it. Unknown names and non-array values
+   * are ignored.
+   */
+  epds_social_providers?: string[]
 }
 
 interface CacheEntry {

From 1a6512ed444eeaf3c603df80006676970728f0c2 Mon Sep 17 00:00:00 2001
From: DjimoSerodio <132837131+DjimoSerodio@users.noreply.github.com>
Date: Thu, 15 Oct 2026 19:31:19 -0400
Subject: [PATCH 3/7] fix(auth): follow a social sign-in URL only on the
 provider's own host

The login page script assigned window.location to whatever URL
/sign-in/social returned. Follow it only when it is an https URL whose
origin is that provider's authorization server (accounts.google.com for
Google, github.com for GitHub); any other response shows the standard
"Could not start sign-in" error and re-enables the button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/social-sign-in-buttons-post.md     |  2 +-
 .../login-page-social-buttons.test.ts         | 54 +++++++++++++++++--
 .../auth-service/src/routes/login-page.ts     | 34 ++++++++++--
 3 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/.changeset/social-sign-in-buttons-post.md b/.changeset/social-sign-in-buttons-post.md
index c0935848..af65df3a 100644
--- a/.changeset/social-sign-in-buttons-post.md
+++ b/.changeset/social-sign-in-buttons-post.md
@@ -8,6 +8,6 @@ The "Sign in with Google" and "Sign in with GitHub" buttons now work, and each c
 
 **End users:** Clicking either button used to end on a "not found" page. If a sign-in cannot be started, the page now says so and the button can be pressed again.
 
-**Operators:** The buttons now POST `{ provider, callbackURL: '/auth/complete' }` to `/api/auth/sign-in/social` instead of linking to it with a GET, which better-auth answers with 404. Configuring a provider no longer adds its button to every client's login page; only clients that list it in `epds_social_providers` get it. Because the buttons never worked before this change (every click returned 404), no client loses a working sign-in. Branding CSS that targeted `a.btn-google` / `a.btn-github` should target `.btn-google` / `.btn-github` instead.
+**Operators:** The buttons now POST `{ provider, callbackURL: '/auth/complete' }` to `/api/auth/sign-in/social` instead of linking to it with a GET, which better-auth answers with 404. The page then follows the returned URL only when it is an https URL on that provider's authorization host (`accounts.google.com` for Google, `github.com` for GitHub); any other response shows the sign-in error instead. Configuring a provider no longer adds its button to every client's login page; only clients that list it in `epds_social_providers` get it. Because the buttons never worked before this change (every click returned 404), no client loses a working sign-in. Branding CSS that targeted `a.btn-google` / `a.btn-github` should target `.btn-google` / `.btn-github` instead.
 
 **Client app developers:** Social buttons are now opt-in per client, like the ATProto/Bluesky button. Add `"epds_social_providers": ["google"]` (and/or `"github"`) to your client metadata to show them. Clients that do not list a provider see no social buttons, even when the operator has configured it.
diff --git a/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts b/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
index 9c8811fa..bd2e99dd 100644
--- a/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
+++ b/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
@@ -148,6 +148,7 @@ function runPage(fetchImpl: (url: string, init: RequestInit) => unknown) {
     setTimeout: () => 0,
     clearTimeout: () => undefined,
     navigator: absorbing(),
+    URL,
     console,
   })
   return { buttons, assign, fetchSpy, windowListeners, flash }
@@ -161,6 +162,14 @@ function jsonResponse(status: number, body: unknown) {
   })
 }
 
+/** Authorization URLs of the shape better-auth returns for each provider. */
+const PROVIDER_URLS = {
+  google:
+    'https://accounts.google.com/o/oauth2/v2/auth?client_id=google-id&state=s',
+  github:
+    'https://github.com/login/oauth/authorize?client_id=github-id&state=s',
+} as const
+
 describe('renderLoginPage social sign-in buttons', () => {
   it('never links to /sign-in/social with a GET', () => {
     expect(render()).not.toContain('/sign-in/social?provider=')
@@ -175,7 +184,7 @@ describe('renderLoginPage social sign-in buttons', () => {
   it.each(['google', 'github'] as const)(
     'clicking %s POSTs the provider and follows the returned URL',
     async (provider) => {
-      const providerUrl = `https://${provider}.example/authorize?state=s`
+      const providerUrl = PROVIDER_URLS[provider]
       const { buttons, assign, fetchSpy } = runPage(() =>
         jsonResponse(200, { url: providerUrl, redirect: true }),
       )
@@ -207,7 +216,7 @@ describe('renderLoginPage social sign-in buttons', () => {
     await buttons.google.click()
     expect(fetchSpy).toHaveBeenCalledTimes(1)
 
-    resolveFetch(await jsonResponse(200, { url: 'https://google.example/' }))
+    resolveFetch(await jsonResponse(200, { url: PROVIDER_URLS.google }))
     await first
   })
 
@@ -229,9 +238,48 @@ describe('renderLoginPage social sign-in buttons', () => {
     },
   )
 
+  it.each([
+    ['an http URL', 'google', 'http://accounts.google.com/o/oauth2/v2/auth'],
+    ['another host', 'google', 'https://evil.example/o/oauth2/v2/auth'],
+    [
+      'a look-alike host',
+      'google',
+      'https://accounts.google.com.evil.example/o/oauth2/v2/auth',
+    ],
+    ['a Google URL for GitHub', 'github', PROVIDER_URLS.google],
+    ['a GitHub URL for Google', 'google', PROVIDER_URLS.github],
+    ['an explicit port', 'github', 'https://github.com:8443/login/oauth'],
+    ['a javascript: URL', 'google', 'javascript:alert(1)'],
+    ['a relative URL', 'github', '/login/oauth/authorize'],
+    ['a protocol-relative URL', 'github', '//github.com/login/oauth/authorize'],
+    ['a non-string URL', 'google', { href: PROVIDER_URLS.google }],
+  ] as const)(
+    'refuses to follow %s and shows the error',
+    async (_label, provider, url) => {
+      const { buttons, assign, flash } = runPage(() =>
+        jsonResponse(200, { url, redirect: true }),
+      )
+
+      await buttons[provider].click()
+
+      expect(assign).not.toHaveBeenCalled()
+      expect(flash.text).toBe('Could not start sign-in. Please try again.')
+      expect(buttons[provider].disabled).toBe(false)
+    },
+  )
+
+  it('shows the error for a JSON null body', async () => {
+    const { buttons, assign, flash } = runPage(() => jsonResponse(200, null))
+
+    await buttons.google.click()
+
+    expect(assign).not.toHaveBeenCalled()
+    expect(flash.text).toBe('Could not start sign-in. Please try again.')
+  })
+
   it('re-enables the buttons when the page is restored from the back/forward cache', async () => {
     const { buttons, windowListeners } = runPage(() =>
-      jsonResponse(200, { url: 'https://google.example/' }),
+      jsonResponse(200, { url: PROVIDER_URLS.google }),
     )
     await buttons.google.click()
     expect(buttons.google.disabled).toBe(true)
diff --git a/packages/auth-service/src/routes/login-page.ts b/packages/auth-service/src/routes/login-page.ts
index 57ab1c42..0c7719e4 100644
--- a/packages/auth-service/src/routes/login-page.ts
+++ b/packages/auth-service/src/routes/login-page.ts
@@ -1248,6 +1248,32 @@ export function renderLoginPage(opts: {
       var socialButtons = Array.prototype.slice.call(
         document.querySelectorAll('[data-social-provider]'),
       );
+      // Only ever leave this page for the provider's own authorization
+      // server: an https URL on the host better-auth sends that provider
+      // to. Anything else in the response is treated as a failed start.
+      var socialProviderOrigins = {
+        google: 'https://accounts.google.com',
+        github: 'https://github.com',
+      };
+      function socialProviderUrl(provider, url) {
+        if (typeof url !== 'string') return null;
+        var expected = Object.prototype.hasOwnProperty.call(
+          socialProviderOrigins,
+          provider,
+        )
+          ? socialProviderOrigins[provider]
+          : null;
+        if (!expected) return null;
+        try {
+          var parsed = new URL(url);
+          if (parsed.protocol !== 'https:' || parsed.origin !== expected) {
+            return null;
+          }
+          return parsed.href;
+        } catch (err) {
+          return null;
+        }
+      }
       // A page restored from the back/forward cache keeps its script
       // state, so a button disabled on the way out to the provider would
       // otherwise still be disabled when the user comes back.
@@ -1261,18 +1287,20 @@ export function renderLoginPage(opts: {
           if (btn.disabled) return;
           btn.disabled = true;
           clearError();
+          var provider = btn.getAttribute('data-social-provider');
           try {
             var res = await fetch(authBasePath + '/sign-in/social', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify({
-                provider: btn.getAttribute('data-social-provider'),
+                provider: provider,
                 callbackURL: '/auth/complete',
               }),
             });
             var data = await res.json().catch(function() { return {}; });
-            if (res.ok && data.url) {
-              window.location.assign(data.url);
+            var target = res.ok && data ? socialProviderUrl(provider, data.url) : null;
+            if (target) {
+              window.location.assign(target);
               return;
             }
           } catch (err) {}

From 8c218b36aae0919deba20f49be9e544ff103a53a Mon Sep 17 00:00:00 2001
From: DjimoSerodio <132837131+DjimoSerodio@users.noreply.github.com>
Date: Tue, 20 Oct 2026 08:44:13 -0400
Subject: [PATCH 4/7] fix(auth): run one sign-in at a time across every login
 method

The social buttons only disabled the button that was clicked, so a click
on the other provider, an email code send, a verify or a handle hand-off
could start while the first sign-in was still in flight; a second
/sign-in/social replaces the first one's OAuth state.

One page-wide guard now covers the social buttons, sending and resending
an email code, verifying it, and the ATProto/Bluesky handle hand-off.
Each handler claims it before starting a request, releases it when the
attempt fails, and keeps it while the page navigates away. Sending a code
releases it once the code is sent, so the verify that follows can run.
The verify form's own double-submit latch is folded into it. A page
restored from the back/forward cache releases it.

The login page script harness moves to __tests__/__helpers__ so the new
guard tests and the social button tests share it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../__helpers__/login-page-script.ts          | 242 +++++++++++++++++
 .../login-page-sign-in-guard.test.ts          | 257 ++++++++++++++++++
 .../login-page-social-buttons.test.ts         | 121 +--------
 .../src/__tests__/login-page.test.ts          |  60 ++--
 .../auth-service/src/routes/login-page.ts     |  64 +++--
 5 files changed, 582 insertions(+), 162 deletions(-)
 create mode 100644 packages/auth-service/src/__tests__/__helpers__/login-page-script.ts
 create mode 100644 packages/auth-service/src/__tests__/login-page-sign-in-guard.test.ts

diff --git a/packages/auth-service/src/__tests__/__helpers__/login-page-script.ts b/packages/auth-service/src/__tests__/__helpers__/login-page-script.ts
new file mode 100644
index 00000000..f3a6bb15
--- /dev/null
+++ b/packages/auth-service/src/__tests__/__helpers__/login-page-script.ts
@@ -0,0 +1,242 @@
+/**
+ * Runs the login page's real inline script in a `node:vm` context against a
+ * minimal stand-in DOM, so tests can click its buttons and submit its forms.
+ * There is no DOM test environment in this repo, and asserting on the
+ * script's source text alone would not show that a handler is wired up.
+ *
+ * Only the elements the sign-in handlers use are real fakes; everything else
+ * the script touches (OTP boxes, steps, heartbeat UI) absorbs reads, writes
+ * and calls.
+ */
+import * as vm from 'node:vm'
+import { vi, type Mock } from 'vitest'
+
+/** The page's main inline script (the one that owns the login flow). */
+export function mainScript(html: string): string {
+  const scripts = [...html.matchAll(/<script>([\s\S]*?)<\/script>/g)].map(
+    (m) => m[1],
+  )
+  const main = scripts.find((s) => s.includes('var authBasePath'))
+  if (!main) throw new Error('login page main script not found')
+  return main
+}
+
+/**
+ * A value that absorbs any property read, call or construction by returning
+ * itself, so page-script initialisation that does not concern the test
+ * runs without a real DOM.
+ */
+function absorbing(): unknown {
+  const target = function () {}
+  const proxy: unknown = new Proxy(target, {
+    get: (_t, key) => {
+      if (key === Symbol.toPrimitive) return () => ''
+      if (key === 'length') return 0
+      return proxy
+    },
+    set: () => true,
+    apply: () => proxy,
+    construct: () => proxy as object,
+  })
+  return proxy
+}
+
+type Listener = (this: FakeElement, e: unknown) => unknown
+
+/** A stand-in for the few DOM elements the sign-in handlers drive. */
+export interface FakeElement {
+  disabled: boolean
+  value: string
+  textContent: string
+  type: string
+  getAttribute: (name: string) => string | null
+  addEventListener: (type: string, fn: Listener) => void
+  /** Run this element's click listeners; resolves when they settle. */
+  click: () => Promise<unknown>
+  /** Run this element's submit listeners; resolves when they settle. */
+  submit: () => Promise<unknown>
+  [key: string]: unknown
+}
+
+function fakeElement(
+  attributes: Record<string, string> = {},
+  children: Record<string, FakeElement> = {},
+): FakeElement {
+  const listeners: Record<string, Listener[]> = {}
+  const fire = (type: string) =>
+    Promise.all(
+      (listeners[type] ?? []).map((fn) =>
+        fn.call(el, { preventDefault: () => undefined }),
+      ),
+    )
+  const el: FakeElement = {
+    disabled: false,
+    value: '',
+    textContent: '',
+    type: '',
+    style: {},
+    classList: { add: () => undefined, remove: () => undefined },
+    getAttribute: (name) => attributes[name] ?? null,
+    setAttribute: () => undefined,
+    removeAttribute: () => undefined,
+    focus: () => undefined,
+    querySelector: (selector: string) => children[selector] ?? null,
+    addEventListener: (type, fn) => {
+      ;(listeners[type] ??= []).push(fn)
+    },
+    click: () => fire('click'),
+    submit: () => fire('submit'),
+  }
+  return el
+}
+
+type FetchImpl = (url: string, init: RequestInit) => unknown
+
+/** The page's forms and controls, keyed by what they do. */
+export interface PageElements {
+  emailInput: FakeElement
+  sendOtpForm: FakeElement
+  sendOtpButton: FakeElement
+  verifyForm: FakeElement
+  verifyButton: FakeElement
+  code: FakeElement
+  resendButton: FakeElement
+  atprotoButton: FakeElement
+}
+
+/** What a test drives and observes on a page script run by runPageScript. */
+export interface PageScriptHandles {
+  buttons: { google: FakeButton; github: FakeButton }
+  elements: PageElements
+  /** `window.location.assign`. */
+  assign: Mock<(url: string) => void>
+  /** Every URL the page navigated to, by `assign` or by setting `href`. */
+  navigations: string[]
+  /** The stubbed `fetch`. */
+  fetchSpy: Mock<FetchImpl>
+  windowListeners: Partial<Record<string, ((e: unknown) => void)[]>>
+  /** `text` is the last message shown in the flash region (`#error-msg`). */
+  flash: { text: string }
+}
+
+export type FakeButton = FakeElement
+
+/**
+ * Run the main script of `html` with fake Google/GitHub buttons, fake
+ * email/OTP forms and a stubbed `fetch`, and return the handles a test
+ * needs to drive and observe it.
+ */
+export function runPageScript(
+  html: string,
+  fetchImpl: FetchImpl,
+): PageScriptHandles {
+  const buttons = {
+    google: fakeElement({ 'data-social-provider': 'google' }),
+    github: fakeElement({ 'data-social-provider': 'github' }),
+  }
+  const sendOtpButton = fakeElement()
+  const verifyButton = fakeElement()
+  const elements: PageElements = {
+    emailInput: fakeElement(),
+    sendOtpForm: fakeElement({}, { 'button[type=submit]': sendOtpButton }),
+    sendOtpButton,
+    verifyForm: fakeElement({}, { 'button[type=submit]': verifyButton }),
+    verifyButton,
+    code: fakeElement(),
+    resendButton: fakeElement(),
+    atprotoButton: fakeElement(),
+  }
+  const navigations: string[] = []
+  const assign = vi.fn<(url: string) => void>((url) => {
+    navigations.push(url)
+  })
+  const fetchSpy = vi.fn(fetchImpl)
+  const windowListeners: Partial<Record<string, ((e: unknown) => void)[]>> = {}
+  const flash = { text: '' }
+  const errorEl = {
+    classList: { add: () => undefined, remove: () => undefined },
+    replaceChildren: (frag?: { children: { textContent: string }[] }) => {
+      flash.text = frag ? frag.children.map((c) => c.textContent).join('') : ''
+    },
+  }
+  const byId: Record<string, unknown> = {
+    'error-msg': errorEl,
+    email: elements.emailInput,
+    'form-send-otp': elements.sendOtpForm,
+    'form-verify-otp': elements.verifyForm,
+    code: elements.code,
+    'btn-resend': elements.resendButton,
+    'btn-start-over': null,
+  }
+  const bySelector: Record<string, unknown> = {
+    '.btn-atproto': elements.atprotoButton,
+    '#form-send-otp button[type=submit]': sendOtpButton,
+    '#form-verify-otp button[type=submit]': verifyButton,
+  }
+  const fakeDocument: Record<string, unknown> = {
+    querySelectorAll: (selector: string) =>
+      selector === '[data-social-provider]'
+        ? [buttons.google, buttons.github]
+        : [],
+    querySelector: (selector: string) =>
+      selector in bySelector ? bySelector[selector] : absorbing(),
+    getElementById: (id: string) => (id in byId ? byId[id] : absorbing()),
+    createDocumentFragment: () => {
+      const children: unknown[] = []
+      return { children, appendChild: (n: unknown) => children.push(n) }
+    },
+    createElement: () => fakeElement(),
+    createTextNode: (text: string) => ({ textContent: text }),
+  }
+  const document = new Proxy(absorbing() as object, {
+    get: (target, key) =>
+      typeof key === 'string' && key in fakeDocument
+        ? fakeDocument[key]
+        : (target as Record<PropertyKey, unknown>)[key],
+  })
+  const location = {
+    assign,
+    search: '',
+    get href() {
+      return navigations.at(-1) ?? ''
+    },
+    set href(url: string) {
+      navigations.push(url)
+    },
+  }
+  const window = {
+    location,
+    addEventListener: (type: string, fn: (e: unknown) => void) => {
+      ;(windowListeners[type] ??= []).push(fn)
+    },
+  }
+  vm.runInNewContext(mainScript(html), {
+    document,
+    window,
+    fetch: fetchSpy,
+    setInterval: () => 0,
+    clearInterval: () => undefined,
+    setTimeout: () => 0,
+    clearTimeout: () => undefined,
+    navigator: absorbing(),
+    URL,
+    console,
+  })
+  return {
+    buttons,
+    elements,
+    assign,
+    navigations,
+    fetchSpy,
+    windowListeners,
+    flash,
+  }
+}
+
+export function jsonResponse(status: number, body: unknown) {
+  return Promise.resolve({
+    ok: status >= 200 && status < 300,
+    status,
+    json: () => Promise.resolve(body),
+  })
+}
diff --git a/packages/auth-service/src/__tests__/login-page-sign-in-guard.test.ts b/packages/auth-service/src/__tests__/login-page-sign-in-guard.test.ts
new file mode 100644
index 00000000..20c06c42
--- /dev/null
+++ b/packages/auth-service/src/__tests__/login-page-sign-in-guard.test.ts
@@ -0,0 +1,257 @@
+/**
+ * The login page runs one sign-in attempt at a time across every method:
+ * the social buttons, sending and verifying an email code, a resend, and
+ * the ATProto/Bluesky handle hand-off. Two in flight race each other — a
+ * second POST /sign-in/social replaces the first one's OAuth state, and a
+ * verify can land while the page is already leaving for a provider.
+ *
+ * Runs the page's real inline script (see __helpers__/login-page-script)
+ * and drives its handlers directly, so the guard is shown to be checked in
+ * each handler, not only through disabled buttons.
+ */
+import { describe, it, expect, vi } from 'vitest'
+import {
+  jsonResponse,
+  runPageScript,
+  type PageScriptHandles,
+} from './__helpers__/login-page-script.js'
+
+vi.mock('../better-auth.js', () => ({
+  socialProviders: {
+    google: { clientId: 'google-id', clientSecret: 'google-secret' },
+    github: { clientId: 'github-id', clientSecret: 'github-secret' },
+  },
+}))
+
+const { renderLoginPage } = await import('../routes/login-page.js')
+
+const GOOGLE_URL =
+  'https://accounts.google.com/o/oauth2/v2/auth?client_id=google-id&state=s'
+const HANDLE_LOGIN_URL = 'https://app.example.com/api/oauth/login'
+
+const SOCIAL = '/api/auth/sign-in/social'
+const SEND = '/api/auth/email-otp/send-verification-otp'
+const VERIFY = '/api/auth/sign-in/email-otp'
+const PING = '/auth/ping'
+
+type Answer = () => unknown
+
+/** A request answer the test settles later, to hold a request in flight. */
+function deferred() {
+  let settle: (v: unknown) => void = () => undefined
+  const promise = new Promise((resolve) => {
+    settle = resolve
+  })
+  return {
+    answer: (() => promise) as Answer,
+    resolve: (status: number, body: unknown) => {
+      void jsonResponse(status, body).then(settle)
+    },
+  }
+}
+
+const ok: Record<string, Answer> = {
+  [SOCIAL]: () => jsonResponse(200, { url: GOOGLE_URL }),
+  [SEND]: () => jsonResponse(200, { success: true }),
+  [VERIFY]: () => jsonResponse(200, { token: 't' }),
+  [PING]: () => jsonResponse(200, { ok: true }),
+}
+
+/** Run the page with `overrides` answering some endpoints. */
+function runPage(overrides: Record<string, Answer> = {}) {
+  const answers = { ...ok, ...overrides }
+  const html = renderLoginPage({
+    flowId: 'flow-1',
+    clientId: 'https://app.example.com/client-metadata.json',
+    clientName: 'Example',
+    branding: {
+      epds_social_providers: ['google', 'github'],
+      epds_handle_login_url: HANDLE_LOGIN_URL,
+    },
+    customCss: null,
+    customFaviconUrl: null,
+    customFaviconUrlDark: null,
+    loginHint: '',
+    initialStep: 'email',
+    otpAlreadySent: false,
+    csrfToken: 'csrf',
+    authBasePath: '/api/auth',
+    pdsPublicUrl: 'https://pds.example.com',
+    otpLength: 6,
+    otpCharset: 'numeric',
+    heartbeatEnabled: false,
+  })
+  return runPageScript(html, (url) => {
+    const answer = answers[url] as Answer | undefined
+    if (!answer) throw new Error(`unexpected fetch ${url}`)
+    return answer()
+  })
+}
+
+/** Let every pending handler step run. */
+function settle(): Promise<void> {
+  return new Promise((resolve) => {
+    setImmediate(resolve)
+  })
+}
+
+/** The URLs the page has fetched, without heartbeat pings. */
+function requests(page: PageScriptHandles): string[] {
+  return page.fetchSpy.mock.calls.map(([url]) => url).filter((u) => u !== PING)
+}
+
+function sendCode(page: PageScriptHandles) {
+  page.elements.emailInput.value = 'alice@example.com'
+  return page.elements.sendOtpForm.submit()
+}
+
+function verifyCode(page: PageScriptHandles) {
+  page.elements.code.value = '123456'
+  return page.elements.verifyForm.submit()
+}
+
+async function handOffHandle(page: PageScriptHandles) {
+  await page.elements.atprotoButton.click()
+  page.elements.emailInput.value = 'alice.bsky.social'
+  return page.elements.sendOtpForm.submit()
+}
+
+/** Every way to start a sign-in, and what it leaves behind once started. */
+const methods = {
+  'the Google button': {
+    start: (page: PageScriptHandles) => page.buttons.google.click(),
+    endpoint: SOCIAL,
+  },
+  'the GitHub button': {
+    start: (page: PageScriptHandles) => page.buttons.github.click(),
+    endpoint: SOCIAL,
+  },
+  'sending an email code': { start: sendCode, endpoint: SEND },
+  'resending an email code': {
+    start: (page: PageScriptHandles) => page.elements.resendButton.click(),
+    endpoint: SEND,
+  },
+  'verifying an email code': { start: verifyCode, endpoint: VERIFY },
+}
+
+type Method = keyof typeof methods
+
+const pairs = (Object.keys(methods) as Method[]).flatMap((first) =>
+  (Object.keys(methods) as Method[]).map((second) => [first, second] as const),
+)
+
+describe('login page sign-in guard', () => {
+  it.each(pairs)(
+    'while %s is in flight, %s does not start',
+    async (first, second) => {
+      const held = deferred()
+      const page = runPage({ [methods[first].endpoint]: held.answer })
+
+      const inFlight = methods[first].start(page)
+      await methods[second].start(page)
+      await settle()
+
+      expect(requests(page)).toEqual([methods[first].endpoint])
+      held.resolve(500, {})
+      await inFlight
+    },
+  )
+
+  it('blocks a handle hand-off while another sign-in is in flight', async () => {
+    const held = deferred()
+    const page = runPage({ [SOCIAL]: held.answer })
+
+    const inFlight = page.buttons.google.click()
+    await handOffHandle(page)
+
+    expect(page.navigations).toEqual([])
+    held.resolve(500, {})
+    await inFlight
+  })
+
+  it('disables every social button while any sign-in is in flight', async () => {
+    const held = deferred()
+    const page = runPage({ [SEND]: held.answer })
+
+    const inFlight = sendCode(page)
+    expect(page.buttons.google.disabled).toBe(true)
+    expect(page.buttons.github.disabled).toBe(true)
+
+    held.resolve(200, { success: true })
+    await inFlight
+    expect(page.buttons.google.disabled).toBe(false)
+    expect(page.buttons.github.disabled).toBe(false)
+  })
+
+  it('lets the code that was just sent be verified', async () => {
+    const page = runPage()
+
+    await sendCode(page)
+    await verifyCode(page)
+
+    expect(requests(page)).toEqual([SEND, VERIFY])
+    expect(page.navigations).toEqual(['/auth/complete'])
+  })
+
+  it.each([
+    ['a social sign-in', (p: PageScriptHandles) => p.buttons.google.click()],
+    [
+      'a verified email code',
+      async (p: PageScriptHandles) => {
+        await sendCode(p)
+        await verifyCode(p)
+      },
+    ],
+    ['a handle hand-off', handOffHandle],
+  ])('keeps the guard while %s is navigating away', async (_label, start) => {
+    const page = runPage()
+    await start(page)
+    const before = requests(page)
+    const navigated = page.navigations.length
+    expect(navigated).toBe(1)
+
+    await page.buttons.github.click()
+    await sendCode(page)
+    await verifyCode(page)
+
+    expect(requests(page)).toEqual(before)
+    expect(page.navigations).toHaveLength(navigated)
+  })
+
+  it.each([
+    ['a social sign-in that could not start', SOCIAL, () => ({})],
+    ['an email code that could not be sent', SEND, () => ({ error: 'no' })],
+  ])('releases the guard after %s', async (_label, endpoint, body) => {
+    const page = runPage({ [endpoint]: () => jsonResponse(500, body()) })
+
+    await (endpoint === SOCIAL ? page.buttons.google.click() : sendCode(page))
+    await page.buttons.github.click()
+
+    expect(requests(page)).toEqual([endpoint, SOCIAL])
+  })
+
+  it('releases the guard after a rejected code, so the user can retry or switch', async () => {
+    const page = runPage({
+      [VERIFY]: () => jsonResponse(400, { message: 'Invalid OTP' }),
+    })
+
+    await sendCode(page)
+    await verifyCode(page)
+    await verifyCode(page)
+    await page.buttons.google.click()
+
+    expect(requests(page)).toEqual([SEND, VERIFY, VERIFY, SOCIAL])
+  })
+
+  it('releases the guard when the page is restored from the back/forward cache', async () => {
+    const page = runPage()
+    await page.buttons.google.click()
+    expect(page.assign).toHaveBeenCalledWith(GOOGLE_URL)
+
+    for (const fn of page.windowListeners.pageshow ?? [])
+      fn({ persisted: true })
+    await sendCode(page)
+
+    expect(requests(page)).toEqual([SOCIAL, SEND])
+  })
+})
diff --git a/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts b/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
index bd2e99dd..276a31a6 100644
--- a/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
+++ b/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
@@ -6,13 +6,11 @@
  * render sent a GET and got a 404: the Google and GitHub buttons could never
  * start a sign-in.
  *
- * The behavioural tests run the page's real inline script in a `node:vm`
- * context against a minimal stand-in DOM, then click a button: there is no
- * DOM test environment in this repo, and asserting on the script's source
- * text alone would not show that the handler is wired up.
+ * The behavioural tests run the page's real inline script (see
+ * __helpers__/login-page-script) and click a button.
  */
-import * as vm from 'node:vm'
 import { describe, it, expect, vi } from 'vitest'
+import { jsonResponse, runPageScript } from './__helpers__/login-page-script.js'
 
 vi.mock('../better-auth.js', () => ({
   socialProviders: {
@@ -48,118 +46,9 @@ function render(
   })
 }
 
-/** The page's main inline script (the one that owns the login flow). */
-function mainScript(html: string): string {
-  const scripts = [...html.matchAll(/<script>([\s\S]*?)<\/script>/g)].map(
-    (m) => m[1],
-  )
-  const main = scripts.find((s) => s.includes('var authBasePath'))
-  if (!main) throw new Error('login page main script not found')
-  return main
-}
-
-/**
- * A value that absorbs any property read, call or construction by returning
- * itself, so page-script initialisation that does not concern the social
- * buttons (OTP boxes, typo guard, heartbeat) runs without a real DOM.
- */
-function absorbing(): unknown {
-  const target = function () {}
-  const proxy: unknown = new Proxy(target, {
-    get: (_t, key) => {
-      if (key === Symbol.toPrimitive) return () => ''
-      if (key === 'length') return 0
-      return proxy
-    },
-    set: () => true,
-    apply: () => proxy,
-    construct: () => proxy as object,
-  })
-  return proxy
-}
-
-interface FakeButton {
-  disabled: boolean
-  getAttribute: (name: string) => string | null
-  addEventListener: (type: string, fn: () => unknown) => void
-  click: () => unknown
-}
-
-function fakeButton(provider: string): FakeButton {
-  let onClick: (() => unknown) | undefined
-  return {
-    disabled: false,
-    getAttribute: (name) => (name === 'data-social-provider' ? provider : null),
-    addEventListener: (type, fn) => {
-      if (type === 'click') onClick = fn
-    },
-    click: () => onClick?.(),
-  }
-}
-
-/**
- * Run the page script with fake Google/GitHub buttons and a stubbed
- * `fetch`, and return the handles a test needs to drive and observe it.
- */
+/** Run the page script of the default render with a stubbed `fetch`. */
 function runPage(fetchImpl: (url: string, init: RequestInit) => unknown) {
-  const buttons = { google: fakeButton('google'), github: fakeButton('github') }
-  const assign = vi.fn()
-  const fetchSpy = vi.fn(fetchImpl)
-  const windowListeners: Partial<Record<string, ((e: unknown) => void)[]>> = {}
-  // The shared flash region: records the text of the last message shown.
-  const flash = { text: '' }
-  const errorEl = {
-    classList: { add: () => undefined, remove: () => undefined },
-    replaceChildren: (frag?: { children: { textContent: string }[] }) => {
-      flash.text = frag ? frag.children.map((c) => c.textContent).join('') : ''
-    },
-  }
-  const fakeDocument: Record<string, unknown> = {
-    querySelectorAll: (selector: string) =>
-      selector === '[data-social-provider]'
-        ? [buttons.google, buttons.github]
-        : [],
-    getElementById: (id: string) =>
-      id === 'error-msg' ? errorEl : absorbing(),
-    createDocumentFragment: () => {
-      const children: unknown[] = []
-      return { children, appendChild: (n: unknown) => children.push(n) }
-    },
-    createElement: () => ({ textContent: '' }),
-  }
-  const document = new Proxy(absorbing() as object, {
-    get: (target, key) =>
-      typeof key === 'string' && key in fakeDocument
-        ? fakeDocument[key]
-        : (target as Record<PropertyKey, unknown>)[key],
-  })
-  const window = {
-    location: { assign, href: '', search: '' },
-    addEventListener: (type: string, fn: (e: unknown) => void) => {
-      ;(windowListeners[type] ??= []).push(fn)
-    },
-  }
-  vm.runInNewContext(mainScript(render()), {
-    document,
-    window,
-    fetch: fetchSpy,
-    setInterval: () => 0,
-    clearInterval: () => undefined,
-    setTimeout: () => 0,
-    clearTimeout: () => undefined,
-    navigator: absorbing(),
-    URL,
-    console,
-  })
-  return { buttons, assign, fetchSpy, windowListeners, flash }
-}
-
-function jsonResponse(status: number, body: unknown) {
-  return Promise.resolve({
-    ok: status >= 200 && status < 300,
-    status,
-    json: () => Promise.resolve(body),
-  })
+  return runPageScript(render(), fetchImpl)
 }
 
 /** Authorization URLs of the shape better-auth returns for each provider. */
diff --git a/packages/auth-service/src/__tests__/login-page.test.ts b/packages/auth-service/src/__tests__/login-page.test.ts
index ae52d6a1..af6ab8f0 100644
--- a/packages/auth-service/src/__tests__/login-page.test.ts
+++ b/packages/auth-service/src/__tests__/login-page.test.ts
@@ -615,40 +615,50 @@ describe('renderLoginPage email form readiness gate', () => {
 })
 
 describe('renderLoginPage OTP verify-form double-submit latch (regression)', () => {
-  it('declares the verifying flag at IIFE scope so input/paste/submit handlers share it', () => {
+  // The verify form shares the page-wide sign-in guard (claimSignIn /
+  // releaseSignIn) with every other sign-in method; the behaviour is
+  // exercised in login-page-sign-in-guard.test.ts. These checks pin the
+  // ordering inside the verify handler.
+  function verifyHandler(html: string): string {
+    const start = html.indexOf(
+      "document.getElementById('form-verify-otp').addEventListener('submit'",
+    )
+    const end = html.indexOf(
+      "document.getElementById('btn-resend').addEventListener",
+      start,
+    )
+    expect(start).toBeGreaterThan(0)
+    expect(end).toBeGreaterThan(start)
+    return html.slice(start, end)
+  }
+
+  it('declares the guard once at IIFE scope so every handler shares it', () => {
     const html = renderDefault()
-    expect(html).toContain('var verifying = false;')
     // Exactly one declaration — a second one would shadow the shared flag.
-    expect(html.match(/var verifying =/g)).toHaveLength(1)
+    expect(html.match(/var signInBusy =/g)).toHaveLength(1)
   })
 
   it('guards the verify-form submit handler before any in-flight state is touched', () => {
-    const html = renderDefault()
-    // Order matters: the guard must short-circuit BEFORE we set
-    // verifying=true and BEFORE the verifyOtp() call. A guard placed
-    // after the fetch would not prevent a second request.
-    const guardIdx = html.indexOf('if (verifying) return;')
-    const setTrueIdx = html.indexOf('verifying = true;')
-    const verifyCallIdx = html.indexOf('await verifyOtp(currentEmail, otp)')
+    const handler = verifyHandler(renderDefault())
+    // Order matters: the guard must short-circuit BEFORE the verifyOtp()
+    // call. A guard placed after the fetch would not prevent a second
+    // request.
+    const guardIdx = handler.indexOf('if (!claimSignIn()) return;')
+    const verifyCallIdx = handler.indexOf('await verifyOtp(currentEmail, otp)')
     expect(guardIdx).toBeGreaterThan(0)
-    expect(setTrueIdx).toBeGreaterThan(guardIdx)
-    expect(verifyCallIdx).toBeGreaterThan(setTrueIdx)
+    expect(verifyCallIdx).toBeGreaterThan(guardIdx)
   })
 
-  it('resets the latch only on the error path, not on success', () => {
-    const html = renderDefault()
-    // The reset is wrapped in `if (!result || result.error) { ... }`. An
-    // unconditional reset would re-open the form during the post-success
+  it('releases the guard only on the error path, not on success', () => {
+    const handler = verifyHandler(renderDefault())
+    // The release is wrapped in `if (!result || result.error) { ... }`. An
+    // unconditional release would re-open the form during the post-success
     // navigation and let a late input/Enter event fire a second verify
     // on the consumed OTP — exactly the bug being prevented.
-    expect(html).toMatch(
-      /if \(!result \|\| result\.error\)\s*\{\s*verifying = false;/,
+    expect(handler).toMatch(
+      /if \(!result \|\| result\.error\)\s*\{\s*releaseSignIn\(\);/,
     )
-    // And there is exactly one place that sets the flag back to false (in
-    // the error branch). A second `verifying = false` somewhere else
-    // would defeat the latch.
-    const resetCount = html.split('verifying = false;').length - 1
-    expect(resetCount).toBe(2) // initial declaration + single reset
+    expect(handler.split('releaseSignIn();').length - 1).toBe(1)
   })
 
   it('clears the OTP boxes on verify error so re-entry does not auto-spam', () => {
@@ -660,9 +670,9 @@ describe('renderLoginPage OTP verify-form double-submit latch (regression)', ()
     // edit — easily tripping the per-IP rate limiter.
     const branchStart = html.indexOf('if (result && result.error) {')
     expect(branchStart).toBeGreaterThan(0)
-    // The next `verifying = false;` (in the `finally` block) bounds the
+    // The next `releaseSignIn();` (in the `finally` block) bounds the
     // error branch — bounded slice, no unbounded regex backtracking.
-    const branchEnd = html.indexOf('verifying = false;', branchStart)
+    const branchEnd = html.indexOf('releaseSignIn();', branchStart)
     expect(branchEnd).toBeGreaterThan(branchStart)
     const branch = html.slice(branchStart, branchEnd)
     // Either the plain showError or the inline-action variant is fine
diff --git a/packages/auth-service/src/routes/login-page.ts b/packages/auth-service/src/routes/login-page.ts
index 0c7719e4..6117d0bc 100644
--- a/packages/auth-service/src/routes/login-page.ts
+++ b/packages/auth-service/src/routes/login-page.ts
@@ -783,7 +783,6 @@ export function renderLoginPage(opts: {
       var requestUri = ${JSON.stringify('')};  // not needed client-side; flow_id is in cookie
       var currentEmail = '';
       var loginMode = 'email'; // 'email' | 'handle'
-      var verifying = false;
       var errorEl = document.getElementById('error-msg');
       var stepEmail = document.getElementById('step-email');
       var stepOtp = document.getElementById('step-otp');
@@ -1240,14 +1239,35 @@ export function renderLoginPage(opts: {
         });
       }
 
-      // better-auth's /sign-in/social is POST-only (a GET is a 404), so
-      // the social buttons POST it and follow the provider URL it returns.
-      // The button stays disabled while the request is in flight: a second
-      // POST would replace the first one's OAuth state, and the provider
-      // round trip started by the first click would then fail.
+      // One sign-in attempt at a time, whatever the method: a social
+      // button, sending or verifying an email code, a resend, or a handle
+      // hand-off. Two in flight race each other (a second /sign-in/social
+      // replaces the first one's OAuth state; a verify can land while the
+      // page is already leaving for a provider). Every handler claims the
+      // guard before it starts a request, releases it when the attempt
+      // fails and the page stays usable, and keeps it while the page is
+      // navigating away. Sending a code releases it once the code is sent,
+      // so the verify that follows can claim it.
       var socialButtons = Array.prototype.slice.call(
         document.querySelectorAll('[data-social-provider]'),
       );
+      var signInBusy = false;
+      function setSocialButtonsDisabled(disabled) {
+        socialButtons.forEach(function(btn) { btn.disabled = disabled; });
+      }
+      function claimSignIn() {
+        if (signInBusy) return false;
+        signInBusy = true;
+        setSocialButtonsDisabled(true);
+        return true;
+      }
+      function releaseSignIn() {
+        signInBusy = false;
+        setSocialButtonsDisabled(false);
+      }
+
+      // better-auth's /sign-in/social is POST-only (a GET is a 404), so
+      // the social buttons POST it and follow the provider URL it returns.
       // Only ever leave this page for the provider's own authorization
       // server: an https URL on the host better-auth sends that provider
       // to. Anything else in the response is treated as a failed start.
@@ -1275,17 +1295,14 @@ export function renderLoginPage(opts: {
         }
       }
       // A page restored from the back/forward cache keeps its script
-      // state, so a button disabled on the way out to the provider would
-      // otherwise still be disabled when the user comes back.
+      // state, so the guard held on the way out would otherwise still
+      // block every sign-in when the user comes back.
       window.addEventListener('pageshow', function(e) {
-        if (e.persisted) {
-          socialButtons.forEach(function(btn) { btn.disabled = false; });
-        }
+        if (e.persisted) releaseSignIn();
       });
       socialButtons.forEach(function(btn) {
         btn.addEventListener('click', async function() {
-          if (btn.disabled) return;
-          btn.disabled = true;
+          if (!claimSignIn()) return;
           clearError();
           var provider = btn.getAttribute('data-social-provider');
           try {
@@ -1304,7 +1321,7 @@ export function renderLoginPage(opts: {
               return;
             }
           } catch (err) {}
-          btn.disabled = false;
+          releaseSignIn();
           showError('Could not start sign-in. Please try again.');
         });
       });
@@ -1391,9 +1408,9 @@ export function renderLoginPage(opts: {
       // Form: send OTP (email mode) or hand off to client (handle mode)
       sendOtpForm.addEventListener('submit', async function(e) {
         e.preventDefault();
-        clearError();
         var raw = emailInput.value.trim();
-        if (!raw) return;
+        if (!raw || !claimSignIn()) return;
+        clearError();
         var btn = this.querySelector('button[type=submit]');
         var defaultLabel = loginMode === 'handle' ? 'Sign in' : 'Continue';
         btn.disabled = true;
@@ -1413,6 +1430,7 @@ export function renderLoginPage(opts: {
 
         var email = raw.toLowerCase();
         var result = await sendOtp(email);
+        releaseSignIn();
         btn.disabled = false;
         btn.textContent = defaultLabel;
 
@@ -1429,9 +1447,9 @@ export function renderLoginPage(opts: {
         // Collapse duplicate submits (auto-submit on 6th digit + Enter, OTP
         // autofill firing input on every box, paste+input pair, etc.). The
         // first call consumes the code; a second one races the redirect and
-        // flashes "Invalid OTP" before the page unloads.
-        if (verifying) return;
-        verifying = true;
+        // flashes "Invalid OTP" before the page unloads. The shared guard
+        // also keeps a verify from starting while another sign-in is.
+        if (!claimSignIn()) return;
         // Stop pinging the moment a verify is in flight — the redirect
         // is imminent and any further heartbeat is wasted.
         stopHeartbeat();
@@ -1525,10 +1543,10 @@ export function renderLoginPage(opts: {
             if (otpBoxes.length) otpBoxes[0].focus();
           }
         } finally {
-          // Leave the latch set on success: verifyOtp triggers a redirect,
+          // Keep the guard on success: verifyOtp triggers a redirect,
           // and we don't want late events to re-open the form mid-navigation.
           if (!result || result.error) {
-            verifying = false;
+            releaseSignIn();
             btn.disabled = false;
             btn.textContent = 'Verify';
             // Verify failed (typo, expired OTP, etc.) — the form is
@@ -1540,6 +1558,7 @@ export function renderLoginPage(opts: {
 
       // Send a new code (the element id predates the relabel)
       document.getElementById('btn-resend').addEventListener('click', async function() {
+        if (!claimSignIn()) return;
         clearError();
         this.disabled = true;
         this.textContent = 'Sending...';
@@ -1549,6 +1568,7 @@ export function renderLoginPage(opts: {
         // submit it. Bounce to /auth/abort instead.
         if (await abortIfFlowDead()) return;
         var result = await sendOtp(currentEmail);
+        releaseSignIn();
         this.disabled = false;
         this.textContent = 'Send a new code';
         if (result.error) {
@@ -1593,7 +1613,9 @@ export function renderLoginPage(opts: {
         if (otpBoxes.length) otpBoxes[0].focus();
         if (!otpAlreadySent) {
           // First load — fire the OTP send in the background.
+          claimSignIn();
           sendOtp(loginHint).then(function(result) {
+            releaseSignIn();
             if (result.error) {
               showError(result.error);
             } else {

From fb4370bd150e76770814f3574ffa247921e5262a Mon Sep 17 00:00:00 2001
From: DjimoSerodio <132837131+DjimoSerodio@users.noreply.github.com>
Date: Tue, 20 Oct 2026 08:44:13 -0400
Subject: [PATCH 5/7] chore: order the social sign-in changeset sections as the
 Affects line

Also tell end users that only one sign-in runs at a time.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/social-sign-in-buttons-post.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.changeset/social-sign-in-buttons-post.md b/.changeset/social-sign-in-buttons-post.md
index af65df3a..b4424b88 100644
--- a/.changeset/social-sign-in-buttons-post.md
+++ b/.changeset/social-sign-in-buttons-post.md
@@ -6,8 +6,8 @@ The "Sign in with Google" and "Sign in with GitHub" buttons now work, and each c
 
 **Affects:** End users, Client app developers, Operators
 
-**End users:** Clicking either button used to end on a "not found" page. If a sign-in cannot be started, the page now says so and the button can be pressed again.
-
-**Operators:** The buttons now POST `{ provider, callbackURL: '/auth/complete' }` to `/api/auth/sign-in/social` instead of linking to it with a GET, which better-auth answers with 404. The page then follows the returned URL only when it is an https URL on that provider's authorization host (`accounts.google.com` for Google, `github.com` for GitHub); any other response shows the sign-in error instead. Configuring a provider no longer adds its button to every client's login page; only clients that list it in `epds_social_providers` get it. Because the buttons never worked before this change (every click returned 404), no client loses a working sign-in. Branding CSS that targeted `a.btn-google` / `a.btn-github` should target `.btn-google` / `.btn-github` instead.
+**End users:** Clicking either button used to end on a "not found" page. If a sign-in cannot be started, the page now says so and the button can be pressed again. Only one sign-in can be in progress at a time, so pressing a second option while the first is starting no longer breaks the first.
 
 **Client app developers:** Social buttons are now opt-in per client, like the ATProto/Bluesky button. Add `"epds_social_providers": ["google"]` (and/or `"github"`) to your client metadata to show them. Clients that do not list a provider see no social buttons, even when the operator has configured it.
+
+**Operators:** The buttons now POST `{ provider, callbackURL: '/auth/complete' }` to `/api/auth/sign-in/social` instead of linking to it with a GET, which better-auth answers with 404. The page then follows the returned URL only when it is an https URL on that provider's authorization host (`accounts.google.com` for Google, `github.com` for GitHub); any other response shows the sign-in error instead. Configuring a provider no longer adds its button to every client's login page; only clients that list it in `epds_social_providers` get it. Because the buttons never worked before this change (every click returned 404), no client loses a working sign-in. Branding CSS that targeted `a.btn-google` / `a.btn-github` should target `.btn-google` / `.btn-github` instead.

From 770184c0fe9e1246443748f4ca97b6826211b080 Mon Sep 17 00:00:00 2001
From: DjimoSerodio <132837131+DjimoSerodio@users.noreply.github.com>
Date: Tue, 20 Oct 2026 08:51:31 -0400
Subject: [PATCH 6/7] test: share the login page render options between the
 script tests

The sign-in guard and social button tests rendered the page with the same
option block; it now lives next to the script harness.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../__helpers__/login-page-script.ts          | 26 +++++++++++++++++++
 .../login-page-sign-in-guard.test.ts          | 17 ++----------
 .../login-page-social-buttons.test.ts         | 25 +++++-------------
 3 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/packages/auth-service/src/__tests__/__helpers__/login-page-script.ts b/packages/auth-service/src/__tests__/__helpers__/login-page-script.ts
index f3a6bb15..bc61aa3e 100644
--- a/packages/auth-service/src/__tests__/__helpers__/login-page-script.ts
+++ b/packages/auth-service/src/__tests__/__helpers__/login-page-script.ts
@@ -10,6 +10,32 @@
  */
 import * as vm from 'node:vm'
 import { vi, type Mock } from 'vitest'
+import type { renderLoginPage } from '../../routes/login-page.js'
+
+export type LoginPageOptions = Parameters<typeof renderLoginPage>[0]
+
+/**
+ * renderLoginPage options for a plain email-step page with both social
+ * buttons requested; tests override what they need.
+ */
+export const LOGIN_PAGE_OPTIONS: LoginPageOptions = {
+  flowId: 'flow-1',
+  clientId: 'https://app.example.com/client-metadata.json',
+  clientName: 'Example',
+  branding: { epds_social_providers: ['google', 'github'] },
+  customCss: null,
+  customFaviconUrl: null,
+  customFaviconUrlDark: null,
+  loginHint: '',
+  initialStep: 'email',
+  otpAlreadySent: false,
+  csrfToken: 'csrf',
+  authBasePath: '/api/auth',
+  pdsPublicUrl: 'https://pds.example.com',
+  otpLength: 6,
+  otpCharset: 'numeric',
+  heartbeatEnabled: false,
+}
 
 /** The page's main inline script (the one that owns the login flow). */
 export function mainScript(html: string): string {
diff --git a/packages/auth-service/src/__tests__/login-page-sign-in-guard.test.ts b/packages/auth-service/src/__tests__/login-page-sign-in-guard.test.ts
index 20c06c42..1ec27f36 100644
--- a/packages/auth-service/src/__tests__/login-page-sign-in-guard.test.ts
+++ b/packages/auth-service/src/__tests__/login-page-sign-in-guard.test.ts
@@ -12,6 +12,7 @@
 import { describe, it, expect, vi } from 'vitest'
 import {
   jsonResponse,
+  LOGIN_PAGE_OPTIONS,
   runPageScript,
   type PageScriptHandles,
 } from './__helpers__/login-page-script.js'
@@ -61,25 +62,11 @@ const ok: Record<string, Answer> = {
 function runPage(overrides: Record<string, Answer> = {}) {
   const answers = { ...ok, ...overrides }
   const html = renderLoginPage({
-    flowId: 'flow-1',
-    clientId: 'https://app.example.com/client-metadata.json',
-    clientName: 'Example',
+    ...LOGIN_PAGE_OPTIONS,
     branding: {
       epds_social_providers: ['google', 'github'],
       epds_handle_login_url: HANDLE_LOGIN_URL,
     },
-    customCss: null,
-    customFaviconUrl: null,
-    customFaviconUrlDark: null,
-    loginHint: '',
-    initialStep: 'email',
-    otpAlreadySent: false,
-    csrfToken: 'csrf',
-    authBasePath: '/api/auth',
-    pdsPublicUrl: 'https://pds.example.com',
-    otpLength: 6,
-    otpCharset: 'numeric',
-    heartbeatEnabled: false,
   })
   return runPageScript(html, (url) => {
     const answer = answers[url] as Answer | undefined
diff --git a/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts b/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
index 276a31a6..4f8774db 100644
--- a/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
+++ b/packages/auth-service/src/__tests__/login-page-social-buttons.test.ts
@@ -10,7 +10,11 @@
  * __helpers__/login-page-script) and click a button.
  */
 import { describe, it, expect, vi } from 'vitest'
-import { jsonResponse, runPageScript } from './__helpers__/login-page-script.js'
+import {
+  jsonResponse,
+  LOGIN_PAGE_OPTIONS,
+  runPageScript,
+} from './__helpers__/login-page-script.js'
 
 vi.mock('../better-auth.js', () => ({
   socialProviders: {
@@ -26,24 +30,7 @@ function render(
     epds_social_providers: ['google', 'github'],
   },
 ): string {
-  return renderLoginPage({
-    flowId: 'flow-1',
-    clientId: 'https://example.com/client-metadata.json',
-    clientName: 'Example',
-    branding,
-    customCss: null,
-    customFaviconUrl: null,
-    customFaviconUrlDark: null,
-    loginHint: '',
-    initialStep: 'email',
-    otpAlreadySent: false,
-    csrfToken: 'csrf',
-    authBasePath: '/api/auth',
-    pdsPublicUrl: 'https://pds.example.com',
-    otpLength: 6,
-    otpCharset: 'numeric',
-    heartbeatEnabled: false,
-  })
+  return renderLoginPage({ ...LOGIN_PAGE_OPTIONS, branding })
 }
 
 /** Run the page script of the default render with a stubbed `fetch`. */

From a3da2f4120c4333d8c499cc537305c468a5e87b2 Mon Sep 17 00:00:00 2001
From: DjimoSerodio <132837131+DjimoSerodio@users.noreply.github.com>
Date: Wed, 21 Oct 2026 11:32:56 -0400
Subject: [PATCH 7/7] fix(auth): show the email-code button as disabled while a
 sign-in is in flight

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/__tests__/login-page-sign-in-guard.test.ts   | 12 ++++++++++++
 packages/auth-service/src/routes/login-page.ts       | 11 +++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/auth-service/src/__tests__/login-page-sign-in-guard.test.ts b/packages/auth-service/src/__tests__/login-page-sign-in-guard.test.ts
index 1ec27f36..4c840e42 100644
--- a/packages/auth-service/src/__tests__/login-page-sign-in-guard.test.ts
+++ b/packages/auth-service/src/__tests__/login-page-sign-in-guard.test.ts
@@ -170,6 +170,18 @@ describe('login page sign-in guard', () => {
     expect(page.buttons.github.disabled).toBe(false)
   })
 
+  it('disables the email-code button while a social sign-in is in flight', async () => {
+    const held = deferred()
+    const page = runPage({ [SOCIAL]: held.answer })
+
+    const inFlight = page.buttons.google.click()
+    expect(page.elements.sendOtpButton.disabled).toBe(true)
+
+    held.resolve(500, {})
+    await inFlight
+    expect(page.elements.sendOtpButton.disabled).toBe(false)
+  })
+
   it('lets the code that was just sent be verified', async () => {
     const page = runPage()
 
diff --git a/packages/auth-service/src/routes/login-page.ts b/packages/auth-service/src/routes/login-page.ts
index 6117d0bc..e88ab397 100644
--- a/packages/auth-service/src/routes/login-page.ts
+++ b/packages/auth-service/src/routes/login-page.ts
@@ -1251,19 +1251,22 @@ export function renderLoginPage(opts: {
       var socialButtons = Array.prototype.slice.call(
         document.querySelectorAll('[data-social-provider]'),
       );
+      // The buttons that start a sign-in from the first step, shown as
+      // disabled while any attempt holds the guard.
+      var startButtons = socialButtons.concat(sendOtpBtn ? [sendOtpBtn] : []);
       var signInBusy = false;
-      function setSocialButtonsDisabled(disabled) {
-        socialButtons.forEach(function(btn) { btn.disabled = disabled; });
+      function setStartButtonsDisabled(disabled) {
+        startButtons.forEach(function(btn) { btn.disabled = disabled; });
       }
       function claimSignIn() {
         if (signInBusy) return false;
         signInBusy = true;
-        setSocialButtonsDisabled(true);
+        setStartButtonsDisabled(true);
         return true;
       }
       function releaseSignIn() {
         signInBusy = false;
-        setSocialButtonsDisabled(false);
+        setStartButtonsDisabled(false);
       }
 
       // better-auth's /sign-in/social is POST-only (a GET is a 404), so