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

machine.js

const Auth = {
  signIn: () => Promise.resolve(({ challangeName: "test"}))
}
const formMachine = {
  initial: "idle",
  states: {
    idle: {
      on: {
        SUBMIT: "loading",
      },
    },
    changePassword: {},
    loading: {
      on: {
        "": [
          {
            target: "changePassword",
            cond: (a) => { 
              console.log(a)
              return a.challengeName === "NEW_PASSWORD_REQUIRED"
            }
          },
        ],
      },
      invoke: {
        id: "form-submit",
        src: (context, event) => {
          console.log(event);
          return {test: 1}
        },
        onDone: {
          actions: assign({
            challengeName: (context, event) => {
              console.log(event)
              return event.data.challengeName;
            },
          }),
        },
        onError: {
          target: "failure",
          actions: assign({
            error: (context, event) => {
              console.log(event.data.code);
              return event.data.code;
            },
          }),
        },
      },
    },
    submitted: {
      type: "final",
    },
    failure: {
      on: {
        RETRY: "loading",
      },
    },
  },
};


Machine({
  id: "doctor-screen-machine",
  initial: "form",
  context: {
    auth: {},
    challengeName: null,
  },
  states: {
    loading: {},
    form: formMachine,
    newPassword: {
      on: { SEND_NEW_PASSWORD: "success" },
    },
    success: {
      on: { DASHBOARD: "" },
    },
  },
  on: {
    LOGIN: {
      target: ".loading",
      actions: assign((context, event) => {
        let { auth } = context;

        if (auth) {
          return {
            ...context,
          };
        }

        auth = spawn(authMachine);

        return {
          ...context,
          auth,
        };
      }),
    },
  },
});