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

machine.js

const loginMachine = Machine({
    id: 'loginMachine',
    context: {
        tag: '',
        token: ''
    },
    initial: 'tagEntry',
    states: {
        tagEntry: {
            on: {
                ENTER_TAG: {
                    actions: 'cacheTag'
                },
                SUBMIT: [
                    {
                        cond: 'isBadTagFormat',
                        target: 'tagError.badFormat'
                    },
                    {
                        target: 'awaitingResponseTag'
                    }
                ]
            }
        },
        awaitingResponseTag: {
            invoke: {
                src: 'requestSignInTag',
                onDone: {
                    target: 'tokenEntry'
                },
                onError: [
                    {
                        cond: 'isTagNotFound',
                        target: 'tagError.notFound'
                    },
                    {
                        cond: 'isServiceError',
                        target: 'serviceError'
                    }
                ]
            }
        },
        tagError: {
            on: {
                ENTER_TAG: {
                    actions: 'cacheTag',
                    target: 'tagEntry'
                }
            },
            initial: 'badFormat',
            states: {
                badFormat: {},
                notFound: {}
            }
        },
        tokenEntry: {
            on: {
                ENTER_TOKEN: {
                    actions: 'cacheToken'
                },
                SUBMIT: [
                    {
                        cond: 'isBadTokenFormat',
                        target: 'tokenError.badFormat'
                    },
                    {
                        target: 'awaitingResponseToken'
                    }
                ]
            }
        },
        awaitingResponseToken: {
            invoke: {
                src: 'requestSignInToken',
                onDone: {
                    target: 'loggedIn'
                },
                onError: [
                    {
                        cond: 'isTokenIncorrect',
                        target: 'tokenError.incorrect'
                    },
                    {
                        cond: 'isServiceError',
                        target: 'serviceError'
                    }
                ]
            }
        },
        tokenError: {
            on: {
                ENTER_TOKEN: {
                    actions: 'cacheToken',
                    target: 'tokenEntry'
                }
            },
            initial: 'badFormat',
            states: {
                badFormat: {},
                incorrect: {}
            }
        },
        serviceError: {
            on: {
                SUBMIT: {
                    target: 'tagEntry'
                }
            }
        },
        loggedIn: {
            type: 'final'
        },
        onDone: {
            actions: 'onAuthentication'
        }
    }
})