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

machine.js

const auth = {
    initial: 'started',
    id: 'auth',
    states: {
        started: {
            initial: 'signingOut',
            states: {
                signingOut: {
                    invoke: {
                        src: 'doSignOut',
                        onDone: {
                            target: 'idle',
                            actions: assign({
                                viewer: {}
                            })
                        },
                        onError: {
                            target: 'failedSignout',
                            actions: assign({
                                error: (ctx, event) => event.data
                            })
                        }
                    }
                },
                idle: {},
                failedSignout: {},
            },
            on: {
                LOAD_LOGIN: 'login',
                LOAD_SIGNUP: 'signup'
            }
        },
        login: {
            initial: 'idle',
            on: {
                LOGIN: {
                    target: 'login.loading',
                },
                SET_EMAIL: {
                    actions: assign({
                        login: (context, event) => ({ ...context.login, email: event.email })
                    }),
                },
                SET_PASSWORD: {
                    actions: assign({
                        login: (context, event) => ({ ...context.login, password: event.password })
                    }),
                }
            },
            states: {
                idle: {},
                loading: {
                    invoke: {
                        src: 'doLogin',
                        onDone: {
                            target: '#auth.success',
                            actions: assign({
                                viewer: (context, event) => event.data?.login,
                                login: {
                                    email: '',
                                    password: '',
                                }
                            }),
                        },
                        onError: {
                            target: 'failure',
                            actions: assign({
                                error: (_context, event) => event.data,
                            }),
                        }
                    }
                },
                failure: {},
            }
        },
        signup: {
            initial: 'idle',
            states: {
                idle: {},
                loading: {
                    invoke: {
                        src: 'doSignup',
                        onDone: {
                            target: '#auth.success',
                            actions: assign({
                                viewer: (context, event) => event.data?.signup,
                                signup: {
                                    email: '',
                                    username: '',
                                    password: '',
                                    passwordConfirmation: ''
                                }
                            }),
                        },
                        onError: {
                            target: 'failure',
                            actions: assign({
                                error: (_context, event) => event.data,
                            }),
                        },
                    },
                },
                failure: {},
            },
            on: {
                SIGNUP: {
                    target: 'signup.loading'
                },
                SET_EMAIL: {
                    actions: assign({
                        signup: (context, event) => ({ ...context.signup, email: event.email })
                    }),
                },
                SET_PASSWORD: {
                    actions: assign({
                        signup: (context, event) => ({ ...context.signup, password: event.password })
                    }),
                },
                SET_PASSWORD_CONFIRMATION: {
                    actions: assign({
                        signup: (context, event) => ({ ...context.signup, passwordConfirmation: event.passwordConfirmation })
                    }),
                },
                SET_USERNAME: {
                    actions: assign({
                        signup: (context, event) => ({ ...context.signup, username: event.username })
                    }),
                }
            }
        },
        success: {
            always: '#app'
        },
    },
};

Machine(auth);