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

machine.js

  const authMachine = Machine({
    id: 'auth',
    initial: 'idle',
    context: {
      error: null,
      isAuthorised: false,
      retries: 3,
    },
    states: {
      idle: {
        on: {
          SUBMITTED_USERNAME: {
            target: 'validatingUsername',
          },
        },
      },
      validatingUsername: {
        on: {
          RESOLVED_USERNAME: {
            target: 'presentCodeInput',
          },
          REJECTED_USERNAME: {
            target: 'idle',
            actions: assign({
              error: (context, event) => event.error,
            })
          }
        }
      },
      presentCodeInput: {
        on: {
          SUBMITTED_CODE:{
            target: 'validatingCode',
          },
        }
      },
      validatingCode: {
        on: {
          RESOLVED_CODE: {
            target: 'success',
            actions: assign({
              isAuthorised: true
            }),
          },
          REJECTED_CODE: [
            {
              target: 'presentCodeInput',
              cond: (context) => context.retries < 1,
              actions: assign({
                retries: (context, event) => context.retries - 1,
                error: (context, event) => event.error
              }),
            },
            {
              target: 'idle',
              actions: assign({
                retries: 3,
                error: (context, event) => event.error
              })
            },
          ],
        }
      },
      success: {
        type: 'final'
      },
    }
  });