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 authMachine = Machine({
  id: 'signIn',
  context: {
    email: '',
    password: ''
  },
  initial: 'dataEntry',
  states: {
    dataEntry: {
      on: {
        ENTER_EMAIL: {
          actions: 'cacheEmail'
        },
        ENTER_PASSWORD: {
          actions: 'cachePassword'
        },
        EMAIL_BLUR: {
          cond: 'isBadEmailFormat',
          target: 'emailErr.badFormat'
        },
        PASSWORD_BLUR: {
          cond: 'isPasswordShort',
          target: 'passwordErr.tooShort'
        },
        SUBMIT: [
          {
            cond: 'isBadEmailFormat',
            target: 'emailErr.badFormat'
          },
          {
            cond: 'isPasswordShort',
            target: 'passwordErr.tooShort'
          },
          {
            target: 'awaitingResponse'
          }
        ]
      }
    },
    awaitingResponse: {
      invoke: {
        src: 'requestSignIn',
        onDone: {
          target: 'signedIn'
        },
        onError: [
          {
            cond: 'isNoAccount',
            target: 'emailErr.noAccount'
          },
          {
            cond: 'isIncorrectPassword',
            target: 'passwordErr.incorrect'
          },
          {
            cond: 'isServiceErr',
            target: 'serviceErr'
          }
        ]
      }
    },
    emailErr: {
      on: {
        ENTER_EMAIL: {
          actions: 'cacheEmail',
          target: 'dataEntry'
        }
      },
      // be more precise about errors
      initial: 'badFormat',
      states: {
        badFormat: {},
        noAccount: {}
      }
    },
    passwordErr: {
      on: {
        ENTER_PASSWORD: {
          actions: 'cachePassword',
          target: 'dataEntry'
        }
      },
      // be more precise about errors
      initial: 'tooShort',
      states: {
        tooShort: {},
        incorrect: {}
      }
    },
    serviceErr: {
      on: {
        SUBMIT: {
          target: 'awaitingResponse'
        }
      }
    },
    signedIn: {
      type: 'final'
    },
    onDone: {
      actions: 'onAuthentication'
    }
  }
})