chore(web): prevent from adding U2F if 2FA is not enabled (#2861)

packages/web/src/javascripts/Components/Preferences/Panes/Security/Security.tsx

@@ -1,9 +1,8 @@
 import { NativeFeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
+import { FunctionComponent, useState } from 'react'
 
 import { WebApplication } from '@/Application/WebApplication'
-import { FunctionComponent } from 'react'
 import TwoFactorAuthWrapper from './TwoFactorAuth/TwoFactorAuthWrapper'
-import { MfaProps } from './TwoFactorAuth/MfaProps'
 import Encryption from './Encryption'
 import PasscodeLock from './PasscodeLock'
 import Privacy from './Privacy'
@@ -13,13 +12,23 @@ import PreferencesPane from '@/Components/Preferences/PreferencesComponents/Pref
 import BiometricsLock from '@/Components/Preferences/Panes/Security/BiometricsLock'
 import MultitaskingPrivacy from '@/Components/Preferences/Panes/Security/MultitaskingPrivacy'
 import U2FWrapper from './U2F/U2FWrapper'
+import { TwoFactorAuth, is2FAEnabled as checkIf2FAIsEnabled } from './TwoFactorAuth/TwoFactorAuth'
 
-interface SecurityProps extends MfaProps {
+interface SecurityProps {
   application: WebApplication
 }
 
 const Security: FunctionComponent<SecurityProps> = (props) => {
   const isNativeMobileWeb = props.application.isNativeMobileWeb()
+  const [is2FAEnabled, setIs2FAEnabled] = useState(false)
+
+  const [auth] = useState(
+    () =>
+      new TwoFactorAuth(props.application.sessions, props.application.mfa, (status) =>
+        setIs2FAEnabled(checkIf2FAIsEnabled(status)),
+      ),
+  )
+  auth.fetchStatus()
 
   const isU2FFeatureAvailable =
     props.application.features.getFeatureStatus(
@@ -31,8 +40,8 @@ const Security: FunctionComponent<SecurityProps> = (props) => {
       <Encryption />
       {props.application.items.invalidNonVaultedItems.length > 0 && <ErroredItems />}
       <Protections application={props.application} />
-      <TwoFactorAuthWrapper application={props.application} />
-      {isU2FFeatureAvailable && <U2FWrapper application={props.application} />}
+      <TwoFactorAuthWrapper auth={auth} application={props.application} />
+      {isU2FFeatureAvailable && <U2FWrapper application={props.application} is2FAEnabled={is2FAEnabled} />}
       {isNativeMobileWeb && <MultitaskingPrivacy application={props.application} />}
       <PasscodeLock application={props.application} />
       {isNativeMobileWeb && <BiometricsLock application={props.application} />}

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/MfaProps.ts

@@ -1,5 +1,7 @@
 import { WebApplication } from '@/Application/WebApplication'
+import { TwoFactorAuth } from './TwoFactorAuth'
 
 export interface MfaProps {
   application: WebApplication
+  auth: TwoFactorAuth
 }

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuth.ts

@@ -19,6 +19,7 @@ export class TwoFactorAuth {
   constructor(
     private readonly sessions: SessionsClientInterface,
     private readonly mfa: MfaServiceInterface,
+    private callback?: (status: TwoFactorStatus) => void,
   ) {
     this._errorMessage = null
 
@@ -90,6 +91,9 @@ export class TwoFactorAuth {
         action((active) => {
           this._status = active ? 'two-factor-enabled' : 'two-factor-disabled'
           this.setError(null)
+          if (this.callback) {
+            this.callback(this._status)
+          }
         }),
       )
       .catch(

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthWrapper.tsx

@@ -1,12 +1,10 @@
-import { FunctionComponent, useState } from 'react'
+import { FunctionComponent } from 'react'
+
 import { MfaProps } from './MfaProps'
-import { TwoFactorAuth } from './TwoFactorAuth'
 import TwoFactorAuthView from './TwoFactorAuthView/TwoFactorAuthView'
 
 const TwoFactorAuthWrapper: FunctionComponent<MfaProps> = (props) => {
-  const [auth] = useState(() => new TwoFactorAuth(props.application.sessions, props.application.mfa))
-  auth.fetchStatus()
-  return <TwoFactorAuthView auth={auth} application={props.application} />
+  return <TwoFactorAuthView auth={props.auth} application={props.application} />
 }
 
 export default TwoFactorAuthWrapper

packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FProps.ts

@@ -2,4 +2,5 @@ import { WebApplication } from '@/Application/WebApplication'
 
 export interface U2FProps {
   application: WebApplication
+  is2FAEnabled: boolean
 }

packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FDescription.tsx

@@ -4,7 +4,11 @@ import { observer } from 'mobx-react-lite'
 import { Text } from '@/Components/Preferences/PreferencesComponents/Content'
 import { useApplication } from '@/Components/ApplicationProvider'
 
-const U2FDescription: FunctionComponent = () => {
+type Props = {
+  is2FAEnabled: boolean
+}
+
+const U2FDescription: FunctionComponent<Props> = ({ is2FAEnabled }) => {
   const application = useApplication()
 
   if (application.sessions.getUser() === undefined) {
@@ -17,6 +21,9 @@ const U2FDescription: FunctionComponent = () => {
       {!application.isFullU2FClient && (
         <Text className="italic">Please visit the web app in order to add a hardware security key.</Text>
       )}
+      {!is2FAEnabled && (
+        <Text className="italic">You must enable two-factor authentication before adding a hardware security key.</Text>
+      )}
     </div>
   )
 }

packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FView.tsx

@@ -15,9 +15,10 @@ import RecoveryCodeBanner from '@/Components/RecoveryCodeBanner/RecoveryCodeBann
 
 type Props = {
   application: WebApplication
+  is2FAEnabled: boolean
 }
 
-const U2FView: FunctionComponent<Props> = ({ application }) => {
+const U2FView: FunctionComponent<Props> = ({ application, is2FAEnabled }) => {
   const [showDeviceAddingModal, setShowDeviceAddingModal] = useState(false)
   const [devices, setDevices] = useState<Array<{ id: string; name: string }>>([])
   const [error, setError] = useState('')
@@ -47,7 +48,7 @@ const U2FView: FunctionComponent<Props> = ({ application }) => {
         <PreferencesSegment>
           <div className="flex flex-col">
             <U2FTitle />
-            <U2FDescription />
+            <U2FDescription is2FAEnabled={is2FAEnabled} />
           </div>
         </PreferencesSegment>
         <PreferencesSegment classes="mt-2">
@@ -60,7 +61,7 @@ const U2FView: FunctionComponent<Props> = ({ application }) => {
           />
           <Button
             className="mt-1"
-            disabled={!application.isFullU2FClient}
+            disabled={!application.isFullU2FClient || !is2FAEnabled}
             label="Add Device"
             primary
             onClick={handleAddDeviceClick}

packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FWrapper.tsx

@@ -4,7 +4,7 @@ import { U2FProps } from './U2FProps'
 import U2FView from './U2FView/U2FView'
 
 const U2FWrapper: FunctionComponent<U2FProps> = (props) => {
-  return <U2FView application={props.application} />
+  return <U2FView application={props.application} is2FAEnabled={props.is2FAEnabled} />
 }
 
 export default U2FWrapper

packages/web/src/javascripts/Components/Preferences/PreferencesProps.tsx

@@ -1,7 +1,6 @@
 import { WebApplication } from '@/Application/WebApplication'
-import { MfaProps } from './Panes/Security/TwoFactorAuth/MfaProps'
 
-export interface PreferencesProps extends MfaProps {
+export interface PreferencesProps {
   application: WebApplication
   closePreferences: () => void
 }