@workos-inc/widgets 1.1.4 → 1.2.0

package/src/api/api-provider.tsx

@@ -1,158 +0,0 @@
-import * as React from "react";
-
-export type WidgetType =
-  | "user-management"
-  | "organization-switcher"
-  | "user-sessions"
-  | "user-security"
-  | "user-profile";
-
-export type AuthToken = string | (() => Promise<string>);
-
-interface ElevatedAccess {
-  token: string;
-  expiresAt: string;
-}
-
-interface ApiConfig {
-  authToken: Promise<string> | string;
-  authTokenQueryKey: string;
-  baseUrl: string;
-  widgetType: WidgetType;
-  elevatedAccess?: ElevatedAccess;
-  setElevatedAccess: (elevatedAccess?: ElevatedAccess) => void;
-}
-
-const ApiContext = React.createContext<ApiConfig | undefined>(undefined);
-
-interface ApiProviderProps {
-  authToken: AuthToken;
-  baseUrl: string;
-  children: React.ReactNode;
-  widgetType: WidgetType;
-}
-
-export const ApiProvider = ({
-  authToken,
-  baseUrl,
-  children,
-  widgetType,
-}: 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,
-      widgetType,
-    }),
-    [
-      authTokenPromiseOrString,
-      baseUrl,
-      elevatedAccess,
-      setElevatedAccess,
-      widgetType,
-    ],
-  );
-
-  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

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