feat: autoplace fields from placeholders

.env.example

@@ -13,6 +13,10 @@ NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="DEADBEEF"
 # https://docs.documenso.com/developers/self-hosting/setting-up-oauth-providers#google-oauth-gmail
 NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
 NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
+# Find documentation on setting up Microsoft OAuth here:
+# https://docs.documenso.com/developers/self-hosting/setting-up-oauth-providers#microsoft-oauth-azure-ad
+NEXT_PRIVATE_MICROSOFT_CLIENT_ID=""
+NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET=""
 
 NEXT_PRIVATE_OIDC_WELL_KNOWN=""
 NEXT_PRIVATE_OIDC_CLIENT_ID=""

apps/documentation/pages/developers/self-hosting/setting-up-oauth-providers.mdx

@@ -27,3 +27,33 @@ NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=<your-client-secret>
 ```
 
 Finally verify the signing in with Google works by signing in with your Google account and checking the email address in your profile.
+
+## Microsoft OAuth (Azure AD)
+
+To use Microsoft OAuth, you will need to create an Azure AD application registration in the Microsoft Azure portal. This will allow users to sign in with their Microsoft accounts.
+
+### Create and configure a new Azure AD application
+
+1. Go to the [Azure Portal](https://portal.azure.com/)
+2. Navigate to **Azure Active Directory** (or **Microsoft Entra ID** in newer Azure portals)
+3. In the left sidebar, click **App registrations**
+4. Click **New registration**
+5. Enter a name for your application (e.g., "Documenso")
+6. Under **Supported account types**, select **Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)** to allow any Microsoft account to sign in
+7. Under **Redirect URI**, select **Web** and enter: `https://<documenso-domain>/api/auth/callback/microsoft`
+8. Click **Register**
+
+### Configure the application
+
+1. After registration, you'll be taken to the app's overview page
+2. Copy the **Application (client) ID** - this will be your `NEXT_PRIVATE_MICROSOFT_CLIENT_ID`
+3. In the left sidebar, click **Certificates & secrets**
+4. Under **Client secrets**, click **New client secret**
+5. Add a description and select an expiration period
+6. Click **Add** and copy the **Value** (not the Secret ID) - this will be your `NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET`
+7. In the Documenso environment variables, set the following:
+
+```
+NEXT_PRIVATE_MICROSOFT_CLIENT_ID=<your-application-client-id>
+NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET=<your-client-secret-value>
+```

apps/remix/app/components/forms/signin.tsx

@@ -70,6 +70,7 @@ export type SignInFormProps = {
   className?: string;
   initialEmail?: string;
   isGoogleSSOEnabled?: boolean;
+  isMicrosoftSSOEnabled?: boolean;
   isOIDCSSOEnabled?: boolean;
   oidcProviderLabel?: string;
   returnTo?: string;
@@ -79,6 +80,7 @@ export const SignInForm = ({
   className,
   initialEmail,
   isGoogleSSOEnabled,
+  isMicrosoftSSOEnabled,
   isOIDCSSOEnabled,
   oidcProviderLabel,
   returnTo,
@@ -95,6 +97,8 @@ export const SignInForm = ({
     'totp' | 'backup'
   >('totp');
 
+  const hasSocialAuthEnabled = isGoogleSSOEnabled || isMicrosoftSSOEnabled || isOIDCSSOEnabled;
+
   const [isPasskeyLoading, setIsPasskeyLoading] = useState(false);
 
   const redirectPath = useMemo(() => {
@@ -271,6 +275,22 @@ export const SignInForm = ({
     }
   };
 
+  const onSignInWithMicrosoftClick = async () => {
+    try {
+      await authClient.microsoft.signIn({
+        redirectPath,
+      });
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to sign you In. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
   const onSignInWithOIDCClick = async () => {
     try {
       await authClient.oidc.signIn({
@@ -363,7 +383,7 @@ export const SignInForm = ({
             {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
           </Button>
 
-          {(isGoogleSSOEnabled || isOIDCSSOEnabled) && (
+          {hasSocialAuthEnabled && (
             <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
               <div className="bg-border h-px flex-1" />
               <span className="text-muted-foreground bg-transparent">
@@ -387,6 +407,20 @@ export const SignInForm = ({
             </Button>
           )}
 
+          {isMicrosoftSSOEnabled && (
+            <Button
+              type="button"
+              size="lg"
+              variant="outline"
+              className="bg-background text-muted-foreground border"
+              disabled={isSubmitting}
+              onClick={onSignInWithMicrosoftClick}
+            >
+              <img className="mr-2 h-4 w-4" alt="Microsoft Logo" src={'/static/microsoft.svg'} />
+              Microsoft
+            </Button>
+          )}
+
           {isOIDCSSOEnabled && (
             <Button
               type="button"

apps/remix/app/components/forms/signup.tsx

@@ -66,6 +66,7 @@ export type SignUpFormProps = {
   className?: string;
   initialEmail?: string;
   isGoogleSSOEnabled?: boolean;
+  isMicrosoftSSOEnabled?: boolean;
   isOIDCSSOEnabled?: boolean;
 };
 
@@ -73,6 +74,7 @@ export const SignUpForm = ({
   className,
   initialEmail,
   isGoogleSSOEnabled,
+  isMicrosoftSSOEnabled,
   isOIDCSSOEnabled,
 }: SignUpFormProps) => {
   const { _ } = useLingui();
@@ -84,6 +86,8 @@ export const SignUpForm = ({
 
   const utmSrc = searchParams.get('utm_source') ?? null;
 
+  const hasSocialAuthEnabled = isGoogleSSOEnabled || isMicrosoftSSOEnabled || isOIDCSSOEnabled;
+
   const form = useForm<TSignUpFormSchema>({
     values: {
       name: '',
@@ -148,6 +152,20 @@ export const SignUpForm = ({
     }
   };
 
+  const onSignUpWithMicrosoftClick = async () => {
+    try {
+      await authClient.microsoft.signIn();
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to sign you Up. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
   const onSignUpWithOIDCClick = async () => {
     try {
       await authClient.oidc.signIn();
@@ -227,7 +245,7 @@ export const SignUpForm = ({
             <fieldset
               className={cn(
                 'flex h-[550px] w-full flex-col gap-y-4',
-                (isGoogleSSOEnabled || isOIDCSSOEnabled) && 'h-[650px]',
+                hasSocialAuthEnabled && 'h-[650px]',
               )}
               disabled={isSubmitting}
             >
@@ -302,7 +320,7 @@ export const SignUpForm = ({
                 )}
               />
 
-              {(isGoogleSSOEnabled || isOIDCSSOEnabled) && (
+              {hasSocialAuthEnabled && (
                 <>
                   <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
                     <div className="bg-border h-px flex-1" />
@@ -330,6 +348,26 @@ export const SignUpForm = ({
                 </>
               )}
 
+              {isMicrosoftSSOEnabled && (
+                <>
+                  <Button
+                    type="button"
+                    size="lg"
+                    variant={'outline'}
+                    className="bg-background text-muted-foreground border"
+                    disabled={isSubmitting}
+                    onClick={onSignUpWithMicrosoftClick}
+                  >
+                    <img
+                      className="mr-2 h-4 w-4"
+                      alt="Microsoft Logo"
+                      src={'/static/microsoft.svg'}
+                    />
+                    <Trans>Sign Up with Microsoft</Trans>
+                  </Button>
+                </>
+              )}
+
               {isOIDCSSOEnabled && (
                 <>
                   <Button

apps/remix/app/routes/_unauthenticated+/signin.tsx

@@ -4,6 +4,7 @@ import { Link, redirect } from 'react-router';
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
 import {
   IS_GOOGLE_SSO_ENABLED,
+  IS_MICROSOFT_SSO_ENABLED,
   IS_OIDC_SSO_ENABLED,
   OIDC_PROVIDER_LABEL,
 } from '@documenso/lib/constants/auth';
@@ -23,6 +24,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 
   // SSR env variables.
   const isGoogleSSOEnabled = IS_GOOGLE_SSO_ENABLED;
+  const isMicrosoftSSOEnabled = IS_MICROSOFT_SSO_ENABLED;
   const isOIDCSSOEnabled = IS_OIDC_SSO_ENABLED;
   const oidcProviderLabel = OIDC_PROVIDER_LABEL;
 
@@ -32,13 +34,15 @@ export async function loader({ request }: Route.LoaderArgs) {
 
   return {
     isGoogleSSOEnabled,
+    isMicrosoftSSOEnabled,
     isOIDCSSOEnabled,
     oidcProviderLabel,
   };
 }
 
 export default function SignIn({ loaderData }: Route.ComponentProps) {
-  const { isGoogleSSOEnabled, isOIDCSSOEnabled, oidcProviderLabel } = loaderData;
+  const { isGoogleSSOEnabled, isMicrosoftSSOEnabled, isOIDCSSOEnabled, oidcProviderLabel } =
+    loaderData;
 
   return (
     <div className="w-screen max-w-lg px-4">
@@ -54,6 +58,7 @@ export default function SignIn({ loaderData }: Route.ComponentProps) {
 
         <SignInForm
           isGoogleSSOEnabled={isGoogleSSOEnabled}
+          isMicrosoftSSOEnabled={isMicrosoftSSOEnabled}
           isOIDCSSOEnabled={isOIDCSSOEnabled}
           oidcProviderLabel={oidcProviderLabel}
         />

apps/remix/app/routes/_unauthenticated+/signup.tsx

@@ -1,6 +1,10 @@
 import { redirect } from 'react-router';
 
-import { IS_GOOGLE_SSO_ENABLED, IS_OIDC_SSO_ENABLED } from '@documenso/lib/constants/auth';
+import {
+  IS_GOOGLE_SSO_ENABLED,
+  IS_MICROSOFT_SSO_ENABLED,
+  IS_OIDC_SSO_ENABLED,
+} from '@documenso/lib/constants/auth';
 import { env } from '@documenso/lib/utils/env';
 
 import { SignUpForm } from '~/components/forms/signup';
@@ -17,6 +21,7 @@ export function loader() {
 
   // SSR env variables.
   const isGoogleSSOEnabled = IS_GOOGLE_SSO_ENABLED;
+  const isMicrosoftSSOEnabled = IS_MICROSOFT_SSO_ENABLED;
   const isOIDCSSOEnabled = IS_OIDC_SSO_ENABLED;
 
   if (NEXT_PUBLIC_DISABLE_SIGNUP === 'true') {
@@ -25,17 +30,19 @@ export function loader() {
 
   return {
     isGoogleSSOEnabled,
+    isMicrosoftSSOEnabled,
     isOIDCSSOEnabled,
   };
 }
 
 export default function SignUp({ loaderData }: Route.ComponentProps) {
-  const { isGoogleSSOEnabled, isOIDCSSOEnabled } = loaderData;
+  const { isGoogleSSOEnabled, isMicrosoftSSOEnabled, isOIDCSSOEnabled } = loaderData;
 
   return (
     <SignUpForm
       className="w-screen max-w-screen-2xl px-4 md:px-16 lg:-my-16"
       isGoogleSSOEnabled={isGoogleSSOEnabled}
+      isMicrosoftSSOEnabled={isMicrosoftSSOEnabled}
       isOIDCSSOEnabled={isOIDCSSOEnabled}
     />
   );

apps/remix/public/static/microsoft.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" width="256" height="256" preserveAspectRatio="xMidYMid"><path fill="#F1511B" d="M121.666 121.666H0V0h121.666z"/><path fill="#80CC28" d="M256 121.666H134.335V0H256z"/><path fill="#00ADEF" d="M121.663 256.002H0V134.336h121.663z"/><path fill="#FBBC09" d="M256 256.002H134.335V134.336H256z"/></svg>

package-lock.json

@@ -19,6 +19,7 @@
         "inngest-cli": "^0.29.1",
         "luxon": "^3.5.0",
         "mupdf": "^1.0.0",
+        "pdf2json": "^4.0.0",
         "react": "^18",
         "typescript": "5.6.2",
         "zod": "3.24.1"
@@ -27198,6 +27199,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/pdf2json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pdf2json/-/pdf2json-4.0.0.tgz",
+      "integrity": "sha512-WkezNsLK8sGpuFC7+PPP0DsXROwdoOxmXPBTtUWWkCwCi/Vi97MRC52Ly6FWIJjOKIywpm/L2oaUgSrmtU+7ZQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "pdf2json": "bin/pdf2json.js"
+      },
+      "engines": {
+        "node": ">=20.18.0"
+      }
+    },
     "node_modules/pdfjs-dist": {
       "version": "3.11.174",
       "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz",

package.json

@@ -74,6 +74,7 @@
     "inngest-cli": "^0.29.1",
     "luxon": "^3.5.0",
     "mupdf": "^1.0.0",
+    "pdf2json": "^4.0.0",
     "react": "^18",
     "typescript": "5.6.2",
     "zod": "3.24.1"

packages/auth/client/index.ts

@@ -222,6 +222,22 @@ export class AuthClient {
     },
   };
 
+  public microsoft = {
+    signIn: async ({ redirectPath }: { redirectPath?: string } = {}) => {
+      const response = await this.client['oauth'].authorize.microsoft.$post({
+        json: { redirectPath },
+      });
+
+      await this.handleError(response);
+
+      const data = await response.json();
+
+      if (data.redirectUrl) {
+        window.location.href = data.redirectUrl;
+      }
+    },
+  };
+
   public oidc = {
     signIn: async ({ redirectPath }: { redirectPath?: string } = {}) => {
       const response = await this.client['oauth'].authorize.oidc.$post({ json: { redirectPath } });

packages/auth/server/config.ts

@@ -26,6 +26,16 @@ export const GoogleAuthOptions: OAuthClientOptions = {
   bypassEmailVerification: false,
 };
 
+export const MicrosoftAuthOptions: OAuthClientOptions = {
+  id: 'microsoft',
+  scope: ['openid', 'email', 'profile'],
+  clientId: env('NEXT_PRIVATE_MICROSOFT_CLIENT_ID') ?? '',
+  clientSecret: env('NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET') ?? '',
+  redirectUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/api/auth/callback/microsoft`,
+  wellKnownUrl: 'https://login.microsoftonline.com/common/v2.0/.well-known/openid-configuration',
+  bypassEmailVerification: false,
+};
+
 export const OidcAuthOptions: OAuthClientOptions = {
   id: 'oidc',
   scope: ['openid', 'email', 'profile'],

packages/auth/server/routes/callback.ts

@@ -2,7 +2,7 @@ import { Hono } from 'hono';
 
 import { AppError } from '@documenso/lib/errors/app-error';
 
-import { GoogleAuthOptions, OidcAuthOptions } from '../config';
+import { GoogleAuthOptions, MicrosoftAuthOptions, OidcAuthOptions } from '../config';
 import { handleOAuthCallbackUrl } from '../lib/utils/handle-oauth-callback-url';
 import { handleOAuthOrganisationCallbackUrl } from '../lib/utils/handle-oauth-organisation-callback-url';
 import type { HonoAuthContext } from '../types/context';
@@ -45,4 +45,11 @@ export const callbackRoute = new Hono<HonoAuthContext>()
   /**
    * Google callback verification.
    */
-  .get('/google', async (c) => handleOAuthCallbackUrl({ c, clientOptions: GoogleAuthOptions }));
+  .get('/google', async (c) => handleOAuthCallbackUrl({ c, clientOptions: GoogleAuthOptions }))
+
+  /**
+   * Microsoft callback verification.
+   */
+  .get('/microsoft', async (c) =>
+    handleOAuthCallbackUrl({ c, clientOptions: MicrosoftAuthOptions }),
+  );

packages/auth/server/routes/oauth.ts

@@ -2,7 +2,7 @@ import { sValidator } from '@hono/standard-validator';
 import { Hono } from 'hono';
 import { z } from 'zod';
 
-import { GoogleAuthOptions, OidcAuthOptions } from '../config';
+import { GoogleAuthOptions, MicrosoftAuthOptions, OidcAuthOptions } from '../config';
 import { handleOAuthAuthorizeUrl } from '../lib/utils/handle-oauth-authorize-url';
 import { getOrganisationAuthenticationPortalOptions } from '../lib/utils/organisation-portal';
 import type { HonoAuthContext } from '../types/context';
@@ -24,6 +24,20 @@ export const oauthRoute = new Hono<HonoAuthContext>()
       redirectPath,
     });
   })
+
+  /**
+   * Microsoft authorize endpoint.
+   */
+  .post('/authorize/microsoft', sValidator('json', ZOAuthAuthorizeSchema), async (c) => {
+    const { redirectPath } = c.req.valid('json');
+
+    return handleOAuthAuthorizeUrl({
+      c,
+      clientOptions: MicrosoftAuthOptions,
+      redirectPath,
+    });
+  })
+
   /**
    * OIDC authorize endpoint.
    */

packages/lib/constants/auth.ts

@@ -6,6 +6,7 @@ export const SALT_ROUNDS = 12;
 export const IDENTITY_PROVIDER_NAME: Record<string, string> = {
   DOCUMENSO: 'Documenso',
   GOOGLE: 'Google',
+  MICROSOFT: 'Microsoft',
   OIDC: 'OIDC',
 };
 
@@ -13,6 +14,10 @@ export const IS_GOOGLE_SSO_ENABLED = Boolean(
   env('NEXT_PRIVATE_GOOGLE_CLIENT_ID') && env('NEXT_PRIVATE_GOOGLE_CLIENT_SECRET'),
 );
 
+export const IS_MICROSOFT_SSO_ENABLED = Boolean(
+  env('NEXT_PRIVATE_MICROSOFT_CLIENT_ID') && env('NEXT_PRIVATE_MICROSOFT_CLIENT_SECRET'),
+);
+
 export const IS_OIDC_SSO_ENABLED = Boolean(
   env('NEXT_PRIVATE_OIDC_WELL_KNOWN') &&
     env('NEXT_PRIVATE_OIDC_CLIENT_ID') &&

packages/lib/server-only/pdf/auto-place-fields.ts

@@ -0,0 +1,202 @@
+import { PDFDocument, rgb } from '@cantoo/pdf-lib';
+import PDFParser from 'pdf2json';
+
+import { getPageSize } from './get-page-size';
+
+type TextPosition = {
+  text: string;
+  x: number;
+  y: number;
+  w: number;
+};
+
+type CharIndexMapping = {
+  textPosIndex: number;
+};
+
+type PlaceholderInfo = {
+  placeholder: string;
+  fieldType: string;
+  recipient: string;
+  isRequired: string;
+  page: number;
+  // PDF2JSON coordinates (in page units - these are relative to page dimensions)
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  // Page dimensions from PDF2JSON (in page units)
+  pageWidth: number;
+  pageHeight: number;
+};
+
+/*
+  Questions for later:
+    - Does it handle multi-page PDFs?
+    - What happens with incorrect placeholders? E.g. those containing non-accepted properties.
+    - The placeholder data is dynamic. How to handle this parsing? Perhaps we need to do it similar to the fieldMeta parsing.
+*/
+
+export const extractPlaceholdersFromPDF = async (pdf: Buffer): Promise<PlaceholderInfo[]> => {
+  return new Promise((resolve, reject) => {
+    const parser = new PDFParser(null, true);
+
+    parser.on('pdfParser_dataError', (errData) => {
+      reject(errData);
+    });
+
+    parser.on('pdfParser_dataReady', (pdfData) => {
+      const placeholders: PlaceholderInfo[] = [];
+
+      pdfData.Pages.forEach((page, pageIndex) => {
+        /*
+          pdf2json returns the PDF page content as an array of characters.
+          We need to concatenate the characters to get the full text.
+          We also need to get the position of the text so we can place the placeholders in the correct position.
+          
+          Page dimensions from PDF2JSON are in "page units" (relative coordinates)
+        */
+        const pageWidth = page.Width;
+        const pageHeight = page.Height;
+
+        let pageText = '';
+        const textPositions: TextPosition[] = [];
+        const charIndexToTextPos: CharIndexMapping[] = [];
+
+        page.Texts.forEach((text) => {
+          /*
+            R is an array that contains objects with each character.
+            The decodedText contains only the character, without any other information.
+
+            textPositions stores each character and its position on the page.
+          */
+          const decodedText = text.R.map((run) => decodeURIComponent(run.T)).join('');
+
+          for (let i = 0; i < decodedText.length; i++) {
+            charIndexToTextPos.push({
+              textPosIndex: textPositions.length,
+            });
+          }
+
+          pageText += decodedText;
+
+          textPositions.push({
+            text: decodedText,
+            x: text.x,
+            y: text.y,
+            w: text.w || 0,
+          });
+        });
+
+        const placeholderMatches = pageText.matchAll(/{{([^}]+)}}/g);
+
+        for (const match of placeholderMatches) {
+          const placeholder = match[0];
+          const placeholderData = match[1].split(',').map((part) => part.trim());
+
+          const [fieldType, recipient, isRequired] = placeholderData;
+
+          /*
+            Find the position of where the placeholder starts in the text
+
+            Then find the position of where the placeholder ends in the text by adding the length of the placeholder to the index of the placeholder.
+          */
+          const matchIndex = match.index;
+          const placeholderLength = placeholder.length;
+          const placeholderEndIndex = matchIndex + placeholderLength;
+
+          const startCharInfo = charIndexToTextPos[matchIndex];
+          const endCharInfo = charIndexToTextPos[placeholderEndIndex - 1];
+
+          if (!startCharInfo || !endCharInfo) {
+            console.error('Could not find text position for placeholder', placeholder);
+
+            return;
+          }
+
+          const startTextPos = textPositions[startCharInfo.textPosIndex];
+          const endTextPos = textPositions[endCharInfo.textPosIndex];
+
+          /* 
+            PDF2JSON coordinates - these are in "page units" (relative coordinates)
+            Calculate width as the distance from start to end, plus a portion of the last character's width
+            Use 10% of the last character width to avoid extending too far beyond the placeholder
+          */
+          const x = startTextPos.x;
+          const y = startTextPos.y;
+          const width = endTextPos.x + endTextPos.w * 0.1 - startTextPos.x;
+
+          placeholders.push({
+            placeholder,
+            fieldType,
+            recipient,
+            isRequired,
+            page: pageIndex + 1,
+            x,
+            y,
+            width,
+            height: 1,
+            pageWidth,
+            pageHeight,
+          });
+        }
+      });
+
+      resolve(placeholders);
+    });
+
+    parser.parseBuffer(pdf);
+  });
+};
+
+export const replacePlaceholdersInPDF = async (pdf: Buffer): Promise<Buffer> => {
+  const placeholders = await extractPlaceholdersFromPDF(pdf);
+
+  const pdfDoc = await PDFDocument.load(new Uint8Array(pdf));
+  const pages = pdfDoc.getPages();
+
+  for (const placeholder of placeholders) {
+    const pageIndex = placeholder.page - 1;
+    const page = pages[pageIndex];
+
+    const { width: pdfLibPageWidth, height: pdfLibPageHeight } = getPageSize(page);
+
+    /*
+      Convert PDF2JSON coordinates to pdf-lib coordinates:
+      
+      PDF2JSON uses relative "page units":
+      - x, y, width, height are in page units
+      - Page dimensions (Width, Height) are also in page units
+      
+      pdf-lib uses absolute points (1 point = 1/72 inch):
+      - Need to convert from page units to points
+      - Y-axis in pdf-lib is bottom-up (origin at bottom-left)
+      - Y-axis in PDF2JSON is top-down (origin at top-left)
+      
+      Conversion formulas:
+      - x_points = (x / pageWidth) * pdfLibPageWidth
+      - y_points = pdfLibPageHeight - ((y / pageHeight) * pdfLibPageHeight)
+      - width_points = (width / pageWidth) * pdfLibPageWidth
+      - height_points = (height / pageHeight) * pdfLibPageHeight
+    */
+
+    const xPoints = (placeholder.x / placeholder.pageWidth) * pdfLibPageWidth;
+    const yPoints = pdfLibPageHeight - (placeholder.y / placeholder.pageHeight) * pdfLibPageHeight;
+    const widthPoints = (placeholder.width / placeholder.pageWidth) * pdfLibPageWidth;
+    const heightPoints = (placeholder.height / placeholder.pageHeight) * pdfLibPageHeight;
+
+    page.drawRectangle({
+      x: xPoints,
+      y: yPoints - heightPoints, // Adjust for height since y is at baseline
+      width: widthPoints,
+      height: heightPoints,
+      color: rgb(1, 1, 1),
+      borderColor: rgb(1, 1, 1),
+      borderWidth: 2,
+    });
+  }
+
+  const modifiedPdfBytes = await pdfDoc.save();
+
+  return Buffer.from(modifiedPdfBytes);
+};

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -1,9 +1,9 @@
 import type { HTMLAttributes } from 'react';
 import { useState } from 'react';
 
+import { Trans } from '@lingui/react/macro';
 import { KeyboardIcon, UploadCloudIcon } from 'lucide-react';
 import { match } from 'ts-pattern';
-import { Trans } from '@lingui/react/macro';
 
 import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { isBase64Image } from '@documenso/lib/constants/signatures';