Implement Two-Factor Authentication (2FA) (#13141)

Implementation is very simple

Established authentication dynamic is intercepted at
getAuthTokensFromLoginToken. If 2FA is required, a pattern similar to
EmailVerification is executed. That is, getAuthTokensFromLoginToken
mutation fails with either of the following errors:

1. TWO_FACTOR_AUTHENTICATION_VERIFICATION_REQUIRED
2. TWO_FACTOR_AUTHENTICATION_PROVISION_REQUIRED

UI knows how to respond accordingly.

2FA provisioning occurs at the 2FA resolver.
2FA verification, currently only OTP, is handled by auth.resolver's
getAuthTokensFromOTP

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@twenty.com>
Co-authored-by: Jean-Baptiste Ronssin <65334819+jbronssin@users.noreply.github.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/settings/security/components/SettingsSecurityAuthProvidersOptionsList.tsx

@@ -18,9 +18,13 @@ import {
 import { Card } from 'twenty-ui/layout';
 import {
   AuthProviders,
+  FeatureFlagKey,
   useUpdateWorkspaceMutation,
 } from '~/generated-metadata/graphql';
 
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { Toggle2FA } from './Toggle2FA';
+
 const StyledSettingsSecurityOptionsList = styled.div`
   display: flex;
   flex-direction: column;
@@ -38,6 +42,10 @@ export const SettingsSecurityAuthProvidersOptionsList = () => {
     currentWorkspaceState,
   );
 
+  const isTwoFactorAuthenticationEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IS_TWO_FACTOR_AUTHENTICATION_ENABLED,
+  );
+
   const [updateWorkspace] = useUpdateWorkspaceMutation();
 
   const isValidAuthProvider = (
@@ -177,6 +185,11 @@ export const SettingsSecurityAuthProvidersOptionsList = () => {
               }
             />
           </Card>
+          {isTwoFactorAuthenticationEnabled && (
+            <Card rounded>
+              <Toggle2FA />
+            </Card>
+          )}
         </>
       )}
     </StyledSettingsSecurityOptionsList>

packages/twenty-front/src/modules/settings/security/components/Toggle2FA.tsx

@@ -0,0 +1,67 @@
+import { useRecoilState } from 'recoil';
+
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ApolloError } from '@apollo/client';
+import { t } from '@lingui/core/macro';
+import { IconLifebuoy } from 'twenty-ui/display';
+import { useUpdateWorkspaceMutation } from '~/generated-metadata/graphql';
+
+export const Toggle2FA = () => {
+  const { enqueueErrorSnackBar } = useSnackBar();
+  const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
+    currentWorkspaceState,
+  );
+
+  const [updateWorkspace] = useUpdateWorkspaceMutation();
+
+  const handleChange = async () => {
+    if (!currentWorkspace?.id) {
+      throw new Error('User is not logged in');
+    }
+
+    const newEnforceValue = !currentWorkspace.isTwoFactorAuthenticationEnforced;
+
+    try {
+      // Optimistic update
+      setCurrentWorkspace({
+        ...currentWorkspace,
+        isTwoFactorAuthenticationEnforced: newEnforceValue,
+      });
+
+      await updateWorkspace({
+        variables: {
+          input: {
+            isTwoFactorAuthenticationEnforced: newEnforceValue,
+          },
+        },
+      });
+    } catch (err: any) {
+      // Rollback optimistic update if error
+      setCurrentWorkspace({
+        ...currentWorkspace,
+        isTwoFactorAuthenticationEnforced: !newEnforceValue,
+      });
+      enqueueErrorSnackBar({
+        apolloError: err instanceof ApolloError ? err : undefined,
+        message: err?.message,
+      });
+    }
+  };
+
+  return (
+    <>
+      {currentWorkspace && (
+        <SettingsOptionCardContentToggle
+          Icon={IconLifebuoy}
+          title={t`Two Factor Authentication`}
+          description={t`Enforce two-step verification for every user login.`}
+          checked={currentWorkspace.isTwoFactorAuthenticationEnforced}
+          onChange={handleChange}
+          advancedMode
+        />
+      )}
+    </>
+  );
+};