Merge pull request #2223 from develop

Release 2026.05.1

Author: divbzero

.env.example

@@ -4,6 +4,10 @@ REACT_APP_DEVELOP_BUILD_VERSION=
 REACT_APP_LAUNCHDARKLY_CLIENT_ID=65df9142fbf14e10954ac55d
 REACT_APP_WEB_URI=http://localhost:5173
 
+# Mixpanel Analytics
+REACT_APP_MIXPANEL_TOKEN=
+REACT_APP_MIXPANEL_FORCE_ENABLE=false
+
 REACT_APP_DD_APP_ID=
 REACT_APP_DD_CLIENT_TOKEN=
 REACT_APP_DD_VERSION=local

.github/workflows/_build-deploy.yaml

@@ -58,7 +58,7 @@ jobs:
       - name: Configure aws credentials for secrets
         uses: aws-actions/configure-aws-credentials@v6
         with:
-          role-to-assume: arn:aws:iam::917902836630:role/github-oidc-build-secrets2026031712184557570000000a
+          role-to-assume: arn:aws:iam::917902836630:role/github-oidc-build-secrets
           role-session-name: OIDC-GHA-Build-Secrets
           aws-region: us-east-1
 
@@ -165,7 +165,7 @@ jobs:
       - name: configure aws credentials
         uses: aws-actions/configure-aws-credentials@v6
         with:
-          role-to-assume: arn:aws:iam::917902836630:role/github-oidc-ssm-version20260317121845461900000008
+          role-to-assume: arn:aws:iam::917902836630:role/github-oidc-ssm-version
           role-session-name: OIDC-GHA-session-version
           aws-region: us-east-1
       - name: Store version in SSM

.github/workflows/_setup.yaml

@@ -32,22 +32,22 @@ jobs:
           ENV_NAME="${{ inputs.env-name }}"
           case "$ENV_NAME" in
             "dev")
-              echo 'role=arn:aws:iam::017925157769:role/github-oidc-deploy20260311132710794900000001' >> "$GITHUB_OUTPUT"
+              echo 'role=arn:aws:iam::017925157769:role/github-oidc-deploy' >> "$GITHUB_OUTPUT"
             ;;
             "test")
               echo 'role=arn:aws:iam::641513112151:role/cmiml-test-oidc-github-role' >> "$GITHUB_OUTPUT"
             ;;
             "uat")
-              echo 'role=arn:aws:iam::641513112151:role/github-oidc-deploy20260312130551192100000004' >> "$GITHUB_OUTPUT"
+              echo 'role=arn:aws:iam::641513112151:role/github-oidc-deploy' >> "$GITHUB_OUTPUT"
             ;;
             "stage")
               echo 'role=arn:aws:iam::641513112151:role/cmiml-stage-oidc-github-role' >> "$GITHUB_OUTPUT"
             ;;
             "prod")
-              echo 'role=arn:aws:iam::410431445687:role/github-oidc-deploy20260312143902067900000001' >> "$GITHUB_OUTPUT"
+              echo 'role=arn:aws:iam::410431445687:role/github-oidc-deploy' >> "$GITHUB_OUTPUT"
             ;;
             "prod-dr-us-west-2")
-              echo 'role=arn:aws:iam::973422231492:role/github-oidc-deploy20260313122244970500000002' >> "$GITHUB_OUTPUT"
+              echo 'role=arn:aws:iam::973422231492:role/github-oidc-deploy' >> "$GITHUB_OUTPUT"
             ;;
             *)
               echo "Bad environment name"

package.json

@@ -186,6 +186,7 @@
     "aria-query": "5.1.3",
     "defu": ">=6.1.5",
     "flatted": ">=3.4.2",
+    "follow-redirects": ">=1.16.0",
     "js-yaml": ">=4.1.1",
     "lodash": ">=4.18.0",
     "picomatch": ">=4.0.4",

src/modules/Auth/features/Login/LoginForm/LoginForm.test.tsx

@@ -1,7 +1,9 @@
 import { fireEvent, waitFor, screen } from '@testing-library/react';
+import { vi } from 'vitest';
 
 import { inputAcceptsValue } from 'shared/tests/inputAcceptsValue';
 import { mockedEmail, mockedPassword } from 'shared/mock';
+import { Mixpanel, MixpanelEventType, MixpanelProps } from 'shared/utils/mixpanel';
 import { renderWithProviders } from 'shared/utils/renderWithProviders';
 import { expectBanner } from 'shared/utils';
 import { RootState } from 'redux/store';
@@ -46,4 +48,30 @@ describe('Login component tests', () => {
 
     expect(screen.getByLabelText('Email')).toHaveValue(mockedEmail);
   });
+
+  describe('Mixpanel Tracking', () => {
+    beforeEach(() => {
+      vi.mocked(Mixpanel.track).mockClear();
+    });
+
+    test('should have Mixpanel mock set up correctly', () => {
+      // Verify the mock is configured properly for other tests
+      expect(Mixpanel.track).toBeDefined();
+      expect(vi.isMockFunction(Mixpanel.track)).toBe(true);
+    });
+
+    test('should export correct MixpanelEventType values for LoginForm tracking', () => {
+      // Verify the event types used by LoginForm are available
+      expect(MixpanelEventType.MFAChallengePresented).toBe('MFA Challenge Presented');
+      expect(MixpanelEventType.LoginSuccessful).toBe('Login Successful');
+      expect(MixpanelEventType.LoginFailed).toBe('Login Failed');
+    });
+
+    test('should export correct MixpanelProps for LoginForm tracking', () => {
+      // Verify the props used by LoginForm are available
+      expect(MixpanelProps.MFAUsed).toBe('MFA Used');
+      expect(MixpanelProps.MFAMethodUsed).toBe('MFA Method Used');
+      expect(MixpanelProps.FailureStage).toBe('Failure Stage');
+    });
+  });
 });

src/modules/Auth/features/Login/LoginForm/LoginForm.tsx

@@ -16,7 +16,7 @@ import { AUTH_BOX_WIDTH } from 'shared/consts';
 import { variables } from 'shared/styles';
 import { StyledErrorText, StyledHeadlineSmall } from 'shared/styles/styledComponents';
 import { LocationStateKeys } from 'shared/types';
-import { Mixpanel, MixpanelEventType } from 'shared/utils';
+import { Mixpanel, MixpanelEventType, MixpanelProps } from 'shared/utils';
 
 import { loginFormSchema } from '../Login.schema';
 import {
@@ -61,6 +61,8 @@ export const LoginForm = () => {
 
       // Check if MFA is required
       if (response?.result && 'mfaRequired' in response.result && response.result.mfaRequired) {
+        // Track MFA challenge presented
+        Mixpanel.track({ action: MixpanelEventType.MFAChallengePresented });
         // MFA session is set by the reducer, navigate to MFA verification page
         navigate(page.verifyMFA);
 
@@ -82,13 +84,22 @@ export const LoginForm = () => {
         }
       }
 
-      Mixpanel.track({ action: MixpanelEventType.LoginSuccessful });
+      Mixpanel.track({
+        action: MixpanelEventType.LoginSuccessful,
+        [MixpanelProps.MFAUsed]: false,
+        [MixpanelProps.MFAMethodUsed]: null,
+      });
 
       clearSoftLock();
     }
 
     if (signIn.rejected.match(result)) {
       setErrorMessage(result.payload as string);
+      // Track login failed
+      Mixpanel.track({
+        action: MixpanelEventType.LoginFailed,
+        [MixpanelProps.FailureStage]: 'Credentials',
+      });
     }
   };
 
@@ -145,7 +156,10 @@ export const LoginForm = () => {
   };
 
   const handleLoginClick = () => {
-    Mixpanel.track({ action: MixpanelEventType.LoginBtnClick });
+    Mixpanel.track({
+      action: MixpanelEventType.LoginBtnClick,
+      [MixpanelProps.AuthMethod]: 'Password',
+    });
   };
 
   const handleResetPasswordClick = () => {

src/modules/Auth/features/Login/MFAForm/MFAForm.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { Mixpanel, MixpanelEventType } from 'shared/utils/mixpanel';
 import { renderWithProviders } from 'shared/utils/renderWithProviders';
 
 import { MFAForm } from './MFAForm';
@@ -16,13 +17,6 @@ vi.mock('react-router-dom', async () => {
   };
 });
 
-vi.mock('shared/utils/mixpanel', () => ({
-  Mixpanel: {
-    track: vi.fn(),
-    login: vi.fn(),
-  },
-}));
-
 describe('MFAForm', () => {
   // MFA session only contains backend-provided tokens
   // Session expiry and attempts are tracked by the backend
@@ -252,9 +246,39 @@ describe('MFAForm', () => {
     const recoveryLink = screen.getByText("I can't access my authenticator app");
     fireEvent.click(recoveryLink);
 
+    // Verify Mixpanel tracking
+    expect(Mixpanel.track).toHaveBeenCalledWith({
+      action: MixpanelEventType.CantAccessAuthAppClick,
+    });
+    // Verify callback
     expect(mockSwitchToRecovery).toHaveBeenCalled();
   });
 
+  describe('Mixpanel tracking', () => {
+    it('tracks CantAccessAuthAppClick when recovery link is clicked', () => {
+      renderMFAForm({}, vi.fn());
+
+      const recoveryLink = screen.getByText("I can't access my authenticator app");
+      fireEvent.click(recoveryLink);
+
+      expect(Mixpanel.track).toHaveBeenCalledTimes(1);
+      expect(Mixpanel.track).toHaveBeenCalledWith({
+        action: MixpanelEventType.CantAccessAuthAppClick,
+      });
+    });
+
+    it('tracks recovery link click even when onSwitchToRecovery is not provided', () => {
+      renderMFAForm({});
+
+      const recoveryLink = screen.getByText("I can't access my authenticator app");
+      fireEvent.click(recoveryLink);
+
+      expect(Mixpanel.track).toHaveBeenCalledWith({
+        action: MixpanelEventType.CantAccessAuthAppClick,
+      });
+    });
+  });
+
   it.skip('restricts input to 6 digits only', async () => {
     renderMFAForm();
     const input = screen.getByLabelText('Enter verification code') as HTMLInputElement;

src/modules/Auth/features/Login/MFAForm/MFAForm.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Box, TextField } from '@mui/material';
 
 import { StyledBodyMedium, StyledHeadlineSmall, StyledLinkBtn, variables } from 'shared/styles';
+import { Mixpanel, MixpanelEventType } from 'shared/utils';
 
 import { mfaFormSchema } from './MFAForm.schema';
 import { StyledMFAContainer, StyledMFAForm, StyledMFAButton } from './MFAForm.styles';
@@ -67,6 +68,8 @@ const MFAFormComponent = ({ onSwitchToRecovery, onBackToLogin }: MFAFormProps) =
   };
 
   const handleRecoveryClick = () => {
+    // Track recovery link click
+    Mixpanel.track({ action: MixpanelEventType.CantAccessAuthAppClick });
     if (onSwitchToRecovery) {
       onSwitchToRecovery();
     }

src/modules/Auth/features/Login/MFAForm/RecoveryCodeForm.test.tsx

@@ -16,12 +16,6 @@ vi.mock('react-router-dom', async () => {
   };
 });
 
-vi.mock('shared/utils/mixpanel', () => ({
-  Mixpanel: {
-    track: vi.fn(),
-  },
-}));
-
 describe('RecoveryCodeForm', () => {
   // MFA session only contains backend-provided tokens
   // Session expiry and attempts are tracked by the backend

src/modules/Auth/features/Login/MFAForm/useMFAVerification.test.tsx

@@ -7,6 +7,7 @@ import { verifyMFATOTPApi } from 'api';
 import { auth } from 'modules/Auth/state';
 import { navigateToLibrary } from 'modules/Auth/utils';
 import { setupStore } from 'redux/store';
+import { Mixpanel, MixpanelEventType, MixpanelProps } from 'shared/utils/mixpanel';
 import type { MFAVerifyResponse } from 'modules/Auth/api/api.types';
 
 import { useMFAVerification } from './useMFAVerification';
@@ -250,4 +251,100 @@ describe('useMFAVerification', () => {
     expect(result.current.isSessionExpired).toBe(true);
     expect(result.current.displayError).toBe('mfaSessionExpired');
   });
+
+  describe('Mixpanel Tracking', () => {
+    beforeEach(() => {
+      vi.mocked(Mixpanel.track).mockClear();
+    });
+
+    it('should track LoginSuccessful with MFA via Authenticator App on successful TOTP verification', async () => {
+      const mockDispatch = vi.spyOn(store, 'dispatch');
+      mockDispatch.mockResolvedValueOnce({
+        type: 'auth/verifyMFATOTP/fulfilled',
+        payload: { result: { user: { id: 'user-123' } } },
+      });
+
+      const { result } = renderHook(() => useMFAVerification('totp'), { wrapper });
+
+      await act(async () => {
+        await result.current.verifyCode('123456');
+      });
+
+      expect(Mixpanel.track).toHaveBeenCalledWith({
+        action: MixpanelEventType.LoginSuccessful,
+        [MixpanelProps.MFAUsed]: true,
+        [MixpanelProps.MFAMethodUsed]: 'Authenticator App',
+      });
+    });
+
+    it('should track LoginSuccessful with MFA via Backup Codes on successful recovery code verification', async () => {
+      const mockDispatch = vi.spyOn(store, 'dispatch');
+      mockDispatch.mockResolvedValueOnce({
+        type: 'auth/verifyMFARecoveryCode/fulfilled',
+        payload: { result: { user: { id: 'user-123' } } },
+      });
+
+      const { result } = renderHook(() => useMFAVerification('recovery'), { wrapper });
+
+      await act(async () => {
+        await result.current.verifyCode('ABCDE-12345');
+      });
+
+      expect(Mixpanel.track).toHaveBeenCalledWith({
+        action: MixpanelEventType.LoginSuccessful,
+        [MixpanelProps.MFAUsed]: true,
+        [MixpanelProps.MFAMethodUsed]: 'Backup Codes',
+      });
+    });
+
+    it('should track LoginFailed with MFA stage and Authenticator App on TOTP failure', async () => {
+      const mockResponse = {
+        data: {
+          result: {
+            message: 'Invalid TOTP code',
+          },
+        },
+        status: 400,
+        statusText: 'Bad Request',
+        headers: {} as AxiosHeaders,
+        config: {
+          headers: {} as AxiosHeaders,
+        } as any,
+      } satisfies AxiosResponse<MFAVerifyResponse>;
+
+      mockVerifyAPI.mockResolvedValueOnce(mockResponse);
+
+      const { result } = renderHook(() => useMFAVerification('totp'), { wrapper });
+
+      await act(async () => {
+        await result.current.verifyCode('123456');
+      });
+
+      expect(Mixpanel.track).toHaveBeenCalledWith({
+        action: MixpanelEventType.LoginFailed,
+        [MixpanelProps.FailureStage]: 'MFA',
+        [MixpanelProps.MFAMethodUsed]: 'Authenticator App',
+      });
+    });
+
+    it('should track LoginFailed with MFA stage and Backup Codes on recovery code failure', async () => {
+      const mockDispatch = vi.spyOn(store, 'dispatch');
+      mockDispatch.mockResolvedValueOnce({
+        type: 'auth/verifyMFARecoveryCode/rejected',
+        payload: 'Invalid recovery code',
+      });
+
+      const { result } = renderHook(() => useMFAVerification('recovery'), { wrapper });
+
+      await act(async () => {
+        await result.current.verifyCode('INVALID-CODE');
+      });
+
+      expect(Mixpanel.track).toHaveBeenCalledWith({
+        action: MixpanelEventType.LoginFailed,
+        [MixpanelProps.FailureStage]: 'MFA',
+        [MixpanelProps.MFAMethodUsed]: 'Backup Codes',
+      });
+    });
+  });
 });