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

machine.js

 const machine = Machine(
  {
    id: 'auth',
    initial: 'loading',
    context: null,
    states: {
      loading: {
        id: 'loading',
        initial: 'start',
        states: {
          start: {
            invoke: {
              src: 'retrieveTokenFromStorage',
              onDone: {
                target: 'validation',
              },
              onError: {
                target: '#loggedOut',
              },
            },
          },
          validation: {
            invoke: {
              src: 'validateToken',
              onDone: {
                target: '#loggedIn',
                actions: ['assignClaims', 'assignToken'],
              },
              onError: {
                target: '#failure',
                actions: ['clearToken', 'clearClaims', 'assignError'],
              },
            },
          },
        },
      },
      loggedOut: {
        id: 'loggedOut',
        on: {
          LOGIN: {
            target: '#loading.validation',
          },
        },
      },
      failure: {
        id: 'failure',
        exit: 'clearError',
        on: {
          LOGIN: {
            target: '#loading.validation',
          },
        },
      },
      loggedIn: {
        id: 'loggedIn',
        on: {
          LOGOUT: {
            target: '#loggedOut',
            actions: 'clearToken',
          },
        },
        initial: 'idle',
        states: {
          idle: {
            on: {
              REFRESH: {
                target: 'refreshing',
              },
            },
            entry: 'sendRefresh',
          },
          refreshing: {
            invoke: {
              src: 'refreshToken',
              onDone: {
                target: 'validation',
                actions: 'clearError',
              },
              onError: {
                target: '#loggedOut',
                actions: ['clearToken', 'assignError'],
              },
            },
          },
          validation: {
            invoke: {
              src: 'validateToken',
              onDone: {
                target: 'idle',
                actions: ['assignToken', 'assignClaims', 'clearError'],
              },
              onError: {
                target: '#failure',
                actions: ['clearToken', 'clearClaims', 'assignError'],
              },
            },
          },
        },
      },
    },
  }
)