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

machine.js

const RETRY = 'retry';
const LOADING = 'loading';
const SUCCESS = 'success';
const FAILURE = 'failure';
const IDLE = 'idle';
const SIGNUP = 'signup';
const REGISTER = 'register';
const CONFIRM = 'confirm';
const LOGIN = 'login';
const RETRIEVE_USER = 'retrieve_user';
const LOGOUT = 'logout';

const TARGETS = {
  CONFIRM: `#authMachine.${SIGNUP}.${CONFIRM}.${LOADING}`,
  CONFIRMED: `#authMachine.${SIGNUP}.${CONFIRM}.${SUCCESS}`,
  FAILED_CONFIRMING: `#authMachine.${SIGNUP}.${CONFIRM}.${FAILURE}`,
  REGISTER: `#authMachine.${SIGNUP}.${REGISTER}.${LOADING}`,
  REGISTERED: `#authMachine.${SIGNUP}.${REGISTER}.${SUCCESS}`,
  FAILED_REGISTERING: `#authMachine.${SIGNUP}.${REGISTER}.${FAILURE}`,
  LOGIN: `#authMachine.${LOGIN}.${LOADING}`,
  LOGOUT: `#authMachine.${LOGIN}.${LOGOUT}`,
  IDLE: `#authMachine.${IDLE}`,
  RETRIEVE_USER: `#authMachine.${LOGIN}.${RETRIEVE_USER}`,
};

const EVENTS = {
  SIGNUP: 'signup',
  REGISTER: 'register',
  CONFIRM: 'confirm',
  LOGIN: 'login',
  LOGOUT: 'logout',
  RETRIEVE_USER: 'retrieve_user',
  RETRY_RETRIEVE_USER: 'retry_retrieve_user'
};

const createAuthMachine = ({ authService }) => Machine({
  id: 'authMachine',
  initial: authService.isLoggedIn() ? LOGIN : IDLE,
  context: {
    isLoggedIn: authService.isLoggedIn(),
    isRegistered: false,
    confirmationMessage: null,
    user: {},
    error: ''
  },
  states: {
    [IDLE]: {
      on: {
        [EVENTS.REGISTER]: { target: TARGETS.REGISTER },
      }
    },
    [SIGNUP]: {
      initial: REGISTER,
      states: {
        [REGISTER]: {
          initial: LOADING,
          states: {
            [LOADING]: {
              invoke: {
                id: 'registerService',
                src: (_, event) => authService.register(event),
                onDone: {
                  target: TARGETS.REGISTERED,
                  actions: assign({
                    isRegistered: (_, event) => {
                      return event.data;
                    }
                  })
                },
                onError: {
                  target: TARGETS.FAILED_REGISTERING,
                  actions: assign({
                    isRegistered: false,
                    error: (_, event) => {
                      return event.data.message;
                    }
                  })
                }
              }
            },
            [SUCCESS]: {
              on: {
                [EVENTS.CONFIRM]: { target: TARGETS.CONFIRM }
              }
            },
            [FAILURE]: {
              on: {
                [RETRY]: {
                  target: TARGETS.REGISTER,
                  actions: assign({
                    retries: (context, event) => context.retries + 1
                  })
                },
                [EVENTS.REGISTER]: { target: TARGETS.REGISTER }
              }
            }
          }
        },
        [CONFIRM]: {
          initial: LOADING,
          states: {
            [LOADING]: {
              invoke: {
                id: 'confirmService',
                src: (_, event) => authService.confirm(event),
                onDone: {
                  target: SUCCESS,
                  actions: assign({
                    confirmationMessage: (_, event) => {
                      return event.data;
                    }
                  })
                },
                onError: {
                  target: FAILURE,
                  actions: assign({
                    confirmationMessage: () => null,
                    error: (_, event) => {
                      return event.data.message;
                    }
                  })
                }
              }
            },
            [SUCCESS]: {
              on: {
                // [EVENTS.LOGIN]: { target: TARGETS.LOGIN }
              }
            },
            [FAILURE]: {
              on: {
                [RETRY]: { target: TARGETS.CONFIRM }
              }
            }

          }
        }
      }
    }
  }
});

const machine = createAuthMachine({
  authService: {
    register: (data) => {
      const error = Error('Error register');

      return new Promise((resolve, reject) => {
        setTimeout(() => reject(error), 1500);
      })
    },
    confirm: (data) => {
      const error = Error('Error confirming');

      return new Promise((resolve, reject) => {
        setTimeout(() => reject(error), 1500);
      })
    },
    login: () => {
      const data = true;
      // const error = Error('Error register');

      return new Promise((resolve, reject) => {
        setTimeout(() => resolve(data), 1500);
      })
    },
    retrieveUser: () => {
      const data = { name: 'Juan', email: 'palomo@juan' };
      // const error = Error('Error register');

      return new Promise((resolve, reject) => {
        setTimeout(() => resolve(data), 1500);
      })
    },
    isLoggedIn: () => {
      return false
    },
    logout() {
      return new Promise((resolve, reject) => {
        setTimeout(() => resolve(true))
      })
    }

  }
})