fix(auth): Wait for document focus before triggering WebAuthn 2FA

static/app/views/authV2/authLogin/components/webAuthn2faMethod.spec.tsx

@@ -1,4 +1,4 @@
-import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import * as webAuthnHandlers from 'sentry/components/webAuthn/handlers';
 
@@ -15,6 +15,7 @@ describe('WebAuthn2FAMethod', () => {
       configurable: true,
       value: function PublicKeyCredential() {},
     });
+    jest.spyOn(document, 'hasFocus').mockReturnValue(true);
   });
 
   afterEach(() => {
@@ -146,4 +147,38 @@ describe('WebAuthn2FAMethod', () => {
     await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
     expect(handleSign).toHaveBeenCalledTimes(1);
   });
+
+  it('waits for the document to be focused before requesting an assertion', async () => {
+    jest.spyOn(document, 'hasFocus').mockReturnValue(false);
+    const handleSign = jest
+      .spyOn(webAuthnHandlers, 'handleSign')
+      .mockReturnValue(new Promise(() => {}));
+    const challengeRequest = MockApiClient.addMockResponse({
+      url: '/auth/2fa/challenge/',
+      method: 'POST',
+      body: {
+        method: 'u2f',
+        challenge: {webAuthnAuthenticationData: 'challenge'},
+      },
+    });
+    render(
+      <WebAuthn2FAMethod
+        isActive
+        isAuthenticating={false}
+        isProcessing={false}
+        submissionFailed={false}
+        onRetrySubmission={jest.fn()}
+        onSubmit={jest.fn()}
+      />
+    );
+
+    await waitFor(() => expect(challengeRequest).toHaveBeenCalledTimes(1));
+    expect(handleSign).not.toHaveBeenCalled();
+
+    act(() => {
+      window.dispatchEvent(new Event('focus'));
+    });
+
+    await waitFor(() => expect(handleSign).toHaveBeenCalledTimes(1));
+  });
 });

static/app/views/authV2/authLogin/components/webAuthn2faMethod.tsx

@@ -100,10 +100,23 @@ export function WebAuthn2FAMethod({
       }
     }
 
-    void authenticate();
+    // Browsers like Safari reject navigator.credentials APIs when the document
+    // is not focused, so defer the WebAuthn prompt until the window has focus.
+    if (document.hasFocus()) {
+      void authenticate();
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    const handleFocus = () => {
+      void authenticate();
+    };
+    window.addEventListener('focus', handleFocus, {once: true});
 
     return () => {
       cancelled = true;
+      window.removeEventListener('focus', handleFocus);
     };
     // oxlint-disable-next-line react/exhaustive-effect-dependencies
   }, [attempt, challenge.result, isActive]);