@clicktap/state 0.1.3 → 0.8.0

package/index.esm.js

@@ -0,0 +1,990 @@
+import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { setup, assign, fromPromise, createActor, fromCallback, sendTo } from 'xstate';
+import axios from 'axios';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect, cloneElement } from 'react';
+import crypto from 'crypto';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function request(url, options) {
+  return __awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var response;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return fetch(url, options);
+          case 2:
+            response = _context.sent;
+            if (!(response.status === 200)) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return", response.json());
+          case 5:
+            return _context.abrupt("return", Promise.resolve({
+              message: response.statusText,
+              success: false
+            }));
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+}
+/**
+ * still need a factory pattern to pass context and state
+ * until xstate supports both
+ */
+// export const authMachine = (
+//   initialContext: Partial<AuthMachineContext> = {},
+//   initialState = 'refreshing'
+// ) => {
+var authMachine = setup({
+  types: {
+    context: {},
+    events: {},
+    input: {}
+  },
+  actions: {
+    setUserContext: assign(function (_ref) {
+      var context = _ref.context,
+        event = _ref.event;
+      if (!event.type.includes('xstate.done.actor')) return context;
+      var e = event;
+      if (e.output.type !== 'AUTHENTICATE_SUCCESS') return context;
+      return {
+        accessToken: e.output.accessToken,
+        ignoreRefreshToken: false
+      };
+    }),
+    unsetUserContext: assign(function () {
+      return {
+        user: null,
+        accessToken: '',
+        refreshToken: '',
+        ignoreRefreshToken: false
+      };
+    }),
+    setAccessToken: assign(function (_ref2) {
+      var context = _ref2.context,
+        event = _ref2.event;
+      if (!event.type.includes('xstate.done.actor')) return context;
+      var e = event;
+      if (e.output.type !== 'REFRESH_TOKEN_SUCCESS') return context;
+      return {
+        accessToken: e.output.accessToken,
+        ignoreRefreshToken: false
+      };
+    }),
+    unsetRefreshToken: assign(function () {
+      // there shouldn't be a problem with not checking event here
+      // since we can only hit this action from the refresh actor
+      // onDone or onError
+      return {
+        refreshToken: ''
+      };
+    }),
+    setIgnoreRefreshToken: assign(function () {
+      return {
+        ignoreRefreshToken: true
+      };
+    }),
+    addError: assign(function (_ref3) {
+      var context = _ref3.context,
+        event = _ref3.event;
+      if (!event.type.includes('xstate.error.actor')) return context;
+      var e = event;
+      return {
+        errors: [].concat(_toConsumableArray(context.errors), [String(e.error).replace('Error: ', '')])
+      };
+    }),
+    clearErrors: assign(function () {
+      return {
+        errors: []
+      };
+    })
+    // onLogin: ({ event, self }) => {
+    //   console.log('onLogin', event, self);
+    //   return raise({ type: 'AFTER_LOGGED_IN' });
+    //   if (!event.type.includes('xstate.done.actor')) return;
+    //   const e = event as DoneActorEvent<AuthenticateSuccessEvent>;
+    //   if (
+    //     e.output.type !== 'AUTHENTICATE_SUCCESS' ||
+    //     self.getSnapshot().value !== 'loggedIn'
+    //   )
+    //     return;
+    //   // eslint-disable-next-line consistent-return
+    //   return raise({ type: 'AFTER_LOGGED_IN' });
+    //   // if (!params) return context;
+    //   // if (!('callback' in params) || typeof params.callback !== 'function')
+    //   //   return context;
+    //   // params.callback();
+    //   // return context;
+    // },
+  },
+
+  actors: {
+    refreshAccessToken: fromPromise(function (_ref4) {
+      var input = _ref4.input;
+      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var response, res, data, _data;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!(typeof window === 'undefined')) {
+                  _context2.next = 18;
+                  break;
+                }
+                if (!(input.context.refreshToken === '')) {
+                  _context2.next = 3;
+                  break;
+                }
+                throw new Error('Unauthorized.');
+              case 3:
+                _context2.prev = 3;
+                _context2.next = 6;
+                return axios.post(input.context.endpoints.ssrRefresh, {
+                  grant_type: 'refresh_token'
+                }, {
+                  headers: {
+                    Cookie: "refresh_token=".concat(input.context.refreshToken),
+                    'Content-Type': 'application/json'
+                  },
+                  withCredentials: true
+                });
+              case 6:
+                res = _context2.sent;
+                data = res.data;
+                if (!(typeof data.accessToken === 'undefined')) {
+                  _context2.next = 10;
+                  break;
+                }
+                throw new Error('Unauthorized.');
+              case 10:
+                return _context2.abrupt("return", {
+                  type: 'REFRESH_TOKEN_SUCCESS',
+                  accessToken: data.accessToken
+                });
+              case 13:
+                _context2.prev = 13;
+                _context2.t0 = _context2["catch"](3);
+                throw new Error('Could not complete refresh request (server)');
+              case 16:
+                _context2.next = 25;
+                break;
+              case 18:
+                _context2.next = 20;
+                return request(input.context.endpoints.refresh, {
+                  method: 'POST',
+                  mode: 'cors',
+                  credentials: 'include',
+                  headers: {
+                    'Content-Type': 'application/json'
+                  },
+                  body: JSON.stringify({
+                    grant_type: 'refresh_token'
+                    // client_id: 'default',
+                    // client_secret: 'Password123!',
+                    // scope: 'default',
+                  }).toString()
+                });
+              case 20:
+                response = _context2.sent;
+                _data = response;
+                if (!(typeof _data.accessToken === 'undefined')) {
+                  _context2.next = 24;
+                  break;
+                }
+                throw new Error('Unauthorized.');
+              case 24:
+                return _context2.abrupt("return", {
+                  type: 'REFRESH_TOKEN_SUCCESS',
+                  accessToken: _data.accessToken
+                });
+              case 25:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, null, [[3, 13]]);
+      }));
+    }),
+    authenticate: fromPromise(function (_ref5) {
+      var input = _ref5.input;
+      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        var _a, _b, response, data;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return request(input.context.endpoints.login, {
+                  method: 'POST',
+                  mode: 'cors',
+                  credentials: 'include',
+                  headers: {
+                    'Content-Type': 'application/json'
+                  },
+                  body: JSON.stringify({
+                    username: input.username,
+                    password: input.password
+                  }).toString()
+                });
+              case 2:
+                response = _context3.sent;
+                /** @todo do we need to handle different status codes here...like what if the service is down? */
+                data = response;
+                if (data.success) {
+                  _context3.next = 6;
+                  break;
+                }
+                throw new Error((_b = (_a = data.message) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : 'Sign in failed. Please try again.');
+              case 6:
+                return _context3.abrupt("return", {
+                  type: 'AUTHENTICATE_SUCCESS',
+                  // user: data.user,
+                  accessToken: data.accessToken
+                });
+              case 7:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      }));
+    }),
+    unauthenticate: fromPromise(function (_ref6) {
+      var input = _ref6.input;
+      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                _context4.next = 2;
+                return fetch(input.context.endpoints.logout, {
+                  method: 'POST',
+                  mode: 'cors',
+                  credentials: 'include'
+                  // headers: {
+                  //   'Access-Control-Allow-Origin': 'https://middleware-clicktap.local-rmgmedia.com',
+                  //   'Access-Control-Allow-Credentials': 'true',
+                  // },
+                });
+              case 2:
+                return _context4.abrupt("return", {
+                  type: 'UNAUTHENTICATE'
+                });
+              case 3:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+    })
+  }
+}).createMachine({
+  id: 'auth',
+  context: function context(_ref7) {
+    var input = _ref7.input;
+    var _a, _b, _c, _d;
+    return {
+      user: null,
+      accessToken: '',
+      refreshToken: (_b = (_a = input === null || input === void 0 ? void 0 : input.initialContext) === null || _a === void 0 ? void 0 : _a.refreshToken) !== null && _b !== void 0 ? _b : '',
+      /**
+       * If unauthenticating fails, we need a way to ignore the refresh token on subsequent access token refresh.
+       * This would be set to true done/error of unauthenticate service, and false on done of authenticate service
+       */
+      ignoreRefreshToken: false,
+      endpoints: (_d = (_c = input === null || input === void 0 ? void 0 : input.initialContext) === null || _c === void 0 ? void 0 : _c.endpoints) !== null && _d !== void 0 ? _d : {
+        login: '',
+        logout: '',
+        refresh: '',
+        ssrRefresh: ''
+      },
+      errors: []
+    };
+  },
+  initial: 'refreshing',
+  states: {
+    authenticating: {
+      invoke: {
+        src: 'authenticate',
+        input: function input(_ref8) {
+          var context = _ref8.context,
+            event = _ref8.event;
+          if (event.type !== 'LOGIN') {
+            /** @todo how to use error handling here? */
+            return {
+              context: context,
+              username: '',
+              password: ''
+            };
+          }
+          return {
+            context: context,
+            username: event.username,
+            password: event.password
+          };
+        },
+        onDone: [{
+          actions: 'setUserContext',
+          target: 'loggedIn'
+        }],
+        onError: [{
+          actions: 'addError',
+          target: 'loggedOut'
+        }]
+      }
+    },
+    unauthenticating: {
+      invoke: {
+        src: 'unauthenticate',
+        input: function input(_ref9) {
+          var context = _ref9.context;
+          return {
+            context: context
+          };
+        },
+        onDone: [{
+          actions: 'unsetUserContext',
+          target: 'loggedOut'
+        }],
+        onError: [{
+          actions: ['unsetUserContext', 'setIgnoreRefreshToken'],
+          target: 'loggedOut'
+        }]
+      }
+    },
+    refreshing: {
+      invoke: {
+        src: 'refreshAccessToken',
+        input: function input(_ref10) {
+          var context = _ref10.context;
+          return {
+            context: context
+          };
+        },
+        onDone: [{
+          actions: ['unsetRefreshToken', 'setAccessToken'],
+          target: 'loggedIn'
+        }],
+        onError: [{
+          actions: 'unsetRefreshToken',
+          target: 'unauthenticating'
+        }]
+      }
+    },
+    loggedOut: {
+      on: {
+        LOGIN: {
+          target: 'authenticating'
+        },
+        CLEAR_ERRORS: {
+          actions: 'clearErrors'
+        }
+      }
+    },
+    loggedIn: {
+      after: {
+        // 14min (840000ms), jwt access token expires in 15min
+        840000: {
+          guard: function guard() {
+            return typeof window !== 'undefined';
+          },
+          target: 'refreshing'
+        }
+      },
+      on: {
+        LOGOUT: {
+          target: 'unauthenticating'
+        },
+        CLEAR_ERRORS: {
+          actions: 'clearErrors'
+        }
+        // AFTER_LOGGED_IN: {
+        //   target: 'afterLoggedIn',
+        // },
+      }
+    }
+    // onLogin: {
+    //   always: {
+    //     target: 'loggedIn',
+    //   },
+    // },
+    // afterLoggedOut: {
+    //   always: {
+    //     target: 'loggedOut',
+    //   },
+    // },
+  }
+});
+
+var AuthContext = /*#__PURE__*/createContext({});
+var useAuth = function useAuth() {
+  var actor = useContext(AuthContext);
+  var _useState = useState(actor.getSnapshot().value === 'loggedIn'),
+    isLoggedIn = _useState[0],
+    setILoggedIn = _useState[1];
+  useEffect(function () {
+    var subscription = actor.subscribe(function (observer) {
+      if (observer.value === 'loggedIn' || observer.value === 'loggedOut') {
+        setILoggedIn(observer.value === 'loggedIn');
+      }
+    });
+    return function () {
+      subscription.unsubscribe();
+    };
+  }, [actor]);
+  return {
+    authActor: actor,
+    isLoggedIn: isLoggedIn
+  };
+};
+var useUser = function useUser() {
+  return useContext(AuthContext).getSnapshot().context.user;
+};
+/**
+ * runs on server side as part of withAuth HOF
+ *
+ * @todo should probably update signature to pass Partial<AuthContext> and
+ * Options, endpoints should probably be moved into context
+ */
+var getAuth = function getAuth() {
+  var refreshToken = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var options
+  // eslint-disable-next-line @typescript-eslint/require-await
+  = arguments.length > 1 ? arguments[1] : undefined;
+  return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (!(typeof window !== 'undefined')) {
+              _context.next = 3;
+              break;
+            }
+            // eslint-disable-next-line no-console
+            console.warn('App.getInitialProps::getAuth should not be run on the frontend. You are probably missing getServerSideProps in your page.');
+            return _context.abrupt("return", createActor(authMachine, {
+              inspect: options.inspect
+            }).start());
+          case 3:
+            return _context.abrupt("return", createActor(authMachine, {
+              input: {
+                initialContext: {
+                  endpoints: options.endpoints,
+                  refreshToken: refreshToken
+                }
+              },
+              inspect: options.inspect
+            }).start());
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+};
+function AuthProvider(_ref) {
+  var actor = _ref.actor,
+    children = _ref.children;
+  return jsx(AuthContext.Provider, {
+    value: actor,
+    children: children
+  });
+}
+
+var timerMachine = setup({
+  types: {
+    context: {},
+    events: {},
+    input: {}
+  }
+}).createMachine({
+  id: 'timer',
+  initial: 'running',
+  context: function context(_ref) {
+    var input = _ref.input;
+    var _a;
+    return {
+      elapsed: 0,
+      duration: (_a = input.initialContext.duration) !== null && _a !== void 0 ? _a : 3000,
+      interval: 100,
+      intervalId: null
+    };
+  },
+  states: {
+    paused: {
+      on: {
+        // START_TIMER: {
+        //   target: 'running',
+        //   cond: (context) => context.elapsed < context.duration,
+        // },
+        RESUME_TIMER: {
+          target: 'running',
+          guard: function guard(_ref2) {
+            var context = _ref2.context;
+            return context.elapsed < context.duration;
+          }
+        }
+      }
+    },
+    running: {
+      // invoke: {
+      //   src:
+      //     ({ context }) =>
+      //     (send) => {
+      //       // eslint-disable-next-line no-console
+      //       // console.log('context.interval: ', context.interval);
+      //       const interval = setInterval(() => {
+      //         send('TICK');
+      //       }, context.interval);
+      //       return () => {
+      //         clearInterval(interval);
+      //       };
+      //     },
+      // },
+      invoke: {
+        input: function input(_ref3) {
+          var context = _ref3.context;
+          return {
+            interval: context.interval
+          };
+        },
+        src: fromCallback(function (_ref4) {
+          var sendBack = _ref4.sendBack,
+            input = _ref4.input;
+          var interval = setInterval(function () {
+            sendBack({
+              type: 'TICK'
+            });
+          }, input.interval);
+          return function () {
+            clearInterval(interval);
+          };
+        }
+        // eslint-disable-next-line @typescript-eslint/require-await
+        // async ({ input }) => {
+        //   console.log('interval: ', input.interval);
+        //   return { type: 'TICK' };
+        //   // console.log('in running invoke');
+        //   // const interval = setInterval(() => {
+        //   //   raise({ type: 'TICK' });
+        //   // }, input.interval);
+        //   // return () => {
+        //   //   clearInterval(interval);
+        //   // };
+        // }
+        )
+      },
+
+      always: [{
+        target: 'completed',
+        guard: function guard(_ref5) {
+          var context = _ref5.context;
+          return context.elapsed >= context.duration;
+        }
+      }],
+      on: {
+        TICK: {
+          actions: assign(function (_ref6) {
+            var context = _ref6.context,
+              event = _ref6.event;
+            if (event.type !== 'TICK') return context;
+            return {
+              elapsed: context.elapsed + context.interval
+            };
+          })
+        },
+        PAUSE_TIMER: {
+          target: 'paused'
+        }
+      }
+    },
+    completed: {
+      type: 'final'
+    }
+  }
+});
+
+// circular reference, don't want library depending on UI component specific to one app
+// import { Notification } from "@waytrade/components/app/Toast/Notification";
+var toastMachine = setup({
+  types: {
+    context: {},
+    events: {},
+    input: {}
+  },
+  actions: {
+    addItem: assign(function (_ref) {
+      var context = _ref.context,
+        event = _ref.event;
+      var _a, _b;
+      if (event.type !== 'ADD_ITEM') return context;
+      var id = "notification-".concat(crypto.randomBytes(16).toString('hex'));
+      var duration = (_a = event.duration) !== null && _a !== void 0 ? _a : context.duration;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      var notification = /*#__PURE__*/cloneElement(event.item, Object.assign({
+        duration: duration,
+        id: id,
+        key: (_b = event.item.key) !== null && _b !== void 0 ? _b : id
+      }, event.item.props));
+      var item = {
+        duration: duration,
+        id: id,
+        element: notification
+      };
+      var updatedItems = context.items;
+      if (context.order === 'desc') {
+        updatedItems.push(item);
+      } else {
+        updatedItems.unshift(item);
+      }
+      return {
+        items: updatedItems,
+        activeItem: id
+      };
+    }),
+    removeItem: assign(function (_ref2) {
+      var context = _ref2.context,
+        event = _ref2.event;
+      // console.log('toast removeItem event: ', event);
+      if (event.type !== 'REMOVE_ITEM' && event.type !== 'xstate.done.actor.timer'
+      // event.type !== 'REMOVE_ITEM' &&
+      // event.type !== 'xstate.after(ITEM_TIMEOUT)#toast.active' &&
+      // event.type !== 'done.invoke.timer'
+      ) return context;
+      var updatedItems = context.items;
+      if (context.order === 'desc') {
+        updatedItems.pop();
+        return {
+          items: updatedItems,
+          activeItem: updatedItems.length > 0 ? updatedItems[updatedItems.length - 1].id : null
+        };
+      }
+      updatedItems.shift();
+      return {
+        items: updatedItems,
+        activeItem: updatedItems.length > 0 ? updatedItems[0].id : null
+      };
+    })
+  },
+  delays: {
+    ITEM_TIMEOUT: function ITEM_TIMEOUT(_ref3) {
+      var context = _ref3.context;
+      var _a;
+      return (_a = context.items[context.items.length - 1].duration) !== null && _a !== void 0 ? _a : context.duration;
+    }
+  },
+  guards: {
+    itemHasTimeout: function itemHasTimeout(_ref4) {
+      var context = _ref4.context;
+      return context.items[context.items.length - 1].duration > 0 || context.duration > 0;
+    }
+  }
+}).createMachine({
+  id: 'toast',
+  context: {
+    items: [],
+    order: 'desc',
+    duration: 0,
+    activeItem: null
+  },
+  initial: 'idle',
+  states: {
+    idle: {
+      on: {
+        ADD_ITEM: {
+          target: 'adding'
+        }
+      }
+    },
+    active: {
+      invoke: {
+        id: 'timer',
+        src: timerMachine,
+        input: function input(_ref5) {
+          var context = _ref5.context;
+          var _a;
+          return {
+            initialContext: {
+              duration: (_a = context.items[context.items.length - 1].duration) !== null && _a !== void 0 ? _a : context.duration
+            }
+          };
+        },
+        onDone: {
+          target: 'removing',
+          guard: 'itemHasTimeout'
+        }
+        // data: Object.assign(timerMachine.context, {
+        //   duration: (context: ToastMachineContext) =>
+        //     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
+        //     context.items[context.items.length - 1].duration ??
+        //     context.duration,
+        // }),
+      },
+
+      on: {
+        ADD_ITEM: {
+          // actions: sendTo('timer', 'PAUSE_TIMER'),
+          target: 'adding'
+        },
+        REMOVE_ITEM: {
+          target: 'removing'
+        },
+        SET_IDLE: {
+          target: 'idle'
+        },
+        RESUME_TIMER: {
+          actions: sendTo('timer', {
+            type: 'RESUME_TIMER'
+          })
+          // cond: (context) => context.duration > 0,
+        },
+
+        PAUSE_TIMER: {
+          actions: sendTo('timer', {
+            type: 'PAUSE_TIMER'
+          })
+          // cond: (context) => context.duration > 0,
+        }
+      }
+      // after: {
+      //   ITEM_TIMEOUT: {
+      //     target: 'removing',
+      //     cond: 'itemHasTimeout',
+      //   },
+      // },
+    },
+
+    adding: {
+      entry: ['addItem'],
+      on: {
+        SET_IDLE: {
+          target: 'idle'
+        },
+        SET_ACTIVE: {
+          target: 'active'
+        }
+      }
+    },
+    removing: {
+      entry: 'removeItem',
+      on: {
+        SET_IDLE: {
+          target: 'idle'
+        },
+        SET_ACTIVE: {
+          target: 'active'
+        }
+      }
+    }
+  }
+});
+// export const toastMachine =
+//   /** @xstate-layout N4IgpgJg5mDOIC5QBcD2BDWyB0BLCANmAMQCCAIuQPoCSAKgKICyA2gAwC6ioADqrLmS5UAO24gAHogCMAZgCs2AGzS2SgBxKA7AE4lO2ToAsAGhABPRAFoj6gL52zaTDnQBjIQDcSEUWDwinqgA1v5CALZgAE7sXEggfAJCouJSCEpsOspaOQay0kqyAExKZpYIReps2LY6mmxG+kUKWkYOThhY2O5eJBTU9Myx4omCwmLxabKF2NKN8kpFbPls8gpl1vLqykXyasaNhdJFWu0gzl09uN7EAErMAPIAagy0jKycI-xjKZOIi9sDPI9EZgYV1LItBsEIYlNg9NIdGxKki1jkzhdXB5riQAMoMOi0cgAGQYw3io2SE1AaTkWS0RQOSKWEK0c2hzWkNUWJy0Skah1sGM6WN6dwYuIAqkxXnQaDLbuTeN8qakZPIuXylhktAppgUitDilpsJpQeo9KsVOoCsKXN1sTcAAqkSX4qhyhVKhIq8ZqirSbaZeTyLRbVnqVqyaHSaQm45mtirKo6Eo6O2XCAQXAiKDEfGEmgksmfCm+340xC2bCh3XGrTLfR8+TQqxFJbYTIoow6HStBshjOuLM5vMFqikADCcpe3spfr+MKMmsZbDmFvU6jBRtW8I3IcMBT7Q+wUTA4VQnlH+YJRNJc-L1MkiHURiKps0DIWKhyIZjehqfc1h0I8GyUE8zwvK9cxvQkpxnEs4mVJIF0rBBU1kWZVw1WtgSMUwLHVIxsEqIxjVDIF5CFM4RFQCA4HETEvhQitnwQKxYxNOoDFjbQ2RtfRW1kfJO1THjA1sVRZBPfAiGYn4nzSKx9D3cS+MDI9-zhWot2A0C1BPK5vHk1VF1kIwuOZPICmKYEtMAuoDxAptlkMkdcxM1C2MMYjKhKXUlH5DUimkVsijImsxMMcLpjDUMIPPS9R081i0i3OE10afI42XcKW0ImFgRrYE5FBWx1F2cyHAcIA */
+//   createMachine<ToastMachineContext, ToastMachineEvents>(
+//     {
+//       context: { items: [], order: 'desc', duration: 0, activeItem: null },
+//       predictableActionArguments: true,
+//       id: 'toast',
+//       initial: 'idle',
+//       states: {
+//         idle: {
+//           on: {
+//             ADD_ITEM: {
+//               target: 'adding',
+//             },
+//           },
+//         },
+//         active: {
+//           invoke: {
+//             id: 'timer',
+//             src: timerMachine,
+//             onDone: {
+//               target: 'removing',
+//               cond: 'itemHasTimeout',
+//             },
+//             data: Object.assign(timerMachine.context, {
+//               duration: (context: ToastMachineContext) =>
+//                 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
+//                 context.items[context.items.length - 1].duration ??
+//                 context.duration,
+//             }),
+//           },
+//           on: {
+//             ADD_ITEM: {
+//               // actions: sendTo('timer', 'PAUSE_TIMER'),
+//               target: 'adding',
+//             },
+//             REMOVE_ITEM: {
+//               target: 'removing',
+//             },
+//             SET_IDLE: {
+//               target: 'idle',
+//             },
+//             RESUME_TIMER: {
+//               actions: sendTo('timer', 'RESUME_TIMER'),
+//               // cond: (context) => context.duration > 0,
+//             },
+//             PAUSE_TIMER: {
+//               actions: sendTo('timer', 'PAUSE_TIMER'),
+//               // cond: (context) => context.duration > 0,
+//             },
+//           },
+//           // after: {
+//           //   ITEM_TIMEOUT: {
+//           //     target: 'removing',
+//           //     cond: 'itemHasTimeout',
+//           //   },
+//           // },
+//         },
+//         adding: {
+//           entry: ['addItem'],
+//           on: {
+//             SET_IDLE: {
+//               target: 'idle',
+//             },
+//             SET_ACTIVE: {
+//               target: 'active',
+//             },
+//           },
+//         },
+//         removing: {
+//           entry: 'removeItem',
+//           on: {
+//             SET_IDLE: {
+//               target: 'idle',
+//             },
+//             SET_ACTIVE: {
+//               target: 'active',
+//             },
+//           },
+//         },
+//       },
+//     },
+//     {
+//       actions: {
+//         addItem: assign((context, event) => {
+//           if (event.type !== 'ADD_ITEM') return;
+//           const id = `notification-${crypto.randomBytes(16).toString('hex')}`;
+//           const duration = event.duration ?? context.duration;
+//           // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+//           const notification = cloneElement(event.item, {
+//             duration,
+//             id,
+//             key: event.item.key ?? id,
+//             ...event.item.props,
+//           });
+//           const item = {
+//             duration,
+//             id,
+//             element: notification,
+//           };
+//           if (context.order === 'desc') {
+//             context.items.push(item);
+//           } else {
+//             context.items.unshift(item);
+//           }
+//           context.activeItem = id;
+//         }),
+//         removeItem: assign((context, event) => {
+//           if (
+//             event.type !== 'REMOVE_ITEM' &&
+//             event.type !== 'xstate.after(ITEM_TIMEOUT)#toast.active' &&
+//             event.type !== 'done.invoke.timer'
+//           )
+//             return;
+//           if (context.order === 'desc') {
+//             context.items.pop();
+//             context.activeItem =
+//               context.items.length > 0
+//                 ? context.items[context.items.length - 1].id
+//                 : null;
+//           } else {
+//             context.items.shift();
+//             context.activeItem =
+//               context.items.length > 0 ? context.items[0].id : null;
+//           }
+//         }),
+//         // startTimer: sendTo('timer', { type: 'START' }),
+//       },
+//       delays: {
+//         ITEM_TIMEOUT: (context) => {
+//           // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+//           return (
+//             // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+//             context.items[context.items.length - 1].duration ?? context.duration
+//           );
+//         },
+//       },
+//       guards: {
+//         itemHasTimeout: (context) => {
+//           return (
+//             // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+//             context.items[context.items.length - 1].duration > 0 ||
+//             context.duration > 0
+//           );
+//         },
+//       },
+//     }
+//   );
+
+var ToastContext = /*#__PURE__*/createContext({});
+var useToast = function useToast() {
+  return useContext(ToastContext);
+};
+function ToastProvider(_ref) {
+  var children = _ref.children,
+    actor = _ref.actor;
+  // const toastService = interpret(toastMachine, {
+  //   devTools: options.devTools,
+  // }).start(state);
+  // toastService.subscribe((s) => {
+  //   setState(s);
+  // });
+  return jsx(ToastContext.Provider, {
+    value: actor,
+    children: children
+  });
+}
+
+export { AuthContext, AuthProvider, ToastContext, ToastProvider, authMachine, getAuth, timerMachine, toastMachine, useAuth, useToast, useUser };