@workos-inc/widgets 1.0.0 → 1.1.0

package/src/lib/elevated-access.tsx

@@ -0,0 +1,261 @@
+import * as Form from "@radix-ui/react-form";
+import { AlertDialog, Callout, Dialog, Flex, Text } from "@radix-ui/themes";
+import {
+  useElevatedAccessToken,
+  useMe,
+  useSendVerification,
+  useVerify,
+} from "@repo/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/generic-error.tsx

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,21 @@
+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>
+  );
+}

package/src/lib/invite-user-dialog.tsx

@@ -9,8 +9,6 @@ import {
   VisuallyHidden,
 } from "@radix-ui/themes";
 import * as React from "react";
-import { type Role, useRoles } from "./api/role";
-import { type InviteUserPayload, useInviteUser } from "./api/user";
 import {
   DialogContent,
   PrimaryButton,
@@ -22,6 +20,8 @@ import {
 } from "./elements";
 import { Label } from "./elements";
 import { isErrorLike } from "./utils";
+import { useInviteUser } from "./api/user";
+import { InviteMemberInput, MemberRole, useRoles } from "@repo/api";
 
 /**
  * Used to stub a fake value for the role select. It will be selected by default
@@ -41,7 +41,9 @@ export function InviteUserDialog({ children }: InviteUserDialogProps) {
   const formId = toId(dialogId, "form");
 
   const inviteUser = useInviteUser();
-  const rolesQuery = useRoles();
+  const rolesQuery = useRoles({
+    query: { initialData: [] },
+  });
   const roles = rolesQuery.data;
   const [selectedRole, setSelectedRole] = React.useState(
     () => getDefaultRole(roles)?.slug || PLACEHOLDER_ROLE,
@@ -58,15 +60,18 @@ export function InviteUserDialog({ children }: InviteUserDialogProps) {
     });
   }, [roles]);
 
-  const onSubmitForm = (data: InviteUserPayload) => {
+  const onSubmitForm = (data: InviteMemberInput) => {
     if (inviteUser.isPending || rolesQuery.status !== "success") {
       return;
     }
-    inviteUser.mutate(data, {
-      onSuccess: () => {
-        setOpen(false);
+    inviteUser.mutate(
+      { data },
+      {
+        onSuccess: () => {
+          setOpen(false);
+        },
       },
-    });
+    );
   };
 
   const formErrors = getFormErrors(inviteUser.error);
@@ -88,7 +93,7 @@ export function InviteUserDialog({ children }: InviteUserDialogProps) {
               event.preventDefault();
               onSubmitForm({
                 email: event.currentTarget.email.value,
-                role: selectedRole,
+                roles: [selectedRole],
               });
             }}
           >
@@ -317,6 +322,6 @@ function useFormFieldFocusOnError(dialogId: string, queryError: unknown) {
   }, [dialogId, queryError]);
 }
 
-function getDefaultRole(roles: Role[]) {
+function getDefaultRole(roles: MemberRole[]) {
   return roles.find((role) => role.default) || roles[0];
 }

package/src/lib/logout-all-sessions-dialog.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import * as React from "react";
+import { AlertDialog, Flex } from "@radix-ui/themes";
+import { type ReactNode } from "react";
+import {
+  AlertDialogContent,
+  DestructiveButton,
+  SecondaryButton,
+} from "./elements";
+import { getSessionsQueryKey, useRevokeAllSessions } from "@repo/api";
+import { useQueryClient } from "@tanstack/react-query";
+import { SaveButton } from "./save-button";
+
+interface LogoutAllSessionsDialogProps extends AlertDialog.RootProps {
+  children?: ReactNode;
+  currentSessionId: string;
+}
+
+export function LogoutAllSessionsDialog({
+  open,
+  onOpenChange,
+  children,
+  currentSessionId,
+  ...props
+}: LogoutAllSessionsDialogProps) {
+  const client = useQueryClient();
+
+  const revokeAllSessions = useRevokeAllSessions();
+
+  const onSubmitForm = () => {
+    revokeAllSessions.mutate({ data: { currentSessionId } });
+  };
+
+  const handleDone = React.useCallback(() => {
+    onOpenChange?.(false);
+
+    client.invalidateQueries({
+      queryKey: getSessionsQueryKey(),
+    });
+  }, [client, onOpenChange]);
+
+  return (
+    <AlertDialog.Root open={open} onOpenChange={onOpenChange} {...props}>
+      <AlertDialogContent maxWidth="480px">
+        <AlertDialog.Title>Sign out of all other devices?</AlertDialog.Title>
+        <AlertDialog.Description>
+          You will be logged out of all other active sessions on other devices,
+          except this one.
+        </AlertDialog.Description>
+
+        <Flex gap="3" justify="end" mt="5" asChild>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault();
+              onSubmitForm();
+            }}
+          >
+            <AlertDialog.Cancel>
+              <SecondaryButton
+                disabled={
+                  revokeAllSessions.isPending || revokeAllSessions.isSuccess
+                }
+              >
+                Cancel
+              </SecondaryButton>
+            </AlertDialog.Cancel>
+
+            <SaveButton
+              asChild
+              loading={revokeAllSessions.isPending}
+              done={revokeAllSessions.isSuccess}
+              onDone={handleDone}
+            >
+              <DestructiveButton type="submit">Sign out</DestructiveButton>
+            </SaveButton>
+          </form>
+        </Flex>
+      </AlertDialogContent>
+    </AlertDialog.Root>
+  );
+}

package/src/lib/logout-dialog.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import * as React from "react";
+import { AlertDialog, Flex, Strong } from "@radix-ui/themes";
+import { type ReactNode } from "react";
+import {
+  AlertDialogContent,
+  DestructiveButton,
+  SecondaryButton,
+} from "./elements";
+import {
+  ActiveSession,
+  getSessionsQueryKey,
+  useRevokeSession,
+} from "@repo/api";
+import { useQueryClient } from "@tanstack/react-query";
+import { SaveButton } from "./save-button";
+import { parseUserAgent } from "./utils";
+
+interface LogoutDialogProps extends AlertDialog.RootProps {
+  children?: ReactNode;
+  session: ActiveSession;
+}
+
+export function LogoutDialog({
+  children,
+  session,
+  open,
+  onOpenChange,
+  ...props
+}: LogoutDialogProps) {
+  const client = useQueryClient();
+  const userAgent = parseUserAgent(session.userAgent);
+  const device = userAgent.pretty;
+
+  const revokeSession = useRevokeSession();
+
+  const handleDone = React.useCallback(() => {
+    onOpenChange?.(false);
+
+    client.invalidateQueries({
+      queryKey: getSessionsQueryKey(),
+      exact: false,
+    });
+  }, [onOpenChange, client]);
+
+  const onSubmitForm = () => {
+    revokeSession.mutate({
+      sessionId: session.id,
+    });
+  };
+
+  return (
+    <AlertDialog.Root open={open} onOpenChange={onOpenChange} {...props}>
+      <AlertDialogContent maxWidth="480px">
+        <AlertDialog.Title>Sign out of device?</AlertDialog.Title>
+        <AlertDialog.Description>
+          You will be signed out of <Strong>{device}.</Strong>
+        </AlertDialog.Description>
+
+        <Flex gap="3" justify="end" mt="5" asChild>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault();
+              onSubmitForm();
+            }}
+          >
+            <AlertDialog.Cancel>
+              <SecondaryButton
+                disabled={revokeSession.isPending || revokeSession.isSuccess}
+              >
+                Cancel
+              </SecondaryButton>
+            </AlertDialog.Cancel>
+
+            <SaveButton
+              asChild
+              loading={revokeSession.isPending}
+              done={revokeSession.isSuccess}
+              onDone={handleDone}
+            >
+              <DestructiveButton type="submit">Sign out</DestructiveButton>
+            </SaveButton>
+          </form>
+        </Flex>
+      </AlertDialogContent>
+    </AlertDialog.Root>
+  );
+}

package/src/lib/marker.css

@@ -0,0 +1,81 @@
+.woswidgets-marker {
+  /* Reset letter-spacing so the Marker content doesn’t appear off-center when nested in other elements */
+  letter-spacing: 0;
+  line-height: normal;
+}
+.woswidgets-marker-circle::before {
+  background-color: var(--gray-a4);
+}
+
+.woswidgets-marker[data-accent-color] {
+  color: var(--accent-a11);
+}
+.woswidgets-marker[data-accent-color] .woswidgets-marker-circle::before {
+  background-color: var(--accent-a4);
+}
+
+.woswidgets-marker {
+  color: var(--gray-11);
+}
+
+.woswidgets-marker-circle {
+  position: relative;
+  text-align: center;
+  user-select: none;
+  height: 1em;
+  min-width: 1em;
+  padding-left: 0.05em;
+  padding-right: 0.05em;
+  box-sizing: border-box;
+
+  /* Would be easier to use "inline-flex", but that messes up copy-pasted text formatting */
+  display: inline-block;
+
+  /* Align middle of the element with the baseline plus half the x-height of the parent */
+  vertical-align: middle;
+
+  /* Add the missing half of the x-height to align with the middle of the parent */
+  top: -0.11em;
+
+  /* Collapse own line height so it doesn't influence the inner element position */
+  line-height: 0;
+}
+
+.woswidgets-marker-circle::before {
+  content: "";
+  position: absolute;
+  inset: -10%;
+  border-radius: 1em;
+}
+
+.woswidgets-marker-circle svg {
+  width: 1.125em;
+  height: 1.125em;
+}
+
+.woswidgets-marker-content {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: calc(0.8em * var(--marker-font-size-adjust, 1));
+  font-weight: var(--marker-font-weight, bold);
+  line-height: 1;
+  transform: translateY(-50%);
+  top: 50%;
+
+  /* We are trying to achieve "cursor: default", but also have the pointer finger cursor when Marker is inside a link */
+  /* Its ::before element will get pointer events anyway, so we are just getting rid of the text cursor on content. */
+  pointer-events: none;
+}
+
+.woswidgets-marker-hidden {
+  /* Make the text visually hidden without breaking copy-paste */
+  font-size: 0;
+  line-height: 0;
+
+  /* Prevent the dot from making it into copy-pasted text without the marker */
+  user-select: none;
+
+  /* Prevent copy-pasted whitespace from being collapsed when used in lists */
+  white-space: pre;
+}