@workos-inc/widgets 1.0.0 → 1.1.0

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 "@repo/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;
+}