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

machine.js

Machine(
  {
    id: "authentication",
    initial: "loggedOut",
    context: {
      email: "",
      password: ""
    },
    states: {
      loggedOut: {
        initial: "noErrors",
        on: {
          SIGN_UP: [
            // check if everything is valid
            {
              target: ".invalidEmail",
              cond: "checkEmail"
            },
            {
              target: ".invalidPassword",
              cond: "checkPassword"
            },
            // if all worked out, go ahead and authenticate
            {
              target: "authenticating",
              actions: "saveData"
            }
          ]
        },
        states: {
          noErrors: {},
          invalidEmail: {},
          invalidPassword: {},
          authFailed: {}
        }
      },
      authenticating: {
        invoke: {
          id: "authenticateUser",
          src: "authenticateUser",
          onDone: {
            target: "loggedIn",
            actions: "clearSignUp"
          },
          onError: {
            target: "loggedOut.authFailed"
          }
        }
      },
      loggedIn: {
        on: {
          LOGOUT: "loggedOut"
        }
      }
    }
  },
  {
    actions: {
      clearSignUp: assign({
        email: "",
        password: ""
      }),
      saveData: assign({
        email: (_, e) => e.email,
        password: (_, e) => e.password
      })
    },
    guards: {
      checkEmail: (_, e) => !emailReg.test(e.email),
      checkPassword: (_, e) => !passwordReg.test(e.password)
    },
    services: {
      authenticateUser: ctx => {
        const { email, password } = ctx;
        return mockAuthenticate(email, password);
      }
    }
  }
)