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: "auth",
    initial: "loggedout",
    context: {
      retries: 0,
      timeout: 5000,
    },
    states: {
      loggedout: {
        entry: (context, event) => console.log("loggedout entry", context),
        on: {
          AUTHENTICATE: "authenticating",
        },
      },
      authenticating: {
        entry: (context, event) => console.log("authenticating entry", context),
        invoke: [{ src: "TIMER" }, { src: "SEND_AUTH" }],
        on: {
          AUTH_SUCCESS: "loggedin",
          AUTH_FAIL: "loggedout",
          TIME_OUT: "loggedout",
        },
      },
      loggedin: {
        type: "final",
      },
    },
  },
  {
    actions: {
      // action implementations
      AUTHENTICATE: (context, event) => {
        console.log("calling auth...");
      },
      AUTH_SUCCESS: (context, event) => {
        console.log("recieved success response");
      },
      AUTH_FAIL: (context, event) => {
        console.log("receoved fail response");
      },
    },
    services: {
      SEND_AUTH: (context, event) => {
        console.log("sendging auth", context, event);
      },
      TIMER: (context, activity) => (callback, onReceive) => {
        console.log("timer started");
        const id = setTimeout(() => {
          console.log("timeout");

          callback({ type: "TIME_OUT" });
        }, context.timeout);

        return () => {
          console.log("clear timer");
          clearTimeout(id);
        };
      },
    },
  }
);