@workos-inc/widgets 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workos-inc/widgets",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -48,8 +48,7 @@
     "@radix-ui/react-use-controllable-state": "^1.1.0",
     "clsx": "^2.0.0",
     "ua-parser-js": "^2.0.2",
-    "use-debounce": "^10.0.4",
-    "@repo/api": "0.0.0"
+    "use-debounce": "^10.0.4"
   },
   "peerDependencies": {
     "@radix-ui/themes": "^3.1.0",
@@ -63,16 +62,25 @@
     "@types/node": "^20.16.6",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "orval": "^7.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.6.2",
     "@repo/typescript-config": "0.0.0"
   },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./src/api/*"
+      ]
+    }
+  },
   "scripts": {
     "build": "npm run clean:dist && tsc -b ./tsconfig.cjs.json ./tsconfig.esm.json",
     "build:ci": "tsc --noEmit",
     "clean": "rm -rf .turbo && rm -rf node_modules && npm run clean:dist",
-    "clean:dist": "rm -rf dist"
+    "clean:dist": "rm -rf dist",
+    "generate-api": "orval --config ./orval.config.ts"
   },
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

package/src/api/api-provider.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+
+export type AuthToken = string | (() => Promise<string>);
+
+interface ElevatedAccess {
+  token: string;
+  expiresAt: string;
+}
+
+interface ApiConfig {
+  authToken: Promise<string> | string;
+  authTokenQueryKey: string;
+  baseUrl: string;
+  elevatedAccess?: ElevatedAccess;
+  setElevatedAccess: (elevatedAccess?: ElevatedAccess) => void;
+}
+
+const ApiContext = React.createContext<ApiConfig | undefined>(undefined);
+
+interface ApiProviderProps {
+  authToken: AuthToken;
+  baseUrl: string;
+  children: React.ReactNode;
+}
+
+export const ApiProvider = ({
+  authToken,
+  baseUrl,
+  children,
+}: ApiProviderProps) => {
+  const authTokenPromiseOrString =
+    typeof authToken === "string" ? authToken : authToken();
+  const [elevatedAccess, setElevatedAccess] = React.useState<ElevatedAccess>();
+  const elevatedAccessTimeout = React.useRef<NodeJS.Timeout>();
+
+  // 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
+    }
+
+    return () => {
+      if (elevatedAccessTimeout.current) {
+        clearInterval(elevatedAccessTimeout.current);
+      }
+    };
+  }, [elevatedAccess]);
+
+  const value = React.useMemo(
+    () => ({
+      authToken: authTokenPromiseOrString,
+      authTokenQueryKey: getAuthTokenQueryKey(authTokenPromiseOrString),
+      baseUrl,
+      elevatedAccess,
+      setElevatedAccess,
+    }),
+    [authTokenPromiseOrString, baseUrl, elevatedAccess, setElevatedAccess],
+  );
+
+  return <ApiContext.Provider value={value}>{children}</ApiContext.Provider>;
+};
+
+export const useApi = () => {
+  const context = React.useContext(ApiContext);
+
+  if (context === undefined) {
+    throw new Error("useApi must be used within an ApiProvider");
+  }
+
+  return context;
+};
+
+export const useElevatedAccessToken = () => {
+  const { elevatedAccess, setElevatedAccess } = useApi();
+
+  return { elevatedAccess, setElevatedAccess };
+};
+
+// Map promises to a UUID that they can be identified by
+const PromiseKey = new WeakMap<Promise<string>, string>();
+/*
+ *
+ * @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: Promise<string> | string,
+): string {
+  // 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;
+  }
+}

package/src/api/constants.ts

@@ -0,0 +1 @@
+export const WIDGETS_API_VERSION = "1";