feat: ability to download all the 2FA recovery codes (#944)

fixes #938 



https://github.com/documenso/documenso/assets/81948346/8bf807ae-41b0-417b-9f55-d96584e71acb

apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx

@@ -1,14 +1,12 @@
 import { useMemo } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { flushSync } from 'react-dom';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { renderSVG } from 'uqr';
 import { z } from 'zod';
 
+import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -54,14 +52,16 @@ export const EnableAuthenticatorAppDialog = ({
   open,
   onOpenChange,
 }: EnableAuthenticatorAppDialogProps) => {
-  const router = useRouter();
   const { toast } = useToast();
 
   const { mutateAsync: setupTwoFactorAuthentication, data: setupTwoFactorAuthenticationData } =
     trpc.twoFactorAuthentication.setup.useMutation();
 
-  const { mutateAsync: enableTwoFactorAuthentication, data: enableTwoFactorAuthenticationData } =
+  const {
-    trpc.twoFactorAuthentication.enable.useMutation();
+    mutateAsync: enableTwoFactorAuthentication,
+    data: enableTwoFactorAuthenticationData,
+    isLoading: isEnableTwoFactorAuthenticationDataLoading,
+  } = trpc.twoFactorAuthentication.enable.useMutation();
 
   const setupTwoFactorAuthenticationForm = useForm<TSetupTwoFactorAuthenticationForm>({
     defaultValues: {
@@ -115,6 +115,19 @@ export const EnableAuthenticatorAppDialog = ({
     }
   };
 
+  const downloadRecoveryCodes = () => {
+    if (enableTwoFactorAuthenticationData && enableTwoFactorAuthenticationData.recoveryCodes) {
+      const blob = new Blob([enableTwoFactorAuthenticationData.recoveryCodes.join('\n')], {
+        type: 'text/plain',
+      });
+
+      downloadFile({
+        filename: 'documenso-2FA-recovery-codes.txt',
+        data: blob,
+      });
+    }
+  };
+
   const onEnableTwoFactorAuthenticationFormSubmit = async ({
     token,
   }: TEnableTwoFactorAuthenticationForm) => {
@@ -136,14 +149,6 @@ export const EnableAuthenticatorAppDialog = ({
     }
   };
 
-  const onCompleteClick = () => {
-    flushSync(() => {
-      onOpenChange(false);
-    });
-
-    router.refresh();
-  };
-
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
@@ -270,9 +275,16 @@ export const EnableAuthenticatorAppDialog = ({
                 <RecoveryCodeList recoveryCodes={enableTwoFactorAuthenticationData.recoveryCodes} />
               )}
 
-              <div className="mt-4 flex w-full flex-row-reverse items-center justify-between">
+              <div className="mt-4 flex flex-row-reverse items-center gap-2">
-                <Button type="button" onClick={() => onCompleteClick()}>
+                <Button onClick={() => onOpenChange(false)}>Complete</Button>
-                  Complete
+
+                <Button
+                  variant="secondary"
+                  onClick={downloadRecoveryCodes}
+                  disabled={!enableTwoFactorAuthenticationData?.recoveryCodes}
+                  loading={isEnableTwoFactorAuthenticationDataLoading}
+                >
+                  Download
                 </Button>
               </div>
             </div>

apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx

@@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
+import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -42,8 +43,11 @@ export type ViewRecoveryCodesDialogProps = {
 export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCodesDialogProps) => {
   const { toast } = useToast();
 
-  const { mutateAsync: viewRecoveryCodes, data: viewRecoveryCodesData } =
+  const {
-    trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();
+    mutateAsync: viewRecoveryCodes,
+    data: viewRecoveryCodesData,
+    isLoading: isViewRecoveryCodesDataLoading,
+  } = trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();
 
   const viewRecoveryCodesForm = useForm<TViewRecoveryCodesForm>({
     defaultValues: {
@@ -62,6 +66,19 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
     return 'view';
   }, [viewRecoveryCodesData, isViewRecoveryCodesSubmitting]);
 
+  const downloadRecoveryCodes = () => {
+    if (viewRecoveryCodesData && viewRecoveryCodesData.recoveryCodes) {
+      const blob = new Blob([viewRecoveryCodesData.recoveryCodes.join('\n')], {
+        type: 'text/plain',
+      });
+
+      downloadFile({
+        filename: 'documenso-2FA-recovery-codes.txt',
+        data: blob,
+      });
+    }
+  };
+
   const onViewRecoveryCodesFormSubmit = async ({ password }: TViewRecoveryCodesForm) => {
     try {
       await viewRecoveryCodes({ password });
@@ -139,8 +156,17 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
                 <RecoveryCodeList recoveryCodes={viewRecoveryCodesData.recoveryCodes} />
               )}
 
-              <div className="mt-4 flex flex-row-reverse items-center justify-between">
+              <div className="mt-4 flex flex-row-reverse items-center gap-2">
                 <Button onClick={() => onOpenChange(false)}>Complete</Button>
+
+                <Button
+                  variant="secondary"
+                  disabled={!viewRecoveryCodesData?.recoveryCodes}
+                  loading={isViewRecoveryCodesDataLoading}
+                  onClick={downloadRecoveryCodes}
+                >
+                  Download
+                </Button>
               </div>
             </div>
           ))

packages/lib/client-only/download-file.ts

@@ -0,0 +1,19 @@
+export type DownloadFileOptions = {
+  filename: string;
+  data: Blob;
+};
+
+export const downloadFile = ({ filename, data }: DownloadFileOptions) => {
+  if (typeof window === 'undefined') {
+    throw new Error('downloadFile can only be called in browser environments');
+  }
+
+  const link = window.document.createElement('a');
+
+  link.href = window.URL.createObjectURL(data);
+  link.download = filename;
+
+  link.click();
+
+  window.URL.revokeObjectURL(link.href);
+};

packages/lib/client-only/download-pdf.ts

@@ -1,6 +1,7 @@
 import type { DocumentData } from '@documenso/prisma/client';
 
 import { getFile } from '../universal/upload/get-file';
+import { downloadFile } from './download-file';
 
 type DownloadPDFProps = {
   documentData: DocumentData;
@@ -14,16 +15,12 @@ export const downloadPDF = async ({ documentData, fileName }: DownloadPDFProps)
     type: 'application/pdf',
   });
 
-  const link = window.document.createElement('a');
-
   const [baseTitle] = fileName?.includes('.pdf')
     ? fileName.split('.pdf')
     : [fileName ?? 'document'];
 
-  link.href = window.URL.createObjectURL(blob);
+  downloadFile({
-  link.download = `${baseTitle}_signed.pdf`;
+    filename: baseTitle,
-
+    data: blob,
-  link.click();
+  });
-
-  window.URL.revokeObjectURL(link.href);
 };