@workos-inc/widgets 1.1.5 → 1.2.1

package/src/lib/elevated-access.tsx

@@ -1,261 +0,0 @@
-import * as Form from "@radix-ui/react-form";
-import { AlertDialog, Callout, Dialog, Flex, Text } from "@radix-ui/themes";
-import {
-  useElevatedAccessToken,
-  useMe,
-  useSendVerification,
-  useVerify,
-} from "../api";
-import { PropsWithChildren, useEffect, useRef, useState } from "react";
-import { PrimaryButton, SecondaryButton } from "./elements";
-import * as Otp from "./otp-input";
-
-interface ElevatedAccessProps extends PropsWithChildren {
-  onVerified?: () => Promise<unknown>;
-  type?: "dialog" | "alert";
-}
-
-export function ElevatedAccess({
-  type = "dialog",
-  children,
-  onVerified,
-}: ElevatedAccessProps) {
-  const { elevatedAccess } = useElevatedAccessToken();
-  const [authenticationChallengeId, setAuthenticationChallengeId] =
-    useState<string>();
-
-  const prevAccessToken = useRef(elevatedAccess);
-
-  useEffect(() => {
-    prevAccessToken.current = elevatedAccess;
-  }, [elevatedAccess]);
-
-  if (elevatedAccess) {
-    return <>{children}</>;
-  }
-
-  if (!authenticationChallengeId) {
-    const hasTokenExpired = !!prevAccessToken.current;
-
-    return (
-      <SendVerificationEmailForm
-        type={type}
-        hasTokenExpired={hasTokenExpired}
-        onSuccess={(challengeId) => {
-          setAuthenticationChallengeId(challengeId);
-        }}
-      />
-    );
-  }
-
-  if (authenticationChallengeId) {
-    return (
-      <VerificationIdentityForm
-        type={type}
-        authenticationChallengeId={authenticationChallengeId}
-        onSuccess={() => {
-          // Reset the challenge id
-          setAuthenticationChallengeId(undefined);
-
-          return onVerified?.();
-        }}
-      />
-    );
-  }
-
-  return null;
-}
-
-interface SendVerificationEmailFormProps {
-  onSuccess: (challengeId: string) => unknown | Promise<unknown>;
-  type: "dialog" | "alert";
-  hasTokenExpired: boolean;
-}
-
-function SendVerificationEmailForm({
-  onSuccess,
-  type,
-  hasTokenExpired,
-}: SendVerificationEmailFormProps) {
-  const { data: me } = useMe();
-  const sendVerification = useSendVerification({
-    mutation: { onSuccess: (data) => onSuccess(data.authenticationChallenge) },
-  });
-
-  const Title = type === "dialog" ? Dialog.Title : AlertDialog.Title;
-  const Description =
-    type === "dialog" ? Dialog.Description : AlertDialog.Description;
-  const Close = type === "dialog" ? Dialog.Close : AlertDialog.Cancel;
-
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    sendVerification.mutate();
-  };
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <Title>
-        {hasTokenExpired
-          ? "Your verification token has expired"
-          : "Verify your identity"}
-      </Title>
-
-      <Description color="gray" mb="5">
-        To continue, we need to confirm your identity. We'll send a temporary
-        verification code to{" "}
-        <Text weight="bold" highContrast>
-          {me?.email}
-        </Text>
-        .
-      </Description>
-
-      {sendVerification.error && (
-        <Callout.Root color="red" mt="-2" mb="0">
-          <Callout.Text>
-            {getMutationErrorMessage(sendVerification.error)}
-          </Callout.Text>
-        </Callout.Root>
-      )}
-
-      <Flex justify="end" align="center" gap="3" mt="5">
-        <Close>
-          <SecondaryButton type="button" disabled={sendVerification.isPending}>
-            Cancel
-          </SecondaryButton>
-        </Close>
-        <PrimaryButton type="submit" loading={sendVerification.isPending}>
-          Send verification code
-        </PrimaryButton>
-      </Flex>
-    </form>
-  );
-}
-
-interface VerificationIdentityFormProps {
-  onSuccess?: () => unknown | Promise<unknown>;
-  authenticationChallengeId: string;
-  type: "dialog" | "alert";
-}
-
-function VerificationIdentityForm({
-  onSuccess,
-  authenticationChallengeId,
-  type,
-}: VerificationIdentityFormProps) {
-  const { data: me } = useMe();
-  const { setElevatedAccess } = useElevatedAccessToken();
-  const verifyIdentity = useVerify();
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const Title = type === "dialog" ? Dialog.Title : AlertDialog.Title;
-  const Description =
-    type === "dialog" ? Dialog.Description : AlertDialog.Description;
-  const Close = type === "dialog" ? Dialog.Close : AlertDialog.Cancel;
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    const formData = new FormData(event.currentTarget);
-    const code = formData.get("otp-code")?.toString() ?? "";
-
-    setIsSubmitting(true);
-
-    try {
-      // Mutate async so we can wait for the onSuccess callback as well
-      const newAuthState = await verifyIdentity.mutateAsync({
-        data: {
-          code,
-          authenticationChallengeId,
-        },
-      });
-
-      const in10Seconds = new Date(Date.now() + 5 * 1000);
-
-      setElevatedAccess({
-        token: newAuthState.elevatedAccessToken,
-        // expiresAt: newAuthState.expiresAt,
-        expiresAt: in10Seconds.toISOString(),
-      });
-
-      if (onSuccess) {
-        await new Promise((resolve) => setTimeout(resolve, 200));
-        await onSuccess();
-      }
-    } catch (error) {
-      console.error(error);
-    }
-
-    setIsSubmitting(false);
-  };
-
-  return (
-    <Form.Root onSubmit={handleSubmit}>
-      <Title>Verify your identity</Title>
-
-      <Description color="gray">
-        A verification code was sent to{" "}
-        <Text weight="bold" highContrast>
-          {me?.email}
-        </Text>
-        . Please enter it below.
-      </Description>
-
-      <Flex direction="column" gap="2" mt="5" mx="auto" width="fit-content">
-        <Otp.Root
-          autoSubmit
-          gap="2"
-          justify="center"
-          columns="repeat(6, 48px)"
-          width="fit-content"
-          rows="48px"
-          name="otp-code"
-          readOnly={isSubmitting}
-        >
-          <Otp.Input required autoFocus autoComplete="off" />
-          <Otp.Input required />
-          <Otp.Input required />
-          <Otp.Input required />
-          <Otp.Input required />
-          <Otp.Input required />
-        </Otp.Root>
-
-        {verifyIdentity.error && (
-          <Text color="red" size="2" as="p">
-            {getMutationErrorMessage(verifyIdentity.error)}
-          </Text>
-        )}
-      </Flex>
-
-      <Flex justify="end" align="center" gap="3" mt="5">
-        <Close>
-          <SecondaryButton type="button">Cancel</SecondaryButton>
-        </Close>
-
-        <PrimaryButton type="submit" loading={isSubmitting}>
-          Confirm
-        </PrimaryButton>
-      </Flex>
-    </Form.Root>
-  );
-}
-
-function getMutationErrorMessage(error: unknown) {
-  let message = typeof error === "string" ? error : "";
-
-  if (error instanceof Error) {
-    message = error.message;
-  } else if (
-    typeof error === "object" &&
-    error !== null &&
-    "message" in error &&
-    typeof error.message === "string"
-  ) {
-    message = error.message;
-  }
-
-  if (!message || message === "Bad Request") {
-    message = "Invalid code, please try again.";
-  }
-
-  return message;
-}

package/src/lib/error-boundary.tsx

@@ -1,166 +0,0 @@
-// Modified from https://github.com/bvaughn/react-error-boundary
-// Copyright (c) 2020 Brian Vaughn, MIT License
-
-import * as React from "react";
-
-type ErrorBoundaryState =
-  | { didCatch: true; error: any }
-  | { didCatch: false; error: null };
-
-export interface ErrorBoundaryContextValue {
-  didCatch: boolean;
-  error: any;
-  resetErrorBoundary: (...args: any[]) => void;
-}
-
-const ErrorBoundaryContext =
-  React.createContext<ErrorBoundaryContextValue | null>(null);
-ErrorBoundaryContext.displayName = "ErrorBoundaryContext";
-
-const initialState: ErrorBoundaryState = {
-  didCatch: false,
-  error: null,
-} satisfies ErrorBoundaryState;
-
-export class ErrorBoundary extends React.Component<
-  ErrorBoundaryProps,
-  ErrorBoundaryState
-> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-
-    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
-    this.state = initialState;
-  }
-
-  static getDerivedStateFromError(error: Error) {
-    return { didCatch: true, error };
-  }
-
-  resetErrorBoundary(...args: any[]) {
-    const { error } = this.state;
-
-    if (error !== null) {
-      this.props.onReset?.({
-        args,
-        reason: "imperative-api",
-      });
-
-      this.setState(initialState);
-    }
-  }
-
-  componentDidCatch(error: Error, info: React.ErrorInfo) {
-    this.props.onError?.(error, info);
-  }
-
-  componentDidUpdate(
-    prevProps: ErrorBoundaryProps,
-    prevState: ErrorBoundaryState,
-  ) {
-    const { didCatch } = this.state;
-    const { resetKeys } = this.props;
-
-    // There's an edge case where if the thing that triggered the error happens
-    // to *also* be in the resetKeys array, we'd end up resetting the error
-    // boundary immediately.
-    //
-    // This would likely trigger a second error to be thrown. So we make sure
-    // that we don't check the resetKeys on the first call of cDU after the
-    // error is set.
-    if (
-      didCatch &&
-      prevState.error !== null &&
-      hasArrayChanged(prevProps.resetKeys, resetKeys)
-    ) {
-      this.props.onReset?.({
-        next: resetKeys,
-        prev: prevProps.resetKeys,
-        reason: "keys",
-      });
-
-      this.setState(initialState);
-    }
-  }
-
-  render() {
-    const { children, fallbackRender, FallbackComponent, fallback } =
-      this.props;
-    const { didCatch, error } = this.state;
-
-    let childToRender = children;
-
-    if (didCatch) {
-      const props: FallbackProps = {
-        error,
-        resetErrorBoundary: this.resetErrorBoundary,
-      };
-
-      if (typeof fallbackRender === "function") {
-        childToRender = fallbackRender(props);
-      } else if (FallbackComponent) {
-        childToRender = React.createElement(FallbackComponent, props);
-      } else if (fallback !== undefined) {
-        childToRender = fallback;
-      } else {
-        throw error;
-      }
-    }
-
-    return (
-      <ErrorBoundaryContext.Provider
-        value={{
-          didCatch,
-          error,
-          resetErrorBoundary: this.resetErrorBoundary,
-        }}
-      >
-        {childToRender}
-      </ErrorBoundaryContext.Provider>
-    );
-  }
-}
-
-function hasArrayChanged(a: any[] = [], b: any[] = []) {
-  return (
-    a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]))
-  );
-}
-
-export type FallbackProps = {
-  error: any;
-  resetErrorBoundary: (...args: any[]) => void;
-};
-
-type ErrorBoundarySharedProps = React.PropsWithChildren<{
-  onError?: (error: Error, info: React.ErrorInfo) => void;
-  onReset?: (
-    details:
-      | { reason: "imperative-api"; args: any[] }
-      | { reason: "keys"; prev: any[] | undefined; next: any[] | undefined },
-  ) => void;
-  resetKeys?: any[];
-}>;
-
-export type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
-  fallback?: never;
-  FallbackComponent: React.ComponentType<FallbackProps>;
-  fallbackRender?: never;
-};
-
-export type ErrorBoundaryPropsWithRender = ErrorBoundarySharedProps & {
-  fallback?: never;
-  FallbackComponent?: never;
-  fallbackRender: (props: FallbackProps) => React.ReactNode;
-};
-
-export type ErrorBoundaryPropsWithFallback = ErrorBoundarySharedProps & {
-  fallback: React.ReactNode;
-  FallbackComponent?: never;
-  fallbackRender?: never;
-};
-
-export type ErrorBoundaryProps =
-  | ErrorBoundaryPropsWithFallback
-  | ErrorBoundaryPropsWithComponent
-  | ErrorBoundaryPropsWithRender;

package/src/lib/errors.ts

@@ -1,49 +0,0 @@
-type QueryType = "query" | "mutation";
-type RecordType = "users" | "roles";
-
-export class FetchError extends Error {
-  queryType: QueryType;
-  recordType: RecordType;
-  context: unknown;
-  constructor(args: {
-    message: string;
-    queryType: QueryType;
-    recordType: RecordType;
-    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: RecordType;
-  context: unknown;
-  constructor(args: {
-    message: string;
-    queryType: QueryType;
-    recordType: RecordType;
-    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/lib/generic-error.tsx

@@ -1,70 +0,0 @@
-import * as React from "react";
-import { Flex, Heading, Text } from "@radix-ui/themes";
-import { ApiError, FetchError, NoAuthTokenError } from "./errors";
-import { Cross2Icon } from "@radix-ui/react-icons";
-
-export function GenericError({ error }: { error: unknown }) {
-  React.useEffect(() => {
-    console.error(error);
-  }, [error]);
-
-  const render = (heading: string, message: React.ReactNode) => (
-    <Flex p="6" justify="center" align="center" direction="column">
-      <Flex
-        align="center"
-        justify="center"
-        width="32px"
-        height="32px"
-        mb="2"
-        style={{
-          borderRadius: "9999px",
-          backgroundColor: "var(--red-a4)",
-          color: "var(--red-a11)",
-        }}
-      >
-        <Cross2Icon width="24px" height="24px" />
-      </Flex>
-
-      <Flex direction="column" gap="1" maxWidth="420px">
-        <Heading size="5" align="center" mb="1" wrap="balance" as="h3">
-          {heading}
-        </Heading>
-
-        <Text as="p" align="center" wrap="balance" color="gray">
-          {message}
-        </Text>
-      </Flex>
-    </Flex>
-  );
-
-  if (error instanceof FetchError) {
-    return render(
-      "Error fetching data",
-      "An error occurred. You may need to configure CORS in the WorkOS Dashboard. " +
-        "Contact your organization admin for support.",
-    );
-  }
-
-  if (error instanceof NoAuthTokenError) {
-    return render(
-      "Error fetching data",
-      "Authorization error. You likely forgot to provide an authorization " +
-        "token to the Users Management Widget.",
-    );
-  }
-
-  if (error instanceof ApiError && error.status === 404) {
-    // The widgets API treats all authorization errors as 404s. If there is a
-    // legitimate 404, it's a bug on our end but there's currently no way to
-    // distinguish between the two.
-    return render(
-      "Error fetching data",
-      "Authorization error. Contact your organization admin for support.",
-    );
-  }
-
-  return render(
-    "Error fetching data",
-    "An unknown error occurred. If the problem continues, contact the site owner.",
-  );
-}

package/src/lib/icon-panel.tsx

@@ -1,26 +0,0 @@
-import { Flex, FlexProps } from "@radix-ui/themes";
-import { forwardRef } from "react";
-
-export const IconPanel = forwardRef<HTMLDivElement, FlexProps>(
-  function IconPanel({ children, ...props }, ref) {
-    return (
-      <Flex
-        ref={ref}
-        width="32px"
-        height="32px"
-        align="center"
-        justify="center"
-        style={{
-          borderWidth: 1,
-          borderStyle: "solid",
-          borderColor: "var(--gray-4)",
-          borderRadius: "var(--radius-3)",
-          backgroundColor: "var(--gray-2)",
-        }}
-        {...props}
-      >
-        {children}
-      </Flex>
-    );
-  },
-);

package/src/lib/icons.tsx

@@ -1,21 +0,0 @@
-import { SVGProps } from "react";
-
-export function PasskeyIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={16}
-      height={16}
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M5.86 1.005a2.86 2.86 0 1 0 0 5.719 2.86 2.86 0 0 0 0-5.72ZM2 3.865a3.86 3.86 0 1 1 4.899 3.717c.974.166 1.699.58 2.368 1.196a.5.5 0 1 1-.678.735C7.882 8.862 7.136 8.5 5.859 8.5c-2.036 0-3.195.693-3.867 1.613-.602.824-.86 1.893-.917 2.986h8.618a.5.5 0 0 1 0 1H.563a.5.5 0 0 1-.5-.5c0-1.356.248-2.88 1.121-4.076.743-1.018 1.897-1.741 3.582-1.957A3.861 3.861 0 0 1 2 3.864Zm12.185 6.509a2.892 2.892 0 1 0-2.212-.024v4.428L13.197 16l2.036-2.037-1.271-1.27 1.271-1.272-1.046-1.047Zm-.212-3.423a.847.847 0 1 1-1.695 0 .847.847 0 0 1 1.695 0Z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-}