From 5e95a4756d790a9b61bb946fc398eb471c18c6d8 Mon Sep 17 00:00:00 2001
From: Bryan Brooks <bryanbrooks@I3-MINI--BITS.local>
Date: Thu, 19 Feb 2026 12:56:51 -0600
Subject: [PATCH] fix: use native form POST for OIDC login (fixes iOS Safari)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

iOS Safari blocks window.location.href navigations after async
fetch() calls because the user gesture chain is broken. Changed
the ATAuth login page from fetch-based JavaScript to native HTML
form submission — the server already handles non-JSON POSTs with
302 redirects.

On error, re-renders the login page with the error message instead
of returning plain text. Extracted login page HTML into reusable
renderLoginPage() function.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 gateway/src/routes/oidc/authorize.ts | 305 ++++++++++-----------------
 1 file changed, 116 insertions(+), 189 deletions(-)

diff --git a/gateway/src/routes/oidc/authorize.ts b/gateway/src/routes/oidc/authorize.ts
index 891a01e..75d81ba 100644
--- a/gateway/src/routes/oidc/authorize.ts
+++ b/gateway/src/routes/oidc/authorize.ts
@@ -19,6 +19,115 @@ export function createAuthorizeRouter(
 ): Router {
   const router = Router();
 
+  function renderLoginPage(clientName: string, authCode: string, state: string, errorMessage?: string): string {
+    const errorHtml = errorMessage
+      ? `<div class="error" style="display:block">${errorMessage}</div>`
+      : '<div class="error" id="error"></div>';
+    return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sign in - ATAuth</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+    .container {
+      background: white;
+      border-radius: 16px;
+      padding: 40px;
+      width: 100%;
+      max-width: 400px;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+    }
+    h1 { font-size: 24px; margin-bottom: 8px; color: #1a1a2e; }
+    .subtitle { color: #666; margin-bottom: 32px; font-size: 14px; }
+    .client-info {
+      background: #f5f5f5;
+      border-radius: 8px;
+      padding: 12px;
+      margin-bottom: 24px;
+      font-size: 13px;
+      color: #444;
+    }
+    .client-info strong { color: #1a1a2e; }
+    label { display: block; font-weight: 500; margin-bottom: 8px; color: #333; }
+    input[type="text"] {
+      width: 100%;
+      padding: 14px 16px;
+      border: 2px solid #e0e0e0;
+      border-radius: 8px;
+      font-size: 16px;
+      transition: border-color 0.2s;
+    }
+    input[type="text"]:focus { outline: none; border-color: #667eea; }
+    .hint { font-size: 12px; color: #888; margin-top: 8px; }
+    button {
+      width: 100%;
+      padding: 14px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      border: none;
+      border-radius: 8px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      margin-top: 24px;
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+    button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }
+    button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
+    .error {
+      background: #fee;
+      color: #c00;
+      padding: 12px;
+      border-radius: 8px;
+      margin-bottom: 16px;
+      font-size: 14px;
+      display: none;
+    }
+    .logo { text-align: center; margin-bottom: 24px; font-size: 32px; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="logo">&#128274;</div>
+    <h1>Sign in with ATAuth</h1>
+    <p class="subtitle">Use your Bluesky or AT Protocol identity</p>
+    <div class="client-info">Signing in to <strong>${clientName}</strong></div>
+    ${errorHtml}
+    <form id="loginForm" action="/oauth/authorize/login" method="POST">
+      <input type="hidden" name="auth_code" value="${authCode}">
+      <input type="hidden" name="state" value="${state}">
+      <label for="handle">Your Handle</label>
+      <input type="text" id="handle" name="handle" placeholder="you.bsky.social" autocomplete="username" autocapitalize="none" spellcheck="false" required>
+      <p class="hint">Enter your Bluesky handle or custom domain</p>
+      <button type="submit" id="submitBtn">Continue</button>
+    </form>
+  </div>
+  <script>
+    var form = document.getElementById('loginForm');
+    var submitBtn = document.getElementById('submitBtn');
+    var errorDiv = document.getElementById('error');
+    form.addEventListener('submit', function() {
+      submitBtn.disabled = true;
+      submitBtn.textContent = 'Redirecting...';
+      if (errorDiv) errorDiv.style.display = 'none';
+    });
+  </script>
+</body>
+</html>`;
+  }
+
   /**
    * GET/POST /oauth/authorize
    * Start the authorization flow
@@ -152,194 +261,7 @@ export function createAuthorizeRouter(
       });
 
       // Show login page asking for handle
-      const loginPageHtml = `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Sign in - ATAuth</title>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-    }
-    .container {
-      background: white;
-      border-radius: 16px;
-      padding: 40px;
-      width: 100%;
-      max-width: 400px;
-      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-    }
-    h1 {
-      font-size: 24px;
-      margin-bottom: 8px;
-      color: #1a1a2e;
-    }
-    .subtitle {
-      color: #666;
-      margin-bottom: 32px;
-      font-size: 14px;
-    }
-    .client-info {
-      background: #f5f5f5;
-      border-radius: 8px;
-      padding: 12px;
-      margin-bottom: 24px;
-      font-size: 13px;
-      color: #444;
-    }
-    .client-info strong { color: #1a1a2e; }
-    label {
-      display: block;
-      font-weight: 500;
-      margin-bottom: 8px;
-      color: #333;
-    }
-    input[type="text"] {
-      width: 100%;
-      padding: 14px 16px;
-      border: 2px solid #e0e0e0;
-      border-radius: 8px;
-      font-size: 16px;
-      transition: border-color 0.2s;
-    }
-    input[type="text"]:focus {
-      outline: none;
-      border-color: #667eea;
-    }
-    .hint {
-      font-size: 12px;
-      color: #888;
-      margin-top: 8px;
-    }
-    button {
-      width: 100%;
-      padding: 14px;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-      border: none;
-      border-radius: 8px;
-      font-size: 16px;
-      font-weight: 600;
-      cursor: pointer;
-      margin-top: 24px;
-      transition: transform 0.2s, box-shadow 0.2s;
-    }
-    button:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-    }
-    button:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-      transform: none;
-    }
-    .error {
-      background: #fee;
-      color: #c00;
-      padding: 12px;
-      border-radius: 8px;
-      margin-bottom: 16px;
-      font-size: 14px;
-      display: none;
-    }
-    .logo {
-      text-align: center;
-      margin-bottom: 24px;
-      font-size: 32px;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div class="logo">🔐</div>
-    <h1>Sign in with ATAuth</h1>
-    <p class="subtitle">Use your Bluesky or AT Protocol identity</p>
-
-    <div class="client-info">
-      Signing in to <strong>${client.name || client_id}</strong>
-    </div>
-
-    <div class="error" id="error"></div>
-
-    <form id="loginForm" action="/oauth/authorize/login" method="POST">
-      <input type="hidden" name="auth_code" value="${authCode}">
-      <input type="hidden" name="state" value="${state || ''}">
-
-      <label for="handle">Your Handle</label>
-      <input
-        type="text"
-        id="handle"
-        name="handle"
-        placeholder="you.bsky.social"
-        autocomplete="username"
-        autocapitalize="none"
-        spellcheck="false"
-        required
-      >
-      <p class="hint">Enter your Bluesky handle or custom domain</p>
-
-      <button type="submit" id="submitBtn">Continue</button>
-    </form>
-  </div>
-
-  <script>
-    const form = document.getElementById('loginForm');
-    const handleInput = document.getElementById('handle');
-    const submitBtn = document.getElementById('submitBtn');
-    const errorDiv = document.getElementById('error');
-
-    form.addEventListener('submit', async function(e) {
-      e.preventDefault();
-      const handle = handleInput.value.trim();
-      if (!handle) {
-        errorDiv.textContent = 'Please enter your handle';
-        errorDiv.style.display = 'block';
-        return;
-      }
-      submitBtn.disabled = true;
-      submitBtn.textContent = 'Redirecting...';
-      errorDiv.style.display = 'none';
-
-      try {
-        const res = await fetch('/oauth/authorize/login', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
-          body: JSON.stringify({
-            auth_code: form.querySelector('[name="auth_code"]').value,
-            state: form.querySelector('[name="state"]').value,
-            handle: handle
-          })
-        });
-        const data = await res.json();
-        if (data.redirect_url) {
-          window.location.href = data.redirect_url;
-        } else {
-          errorDiv.textContent = data.error || 'Login failed';
-          errorDiv.style.display = 'block';
-          submitBtn.disabled = false;
-          submitBtn.textContent = 'Continue';
-        }
-      } catch (err) {
-        errorDiv.textContent = 'Network error. Please try again.';
-        errorDiv.style.display = 'block';
-        submitBtn.disabled = false;
-        submitBtn.textContent = 'Continue';
-      }
-    });
-  </script>
-</body>
-</html>`;
-
-      res.type('html').send(loginPageHtml);
+      res.type('html').send(renderLoginPage(client.name || client_id, authCode, state || ''));
     } catch (error) {
       console.error('[OIDC Authorize] Error:', error);
       res.status(500).json({
@@ -419,7 +341,12 @@ export function createAuthorizeRouter(
       if (isJsonRequest) {
         res.status(400).json({ error: userMessage });
       } else {
-        res.status(400).send(userMessage);
+        // Re-render login page with error for native form submissions
+        const { auth_code: errAuthCode } = req.body;
+        const errAuthData = errAuthCode ? db.getAuthorizationCode(errAuthCode) : null;
+        const errClient = errAuthData ? db.getApp(errAuthData.client_id) : null;
+        const errClientName = errClient?.name || errAuthData?.client_id || 'Unknown';
+        res.status(400).type('html').send(renderLoginPage(errClientName, errAuthCode || '', errAuthData?.state || '', userMessage));
       }
     }
   });
-- 
knotmirror 0.0.1