@workos-inc/widgets 1.0.1 → 1.1.1

package/src/api/errors.ts

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

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

package/src/api/utils.ts

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

@@ -0,0 +1,86 @@
+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 } = 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 }
+        : {}),
+      "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

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

@@ -2,4 +2,7 @@ export {
   WorkOsWidgets,
   type WorkOsWidgetsProps,
 } from "./workos-widgets.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

@@ -0,0 +1,379 @@
+"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;
+}