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>
2025-07-23 06:42:01 -06:00
parent dd5ae66449
commit 4d3124f840
106 changed files with 5103 additions and 103 deletions
@@ -0,0 +1,75 @@
+import { loginTokenState } from '@/auth/states/loginTokenState';
+import { qrCodeState } from '@/auth/states/qrCode';
+import { useOrigin } from '@/domain-manager/hooks/useOrigin';
+import { useCurrentUserWorkspaceTwoFactorAuthentication } from '@/settings/two-factor-authentication/hooks/useCurrentUserWorkspaceTwoFactorAuthentication';
+import { AppPath } from '@/types/AppPath';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useLingui } from '@lingui/react/macro';
+import { useEffect } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+
+export const TwoFactorAuthenticationSetupEffect = () => {
+  const { initiateCurrentUserWorkspaceOtpProvisioning } =
+    useCurrentUserWorkspaceTwoFactorAuthentication();
+  const { enqueueErrorSnackBar } = useSnackBar();
+
+  const navigate = useNavigateApp();
+  const { origin } = useOrigin();
+  const loginToken = useRecoilValue(loginTokenState);
+  const qrCode = useRecoilValue(qrCodeState);
+  const setQrCodeState = useSetRecoilState(qrCodeState);
+
+  const { t } = useLingui();
+
+  useEffect(() => {
+    if (isDefined(qrCode)) {
+      return;
+    }
+
+    const handleTwoFactorAuthenticationProvisioningInitiation = async () => {
+      try {
+        if (!loginToken) {
+          enqueueErrorSnackBar({
+            message: t`Login token missing. Two Factor Authentication setup can not be initiated.`,
+            options: {
+              dedupeKey: 'invalid-session-dedupe-key',
+            },
+          });
+          return navigate(AppPath.SignInUp);
+        }
+
+        const initiateOTPProvisioningResult =
+          await initiateCurrentUserWorkspaceOtpProvisioning({
+            variables: {
+              loginToken: loginToken,
+              origin,
+            },
+          });
+
+        if (!initiateOTPProvisioningResult.data?.initiateOTPProvisioning.uri)
+          return;
+
+        setQrCodeState(
+          initiateOTPProvisioningResult.data?.initiateOTPProvisioning.uri,
+        );
+      } catch (error) {
+        enqueueErrorSnackBar({
+          message: t`Two factor authentication provisioning failed.`,
+          options: {
+            dedupeKey:
+              'two-factor-authentication-provisioning-initiation-failed',
+          },
+        });
+      }
+    };
+
+    handleTwoFactorAuthenticationProvisioningInitiation();
+
+    // Two factor authentication provisioning only needs to run once at mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return <></>;
+};