feat(M2-10150): Add comprehensive Mixpanel tracking for MFA events

[maxto024]

Jira Ticket

https://mindlogger.atlassian.net/browse/M2-10150

Summary

This PR implements comprehensive Mixpanel analytics tracking for all MFA (Multi-Factor Authentication) events across the admin panel. The implementation covers the complete MFA user journey from setup to login verification.

Key Changes:

• Added 7 new MFA-specific event types to track setup, login, and recovery code flows
• Modified 2 existing login events (LoginSuccessful, LoginBtnClick) to include MFA properties
• Implemented user profile property updates via new updateProfile() method
• Added 4 new event properties for MFA context (MFA Used, MFA Method Used, Auth Method, Failure Stage)
• Centralized Mixpanel test mock in setupTests.ts
• Updated .env.example with REACT_APP_MIXPANEL_TOKEN configuration

---

Mixpanel Events Implemented

MFA Setup Events

Event	Trigger	Profile Updates
MFA Setup Started	User clicks "Add" button to initiate MFA setup	-
MFA Enabled Successfully	TOTP verification completes successfully during setup	MFA Enabled, MFA Enrolled At, MFA Last Updated At
MFA Disabled	User completes the 3-step MFA removal flow	MFA Enabled, MFA Last Updated At
Recovery Codes Viewed	User views recovery codes (outside of initial setup)	-

Login Events

Event	Status	Trigger	Properties
[Admin] Login Button click	MODIFIED	Login button clicked	Auth Method: 'Password'
[Admin] MFA Challenge Presented	NEW	MFA verification screen displayed	-
[Admin] Cant Access Auth App Click	NEW	User clicks recovery code link	-
[Admin] Login Successful	MODIFIED	Full authentication completed	MFA Used, MFA Method Used
[Admin] Login Failed	NEW	Authentication fails at any stage	Failure Stage, MFA Method Used

Event Properties

Property	Type	Values	Used In
MFA Used	boolean	true / false	Login Successful
MFA Method Used	string | null	'Authenticator App' / 'Backup Codes' / null	Login Successful, Login Failed
Auth Method	string	'Password'	Login Button click
Failure Stage	string	'Credentials' / 'MFA'	Login Failed

User Profile Properties

Property	Type	Updated On	Description
MFA Enabled	boolean	Enable / Disable	Current MFA status
MFA Enrolled At	ISO timestamp	Enable only	When MFA was first enabled
MFA Last Updated At	ISO timestamp	Enable / Disable	Last MFA status change

---

Files Changed

Mixpanel Core

File	Changes
src/shared/utils/mixpanel/mixpanel.types.ts	Added 7 event types, 4 properties, event type definitions
src/shared/utils/mixpanel/mixpanel.ts	Added updateProfile() method for user property management

MFA Account Settings

File	Events Added
src/modules/Dashboard/features/AccountSettings/MFASetup/useMFASetup.ts	MFA Setup Started, MFA Enabled Successfully + profile updates
src/modules/Dashboard/features/AccountSettings/RemoveMFA/useRemoveMFA.ts	MFA Disabled + profile updates
src/modules/Dashboard/features/AccountSettings/ViewRecoveryCodes/useViewRecoveryCodes.ts	Recovery Codes Viewed

Login Flow

File	Events Added
src/modules/Auth/features/Login/LoginForm/LoginForm.tsx	MFA Challenge Presented, Login Failed (credentials), modified Login Successful & Login Button click
src/modules/Auth/features/Login/MFAForm/MFAForm.tsx	Cant Access Auth App Click
src/modules/Auth/features/Login/MFAForm/useMFAVerification.ts	Login Successful (with MFA), Login Failed (MFA stage)

Test Infrastructure

File	Changes
src/setupTests.ts	Centralized Mixpanel mock with updateProfile method
.env.example	Added REACT_APP_MIXPANEL_TOKEN configuration

---

Tests

---

Environment Configuration

.env.example Update

# Mixpanel Analytics
REACT_APP_MIXPANEL_TOKEN=         # Required for analytics tracking
REACT_APP_MIXPANEL_FORCE_ENABLE=false

---

Verification Checklist

• All 7 MFA events tracked at correct triggers
• Existing login events modified with MFA properties
• User profile updates on MFA enable/disable
• updateProfile() method added to Mixpanel utility
• Centralized Mixpanel mock in setupTests.ts
• .env.example updated with Mixpanel token
• All 3933 tests passing
• No duplicate Mixpanel mocks in test files
• Type-safe event definitions with proper TypeScript types

---

Event Tracking Flow

Login Flow:
  LoginBtnClick → [Auth Method: 'Password']
  ├─ Credentials Fail → LoginFailed [Failure Stage: 'Credentials']
  └─ Credentials Pass
      ├─ No MFA → LoginSuccessful [MFA Used: false, MFA Method Used: null]
      └─ MFA Required → MFAChallengePresented
          ├─ CantAccessAuthAppClick (optional)
          ├─ MFA Pass → LoginSuccessful [MFA Used: true, MFA Method Used: 'Authenticator App'|'Backup Codes']
          └─ MFA Fail → LoginFailed [Failure Stage: 'MFA', MFA Method Used: '...']

MFA Setup Flow:
  MFASetupStarted → ... → MFAEnabledSuccessfully + Profile Update

MFA Disable Flow:
  Verify → Confirm → MFADisabled + Profile Update

Recovery Codes:
  View/Regenerate → RecoveryCodesViewed

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-2193.d2ccder08v9rmu.amplifyapp.com

[sricharan-varanasi]

Requirements specify, specific userId property tracking as part of 'MFA Challenge Presented' and 'Login Successful'. Can this be reviewed and added

[sricharan-varanasi]

Looks good!