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 requestDuration = 1000;
const postLogin = () =>
  new Promise((resolve, reject) =>
    setTimeout(() => reject(401), requestDuration),
  );
const validateOTP = () =>
  new Promise((resolve, reject) =>
    setTimeout(() => resolve(202), requestDuration),
  );
const validateBackupCode = () =>
  new Promise((resolve, reject) =>
    setTimeout(() => resolve(202), requestDuration),
  );
const machine = Machine(
  {
    id: '2fa',
    initial: 'idle',
    states: {
      idle: {
        on: {
          LOGIN: 'loginAttempt',
        },
      },
      loginAttempt: {
        initial: 'loading',
        states: {
          loading: {
            invoke: {
              id: 'postLogin',
              src: postLogin,
              onDone: [
                { target: '#2fa.redirect', cond: 'redirect' },
                { target: '#2fa.redirectToUserStartPage', cond: 'isSuccess' },
                { target: '#2fa.otpRequired', cond: 'isIncomplete' },
              ],
              onError: [
                { target: 'errorInvalid', cond: 'isInvalid' },
                { target: 'errorOther' },
              ],
            },
          },
          errorInvalid: {},
          errorOther: {},
        },
      },
      otpRequired: {
        on: {
          SUBMIT_OTP: 'validateOTP',
          SUBMIT_BACKUP_CODE: 'validateBackupCode',
        },
      },
      validateOTP: {
        initial: 'loading',
        states: {
          loading: {
            invoke: {
              id: 'validateOTP',
              src: validateOTP,
              onDone: [
                { target: '#2fa.redirect', cond: 'redirect' },
                { target: '#2fa.redirectToUserStartPage', cond: 'isSuccess' },
              ],
              onError: [
                { target: 'errorInvalid', cond: 'isInvalid' },
                { target: 'errorOTPTimeout', cond: 'isOTPTimeout' },
                { target: 'errorOther' },
              ],
            },
          },
          errorOTPTimeout: {},
          errorInvalid: {},
          errorOther: {},
        },
      },
      validateBackupCode: {
        initial: 'loading',
        states: {
          loading: {
            invoke: {
              id: 'validateBackupCode',
              src: validateBackupCode,
              onDone: [
                { target: '#2fa.redirect', cond: 'redirect' },
                { target: '#2fa.redirectToUserStartPage', cond: 'isSuccess' },
              ],
              onError: [
                { target: 'errorInvalid', cond: 'isInvalid' },
                { target: 'errorOTPTimeout', cond: 'isOTPTimeout' },
                { target: 'errorOther' },
              ],
            },
          },
          errorOTPTimeout: {},
          errorInvalid: {},
          errorOther: {},
        },
      },
      redirect: {},
      redirectToUserStartPage: {},
    },
  },
  {
    guards: {
      redirect: (_, e) => e.data === 'redirect',
      isSuccess: (_, e) => e.data === 200,
      isIncomplete: (_, e) => e.data === 202,
      isInvalid: (_, e) => e.data === 401,
      isOTPTimeout: (_, e) => e.data === 403,
    },
  },
);