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

machine.js

const userMachine = Machine({
  id: 'user',
  initial: 'active',
  states: {
    active: {
      after: {
        60000: 'finished'
      }
    },
    finished: { type: 'final' }
  }
});

const authMachine = Machine({
  id: 'auth',
  initial: 'loginModal',
  context: {
    email: '',
    password: ''
  },
  states: {
    loginModal: {
      on: {
        ENTER_EMAIL: { actions: 'cacheEmail' },
        ENTER_PASSWORD: { actions: 'cacheEmail' },
        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: 'authPending' }
        ],
        CREATE: [
          { cond: 'isBadEmailFormat', target: 'emailErr.badFormat' },
          { cond: 'isPasswordShort', target: 'passwordErr.tooShort' },
          { target: 'authPending' }
        ],
        GOOGLE_AUTH: { target: 'authPending' }
      }
    },
    emailErr: {
      on: {
        ENTER_EMAIL: {
          actions: 'cacheEmail',
          target: 'loginModal'
        },
      },
      initial: 'badFormat',
      states: {
        badFormat: {},
        noAccount: {},
      }
    },
    passwordErr: {
      on: {
        ENTER_PASSWORD: {
          actions: 'cacheEmail',
          target: 'loginModal'
        }
      },
      initial: 'tooShort',
      states: {
        tooShort: {},
        incorrect: {},
      },
    },
    authError: {
      on: {
        SUBMIT: [
          { cond: 'isNoAccount', target: 'emailErr.noAccount' },
          { cond: 'isIncorrect', target: 'passwordErr.incorrect' },
          { target: 'authPending' }
        ]
      }
    },
    authPending: {
      invoke: { // this will be an observable from firebase
        src: 'requestSignIn',
        onDone: { target: 'authorized' },
        onError: [
          { cond: 'isNoAccount', target: 'emailErr.noAccount' },
          { cond: 'isIncorrectPassword', target: 'passwordErr.incorrect' },
          { cond: 'isAuthErr', target: 'authError' }
        ]
      },
    },
    authorized: {
      actions: assign({
        userRef: () => spawn(userMachine)
      }),
      on: {
        LOG_OUT: {
          target: 'loginModal'
        }
      }
    }
  }
},
  {
    guards: {
      isBadEmailFormat: (context, event) => {
        return false;
      },
      isPasswordShort: (context, event) => {
        return false;
      },
      isNoAccount: (context, event) => {
        return false;
      },
      isIncorrectPassword: (context, event) => {
        return false;
      },
      isAuthErr: (context, event) => {
        return false;
      }
    }
  }
);