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

machine.js

const machine = Machine(
    {
        id: "auth",
        initial: "startup",
        context: {
            token: null,
            promise: null,
            expiresAt: 0,
        },
        states: {
            startup: {
                on: {
                    "": [
                        { target: "loggedIn", cond: "loggedIn" },
                        { target: "loggedOut", cond: "loggedOut" },
                    ],
                },
            },
            requesting: {
                invoke: {
                    id: "refreshToken",
                    src: "refreshToken",
                    onError: [
                        { target: "loggedIn", cond: "loggedIn" },
                        { target: "loggedOut", cond: "loggedOut" },
                    ],
                    onDone: {
                        actions: "tokenRefreshed",
                        target: "loggedIn",
                    },
                },
            },
            loggedIn: {
                entry: "startTimer",
                exit: "clearTimer",
                on: {
                    LOGOUT: "loggedOut",
                    TICK: [
                        { target: "requesting", cond: "expired" },
                        {
                            target: "loggedIn",
                            actions: actions.assign({
                                expiresAt: (context) => context.expiresAt -1
                            }),
                        },
                    ],
                },
            },
            loggedOut: {
                entry: "clearData",
                on: {
                    LOGIN: "requesting",
                },
            },
        },
    },
    {
        guards: {
            loggedIn: (context, _event) => context.token !== null && context.promise !== null,
            loggedOut: (context, _event) => context.token === null,
            requesting: (context, _event) => context.promise !== null,
            expired: (context, _event) => context.expiresAt <= 0,
        },
        actions: {
            // saveToken: (context, event) => {
            //     context.token = event.data;
            //     context.expiresAt = "10";
            // },
            // savePromise: (context, event) => (context.promise = event.data),
            startTimer: () =>
                send("TICK", {
                    delay: 1000,
                    id: "mainTimer",
                }),
            clearTimer: () => actions.cancel("mainTimer"),
            clearData: () =>
                actions.assign({
                    token: null,
                    promise: null,
                }),
            tokenRefreshed: () =>
                actions.assign({
                    expiresAt: 10,
                    token: (c, e) => e.data,
                }),
        },
        services: {
            refreshToken: (_context, _event) =>
                new Promise((res, _rej) => {
                    setTimeout(() => res("test-token"), 10000);
                }),
        },
    },
);