@workos-inc/widgets 1.1.4 → 1.2.0

package/src/api/errors.ts

@@ -1,48 +0,0 @@
-type QueryType = "query" | "mutation";
-
-export class FetchError extends Error {
-  queryType: QueryType;
-  recordType?: string;
-  context: unknown;
-  constructor(args: {
-    message: string;
-    queryType: QueryType;
-    recordType?: string;
-    context?: unknown;
-  }) {
-    super(args.message);
-    this.name = "FetchError";
-    this.queryType = args.queryType;
-    this.recordType = args.recordType;
-    this.context = args.context;
-  }
-}
-
-export class ApiError extends Error {
-  status: number;
-  queryType: QueryType;
-  recordType?: string;
-  context: unknown;
-  constructor(args: {
-    message: string;
-    queryType: QueryType;
-    recordType?: string;
-    status: number;
-    context?: unknown;
-  }) {
-    super(args.message);
-    this.name = "ApiError";
-    this.status = args.status;
-    this.queryType = args.queryType;
-    this.recordType = args.recordType;
-  }
-}
-
-export class NoAuthTokenError extends Error {
-  context: unknown;
-  constructor(args?: { context?: unknown }) {
-    super("No auth token provided");
-    this.name = "NoAuthTokenError";
-    this.context = args?.context;
-  }
-}

package/src/api/index.ts

@@ -1,2 +0,0 @@
-export * from "./endpoint";
-export * from "./api-provider";

package/src/api/utils.ts

@@ -1,42 +0,0 @@
-import { WIDGETS_API_VERSION } from "./constants";
-
-export function getAuthHeaders(authToken: string): HeadersInit {
-  return {
-    Authorization: `Bearer ${authToken}`,
-    "WorkOS-Widgets-Version": WIDGETS_API_VERSION,
-  };
-}
-
-export function isObjectLike(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null;
-}
-
-export function isErrorLike(
-  value: unknown,
-): value is Record<string, unknown> & { message: string } {
-  return isObjectLike(value) && typeof value.message === "string";
-}
-
-export async function parseErrorResponse(
-  response: Response,
-): Promise<{ message: string; status: number }> {
-  try {
-    const json = await response.json();
-    if (!isObjectLike(json) || typeof json.message !== "string") {
-      return {
-        status: response.status,
-        message: response.statusText,
-      };
-    }
-    return {
-      ...json,
-      status: response.status,
-      message: json.message || response.statusText,
-    };
-  } catch {
-    return {
-      status: response.status,
-      message: response.statusText,
-    };
-  }
-}

package/src/api/widgets-api-client.ts

@@ -1,87 +0,0 @@
-import { QueryKey } from "@tanstack/react-query";
-import { useApi } from "./api-provider";
-import { ApiError, FetchError } from "./errors";
-import { getAuthHeaders, parseErrorResponse } from "./utils";
-
-type WidgetsApiClient<T> = (data: {
-  url: string;
-  method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
-  params?: Record<string, any>;
-  headers?: Record<string, any>;
-  data?: BodyType<unknown>;
-  signal?: AbortSignal;
-}) => Promise<T>;
-
-export const useWidgetsApiClient = <T>(): WidgetsApiClient<T> => {
-  const { authToken, baseUrl, elevatedAccess, widgetType } = useApi();
-
-  return async ({ url: pathname, method, params, data }) => {
-    const url = new URL(baseUrl);
-    url.pathname = pathname;
-
-    if (params) {
-      const cleanParams = Object.fromEntries(
-        Object.entries(params).filter(([_, value]) => value !== undefined),
-      );
-      url.search = new URLSearchParams(cleanParams).toString();
-    }
-
-    const queryType = method.toLowerCase() === "get" ? "query" : "mutation";
-    const headers = {
-      ...getAuthHeaders(await Promise.resolve(authToken)),
-      ...(elevatedAccess && queryType === "mutation"
-        ? { "x-elevated-access-token": elevatedAccess.token }
-        : {}),
-      "WorkOS-Widgets-Type": widgetType,
-      "Content-Type": "application/json",
-    };
-
-    const response = await fetch(url, {
-      method,
-      cache: "no-store",
-      headers,
-      ...(data ? { body: JSON.stringify(data) } : {}),
-    }).catch((error) => {
-      throw new FetchError({
-        message: `Failed to ${method} ${url.toString()}`,
-        queryType,
-        context: { error },
-      });
-    });
-
-    if (!response.ok) {
-      const { message, status } = await parseErrorResponse(response);
-
-      throw new ApiError({
-        message,
-        status,
-        queryType: method.toLowerCase() === "get" ? "query" : "mutation",
-      });
-    }
-
-    return response.json();
-  };
-};
-
-export type ErrorType<ErrorData> = ErrorData;
-
-export type BodyType<BodyData> = BodyData & { headers?: any };
-
-export const useWidgetsApiQueryOptions = <
-  QueryOptions extends { queryKey: QK },
-  QK extends QueryKey,
->(
-  queryOptions: QueryOptions,
-) => {
-  const { authTokenQueryKey, baseUrl } = useApi();
-  const queryKey = [
-    // initial query key needs to go first to allow invalidation of the query name to work
-    ...queryOptions.queryKey,
-    { authTokenQueryKey, baseUrl },
-  ] as unknown as QK;
-
-  return {
-    ...queryOptions,
-    queryKey: queryKey as QK,
-  };
-};

package/src/card-list.tsx

@@ -1,26 +0,0 @@
-import { Box, Card, CardProps, Inset } from "@radix-ui/themes";
-
-export function Root({ children, ...props }: CardProps) {
-  return (
-    <Card size="2" {...props} className="woswidgets-card-list">
-      <Inset side="all" clip="padding-box">
-        {children}
-      </Inset>
-    </Card>
-  );
-}
-
-export function Item({ children }: { children: React.ReactNode }) {
-  return (
-    <Inset
-      side="x"
-      px="current"
-      className="woswidgets-card-list-item"
-      clip="padding-box"
-    >
-      <Box px="4" py="4">
-        {children}
-      </Box>
-    </Inset>
-  );
-}

package/src/index.ts

@@ -1,9 +0,0 @@
-export {
-  WorkOsWidgets,
-  type WorkOsWidgetsProps,
-} from "./workos-widgets.client";
-export { OrganizationSwitcher } from "./organization-switcher.client";
-export { UserProfile } from "./user-profile.client";
-export { UserSecurity } from "./user-security.client";
-export { UserSessions } from "./user-sessions.client";
-export { UsersManagement } from "./users-management.client";

package/src/lib/add-mfa-dialog.tsx

@@ -1,379 +0,0 @@
-"use client";
-
-import {
-  Box,
-  Code,
-  Dialog,
-  Flex,
-  Grid,
-  Link,
-  Separator,
-  Text,
-  VisuallyHidden,
-} from "@radix-ui/themes";
-import * as React from "react";
-import { type ReactNode } from "react";
-import * as Otp from "./otp-input";
-import { DialogContent, PrimaryButton, SecondaryButton } from "./elements";
-import {
-  CreateTotpFactorResponse,
-  CreateTotpFactorResponseAuthenticationFactorAllOfTotpAnyOf,
-  useCreateTotpFactor,
-  useElevatedAccessToken,
-  useVerifyTotpFactor,
-} from "../api";
-import * as Form from "@radix-ui/react-form";
-import { Marker } from "./marker";
-import { CopyButton } from "./copy-button";
-import { useSecuritySettings } from "./use-security-settings";
-import { ElevatedAccess } from "./elevated-access";
-import { SaveButton } from "./save-button";
-import { useDialogClose } from "./use-dialog-close";
-
-interface AddMfaDialogProps extends Dialog.RootProps {
-  children?: ReactNode;
-  onSuccess?: () => void;
-}
-
-export function AddMfaDialog({
-  children,
-  onSuccess,
-  ...props
-}: AddMfaDialogProps) {
-  const [open, setOpen] = React.useState(false);
-  const [manuallyTriggered, setManuallyTriggered] = React.useState(false);
-  const { elevatedAccess } = useElevatedAccessToken();
-  const createAuthFactor = useCreateTotpFactor();
-
-  const handleVerified = async () => {
-    await createAuthFactor.mutateAsync(undefined);
-  };
-
-  const onTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (elevatedAccess && !createAuthFactor.data) {
-      event.preventDefault();
-      setManuallyTriggered(true);
-      createAuthFactor.mutate(undefined, {
-        onSuccess: () => {
-          setOpen(true);
-        },
-      });
-    } else {
-      setManuallyTriggered(false);
-    }
-  };
-
-  const handleClose = React.useCallback(() => {
-    setOpen(false);
-  }, []);
-
-  return (
-    <Dialog.Root
-      {...props}
-      open={props.open || open}
-      onOpenChange={props.onOpenChange || setOpen}
-    >
-      <Dialog.Trigger
-        onClick={onTriggerClick}
-        // @ts-ignore I've to find a way to pass the loading state to the trigger
-        loading={manuallyTriggered && createAuthFactor.isPending}
-      >
-        {children}
-      </Dialog.Trigger>
-
-      <DialogContent maxWidth="480px">
-        <ElevatedAccess onVerified={handleVerified}>
-          <Content onClose={handleClose} totpFactor={createAuthFactor.data} />
-        </ElevatedAccess>
-      </DialogContent>
-    </Dialog.Root>
-  );
-}
-
-interface ContentProps {
-  totpFactor?: CreateTotpFactorResponse;
-  onClose?: () => void;
-}
-
-function Content({ onClose, totpFactor }: ContentProps) {
-  const securitySettings = useSecuritySettings();
-
-  const [customError, setCustomError] = React.useState<string | null>(null);
-  const totp = hasQrCode(totpFactor)
-    ? totpFactor.authenticationFactor.totp
-    : undefined;
-
-  const verifyTotp = useVerifyTotpFactor({
-    mutation: {
-      onSuccess: ({ success }) => {
-        if (!success) {
-          setCustomError("Invalid passcode");
-        }
-      },
-    },
-  });
-
-  const serverError = verifyTotp.error || customError;
-  const isSuccess = verifyTotp.isSuccess && !serverError;
-
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setCustomError(null);
-
-    const formData = new FormData(event.currentTarget);
-    const otpCode = formData.get("otp-code")?.toString();
-
-    verifyTotp.mutate({
-      data: {
-        authenticationChallengeId: totpFactor?.authenticationChallenge.id ?? "",
-        code: otpCode ?? "",
-      },
-    });
-  };
-
-  useDialogClose(isSuccess, () => {
-    securitySettings.update("Mfa", true);
-  });
-
-  return (
-    <>
-      <Dialog.Title mb="5">Set up an authenticator app</Dialog.Title>
-
-      <Form.Root onSubmit={handleSubmit}>
-        <Grid columns="auto 1fr" rows="repeat(4, auto)" gapX="3" gapY="1">
-          <Grid
-            rows="subgrid"
-            gridRow="span 4"
-            style={{ placeItems: "center" }}
-          >
-            <Marker>1</Marker>
-            <Separator
-              orientation="vertical"
-              size="4"
-              style={{ width: "2px" }}
-            />
-            <Marker>2</Marker>
-            <div />
-          </Grid>
-
-          <Grid rows="subgrid" gridRow="span 4">
-            <Text as="p" size="3" weight="bold">
-              Scan the QR code
-            </Text>
-            <Flex direction="column" gap="1">
-              <Text as="p" size="2">
-                Use an authenticator app like{" "}
-                <Link
-                  href="https://1password.com/"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  1Password
-                </Link>
-                ,{" "}
-                <Link
-                  href="https://apps.apple.com/us/app/google-authenticator/id388497605"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Google Authenticator
-                </Link>
-                ,{" "}
-                <Link
-                  href="https://authy.com/"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Authy
-                </Link>
-                , or{" "}
-                <Link
-                  href="https://www.microsoft.com/en-gb/security/mobile-authenticator-app"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  Microsoft Authenticator
-                </Link>{" "}
-                to scan the QR code below.
-              </Text>
-              <Flex align="center" gap="5" my="5">
-                <Grid
-                  position="relative"
-                  width="160px"
-                  height="160px"
-                  p="2"
-                  style={{
-                    border: "1px solid var(--gray-7)",
-                    borderRadius: "var(--radius-4)",
-                    background: "var(--gray-2)",
-                    overflow: "hidden",
-                  }}
-                >
-                  {totp?.qr_code && (
-                    <Box asChild width="100%" height="auto">
-                      <img
-                        alt="Scan this QR code to enroll"
-                        aria-describedby="secret-note"
-                        height="160"
-                        src={totp.qr_code}
-                        style={{ userSelect: "none", background: "white" }}
-                        width="160"
-                      />
-                    </Box>
-                  )}
-                </Grid>
-
-                <Flex direction="column" gap="1" align="start">
-                  <Text color="gray" id="secret-note" size="2">
-                    Can‘t scan the code?{" "}
-                  </Text>
-
-                  <SecretDialog setupKey={totp?.secret ?? ""}>
-                    <SecondaryButton
-                      size="1"
-                      disabled={verifyTotp.isPending || isSuccess}
-                    >
-                      View setup key
-                    </SecondaryButton>
-                  </SecretDialog>
-                </Flex>
-              </Flex>
-            </Flex>
-            <Text as="p" size="3" weight="bold">
-              Get verification passcode
-            </Text>
-            <Flex direction="column" gap="4">
-              <Text as="p" size="2">
-                Enter the 6-digit passcode from your authenticator app.
-              </Text>
-
-              <Flex direction="column" gap="2">
-                <Otp.Root
-                  autoSubmit
-                  gap="3"
-                  justify="start"
-                  name="otp-code"
-                  rows="48px"
-                  columns="repeat(6, 48px)"
-                  readOnly={verifyTotp.isPending || isSuccess}
-                >
-                  <Otp.Input required autoFocus autoComplete="off" />
-                  <Otp.Input required />
-                  <Otp.Input required />
-                  <Otp.Input required />
-                  <Otp.Input required />
-                  <Otp.Input required />
-                </Otp.Root>
-
-                {serverError && (
-                  <Text size="2" color="red">
-                    {getMutationErrorMessage(serverError)}
-                  </Text>
-                )}
-              </Flex>
-            </Flex>
-          </Grid>
-        </Grid>
-
-        <Flex mt="5" gap="3" justify="end">
-          <Dialog.Close>
-            <SecondaryButton disabled={verifyTotp.isPending || isSuccess}>
-              Cancel
-            </SecondaryButton>
-          </Dialog.Close>
-
-          <SaveButton
-            asChild
-            loading={verifyTotp.isPending}
-            done={isSuccess}
-            onDone={onClose}
-          >
-            <PrimaryButton type="submit">Confirm</PrimaryButton>
-          </SaveButton>
-        </Flex>
-      </Form.Root>
-
-      {/* mirror errors in a live region */}
-      <VisuallyHidden asChild>
-        <section aria-live="polite">
-          {getMutationErrorMessage(serverError)}
-        </section>
-      </VisuallyHidden>
-    </>
-  );
-}
-
-interface SecretDialogProps extends React.PropsWithChildren {
-  setupKey: string;
-}
-
-function SecretDialog({ children, setupKey }: SecretDialogProps) {
-  return (
-    <Dialog.Root>
-      <Dialog.Trigger>{children}</Dialog.Trigger>
-      <Dialog.Content
-        maxWidth="90vw"
-        size={{ initial: "3", sm: "4" }}
-        minWidth="300px"
-        width="fit-content"
-      >
-        <Dialog.Title size="2" weight="regular">
-          Your setup key
-        </Dialog.Title>
-        <Dialog.Description>
-          <Text size="6">
-            <Code variant="ghost" style={{ letterSpacing: "0.15rem" }}>
-              {setupKey}
-            </Code>
-          </Text>
-        </Dialog.Description>
-
-        <Flex align="center" gap="3" justify="end" mt="5">
-          <Dialog.Close>
-            <CopyButton asChild value={setupKey}>
-              <PrimaryButton>Copy and close</PrimaryButton>
-            </CopyButton>
-          </Dialog.Close>
-        </Flex>
-      </Dialog.Content>
-    </Dialog.Root>
-  );
-}
-
-function getMutationErrorMessage(error: unknown) {
-  let message = "Something went wrong, please try again";
-
-  if (typeof error === "string") {
-    message = error;
-  }
-
-  if (error instanceof Error) {
-    message = error.message;
-  }
-
-  if (
-    typeof error === "object" &&
-    error !== null &&
-    "message" in error &&
-    typeof error.message === "string"
-  ) {
-    message = error.message;
-  }
-
-  if (message === "Invalid passcode") {
-    message = "Invalid passcode, please try again";
-  }
-
-  return message;
-}
-
-function hasQrCode(
-  response?: CreateTotpFactorResponse,
-): response is CreateTotpFactorResponse & {
-  authenticationFactor: {
-    totp: NonNullable<CreateTotpFactorResponseAuthenticationFactorAllOfTotpAnyOf>;
-  };
-} {
-  const totp = response?.authenticationFactor.totp;
-  return totp != null && "qr_code" in totp;
-}

package/src/lib/api/config.ts

@@ -1,9 +0,0 @@
-export const DEFAULT_API_HOSTNAME = "api.workos.com";
-export const API_ENDPOINTS = {
-  USERS: "_widgets/UserManagement/members",
-  USER_ROLES: "_widgets/UserManagement/roles",
-  USER_INVITE: "_widgets/UserManagement/invite-user",
-  USER_INVITES: "_widgets/UserManagement/invites",
-  USER_INVITES_RESEND: (userId: string) =>
-    `_widgets/UserManagement/invites/${userId}/resend`,
-};

package/src/lib/api/user.ts

@@ -1,98 +0,0 @@
-import {
-  getMembersQueryKey,
-  useInviteMember,
-  useMembers,
-  useRemoveMember,
-  useResendInvite,
-  useRevokeInvite,
-  useUpdateMember,
-} from "../../api";
-import { keepPreviousData, useQueryClient } from "@tanstack/react-query";
-import { USER_ROW_LIMIT } from "../constants";
-import {
-  useUsersManagementContext,
-  type UsersManagementContextType,
-} from "../users-management-context";
-
-export const useUsers = (context?: UsersManagementContextType) => {
-  const {
-    state: { pagination, role, searchQuery },
-  } = useUsersManagementContext(context);
-  const limit = USER_ROW_LIMIT;
-  const { before, after } = pagination || {};
-
-  return useMembers(
-    {
-      after: after ?? undefined,
-      before: before ?? undefined,
-      limit: limit.toString(),
-      role: role ?? undefined,
-      search: searchQuery ?? undefined,
-    },
-    {
-      query: {
-        placeholderData: keepPreviousData,
-      },
-    },
-  );
-};
-
-export const useUpdateUserRole: typeof useUpdateMember = () => {
-  const queryClient = useQueryClient();
-
-  return useUpdateMember({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: getMembersQueryKey() });
-      },
-    },
-  });
-};
-
-export const useInviteUser: typeof useInviteMember = () => {
-  const queryClient = useQueryClient();
-
-  return useInviteMember({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: getMembersQueryKey() });
-      },
-    },
-  });
-};
-
-export const useDeleteUser = () => {
-  const queryClient = useQueryClient();
-
-  return useRemoveMember({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: getMembersQueryKey() });
-      },
-    },
-  });
-};
-
-export const useRevokeUserInvite = () => {
-  const queryClient = useQueryClient();
-
-  return useRevokeInvite({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: getMembersQueryKey() });
-      },
-    },
-  });
-};
-
-export const useResendUserInvite = () => {
-  const queryClient = useQueryClient();
-
-  return useResendInvite({
-    mutation: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: getMembersQueryKey() });
-      },
-    },
-  });
-};