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

machine.js

const s = {
  idle: "idle",
  loading: "loading",
  loggedIn: "loggedIn",
  error: "error"
};

// event types
const e = {
  login: "login",
  logout: "logout",
  success: "success",
  error: "error"
};

// private context
const initContext = {
  name: null,
  dogPerson: null,
  catPerson: null
};

const machine = Machine({
  id: "userMachine",
  initial: [s.idle],
  context: initContext,
  states: {
    [s.idle]: {
      on: {
        login: s.loading
      }
    },
    [s.loading]: {
      invoke: {
        id: "authUser",
        src: "authUser",
        onDone: {
          target: s.loggedIn,
          actions: assign({
            name: (_, e) => e.data.name,
            dogPerson: (_, e) => e.data.dogPerson,
            catPerson: (_, e) => e.data.catPerson
          })
        },
        onError: {
          target: e.error,
          actions: (_, e) => {
            // log
            console.log("error", e);
          }
        }
      },
      on: {
        [e.success]: s.loggedIn,
        [e.error]: s.error
      }
    },
    [s.loggedIn]: {
      on: {
        [e.logout]: s.idle
      }
    },
    [s.error]: {}
  }
});