feat(u2f): Deprecated u2f-api frontend (#31057)

src/sentry/templates/sentry/twofactor_u2f.html

@@ -19,7 +19,6 @@
       container: '#u2f-container',
       props: {
         challengeData: {{ activation.challenge|to_json|safe }},
-        isWebauthnSigninFFEnabled: {{isWebauthnSigninFFEnabled|to_json|safe }},
       },
     });
   </script>

static/app/components/modals/sudoModal.tsx

@@ -133,11 +133,7 @@ class SudoModal extends React.Component<Props, State> {
             autoFocus
             flexibleControlStateSize
           />
-          <U2fContainer
-            displayMode="sudo"
-            onTap={this.handleU2fTap}
-            isWebauthnSigninFFEnabled
-          />
+          <U2fContainer displayMode="sudo" onTap={this.handleU2fTap} />
         </Form>
       </React.Fragment>
     );

static/app/components/u2f/u2fContainer.tsx

@@ -11,7 +11,6 @@ type Props = {
   onTap: U2fSign['props']['onTap'];
   displayMode?: U2fSign['props']['displayMode'];
   className?: string;
-  isWebauthnSigninFFEnabled: boolean;
 };
 type State = {
   authenticators: Array<Authenticator>;

static/app/components/u2f/u2finterface.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as Sentry from '@sentry/react';
 import * as cbor from 'cbor-web';
-import u2f from 'u2f-api';
 
 import {base64urlToBuffer, bufferToBase64url} from 'sentry/components/u2f/webAuthnHelper';
 import {t, tct} from 'sentry/locale';
@@ -17,7 +16,6 @@ type TapParams = {
 type Props = {
   organization: Organization;
   challengeData: ChallengeData;
-  isWebauthnSigninFFEnabled: boolean;
   flowMode: string;
   silentIfUnsupported: boolean;
   onTap: ({response, challenge}: TapParams) => Promise<void>;
@@ -48,9 +46,8 @@ class U2fInterface extends React.Component<Props, State> {
   };
 
   async componentDidMount() {
-    const supported = this.props.isWebauthnSigninFFEnabled
-      ? !!window.PublicKeyCredential
-      : await u2f.isSupported();
+    const supported = !!window.PublicKeyCredential;
+
     // eslint-disable-next-line react/no-did-mount-set-state
     this.setState({isSupported: supported});
 
@@ -179,54 +176,41 @@ class U2fInterface extends React.Component<Props, State> {
   }
 
   invokeU2fFlow() {
-    let promise: Promise<u2f.SignResponse | u2f.RegisterResponse>;
     if (this.props.flowMode === 'sign') {
-      if (this.props.isWebauthnSigninFFEnabled) {
-        const challengeArray = base64urlToBuffer(
-          this.props.challengeData.webAuthnAuthenticationData
-        );
-        const challenge = cbor.decodeFirst(challengeArray);
-        challenge
-          .then(data => {
-            this.webAuthnSignIn(data);
-          })
-          .catch(err => {
-            const failure = 'DEVICE_ERROR';
-            Sentry.captureException(err);
-            this.setState({
-              deviceFailure: failure,
-              hasBeenTapped: false,
-            });
+      const challengeArray = base64urlToBuffer(
+        this.props.challengeData.webAuthnAuthenticationData
+      );
+      const challenge = cbor.decodeFirst(challengeArray);
+      challenge
+        .then(data => {
+          this.webAuthnSignIn(data);
+        })
+        .catch(err => {
+          const failure = 'DEVICE_ERROR';
+          Sentry.captureException(err);
+          this.setState({
+            deviceFailure: failure,
+            hasBeenTapped: false,
           });
-      } else {
-        promise = u2f.sign(this.props.challengeData.authenticateRequests);
-        this.submitU2fResponse(promise);
-      }
+        });
     } else if (this.props.flowMode === 'enroll') {
-      const {organization} = this.props;
-      if (organization.features.includes('webauthn-register')) {
-        const challengeArray = base64urlToBuffer(
-          this.props.challengeData.webAuthnRegisterData
-        );
-        const challenge = cbor.decodeFirst(challengeArray);
-        // challenge contains a PublicKeyCredentialRequestOptions object for webauthn registration
-        challenge
-          .then(data => {
-            this.webAuthnRegister(data.publicKey);
-          })
-          .catch(err => {
-            const failure = 'DEVICE_ERROR';
-            Sentry.captureException(err);
-            this.setState({
-              deviceFailure: failure,
-              hasBeenTapped: false,
-            });
+      const challengeArray = base64urlToBuffer(
+        this.props.challengeData.webAuthnRegisterData
+      );
+      const challenge = cbor.decodeFirst(challengeArray);
+      // challenge contains a PublicKeyCredentialRequestOptions object for webauthn registration
+      challenge
+        .then(data => {
+          this.webAuthnRegister(data.publicKey);
+        })
+        .catch(err => {
+          const failure = 'DEVICE_ERROR';
+          Sentry.captureException(err);
+          this.setState({
+            deviceFailure: failure,
+            hasBeenTapped: false,
           });
-      } else {
-        const {registerRequests, registeredKeys} = this.props.challengeData;
-        promise = u2f.register(registerRequests as any, registeredKeys as any);
-        this.submitU2fResponse(promise);
-      }
+        });
     } else {
       throw new Error(`Unsupported flow mode '${this.props.flowMode}'`);
     }

static/app/views/settings/account/accountSecurity/accountSecurityEnroll.tsx

@@ -123,7 +123,6 @@ const getFields = ({
           challengeData={authenticator.challenge}
           displayMode="enroll"
           onTap={onU2fTap}
-          isWebauthnSigninFFEnabled
         />
       ),
     ];