@workos-inc/widgets 1.4.2 → 1.5.1

package/dist/esm/api/api-provider.js

@@ -1,101 +1,89 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
 import * as React from "react";
-const ApiContext = React.createContext(undefined);
-export const ApiProvider = ({ authToken, baseUrl, children, widgetType, }) => {
-    const authTokenPromiseOrString = typeof authToken === "string" ? authToken : authToken();
-    const [elevatedAccess, setElevatedAccess] = React.useState();
-    const elevatedAccessTimeout = React.useRef();
-    // This effect manages the expiration of elevated access tokens
-    // When an elevated access token is present, it checks every 30 seconds if the token has expired
-    // If the token has expired (current time > expiration time), it clears the elevated access
-    React.useEffect(() => {
-        if (elevatedAccessTimeout.current) {
-            clearInterval(elevatedAccessTimeout.current);
-        }
-        if (elevatedAccess) {
-            elevatedAccessTimeout.current = setInterval(() => {
-                const now = new Date();
-                const expiresAtDate = new Date(elevatedAccess.expiresAt);
-                //  Reset the elevated access if it has expired
-                if (now > expiresAtDate) {
-                    setElevatedAccess(undefined);
-                }
-            }, 30_000); // every 30 seconds
+import { useIsHydrated } from "../lib/use-is-hydrated.js";
+import { getClaims } from "./utils.js";
+const ApiContext = React.createContext(void 0);
+const ApiProvider = ({
+  authToken,
+  baseUrl,
+  children,
+  widgetType
+}) => {
+  const authTokenQuery = useQuery({
+    initialData: typeof authToken === "string" ? {
+      authToken,
+      permissions: getClaims(authToken).permissions
+    } : void 0,
+    queryFn: async () => {
+      const resolvedToken = typeof authToken === "string" ? authToken : await authToken();
+      return {
+        authToken: resolvedToken,
+        permissions: getClaims(resolvedToken).permissions
+      };
+    },
+    queryKey: ["authToken"]
+  });
+  const [elevatedAccess, setElevatedAccess] = React.useState();
+  const elevatedAccessTimeout = React.useRef(void 0);
+  React.useEffect(() => {
+    if (elevatedAccessTimeout.current) {
+      window.clearInterval(elevatedAccessTimeout.current);
+    }
+    if (elevatedAccess) {
+      elevatedAccessTimeout.current = window.setInterval(() => {
+        const now = /* @__PURE__ */ new Date();
+        const expiresAtDate = new Date(elevatedAccess.expiresAt);
+        if (now > expiresAtDate) {
+          setElevatedAccess(void 0);
         }
-        return () => {
-            if (elevatedAccessTimeout.current) {
-                clearInterval(elevatedAccessTimeout.current);
-            }
-        };
-    }, [elevatedAccess]);
-    const value = React.useMemo(() => ({
-        authToken: authTokenPromiseOrString,
-        authTokenQueryKey: getAuthTokenQueryKey(authTokenPromiseOrString),
-        baseUrl,
-        elevatedAccess,
-        setElevatedAccess,
-        widgetType,
-    }), [
-        authTokenPromiseOrString,
-        baseUrl,
-        elevatedAccess,
-        setElevatedAccess,
-        widgetType,
-    ]);
-    return _jsx(ApiContext.Provider, { value: value, children: children });
-};
-export const useApi = () => {
-    const context = React.useContext(ApiContext);
-    if (context === undefined) {
-        throw new Error("useApi must be used within an ApiProvider");
+      }, 3e4);
     }
-    return context;
+    return () => {
+      if (elevatedAccessTimeout.current) {
+        window.clearInterval(elevatedAccessTimeout.current);
+      }
+    };
+  }, [elevatedAccess]);
+  const value = React.useMemo(
+    () => ({
+      authToken: authTokenQuery.data?.authToken,
+      permissions: authTokenQuery.data?.permissions,
+      baseUrl,
+      elevatedAccess,
+      setElevatedAccess,
+      widgetType
+    }),
+    [
+      authTokenQuery.data,
+      baseUrl,
+      elevatedAccess,
+      setElevatedAccess,
+      widgetType
+    ]
+  );
+  return /* @__PURE__ */ jsx(ApiContext.Provider, { value, children });
 };
-export const useElevatedAccessToken = () => {
-    const { elevatedAccess, setElevatedAccess } = useApi();
-    return { elevatedAccess, setElevatedAccess };
+const useApi = () => {
+  const context = React.useContext(ApiContext);
+  if (context === void 0) {
+    throw new Error("useApi must be used within an ApiProvider");
+  }
+  return context;
+};
+const useElevatedAccessToken = () => {
+  const { elevatedAccess, setElevatedAccess } = useApi();
+  return { elevatedAccess, setElevatedAccess };
+};
+const useApiReady = () => {
+  const { authToken } = useApi();
+  const isHydrated = useIsHydrated();
+  return isHydrated && authToken !== void 0;
+};
+export {
+  ApiProvider,
+  useApi,
+  useApiReady,
+  useElevatedAccessToken
 };
-// Map promises to a UUID that they can be identified by
-const PromiseKey = new WeakMap();
-/*
- *
- * @param getAccessToken - Async function that returns a promise that resolves to a string
- * @returns a resolved string or null from the access token promise
- */
-function getAuthTokenQueryKey(authTokenPromiseOrString) {
-    // Need to go by equality of the promise to avoid scenarios where
-    // 1. The promise is the same, but the function changes
-    // 2. The function is the same, but the promise is different ⚠️
-    //
-    // This does have the unfortunate side effect where if the function result
-    // isn't memoized somehow, then it will invalidate the query on every render.
-    // This doesn't occur with the current use case of getAccessToken from
-    // useAuth, but could in a custom implementation.
-    //
-    // Other things I explored:
-    // 1. Removing promise api, and force user to resolve the promise
-    //    themselves. The user can already do this with the string API, so
-    //    it's not necessary, and they could run into issues 1, or 2 if
-    //    implemented wrong.
-    // 2. Memoizing the function - this results in issue 2, where the function
-    //    is static, but the promise changes. I believe this actually is the
-    //    case with useAuth since it only sets the client once on initialization,
-    //    and binds the function to the client after that promise resolves.
-    if (typeof authTokenPromiseOrString === "string") {
-        return authTokenPromiseOrString;
-    }
-    const authTokenPromise = authTokenPromiseOrString;
-    // Cannot memoize on the function because it could remain the same while
-    // returning a different promise (and useAuth behaves this way).
-    const promiseKey = PromiseKey.get(authTokenPromise);
-    // Side effect, but we we're using a weak map, so it should be pretty safe
-    if (!promiseKey) {
-        const newPromiseKey = `${Math.random()}`;
-        PromiseKey.set(authTokenPromise, newPromiseKey);
-        return newPromiseKey;
-    }
-    else {
-        return promiseKey;
-    }
-}
 //# sourceMappingURL=api-provider.js.map

package/dist/esm/api/api-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"api-provider.js","sourceRoot":"","sources":["../../../src/api/api-provider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/api/api-provider.tsx"],"sourcesContent":["import { useQuery } from \"@tanstack/react-query\";\nimport * as React from \"react\";\nimport { useIsHydrated } from \"../lib/use-is-hydrated.js\";\nimport { getClaims } from \"./utils.js\";\n\nexport type WidgetType =\n  | \"admin-portal-domain-verification\"\n  | \"user-management\"\n  | \"organization-switcher\"\n  | \"user-sessions\"\n  | \"user-security\"\n  | \"user-profile\"\n  | \"admin-portal-sso-connection\"\n  | \"api-keys\";\n\nexport type AuthToken = string | (() => Promise<string>);\n\ninterface ElevatedAccess {\n  token: string;\n  expiresAt: string;\n}\n\ninterface ApiConfig {\n  authToken: string | undefined;\n  permissions: string[] | undefined;\n  baseUrl: string;\n  widgetType: WidgetType;\n  elevatedAccess?: ElevatedAccess;\n  setElevatedAccess: (elevatedAccess?: ElevatedAccess) => void;\n}\n\nconst ApiContext = React.createContext<ApiConfig | undefined>(undefined);\n\ninterface ApiProviderProps {\n  authToken: AuthToken;\n  baseUrl: string;\n  children: React.ReactNode;\n  widgetType: WidgetType;\n}\n\nexport const ApiProvider = ({\n  authToken,\n  baseUrl,\n  children,\n  widgetType,\n}: ApiProviderProps) => {\n  const authTokenQuery = useQuery({\n    initialData:\n      typeof authToken === \"string\"\n        ? {\n            authToken,\n            permissions: getClaims(authToken).permissions,\n          }\n        : undefined,\n    queryFn: async () => {\n      const resolvedToken =\n        typeof authToken === \"string\" ? authToken : await authToken();\n\n      return {\n        authToken: resolvedToken,\n        permissions: getClaims(resolvedToken).permissions,\n      };\n    },\n    queryKey: [\"authToken\"],\n  });\n\n  const [elevatedAccess, setElevatedAccess] = React.useState<ElevatedAccess>();\n  const elevatedAccessTimeout = React.useRef<number | undefined>(undefined);\n\n  // This effect manages the expiration of elevated access tokens\n  // When an elevated access token is present, it checks every 30 seconds if the token has expired\n  // If the token has expired (current time > expiration time), it clears the elevated access\n  React.useEffect(() => {\n    if (elevatedAccessTimeout.current) {\n      window.clearInterval(elevatedAccessTimeout.current);\n    }\n\n    if (elevatedAccess) {\n      elevatedAccessTimeout.current = window.setInterval(() => {\n        const now = new Date();\n        const expiresAtDate = new Date(elevatedAccess.expiresAt);\n\n        //  Reset the elevated access if it has expired\n        if (now > expiresAtDate) {\n          setElevatedAccess(undefined);\n        }\n      }, 30_000); // every 30 seconds\n    }\n\n    return () => {\n      if (elevatedAccessTimeout.current) {\n        window.clearInterval(elevatedAccessTimeout.current);\n      }\n    };\n  }, [elevatedAccess]);\n\n  const value = React.useMemo(\n    () => ({\n      authToken: authTokenQuery.data?.authToken,\n      permissions: authTokenQuery.data?.permissions,\n      baseUrl,\n      elevatedAccess,\n      setElevatedAccess,\n      widgetType,\n    }),\n    [\n      authTokenQuery.data,\n      baseUrl,\n      elevatedAccess,\n      setElevatedAccess,\n      widgetType,\n    ],\n  );\n\n  return <ApiContext.Provider value={value}>{children}</ApiContext.Provider>;\n};\n\nexport const useApi = () => {\n  const context = React.useContext(ApiContext);\n\n  if (context === undefined) {\n    throw new Error(\"useApi must be used within an ApiProvider\");\n  }\n\n  return context;\n};\n\nexport const useElevatedAccessToken = () => {\n  const { elevatedAccess, setElevatedAccess } = useApi();\n\n  return { elevatedAccess, setElevatedAccess };\n};\n\nexport const useApiReady = () => {\n  const { authToken } = useApi();\n  const isHydrated = useIsHydrated();\n\n  return isHydrated && authToken !== undefined;\n};\n"],"mappings":"AAkHS;AAlHT,SAAS,gBAAgB;AACzB,YAAY,WAAW;AACvB,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AA4B1B,MAAM,aAAa,MAAM,cAAqC,MAAS;AAShE,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,QAAM,iBAAiB,SAAS;AAAA,IAC9B,aACE,OAAO,cAAc,WACjB;AAAA,MACE;AAAA,MACA,aAAa,UAAU,SAAS,EAAE;AAAA,IACpC,IACA;AAAA,IACN,SAAS,YAAY;AACnB,YAAM,gBACJ,OAAO,cAAc,WAAW,YAAY,MAAM,UAAU;AAE9D,aAAO;AAAA,QACL,WAAW;AAAA,QACX,aAAa,UAAU,aAAa,EAAE;AAAA,MACxC;AAAA,IACF;AAAA,IACA,UAAU,CAAC,WAAW;AAAA,EACxB,CAAC;AAED,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,MAAM,SAAyB;AAC3E,QAAM,wBAAwB,MAAM,OAA2B,MAAS;AAKxE,QAAM,UAAU,MAAM;AACpB,QAAI,sBAAsB,SAAS;AACjC,aAAO,cAAc,sBAAsB,OAAO;AAAA,IACpD;AAEA,QAAI,gBAAgB;AAClB,4BAAsB,UAAU,OAAO,YAAY,MAAM;AACvD,cAAM,MAAM,oBAAI,KAAK;AACrB,cAAM,gBAAgB,IAAI,KAAK,eAAe,SAAS;AAGvD,YAAI,MAAM,eAAe;AACvB,4BAAkB,MAAS;AAAA,QAC7B;AAAA,MACF,GAAG,GAAM;AAAA,IACX;AAEA,WAAO,MAAM;AACX,UAAI,sBAAsB,SAAS;AACjC,eAAO,cAAc,sBAAsB,OAAO;AAAA,MACpD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,QAAQ,MAAM;AAAA,IAClB,OAAO;AAAA,MACL,WAAW,eAAe,MAAM;AAAA,MAChC,aAAa,eAAe,MAAM;AAAA,MAClC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,oBAAC,WAAW,UAAX,EAAoB,OAAe,UAAS;AACtD;AAEO,MAAM,SAAS,MAAM;AAC1B,QAAM,UAAU,MAAM,WAAW,UAAU;AAE3C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI,MAAM,2CAA2C;AAAA,EAC7D;AAEA,SAAO;AACT;AAEO,MAAM,yBAAyB,MAAM;AAC1C,QAAM,EAAE,gBAAgB,kBAAkB,IAAI,OAAO;AAErD,SAAO,EAAE,gBAAgB,kBAAkB;AAC7C;AAEO,MAAM,cAAc,MAAM;AAC/B,QAAM,EAAE,UAAU,IAAI,OAAO;AAC7B,QAAM,aAAa,cAAc;AAEjC,SAAO,cAAc,cAAc;AACrC;","names":[]}

package/dist/esm/api/constants.d.ts

@@ -1,2 +1,3 @@
-export declare const WIDGETS_API_VERSION = "1";
-//# sourceMappingURL=constants.d.ts.map
+declare const WIDGETS_API_VERSION = "1";
+
+export { WIDGETS_API_VERSION };

package/dist/esm/api/constants.js

@@ -1,2 +1,5 @@
-export const WIDGETS_API_VERSION = "1";
+const WIDGETS_API_VERSION = "1";
+export {
+  WIDGETS_API_VERSION
+};
 //# sourceMappingURL=constants.js.map

package/dist/esm/api/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/api/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAC"}
+{"version":3,"sources":["../../../src/api/constants.ts"],"sourcesContent":["export const WIDGETS_API_VERSION = \"1\";\n"],"mappings":"AAAO,MAAM,sBAAsB;","names":[]}