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

machine.js

const machine = Machine({
  id: "authentication",
  initial: "signIn",
  context: {
    name: "",
    email: "",
    password: "",
    errors: {}
  },
  states: {
    signIn: {
      initial: "editing",
      states: {
        editing: {
          on: {
            EMAIL_CHANGE: {
              actions: assign({ email: (_, event) => event.value })
            },
            PASSWORD_CHANGE: {
              actions: assign({ password: (_, event) => event.value })
            },
            SUBMIT: "validating",
            FORGOT_PASSWORD: {
              target: "#authentication.forgotPassword",
              actions: assign({
                password: (_, __) => "",
                errors: (_, __) => ({})
              })
            },
            SIGN_UP: {
              target: "#authentication.signUp",
              actions: assign({
                password: (_, __) => "",
                errors: (_, __) => ({})
              })
            }
          }
        },
        validating: {
          invoke: {
            src: 'signInValidation',
            onDone: "waiting",
            onError: {
              target: "editing",
              actions: assign({
                errors: (_, event) => event.data,
                password: (_, __) => ""
              })
            }
          }
        },
        waiting: {
          invoke: {
            src: 'signIn',
            onDone: "#authentication.app",
            onError: {
              target: "editing",
              actions: assign({
                errors: (_, event) => event.data,
                password: (_, __) => ""
              })
            }
          }
        }
      }
    },
    forgotPassword: {
      initial: "editing",
      states: {
        editing: {
          on: {
            EMAIL_CHANGE: {
              actions: assign({ email: (_, event) => event.value })
            },
            BACK: {
              target: "#authentication.signIn",
              actions: assign({ errors: (_, __) => ({}) })
            },
            SUBMIT: "validating"
          }
        },
        validating: {
          invoke: {
            src: 'forgotPasswordValidation',
            onDone: "waiting",
            onError: {
              target: "editing",
              actions: assign({ errors: (_, event) => event.data })
            }
          }
        },
        waiting: {
          invoke: {
            src: 'forgotPassword',
            onDone: "#authentication.success",
            onError: {
              target: "editing",
              actions: assign({ errors: (_, event) => event.data })
            }
          }
        }
      }
    },
    signUp: {
      initial: "editing",
      states: {
        editing: {
          on: {
            EMAIL_CHANGE: {
              actions: assign({ email: (_, event) => event.value })
            },
            PASSWORD_CHANGE: {
              actions: assign({ password: (_, event) => event.value })
            },
            NAME_CHANGE: {
              actions: assign({ name: (_, event) => event.value })
            },
            BACK: {
              target: "#authentication.signIn",
              actions: assign({
                password: (_, __) => "",
                errors: (_, __) => ({})
              })
            },
            SUBMIT: "validating"
          }
        },
        validating: {
          invoke: {
            src: 'signUpValidation',
            onDone: "waiting",
            onError: {
              target: "editing",
              actions: assign({ errors: (_, event) => event.data })
            }
          }
        },
        waiting: {
          invoke: {
            src: 'signUp',
            onDone: "#authentication.success",
            onError: {
              target: "editing",
              actions: assign({
                errors: (_, event) => event.data,
                password: (_, __) => ""
              })
            }
          }
        }
      }
    },
    success: { on: { BACK: "signIn" } },
    app: { type: "final" }
  }
});