From 311eee4198810b52e659ee5955e1afbee125d476 Mon Sep 17 00:00:00 2001
From: Josh Ferge <josh.ferge@sentry.io>
Date: Sat, 31 Jan 2026 12:50:58 -0500
Subject: [PATCH] fix(auth): Sync CSRF token on form submit for multi-tab
 scenarios

Add form submit event listener (capture phase) to sync CSRF token from
cookie to form field right before submission. Use requestSubmit() in
WebAuthnAssert to trigger this listener (form.submit() doesn't fire events).
---
 src/sentry/templates/sentry/bases/auth.html   | 23 ++++++++++++++-----
 .../components/webAuthn/webAuthnAssert.tsx    | 17 ++++++++++----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/sentry/templates/sentry/bases/auth.html b/src/sentry/templates/sentry/bases/auth.html
index 5aa5ae4beb2b53..2672a707683792 100644
--- a/src/sentry/templates/sentry/bases/auth.html
+++ b/src/sentry/templates/sentry/bases/auth.html
@@ -41,10 +41,9 @@
 {{ block.super }}
 {% script %}
 <script>
-  // HACK(jferge+claude): inline getCookie function from our utils,
-  // update the csrf token value in a rudimentary way (timer based)
-  // on auth forms to help out when users have multiple sentry tabs
-  // and are logged out
+  // HACK(jferge+claude): Sync CSRF tokens from cookie to form fields for multi-tab scenarios.
+  // When users have multiple auth tabs open and one tab logs in (rotating the CSRF token),
+  // other tabs need to pick up the new token before form submission.
   (function() {
     function getCookie(name) {
       if (document.cookie && document.cookie !== '') {
@@ -59,7 +58,7 @@
       return null;
     }
 
-    setInterval(function() {
+    function syncCsrfTokens() {
       var csrfCookieVal = getCookie(window.csrfCookieName || 'sc');
       // combine strings for csrf name as some tests grep on the token name :(
       var csrfName = 'csrf' + 'middleware' + 'token';
@@ -69,7 +68,19 @@
           csrfEls[i].value = csrfCookieVal;
         }
       }
-    }, 200);
+    }
+
+    // Periodic sync for visual consistency (user sees correct token in DevTools)
+    setInterval(syncCsrfTokens, 200);
+
+    // Sync on form submit to guarantee fresh token even if submit happens
+    // within the 200ms polling window. Capture phase ensures this runs
+    // before the form's default submit action.
+    document.addEventListener('submit', function(e) {
+      if (e.target && e.target.tagName === 'FORM') {
+        syncCsrfTokens();
+      }
+    }, true);
   })();
 </script>
 {% endscript %}
diff --git a/static/app/components/webAuthn/webAuthnAssert.tsx b/static/app/components/webAuthn/webAuthnAssert.tsx
index 471d8d9c9f619b..873a656b9c3aad 100644
--- a/static/app/components/webAuthn/webAuthnAssert.tsx
+++ b/static/app/components/webAuthn/webAuthnAssert.tsx
@@ -109,10 +109,19 @@ export function WebAuthnAssert({
   // submitted once the response is set.
   const shouldSubmitForm = !onWebAuthn && response !== null;
 
-  useEffect(
-    () => void (shouldSubmitForm && inputRef.current?.form?.submit()),
-    [shouldSubmitForm]
-  );
+  useEffect(() => {
+    if (shouldSubmitForm && inputRef.current?.form) {
+      const form = inputRef.current.form;
+      // Use requestSubmit() to fire the 'submit' event, allowing the global
+      // CSRF sync listener in auth.html to update the token for multi-tab scenarios.
+      // Falls back to submit() for Safari 15 (requestSubmit added in Safari 16).
+      if (form.requestSubmit) {
+        form.requestSubmit();
+      } else {
+        form.submit();
+      }
+    }
+  }, [shouldSubmitForm]);
 
   // Trigger the webAuthn flow immediately
   useEffect(() => {