Handle MFA-required state in onboarding flow

Updated onboarding logic and slides to support cases where MFA is required, not just password changes. Adjusted orchestrator, slide props, and login/auth callback routes to trigger onboarding when either password change or MFA setup is needed.

Author: Ludy87

frontend/src/core/components/onboarding/Onboarding.tsx

@@ -271,11 +271,12 @@ export default function Onboarding() {
       onPasswordChanged: handlePasswordChanged,
       usingDefaultCredentials: runtimeState.usingDefaultCredentials,
       mfaRequired: runtimeState.mfaRequired,
+      requiresPasswordChange: runtimeState.requiresPasswordChange,
       analyticsError,
       analyticsLoading,
     });
-  }, [analyticsError, analyticsLoading, currentSlideDefinition, osInfo, osOptions, runtimeState.selectedRole, runtimeState.licenseNotice, handleRoleSelect, serverExperience.loginEnabled, setSelectedDownloadUrl, runtimeState.firstLoginUsername, handlePasswordChanged, runtimeState.usingDefaultCredentials, runtimeState.mfaRequired]);
-  
+  }, [analyticsError, analyticsLoading, currentSlideDefinition, osInfo, osOptions, runtimeState.selectedRole, runtimeState.licenseNotice, handleRoleSelect, serverExperience.loginEnabled, setSelectedDownloadUrl, runtimeState.firstLoginUsername, handlePasswordChanged, runtimeState.usingDefaultCredentials, runtimeState.mfaRequired, runtimeState.requiresPasswordChange]);
+
   const modalSlideCount = useMemo(() => {
     return activeFlow.filter((step) => step.type === 'modal-slide').length;
   }, [activeFlow]);

frontend/src/core/components/onboarding/onboardingFlowConfig.ts

@@ -62,6 +62,7 @@ export interface SlideFactoryParams {
   mfaRequired?: boolean;
   analyticsError?: string | null;
   analyticsLoading?: boolean;
+  requiresPasswordChange?: boolean;
 }
 
 export interface HeroDefinition {
@@ -89,12 +90,13 @@ export interface SlideDefinition {
 export const SLIDE_DEFINITIONS: Record<SlideId, SlideDefinition> = {
   'first-login': {
     id: 'first-login',
-    createSlide: ({ firstLoginUsername, onPasswordChanged, usingDefaultCredentials, mfaRequired }) =>
+    createSlide: ({ firstLoginUsername, onPasswordChanged, usingDefaultCredentials, mfaRequired, requiresPasswordChange }) =>
       FirstLoginSlide({
         username: firstLoginUsername || '',
         onPasswordChanged: onPasswordChanged || (() => {}),
         usingDefaultCredentials: usingDefaultCredentials || false,
         mfaRequired: mfaRequired || false,
+        requiresPasswordChange: requiresPasswordChange || false,
       }),
     hero: { type: 'lock' },
     buttons: [], // Form has its own submit button

frontend/src/core/components/onboarding/orchestrator/useOnboardingOrchestrator.ts

@@ -235,11 +235,11 @@ export function useOnboardingOrchestrator(
 
   const activeFlow = useMemo(() => {
     // If password change is required, ONLY show the first-login step
-    if (runtimeState.requiresPasswordChange !== false) {
+    if (runtimeState.requiresPasswordChange !== false || runtimeState.mfaRequired !== false) {
       return ONBOARDING_STEPS.filter((step) => step.id === 'first-login');
     }
     return ONBOARDING_STEPS.filter((step) => step.condition(conditionContext));
-  }, [conditionContext, runtimeState.requiresPasswordChange]);
+  }, [conditionContext, runtimeState.requiresPasswordChange, runtimeState.mfaRequired]);
 
   // Wait for config AND admin status before calculating initial step
   const adminStatusResolved = !configLoading && (
@@ -259,7 +259,7 @@ export function useOnboardingOrchestrator(
     }
 
     // If onboarding has been completed, don't show it
-    if (isOnboardingCompleted() && !runtimeState.requiresPasswordChange) {
+    if (isOnboardingCompleted() && runtimeState.requiresPasswordChange === false && runtimeState.mfaRequired === false) {
       setCurrentStepIndex(activeFlow.length);
       initialIndexSet.current = true;
       return;
@@ -270,7 +270,7 @@ export function useOnboardingOrchestrator(
       setCurrentStepIndex(0);
       initialIndexSet.current = true;
     }
-  }, [activeFlow, configLoading, adminStatusResolved, runtimeState.requiresPasswordChange]);
+  }, [activeFlow, configLoading, adminStatusResolved, runtimeState.requiresPasswordChange, runtimeState.mfaRequired]);
 
   const totalSteps = activeFlow.length;
 
@@ -308,7 +308,7 @@ export function useOnboardingOrchestrator(
     // Skip marks the entire onboarding as completed
     markOnboardingCompleted();
     setCurrentStepIndex(totalSteps);
-  }, [totalSteps, runtimeState.requiresPasswordChange]);
+  }, [totalSteps, runtimeState.requiresPasswordChange, runtimeState.mfaRequired]);
 
   const complete = useCallback(() => {
     const nextIndex = currentStepIndex + 1;
@@ -317,7 +317,7 @@ export function useOnboardingOrchestrator(
       markOnboardingCompleted();
     }
     setCurrentStepIndex(nextIndex);
-  }, [currentStepIndex, totalSteps]);
+  }, [currentStepIndex, totalSteps, runtimeState.requiresPasswordChange, runtimeState.mfaRequired]);
 
 
   const updateRuntimeState = useCallback((updates: Partial<OnboardingRuntimeState>) => {

frontend/src/core/components/onboarding/slides/FirstLoginSlide.tsx

@@ -14,6 +14,7 @@ interface FirstLoginSlideProps {
   onPasswordChanged: () => void;
   usingDefaultCredentials?: boolean;
   mfaRequired?: boolean;
+  requiresPasswordChange?: boolean;
 }
 
 const DEFAULT_PASSWORD = 'stirling';
@@ -23,6 +24,7 @@ function FirstLoginForm({
   onPasswordChanged,
   usingDefaultCredentials = false,
   mfaRequired = false,
+  requiresPasswordChange = false,
 }: FirstLoginSlideProps) {
   const { t } = useTranslation();
   // If using default credentials, pre-fill with "stirling" - user won't see this field
@@ -35,8 +37,10 @@ function FirstLoginForm({
   const [mfaSetupCode, setMfaSetupCode] = useState('');
   const [mfaError, setMfaError] = useState('');
   const [mfaLoading, setMfaLoading] = useState(false);
-  const [stepPassword, setStepPassword] = useState(true);
+  const [stepPassword, setStepPassword] = useState(requiresPasswordChange);
+  const [stepMfa, setStepMfa] = useState(mfaRequired);
 
+  const tempStepPassword = requiresPasswordChange;
   const normalizeMfaCode = useCallback((value: string) => value.replace(/\D/g, '').slice(0, 6), []);
 
   useEffect(() => {
@@ -140,7 +144,8 @@ function FirstLoginForm({
       });
       setMfaSetupCode('');
       setMfaSetupData(null);
-      setStepPassword(true);
+      setStepPassword(tempStepPassword);
+      setStepMfa(false);
     } catch (enableError) {
       console.error('Failed to enable MFA:', enableError);
       setMfaError(
@@ -151,6 +156,12 @@ function FirstLoginForm({
       );
     } finally {
       setMfaLoading(false);
+      if (!stepPassword) {
+        // Wait a moment for the user to see the success message
+        setTimeout(() => {
+          onPasswordChanged();
+        }, 1500);
+      }
     }
   };
 
@@ -173,7 +184,7 @@ function FirstLoginForm({
           </Text>
 
           {/* MFA Setup Section */}
-          {mfaRequired && mfaSetupData && (
+          {stepMfa && (
             <Stack gap="sm">
               <Alert
                 icon={<LocalIcon icon="security" width="1rem" height="1rem" />}
@@ -322,6 +333,7 @@ export default function FirstLoginSlide({
   onPasswordChanged,
   usingDefaultCredentials = false,
   mfaRequired = false,
+  requiresPasswordChange = false,
 }: FirstLoginSlideProps): SlideConfig {
   return {
     key: 'first-login',
@@ -332,6 +344,7 @@ export default function FirstLoginSlide({
         onPasswordChanged={onPasswordChanged}
         usingDefaultCredentials={usingDefaultCredentials}
         mfaRequired={mfaRequired}
+        requiresPasswordChange={requiresPasswordChange}
       />
     ),
     background: {

frontend/src/proprietary/routes/AuthCallback.tsx

@@ -62,7 +62,7 @@ export default function AuthCallback() {
 
         try {
           const accountData = await accountService.getAccountData();
-          if (accountData.changeCredsFlag) {
+          if (accountData.changeCredsFlag || accountData.mfaRequired) {
             requestFirstLoginSlide();
             if (isOnboardingCompleted()) {
               markOnboardingIncomplete();

frontend/src/proprietary/routes/Login.tsx

@@ -310,7 +310,7 @@ export default function Login() {
         setMfaCode('');
         try {
           const accountData = await accountService.getAccountData();
-          if (accountData.changeCredsFlag) {
+          if (accountData.changeCredsFlag || accountData.mfaRequired) {
             requestFirstLoginSlide();
             if (isOnboardingCompleted()) {
               markOnboardingIncomplete();