Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  const loginAllowed = (context, event) => {
    return (context.username && context.password);
  }
  
  const mfaLoginAllowed = (context, event) => {
    return loginAllowed(context, event) && context.mfaCode;
  }
  

  const fetchMachine = Machine({
    id: 'fetch',
    initial: 'loggedOut',
    context: {
      username: '',
      password: '',
      mfaCode:'',
    },
    states: {
      loggedOut:{
        on: {
          LOGIN: {
            target: 'submitCredentials',
            cond: loginAllowed,
          },
          USE_MFA_CODE: 'getMfaCode',
          PROVIDE_USER: 'provideUsername',
          PROVDE_PASSWORD: 'providePassword',
        }
      },
      provideUsername: {
        on: {
          TYPE_USER: {
            actions: assign({
            username: (ctx, evt) => {
              console.log({evt})
              return evt.username}
            }),
            target: 'loggedOut'
          }
        }
        
      },
      providePassword: {
        on: {
          TYPE_PASSWORD: {
            actions: assign({password: 'password'}),
            target: 'loggedOut'
          }
        }
      },
      
      submitCredentials: {
        on: {
          LOGIN_SUCCESS: 'loggedIn',
          LOGIN_FAILURE: 'loggedOut',
          LOGIN_MFA_REQUIRED: 'getMfaCode',
        },
        invoke: {
          src: "submitUserAndPassword"
        }
      },
      getMfaCode: {
        on: {
          NO_MFA_CODE: 'loggedOut',
          SUBMIT_MFA_AND_CREDENTIALS: {
            target: 'validateMfa',
            cond: mfaLoginAllowed
          },
          TYPE_MFA_CODE: 'provideMfaCode',
        }
      },
      provideMfaCode: {
        on: {
          TYPE_MFA_CODE: {
            actions: assign((evt, ctx) => {mfaCode: evt.mfaCode}),
            target: 'getMfaCode'
          }
        }
      },
      validateMfa: {
        on: {
          MFA_SUCCESS: 'loggedIn',
          MFA_FAILURE: {
            target: 'getMfaCode',
            actions: assign({mfaCode: ''}),
          }
        },
        invoke: {
          src: "submitUserPassandCode"
        }
      },
      loggedIn: {
        on: {
          LOGOUT: 'loggedOut'
        }
      }
    },
  });