feat: document 2fa

2025-11-15 09:12:02 +10:00 · 2025-07-22 14:08:03 +00:00
parent 9ea56a77ff
commit 43810c4357
29 changed files with 802 additions and 157 deletions
--- a/apps/remix/app/components/general/document-signing/document-signing-auth-2fa.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-auth-2fa.tsx
@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
@ -6,9 +6,9 @@ import { RecipientRole } from '@prisma/client';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';

-import { AppError } from '@documenso/lib/errors/app-error';
 import { DocumentAuth, type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { DialogFooter } from '@documenso/ui/primitives/dialog';
 import {
@ -20,6 +20,8 @@ import {
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { useToast } from '@documenso/ui/primitives/use-toast';

 import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';

@ -51,6 +53,7 @@ export const DocumentSigningAuth2FA = ({
 }: DocumentSigningAuth2FAProps) => {
  const { recipient, user, isCurrentlyAuthenticating, setIsCurrentlyAuthenticating } =
    useRequiredDocumentSigningAuthContext();
+  const { toast } = useToast();

  const form = useForm<T2FAAuthFormSchema>({
    resolver: zodResolver(Z2FAAuthFormSchema),
@ -60,27 +63,104 @@ export const DocumentSigningAuth2FA = ({
  });

  const [is2FASetupSuccessful, setIs2FASetupSuccessful] = useState(false);
-  const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
+  const [isEmailCodeSent, setIsEmailCodeSent] = useState(false);
+  const [isEmailCodeSending, setIsEmailCodeSending] = useState(false);
+  const [canResendEmail, setCanResendEmail] = useState(true);
+  const [resendCountdown, setResendCountdown] = useState(0);
+  const countdownTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const [verificationMethod, setVerificationMethod] = useState<'app' | 'email'>(
+    user?.twoFactorEnabled ? 'app' : 'email',
+  );
+  const emailSendInitiatedRef = useRef(false);
+
+  const sendVerificationMutation = trpc.auth.sendEmailVerification.useMutation({
+    onSuccess: () => {
+      setIsEmailCodeSent(true);
+      setCanResendEmail(false);
+      setResendCountdown(60);
+
+      countdownTimerRef.current = setInterval(() => {
+        setResendCountdown((prev) => {
+          if (prev <= 1) {
+            if (countdownTimerRef.current) {
+              clearInterval(countdownTimerRef.current);
+            }
+            setCanResendEmail(true);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+
+      toast({
+        title: 'Verification code sent',
+        description: `A verification code has been sent to ${recipient.email}`,
+      });
+    },
+    onError: (error) => {
+      console.error('Failed to send verification code', error);
+      toast({
+        title: 'Failed to send verification code',
+        description: 'Please try again or contact support',
+        variant: 'destructive',
+      });
+    },
+    onSettled: () => {
+      setIsEmailCodeSending(false);
+    },
+  });
+
+  const verifyCodeMutation = trpc.auth.verifyEmailCode.useMutation();
+
+  const sendEmailVerificationCode = async () => {
+    try {
+      setIsEmailCodeSending(true);
+      await sendVerificationMutation.mutateAsync({
+        recipientId: recipient.id,
+      });
+    } catch (error) {
+      toast({
+        title: 'Failed to send verification code',
+        description: 'Please try again.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (countdownTimerRef.current) {
+        clearInterval(countdownTimerRef.current);
+      }
+    };
+  }, []);

  const onFormSubmit = async ({ token }: T2FAAuthFormSchema) => {
    try {
      setIsCurrentlyAuthenticating(true);

+      if (verificationMethod === 'email') {
+        await verifyCodeMutation.mutateAsync({
+          code: token,
+          recipientId: recipient.id,
+        });
+      }
+
      await onReauthFormSubmit({
        type: DocumentAuth.TWO_FACTOR_AUTH,
        token,
      });

      setIsCurrentlyAuthenticating(false);
-
      onOpenChange(false);
    } catch (err) {
      setIsCurrentlyAuthenticating(false);

-      const error = AppError.parseError(err);
-      setFormErrorCode(error.code);
-
-      // Todo: Alert.
+      toast({
+        title: 'Unauthorized',
+        description: 'We were unable to verify your details.',
+        variant: 'destructive',
+      });
    }
  };

@ -90,21 +170,46 @@ export const DocumentSigningAuth2FA = ({
    });

    setIs2FASetupSuccessful(false);
-    setFormErrorCode(null);
+    setIsEmailCodeSent(false);

-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+    if (open && !user?.twoFactorEnabled) {
+      setVerificationMethod('email');
+    }
+  }, [open, user?.twoFactorEnabled, form]);

-  if (!user?.twoFactorEnabled && !is2FASetupSuccessful) {
+  useEffect(() => {
+    if (!open || verificationMethod !== 'email') {
+      emailSendInitiatedRef.current = false;
+    }
+  }, [open, verificationMethod]);
+
+  useEffect(() => {
+    if (open && verificationMethod === 'email' && !isEmailCodeSent && !isEmailCodeSending) {
+      if (!emailSendInitiatedRef.current) {
+        emailSendInitiatedRef.current = true;
+        void sendEmailVerificationCode();
+      }
+    }
+  }, [open, verificationMethod, isEmailCodeSent, isEmailCodeSending]);
+
+  if (verificationMethod === 'app' && !user?.twoFactorEnabled && !is2FASetupSuccessful) {
    return (
      <div className="space-y-4">
+        <Tabs
+          value={verificationMethod}
+          onValueChange={(val) => setVerificationMethod(val as 'app' | 'email')}
+        >
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="app">Authenticator App</TabsTrigger>
+            <TabsTrigger value="email">Email Verification</TabsTrigger>
+          </TabsList>
+        </Tabs>
        <Alert variant="warning">
          <AlertDescription>
            <p>
              {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT' ? (
                <Trans>You need to setup 2FA to mark this document as viewed.</Trans>
              ) : (
-                // Todo: Translate
                `You need to setup 2FA to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}.`
              )}
            </p>
@ -129,59 +234,106 @@ export const DocumentSigningAuth2FA = ({
  }

  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
-        <fieldset disabled={isCurrentlyAuthenticating}>
-          <div className="space-y-4">
-            <FormField
-              control={form.control}
-              name="token"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel required>2FA token</FormLabel>
+    <div className="space-y-4">
+      {user?.twoFactorEnabled && (
+        <Tabs
+          value={verificationMethod}
+          onValueChange={(val) => setVerificationMethod(val as 'app' | 'email')}
+        >
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="app">Authenticator App</TabsTrigger>
+            <TabsTrigger value="email">Email Verification</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      )}

-                  <FormControl>
-                    <PinInput {...field} value={field.value ?? ''} maxLength={6}>
-                      {Array(6)
-                        .fill(null)
-                        .map((_, i) => (
-                          <PinInputGroup key={i}>
-                            <PinInputSlot index={i} />
-                          </PinInputGroup>
-                        ))}
-                    </PinInput>
-                  </FormControl>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            {formErrorCode && (
-              <Alert variant="destructive">
-                <AlertTitle>
-                  <Trans>Unauthorized</Trans>
-                </AlertTitle>
-                <AlertDescription>
-                  <Trans>
-                    We were unable to verify your details. Please try again or contact support
-                  </Trans>
-                </AlertDescription>
-              </Alert>
+      {verificationMethod === 'email' && (
+        <Alert variant="secondary">
+          <AlertDescription>
+            {isEmailCodeSent ? (
+              <p>
+                <Trans>
+                  A verification code has been sent to {recipient.email}. Please enter it below to
+                  continue.
+                </Trans>
+              </p>
+            ) : (
+              <p>
+                <Trans>
+                  We'll send a verification code to {recipient.email} to verify your identity.
+                </Trans>
+              </p>
            )}
+          </AlertDescription>
+        </Alert>
+      )}

-            <DialogFooter>
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                <Trans>Cancel</Trans>
-              </Button>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onFormSubmit)}>
+          <fieldset disabled={isCurrentlyAuthenticating}>
+            <div className="space-y-4">
+              <FormField
+                control={form.control}
+                name="token"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      {verificationMethod === 'app' ? (
+                        <Trans>2FA token</Trans>
+                      ) : (
+                        <Trans>Verification code</Trans>
+                      )}
+                    </FormLabel>

-              <Button type="submit" loading={isCurrentlyAuthenticating}>
-                <Trans>Sign</Trans>
-              </Button>
-            </DialogFooter>
-          </div>
-        </fieldset>
-      </form>
-    </Form>
+                    <FormControl>
+                      <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                        {Array(6)
+                          .fill(null)
+                          .map((_, i) => (
+                            <PinInputGroup key={i}>
+                              <PinInputSlot index={i} />
+                            </PinInputGroup>
+                          ))}
+                      </PinInput>
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {verificationMethod === 'email' && (
+                <div className="flex justify-center">
+                  <Button
+                    type="button"
+                    variant="link"
+                    disabled={isEmailCodeSending || !canResendEmail}
+                    onClick={() => void sendEmailVerificationCode()}
+                  >
+                    {isEmailCodeSending ? (
+                      <Trans>Sending...</Trans>
+                    ) : !canResendEmail ? (
+                      <Trans>Resend code ({resendCountdown}s)</Trans>
+                    ) : (
+                      <Trans>Resend code</Trans>
+                    )}
+                  </Button>
+                </div>
+              )}
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" loading={isCurrentlyAuthenticating}>
+                  <Trans>{actionTarget === 'DOCUMENT' ? 'Sign Document' : 'Sign Field'}</Trans>
+                </Button>
+              </DialogFooter>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
+    </div>
  );
 };
--- a/apps/remix/app/components/general/document-signing/document-signing-auth-dialog.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-auth-dialog.tsx
@ -43,6 +43,7 @@ export const DocumentSigningAuthDialog = ({
  title,
  description,
  availableAuthTypes,
+  actionTarget,
  open,
  onOpenChange,
  onReauthFormSubmit,
@ -107,15 +108,32 @@ export const DocumentSigningAuthDialog = ({
                >
                  <ChevronLeftIcon className="h-4 w-4" />
                </Button>
-                <span>{title || <Trans>Sign field</Trans>}</span>
+                <span>
+                  {title ||
+                    (actionTarget === 'DOCUMENT' ? (
+                      <Trans>Sign document</Trans>
+                    ) : (
+                      <Trans>Sign field</Trans>
+                    ))}
+                </span>
              </div>
            )}
            {(!selectedAuthType || validAuthTypes.length === 1) &&
-              (title || <Trans>Sign field</Trans>)}
+              (title ||
+                (actionTarget === 'DOCUMENT' ? (
+                  <Trans>Sign document</Trans>
+                ) : (
+                  <Trans>Sign field</Trans>
+                )))}
          </DialogTitle>

          <DialogDescription>
-            {description || <Trans>Reauthentication is required to sign this field</Trans>}
+            {description || (
+              <Trans>
+                Reauthentication is required to sign this{' '}
+                {actionTarget === 'DOCUMENT' ? 'document' : 'field'}
+              </Trans>
+            )}
          </DialogDescription>
        </DialogHeader>

@ -180,6 +198,7 @@ export const DocumentSigningAuthDialog = ({
            ))
            .with({ documentAuthType: DocumentAuth.TWO_FACTOR_AUTH }, () => (
              <DocumentSigningAuth2FA
+                actionTarget={actionTarget === 'DOCUMENT' ? 'DOCUMENT' : 'FIELD'}
                open={open}
                onOpenChange={onOpenChange}
                onReauthFormSubmit={onReauthFormSubmit}
--- a/apps/remix/app/components/general/document-signing/document-signing-auth-provider.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-auth-provider.tsx
@ -42,6 +42,7 @@ export type DocumentSigningAuthContextValue = {
  setPreferredPasskeyId: (_value: string | null) => void;
  user?: SessionUser | null;
  refetchPasskeys: () => Promise<void>;
+  isEnterprise: boolean;
 };

 const DocumentSigningAuthContext = createContext<DocumentSigningAuthContextValue | null>(null);
@ -65,6 +66,7 @@ export interface DocumentSigningAuthProviderProps {
  recipient: Recipient;
  user?: SessionUser | null;
  children: React.ReactNode;
+  isEnterprise: boolean;
 }

 export const DocumentSigningAuthProvider = ({
@ -72,6 +74,7 @@ export const DocumentSigningAuthProvider = ({
  recipient: initialRecipient,
  user,
  children,
+  isEnterprise,
 }: DocumentSigningAuthProviderProps) => {
  const [documentAuthOptions, setDocumentAuthOptions] = useState(initialDocumentAuthOptions);
  const [recipient, setRecipient] = useState(initialRecipient);
@ -144,8 +147,13 @@ export const DocumentSigningAuthProvider = ({
  }, [derivedRecipientActionAuth, user, recipient]);

  const executeActionAuthProcedure = async (options: ExecuteActionAuthProcedureOptions) => {
-    // Directly run callback if no auth required.
-    if (!derivedRecipientActionAuth || options.actionTarget !== FieldType.SIGNATURE) {
+    // Determine if authentication is required based on enterprise status and action target.
+    const requiresAuthTrigger = isEnterprise
+      ? derivedRecipientActionAuth && options.actionTarget === FieldType.SIGNATURE
+      : derivedRecipientActionAuth && options.actionTarget === 'DOCUMENT';
+
+    // Directly run callback if no auth trigger is needed.
+    if (!requiresAuthTrigger) {
      await options.onReauthFormSubmit();
      return;
    }
@ -205,6 +213,7 @@ export const DocumentSigningAuthProvider = ({
        preferredPasskeyId,
        setPreferredPasskeyId,
        refetchPasskeys,
+        isEnterprise,
      }}
    >
      {children}
@ -225,6 +234,8 @@ export const DocumentSigningAuthProvider = ({
 type ExecuteActionAuthProcedureOptions = Omit<
  DocumentSigningAuthDialogProps,
  'open' | 'onOpenChange' | 'documentAuthType' | 'recipientRole' | 'availableAuthTypes'
->;
+> & {
+  actionTarget: FieldType | 'DOCUMENT';
+};

 DocumentSigningAuthProvider.displayName = 'DocumentSigningAuthProvider';
--- a/apps/remix/app/components/general/document-signing/document-signing-form.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-form.tsx
@ -28,6 +28,7 @@ import {
  AssistantConfirmationDialog,
  type NextSigner,
 } from '../../dialogs/assistant-confirmation-dialog';
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';

@ -39,6 +40,7 @@ export type DocumentSigningFormProps = {
  isRecipientsTurn: boolean;
  allRecipients?: RecipientWithFields[];
  setSelectedSignerId?: (id: number | null) => void;
+  isEnterprise: boolean;
 };

 export const DocumentSigningForm = ({
@ -49,6 +51,7 @@ export const DocumentSigningForm = ({
  isRecipientsTurn,
  allRecipients = [],
  setSelectedSignerId,
+  isEnterprise,
 }: DocumentSigningFormProps) => {
  const { sessionData } = useOptionalSession();
  const user = sessionData?.user;
@ -62,6 +65,7 @@ export const DocumentSigningForm = ({
  const assistantSignersId = useId();

  const { fullName, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();

  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
  const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
@ -114,11 +118,16 @@ export const DocumentSigningForm = ({
    setIsAssistantSubmitting(true);

    try {
-      await completeDocument(undefined, nextSigner);
+      await executeActionAuthProcedure({
+        actionTarget: 'DOCUMENT',
+        onReauthFormSubmit: async (authOptions) => {
+          await completeDocument(authOptions, nextSigner);
+        },
+      });
    } catch (err) {
      toast({
-        title: 'Error',
-        description: 'An error occurred while completing the document. Please try again.',
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while completing the document. Please try again.`),
        variant: 'destructive',
      });

@ -229,7 +238,12 @@ export const DocumentSigningForm = ({
                    fields={fields}
                    fieldsValidated={fieldsValidated}
                    onSignatureComplete={async (nextSigner) => {
-                      await completeDocument(undefined, nextSigner);
+                      await executeActionAuthProcedure({
+                        actionTarget: 'DOCUMENT',
+                        onReauthFormSubmit: async (authOptions) => {
+                          await completeDocument(authOptions, nextSigner);
+                        },
+                      });
                    }}
                    role={recipient.role}
                    allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
@ -409,7 +423,12 @@ export const DocumentSigningForm = ({
                    fieldsValidated={fieldsValidated}
                    disabled={!isRecipientsTurn}
                    onSignatureComplete={async (nextSigner) => {
-                      await completeDocument(undefined, nextSigner);
+                      await executeActionAuthProcedure({
+                        actionTarget: 'DOCUMENT',
+                        onReauthFormSubmit: async (authOptions) => {
+                          await completeDocument(authOptions, nextSigner);
+                        },
+                      });
                    }}
                    role={recipient.role}
                    allowDictateNextSigner={
--- a/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx
@ -48,6 +48,7 @@ export type DocumentSigningPageViewProps = {
  isRecipientsTurn: boolean;
  allRecipients?: RecipientWithFields[];
  includeSenderDetails: boolean;
+  isEnterprise: boolean;
 };

 export const DocumentSigningPageView = ({
@ -58,6 +59,7 @@ export const DocumentSigningPageView = ({
  isRecipientsTurn,
  allRecipients = [],
  includeSenderDetails,
+  isEnterprise,
 }: DocumentSigningPageViewProps) => {
  const { documentData, documentMeta } = document;

@ -154,6 +156,7 @@ export const DocumentSigningPageView = ({
              isRecipientsTurn={isRecipientsTurn}
              allRecipients={allRecipients}
              setSelectedSignerId={setSelectedSignerId}
+              isEnterprise={isEnterprise}
            />
          </div>
        </div>
--- a/apps/remix/app/components/general/template/template-edit-form.tsx
+++ b/apps/remix/app/components/general/template/template-edit-form.tsx
@ -156,7 +156,7 @@ export const TemplateEditForm = ({

      toast({
        title: _(msg`Error`),
-        description: _(msg`An error occurred while updating the document settings.`),
+        description: _(msg`An error occurred while updating the template settings.`),
        variant: 'destructive',
      });
    }
--- a/apps/remix/app/routes/_recipient+/d.$token+/_index.tsx
+++ b/apps/remix/app/routes/_recipient+/d.$token+/_index.tsx
@ -94,6 +94,7 @@ export default function DirectTemplatePage() {
        documentAuthOptions={template.authOptions}
        recipient={directTemplateRecipient}
        user={user}
+        isEnterprise={false}
      >
        <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
          <h1
--- a/apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx
+++ b/apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx
@ -19,6 +19,7 @@ import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get
 import { getRecipientsForAssistant } from '@documenso/lib/server-only/recipient/get-recipients-for-assistant';
 import { getTeamSettings } from '@documenso/lib/server-only/team/get-team-settings';
 import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
+import { isUserEnterprise } from '@documenso/lib/server-only/user/is-user-enterprise';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';

@ -41,6 +42,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
    throw new Response('Not Found', { status: 404 });
  }

+  const isEnterprise = user?.id
+    ? await isUserEnterprise({ userId: user.id }).catch(() => false)
+    : false;
+
  const [document, recipient, fields, completedFields] = await Promise.all([
    getDocumentAndSenderByToken({
      token,
@ -116,6 +121,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
      isDocumentAccessValid: false,
      recipientEmail: recipient.email,
      recipientHasAccount,
+      isEnterprise,
    } as const);
  }

@ -153,6 +159,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
    recipientSignature,
    isRecipientsTurn,
    includeSenderDetails: settings.includeSenderDetails,
+    isEnterprise,
  } as const);
 }

@ -181,6 +188,7 @@ export default function SigningPage() {
    allRecipients,
    includeSenderDetails,
    recipientWithFields,
+    isEnterprise,
  } = data;

  if (document.deletedAt || document.status === DocumentStatus.REJECTED) {
@ -246,6 +254,7 @@ export default function SigningPage() {
        documentAuthOptions={document.authOptions}
        recipient={recipient}
        user={user}
+        isEnterprise={isEnterprise}
      >
        <DocumentSigningPageView
          recipient={recipientWithFields}
@ -255,6 +264,7 @@ export default function SigningPage() {
          isRecipientsTurn={isRecipientsTurn}
          allRecipients={allRecipients}
          includeSenderDetails={includeSenderDetails}
+          isEnterprise={isEnterprise}
        />
      </DocumentSigningAuthProvider>
    </DocumentSigningProvider>
--- a/apps/remix/app/routes/embed+/_v0+/direct.$url.tsx
+++ b/apps/remix/app/routes/embed+/_v0+/direct.$url.tsx
@ -88,6 +88,8 @@ export async function loader({ params, request }: Route.LoaderArgs) {

  const fields = template.fields.filter((field) => field.recipientId === directTemplateRecipientId);

+  const isEnterpriseDocument = Boolean(organisationClaim);
+
  return superLoaderJson({
    token,
    user,
@ -96,12 +98,21 @@ export async function loader({ params, request }: Route.LoaderArgs) {
    fields,
    hidePoweredBy,
    allowEmbedSigningWhitelabel,
+    isEnterpriseDocument,
  });
 }

 export default function EmbedDirectTemplatePage() {
-  const { token, user, template, recipient, fields, hidePoweredBy, allowEmbedSigningWhitelabel } =
-    useSuperLoaderData<typeof loader>();
+  const {
+    token,
+    user,
+    template,
+    recipient,
+    fields,
+    hidePoweredBy,
+    allowEmbedSigningWhitelabel,
+    isEnterpriseDocument,
+  } = useSuperLoaderData<typeof loader>();

  return (
    <DocumentSigningProvider
@ -116,6 +127,7 @@ export default function EmbedDirectTemplatePage() {
        documentAuthOptions={template.authOptions}
        recipient={recipient}
        user={user}
+        isEnterprise={isEnterpriseDocument}
      >
        <DocumentSigningRecipientProvider recipient={recipient}>
          <EmbedDirectTemplateClientPage
--- a/apps/remix/app/routes/embed+/_v0+/sign.$url.tsx
+++ b/apps/remix/app/routes/embed+/_v0+/sign.$url.tsx
@ -109,6 +109,8 @@ export async function loader({ params, request }: Route.LoaderArgs) {
        })
      : [];

+  const isEnterpriseDocument = Boolean(organisationClaim);
+
  return superLoaderJson({
    token,
    user,
@ -119,6 +121,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
    completedFields,
    hidePoweredBy,
    allowEmbedSigningWhitelabel,
+    isEnterpriseDocument,
  });
 }

@ -133,6 +136,7 @@ export default function EmbedSignDocumentPage() {
    completedFields,
    hidePoweredBy,
    allowEmbedSigningWhitelabel,
+    isEnterpriseDocument,
  } = useSuperLoaderData<typeof loader>();

  return (
@ -148,6 +152,7 @@ export default function EmbedSignDocumentPage() {
        documentAuthOptions={document.authOptions}
        recipient={recipient}
        user={user}
+        isEnterprise={isEnterpriseDocument}
      >
        <EmbedSignDocumentClientPage
          token={token}
--- a/apps/remix/app/routes/embed+/v1+/multisign+/_index.tsx
+++ b/apps/remix/app/routes/embed+/v1+/multisign+/_index.tsx
@ -48,6 +48,7 @@ export async function loader({ request }: Route.LoaderArgs) {
      user,
      hidePoweredBy: false,
      allowWhitelabelling: false,
+      isEnterprise: false,
    });
  }

@ -55,17 +56,19 @@ export async function loader({ request }: Route.LoaderArgs) {

  const allowWhitelabelling = organisationClaim.flags.embedSigningWhiteLabel;
  const hidePoweredBy = organisationClaim.flags.hidePoweredBy;
+  const isEnterprise = Boolean(organisationClaim.flags.cfr21);

  return superLoaderJson({
    envelopes,
    user,
    hidePoweredBy,
    allowWhitelabelling,
+    isEnterprise,
  });
 }

 export default function MultisignPage() {
-  const { envelopes, user, hidePoweredBy, allowWhitelabelling } =
+  const { envelopes, user, hidePoweredBy, allowWhitelabelling, isEnterprise } =
    useSuperLoaderData<typeof loader>();
  const revalidator = useRevalidator();

@ -264,6 +267,7 @@ export default function MultisignPage() {
            documentAuthOptions={selectedDocument.authOptions}
            recipient={selectedRecipient}
            user={user}
+            isEnterprise={isEnterprise}
          >
            <DocumentSigningRecipientProvider recipient={selectedRecipient} targetSigner={null}>
              <MultiSignDocumentSigningView