Merge branch 'main' into feat/instance-2fa

Selecting password auth failed with a generic "Unauthorized" for users
who signed up via OAuth or passkey, with no way to set one.

Detect the missing password and email the existing reset link from the
signing dialog and security settings. Require a 2FA code and rate limit
update-password.

.github/ISSUE_TEMPLATE/deploy-provider-request.yml

@@ -0,0 +1,61 @@
+name: 'One-Click Deploy Provider Request'
+description: Request a new one-click deployment provider (Railway, Render, etc.) to be added to our README
+title: 'One-Click Deploy Provider Request: [Provider Name]'
+labels: ['deploy-provider-request']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for your interest in adding a one-click deploy option for Documenso!
+
+        Each provider we list requires us to create, test, and maintain a deployment template, which is ongoing work on top of everything else. To keep this manageable, we ask that providers (or users) **open an issue instead of a PR** so the community can signal interest.
+
+        **How this works:**
+
+        - 👍 this issue if you'd like to see Documenso deployable on this provider.
+        - If community interest is high enough, we'll consider adding it to the README.
+        - Opening an issue is not a guarantee of inclusion. PRs adding badges without a prior issue and demonstrated interest will be closed.
+  - type: input
+    attributes:
+      label: Provider Name
+      placeholder: e.g. Railway
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Provider Website
+      placeholder: e.g. https://railway.com
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Deploy/Template URL
+      description: A link to an existing deployment template or deploy button URL, if one exists.
+  - type: dropdown
+    attributes:
+      label: Who creates and maintains the deployment template?
+      options:
+        - The provider
+        - Me / the community
+        - Nobody yet
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Testing & Maintenance
+      description: Has the template been tested against the current Documenso release? How are updates handled when Documenso ships breaking changes (env vars, migrations, Docker changes)?
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Why this provider?
+      description: Tell us why Documenso users would benefit — existing user base, region coverage, free tier, etc.
+    validations:
+      required: true
+  - type: checkboxes
+    attributes:
+      label: Please check the boxes that apply to this request.
+      options:
+        - label: I have searched existing issues to make sure this provider has not already been requested.
+        - label: I understand that inclusion depends on community interest and is not guaranteed.
+        - label: I understand that PRs adding deploy badges without a prior issue will be closed.

.github/actions/node-install/action.yml

@@ -2,7 +2,7 @@ name: 'Setup node'
 inputs:
   node_version:
     required: false
-    default: v22.x
+    default: v24.x
 
 runs:
   using: 'composite'

.github/workflows/ci.yml

@@ -30,6 +30,26 @@ jobs:
       - name: Build app
         run: npm run build
 
+  unit_tests:
+    name: Unit Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - uses: ./.github/actions/node-install
+
+      - name: Copy env
+        run: cp .env.example .env
+
+      # Includes the 2FA enforcement drift guard (packages/trpc), which is the
+      # only check that catches a session route without enforcement middleware.
+      - name: Run unit tests
+        run: npm run test -w @documenso/lib -w @documenso/trpc
+
   build_docker:
     name: Build Docker Image
     runs-on: ubuntu-latest

README.md

@@ -107,7 +107,7 @@ Contact us if you are interested in our Enterprise plan for large organizations
 
 To run Documenso locally, you will need
 
-- Node.js (v22 or above)
+- Node.js (v24 or above)
 - Postgres SQL Database
 - Docker (optional)
 
@@ -186,21 +186,37 @@ For full instructions, requirements, and configuration details, see the [Self Ho
 
 ### One-Click Deploys
 
-#### Railway
+> [!NOTE]
+> Want to see another provider listed here? Please [open a provider request](https://github.com/documenso/documenso/issues/new?template=deploy-provider-request.yml) instead of a PR so the community can signal interest. PRs adding deploy badges without a prior issue will be closed.
 
-[![Deploy on Railway](https://railway.com/button.svg)](https://railway.com/deploy/DjrRRX?referralCode=EZR3s0&utm_medium=integration&utm_source=template&utm_campaign=generic)
-
-#### Render
-
-[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/documenso/documenso)
-
-#### Koyeb
-
-[![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?type=git&repository=github.com/documenso/documenso&branch=main&name=documenso-app&builder=dockerfile&dockerfile=/docker/Dockerfile)
-
-#### Elestio
-
-[![Deploy on Elestio](https://elest.io/images/logos/deploy-to-elestio-btn.png)](https://elest.io/open-source/documenso)
+<table>
+  <tr>
+    <td align="center" width="200">
+      <a href="https://railway.com/deploy/DjrRRX?referralCode=EZR3s0&utm_medium=integration&utm_source=template&utm_campaign=generic">
+        <img src="https://railway.com/button.svg" alt="Deploy on Railway" height="40" />
+      </a>
+    </td>
+    <td align="center" width="200">
+      <a href="https://render.com/deploy?repo=https://github.com/documenso/documenso">
+        <img src="https://render.com/images/deploy-to-render-button.svg" alt="Deploy to Render" height="40" />
+      </a>
+    </td>
+    <td align="center" width="200">
+      <a href="https://app.koyeb.com/deploy?type=git&repository=github.com/documenso/documenso&branch=main&name=documenso-app&builder=dockerfile&dockerfile=/docker/Dockerfile">
+        <img src="https://www.koyeb.com/static/images/deploy/button.svg" alt="Deploy to Koyeb" height="40" />
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td align="center" width="200">
+      <a href="https://elest.io/open-source/documenso">
+        <img src="https://elest.io/images/logos/deploy-to-elestio-btn.png" alt="Deploy on Elestio" height="40" />
+      </a>
+    </td>
+    <td align="center" width="200"></td>
+    <td align="center" width="200"></td>
+  </tr>
+</table>
 
 ## Security
 

apps/docs/content/docs/developers/api/teams.mdx

@@ -95,7 +95,7 @@ Documents created with a team token belong to that team:
 <Tab value="curl">
 ```bash
 curl -X POST "https://app.documenso.com/api/v2/envelope/create" \
-  -H "Authorization: api_team_xxxxxxxxxxxxxxxx" \
+  -H "Authorization: api_xxxxxxxxxxxxxxxx" \
   -H "Content-Type: multipart/form-data" \
   -F 'payload={
     "type": "DOCUMENT",
@@ -157,11 +157,11 @@ Retrieve all documents belonging to the team:
 ```bash
 # List all team documents
 curl -X GET "https://app.documenso.com/api/v2/envelope" \
-  -H "Authorization: api_team_xxxxxxxxxxxxxxxx"
+  -H "Authorization: api_xxxxxxxxxxxxxxxx"
 
 # Filter by status
 curl -X GET "https://app.documenso.com/api/v2/envelope?status=PENDING" \
-  -H "Authorization: api_team_xxxxxxxxxxxxxxxx"
+  -H "Authorization: api_xxxxxxxxxxxxxxxx"
 ````
 
 </Tab>
@@ -191,7 +191,7 @@ Templates created with a team token are shared across the team.
 <Tab value="curl">
 ```bash
 curl -X POST "https://app.documenso.com/api/v2/template/create" \
-  -H "Authorization: api_team_xxxxxxxxxxxxxxxx" \
+  -H "Authorization: api_xxxxxxxxxxxxxxxx" \
   -H "Content-Type: multipart/form-data" \
   -F 'payload={
     "title": "NDA Template",
@@ -269,7 +269,7 @@ console.log('Created team template:', template.id);
 <Tab value="curl">
 ```bash
 curl -X GET "https://app.documenso.com/api/v2/template" \
-  -H "Authorization: api_team_xxxxxxxxxxxxxxxx"
+  -H "Authorization: api_xxxxxxxxxxxxxxxx"
 ````
 
 </Tab>

apps/docs/content/docs/developers/examples/common-workflows.mdx

@@ -51,6 +51,7 @@ async function createAndSendDocument(
   pdfBuffer: Buffer,
   filename: string,
   title: string,
+  externalId: string,
   recipients: Recipient[],
 ): Promise<CreateAndSendResult> {
   const recipientPayload = recipients.map((recipient, index) => ({
@@ -89,6 +90,7 @@ async function createAndSendDocument(
     JSON.stringify({
       type: 'DOCUMENT',
       title,
+      externalId,
       recipients: recipientPayload,
       meta: {
         subject: `Please sign: ${title}`,
@@ -145,6 +147,7 @@ const result = await createAndSendDocument(
   pdfBuffer,
   'contract.pdf',
   'Service Agreement',
+  'nda-contract-ndac214',
   [
     { email: 'client@example.com', name: 'John Smith', role: 'SIGNER' },
     { email: 'manager@company.com', name: 'Jane Doe', role: 'SIGNER' },
@@ -172,6 +175,7 @@ ENVELOPE_RESPONSE=$(curl -s -X POST "${BASE_URL}/envelope/create" \
   -F 'payload={
     "type": "DOCUMENT",
     "title": "Service Agreement",
+    "externalId": "nda-contract-ndac214",
     "recipients": [
       {
         "email": "client@example.com",
@@ -241,6 +245,8 @@ echo $DISTRIBUTE_RESPONSE | jq '.recipients[] | {email, signingUrl}'
 </Tab>
 </Tabs>
 
+`externalId` is your application's own reference for this document, such as an invoice number or a database key. Documenso stores it on the envelope and repeats it in every webhook as `payload.externalId`, so your handler can match the event to your record without keeping a lookup table of Documenso IDs. To react when everyone has signed, see [Workflow 4](#workflow-4-wait-for-completion-with-webhooks). To fetch the finished PDF, see [Workflow 5](#workflow-5-download-signed-documents).
+
 ---
 
 ## Workflow 2: Create Document from Template with Custom Data

apps/docs/content/docs/self-hosting/configuration/meta.json

@@ -9,6 +9,7 @@
     "background-jobs",
     "signing-certificate",
     "telemetry",
+    "two-factor-enforcement",
     "organisation-limits",
     "advanced"
   ]

apps/docs/content/docs/self-hosting/configuration/two-factor-enforcement.mdx

@@ -0,0 +1,54 @@
+---
+title: Two-Factor Enforcement
+description: Require two-factor authentication instance-wide or per organisation, with grace periods and important limitations.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+## Overview
+
+Documenso can require users to enable two-factor authentication (2FA) at two levels:
+
+- **Instance-wide enforcement** — configured by an instance administrator under **Admin → Site Settings**. Requires a Documenso license that includes the feature. Once a user's grace period expires, they are redirected to a forced enrolment page before they can continue using the app.
+- **Per-organisation enforcement** — available to everyone, configured by organisation admins in the organisation settings. Once a member's grace period expires, only access to that organisation (and its teams) is blocked; the rest of the app stays usable.
+
+A user satisfies enforcement when they have 2FA enabled **and** their current session has passed a second factor (a TOTP/backup-code challenge, a user-verified passkey sign-in, or enabling 2FA during the session). Sessions created before the user enabled 2FA must sign out and back in to verify.
+
+## Grace Periods
+
+Both levels support a grace period of 0–365 days:
+
+- **Instance**: the window starts at the later of the user's grace start (typically account creation, restarted by an admin 2FA reset) and the moment enforcement was enabled.
+- **Organisation**: the window starts at the latest of joining the organisation, the moment the organisation enabled enforcement, and the user's grace start.
+
+A grace period of **0 days** enforces immediately: for the instance policy, users are forced to enrol right after signing up or signing in; for the organisation policy, members are blocked from the organisation until they enrol.
+
+**Joining is never blocked; access is.** Invitations and SSO sign-ins always succeed — the grace window starts at join. Members who never comply still occupy a seat and count towards member limits; organisation admins can see per-member 2FA compliance in the members list.
+
+Reducing an active grace period requires an explicit acknowledgement in the settings UI, since it can immediately block users who have not yet enrolled.
+
+Enabling enforcement requires the acting administrator to already satisfy the policy themselves (2FA enabled and verified on their current session). This prevents administrators from locking themselves out with a 0-day grace period.
+
+## Known Limitation: API Tokens Are Exempt
+
+<Callout type="warn">
+  Enforcement applies to interactive (session-based) access only. **API tokens minted before a
+  user's deadline keep working after it.** A blocked user cannot mint new tokens, but existing
+  tokens are not revoked by enforcement. If you need to cut off a non-compliant user's API access,
+  revoke their tokens explicitly.
+</Callout>
+
+## Licensing
+
+Instance-wide enforcement is license-gated:
+
+- Without the license, the instance-wide section in Admin → Site Settings is visible but disabled.
+- If enforcement was configured while licensed and the license later lapses, the stored configuration becomes **inactive** (nothing is enforced) and the only permitted change is disabling it.
+
+Per-organisation enforcement does not require a license. When instance-wide enforcement is active, it takes precedence over organisation policies.
+
+---
+
+## See Also
+
+- [License](/docs/self-hosting/configuration/license) - Configuring your Documenso license

apps/docs/content/docs/self-hosting/deployment/docker.mdx

@@ -102,7 +102,7 @@ See [Email Configuration](/docs/self-hosting/configuration/email) for other tran
 | Variable                                    | Description                                                    | Default                   |
 | ------------------------------------------- | -------------------------------------------------------------- | ------------------------- |
 | `PORT`                                      | Port the application listens on                                | `3000`                    |
-| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`      | Path to signing certificate inside container                   | `/opt/documenso/cert.p12` |
+| `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`      | Path to signing certificate inside container — set to the volume-mount path (e.g. `/opt/documenso/cert.p12`). Only Docker Compose defaults this; plain `docker run` must set it explicitly | -                         |
 | `NEXT_PRIVATE_SIGNING_PASSPHRASE`           | Passphrase for the signing certificate                         | -                         |
 | `NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS`  | Base64-encoded `.p12` certificate (alternative to file path)   | -                         |
 | `NEXT_PUBLIC_UPLOAD_TRANSPORT`              | Document storage: `database` or `s3`                           | `database`                |
@@ -136,6 +136,7 @@ docker run -d \
   -e NEXT_PUBLIC_WEBAPP_URL="https://sign.example.com" \
   -e NEXT_PRIVATE_INTERNAL_WEBAPP_URL="http://localhost:3000" \
   -e NEXT_PRIVATE_DATABASE_URL="postgresql://user:password@db-host:5432/documenso" \
+  -e NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH="/opt/documenso/cert.p12" \
   -e NEXT_PRIVATE_SIGNING_PASSPHRASE="your-certificate-password" \
   -e NEXT_PRIVATE_SMTP_TRANSPORT="smtp-auth" \
   -e NEXT_PRIVATE_SMTP_HOST="smtp.example.com" \
@@ -154,6 +155,12 @@ A signing certificate is required for document signing. You have two options for
 - **Volume mount** — mount a `.p12` file from the host into the container at `/opt/documenso/cert.p12` (shown above). This is the simplest approach for small to moderate deployments.
 - **Base64-encoded contents** — set `NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS` with the base64-encoded certificate string. Use this when file mounting is not available (e.g., Railway, Vercel).
 
+<Callout type="warn">
+  Plain `docker run` deployments must set `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH` explicitly. This
+  prevents production deployments from accidentally using the insecure example certificate.
+  Docker Compose sets the file path for you.
+</Callout>
+
 For production deployments that require Adobe Approved Trust List recognition, consider using a [Google Cloud HSM](/docs/self-hosting/configuration/signing-certificate/google-cloud-hsm) or another external HSM.
 
 <Callout type="warn">
@@ -178,6 +185,7 @@ NEXT_PUBLIC_WEBAPP_URL=https://sign.example.com
 NEXT_PRIVATE_INTERNAL_WEBAPP_URL=http://localhost:3000
 NEXT_PRIVATE_DATABASE_URL=postgresql://user:password@db-host:5432/documenso
 NEXT_PRIVATE_DIRECT_DATABASE_URL=postgresql://user:password@db-host:5432/documenso
+NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH=/opt/documenso/cert.p12
 NEXT_PRIVATE_SIGNING_PASSPHRASE=your-certificate-password
 NEXT_PRIVATE_SMTP_TRANSPORT=smtp-auth
 NEXT_PRIVATE_SMTP_HOST=smtp.example.com
@@ -203,6 +211,12 @@ docker run -d \
 
 Documenso provides health check endpoints for monitoring:
 
+<Callout type="info">
+  If a certificate is mounted but signing fails, ensure `NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH`
+  explicitly points to its path inside the container. Production does not use the development
+  example certificate as a fallback.
+</Callout>
+
 | Endpoint                  | Purpose                                                        |
 | ------------------------- | -------------------------------------------------------------- |
 | `/api/health`             | Checks database connectivity and certificate status            |

apps/docs/content/docs/self-hosting/deployment/manual.mdx

@@ -14,8 +14,8 @@ import { Step, Steps } from 'fumadocs-ui/components/steps';
 
 ## Prerequisites
 
-- Node.js 22 or later
-- npm 11 or later
+- Node.js 24 or later
+- npm 11.17 or later
 - PostgreSQL 14 or later
 - A Linux server (for systemd service setup)
 

apps/docs/content/docs/self-hosting/getting-started/requirements.mdx

@@ -141,8 +141,8 @@ If building from source (not using Docker images):
 
 | Requirement | Version |
 | ----------- | ------- |
-| Node.js     | 22+     |
-| npm         | 11+     |
+| Node.js     | 24+     |
+| npm         | 11.17+  |
 
 ---
 
@@ -169,7 +169,7 @@ Documenso runs on:
 | MySQL/MariaDB  | PostgreSQL-specific features required |
 | SQLite         | Not suitable for production workloads |
 | MongoDB        | Relational database required          |
-| Node.js < 22   | Modern JavaScript features required   |
+| Node.js < 24   | Modern JavaScript features required   |
 
 ---
 

apps/docs/content/docs/users/organisations/preferences/document.mdx

@@ -34,7 +34,7 @@ To access the preferences, navigate to either the organisation or teams settings
 | **Default Recipients**               | Recipients that are automatically added to new documents. Can be overridden per document.                                       |
 | **Default Envelope Expiration**      | How long recipients have to sign before the signing link expires. See [recipient expiration](/docs/users/documents/advanced/recipient-expiration). |
 | **Default Signing Reminders**        | When and how often to email recipients who have not yet signed. See [signing reminders](/docs/users/documents/advanced/signing-reminders). |
-| **Delegate Document Ownership**      | Allow team API tokens to delegate document ownership to another team member.                                                    |
+| **Delegate Document Ownership**      | By default, documents created with a team API token are owned by the user who created the token. Enable this setting to let supported API requests assign ownership to another team member.                                                    |
 | **AI Features**                      | Enable AI-powered features such as automatic recipient detection. Only shown if AI features are configured on the instance.     |
 
 Document visibility, language, and signature settings can be overridden per document.

apps/docs/package.json

@@ -15,7 +15,7 @@
     "fumadocs-ui": "16.14.3",
     "lucide-react": "^0.563.0",
     "mermaid": "^11.12.2",
-    "next": "16.3.0",
+    "next": "^16.3.3",
     "next-plausible": "^3.12.5",
     "next-themes": "^0.4.6",
     "react": "^19.2.4",

apps/openpage-api/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@documenso/prisma": "*",
     "luxon": "^3.7.2",
-    "next": "16.3.0"
+    "next": "^16.3.3"
   },
   "devDependencies": {
     "@types/node": "^20",

apps/remix/Dockerfile.bun

@@ -1,25 +0,0 @@
-FROM oven/bun:1 AS dependencies-env
-COPY . /app
-
-FROM dependencies-env AS development-dependencies-env
-COPY ./package.json bun.lockb /app/
-WORKDIR /app
-RUN bun i --frozen-lockfile
-
-FROM dependencies-env AS production-dependencies-env
-COPY ./package.json bun.lockb /app/
-WORKDIR /app
-RUN bun i --production
-
-FROM dependencies-env AS build-env
-COPY ./package.json bun.lockb /app/
-COPY --from=development-dependencies-env /app/node_modules /app/node_modules
-WORKDIR /app
-RUN bun run build
-
-FROM dependencies-env
-COPY ./package.json bun.lockb /app/
-COPY --from=production-dependencies-env /app/node_modules /app/node_modules
-COPY --from=build-env /app/build /app/build
-WORKDIR /app
-CMD ["bun", "run", "start"]

apps/remix/Dockerfile.pnpm

@@ -1,26 +0,0 @@
-FROM node:20-alpine AS dependencies-env
-RUN npm i -g pnpm
-COPY . /app
-
-FROM dependencies-env AS development-dependencies-env
-COPY ./package.json pnpm-lock.yaml /app/
-WORKDIR /app
-RUN pnpm i --frozen-lockfile
-
-FROM dependencies-env AS production-dependencies-env
-COPY ./package.json pnpm-lock.yaml /app/
-WORKDIR /app
-RUN pnpm i --prod --frozen-lockfile
-
-FROM dependencies-env AS build-env
-COPY ./package.json pnpm-lock.yaml /app/
-COPY --from=development-dependencies-env /app/node_modules /app/node_modules
-WORKDIR /app
-RUN pnpm build
-
-FROM dependencies-env
-COPY ./package.json pnpm-lock.yaml /app/
-COPY --from=production-dependencies-env /app/node_modules /app/node_modules
-COPY --from=build-env /app/build /app/build
-WORKDIR /app
-CMD ["pnpm", "start"]

apps/remix/app/components/dialogs/admin-user-reset-two-factor-dialog.tsx

@@ -56,7 +56,7 @@ export const AdminUserResetTwoFactorDialog = ({ className, user }: AdminUserRese
         .with(AppErrorCode.NOT_FOUND, () => msg`User not found.`)
         .with(
           AppErrorCode.UNAUTHORIZED,
-          () => msg`You are not authorized to reset two factor authentcation for this user.`,
+          () => msg`You are not authorized to reset two factor authentication for this user.`,
         )
         .otherwise(() => msg`An error occurred while resetting two factor authentication for the user.`);
 
@@ -85,7 +85,8 @@ export const AdminUserResetTwoFactorDialog = ({ className, user }: AdminUserRese
           <AlertDescription className="mr-2">
             <Trans>
               Reset the users two factor authentication. This action is irreversible and will disable two factor
-              authentication for the user.
+              authentication for the user. Their two-factor enforcement grace period will restart from the moment of the
+              reset.
             </Trans>
           </AlertDescription>
         </div>
@@ -108,7 +109,8 @@ export const AdminUserResetTwoFactorDialog = ({ className, user }: AdminUserRese
               <Alert variant="destructive">
                 <AlertDescription className="selection:bg-red-100">
                   <Trans>
-                    This action is irreversible. Please ensure you have informed the user before proceeding.
+                    This action is irreversible. Please ensure you have informed the user before proceeding. Any
+                    two-factor enforcement grace period for this user will restart from the moment of the reset.
                   </Trans>
                 </AlertDescription>
               </Alert>

apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -71,6 +72,7 @@ export const EnvelopeDistributeDialog = ({
   const { toast } = useToast();
   const { t, i18n } = useLingui();
   const navigate = useNavigate();
+  const analytics = useAnalytics();
 
   const [isOpen, setIsOpen] = useState(false);
   const [isSyncing, setIsSyncing] = useState(false);
@@ -200,6 +202,12 @@ export const EnvelopeDistributeDialog = ({
     } catch (err) {
       const error = AppError.parseError(err);
 
+      analytics.captureException(err, {
+        source: 'editor',
+        location: 'distribute_document',
+        envelopeId: envelope.id,
+      });
+
       const errorMessage = getDistributeErrorMessage(error.code);
 
       toast({

apps/remix/app/components/dialogs/envelope-redistribute-dialog.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { AppError } from '@documenso/lib/errors/app-error';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
@@ -51,6 +52,7 @@ export const EnvelopeRedistributeDialog = ({ envelope, envelopeType, trigger }:
 
   const { toast } = useToast();
   const { t, i18n } = useLingui();
+  const analytics = useAnalytics();
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -95,6 +97,13 @@ export const EnvelopeRedistributeDialog = ({ envelope, envelopeType, trigger }:
       setIsOpen(false);
     } catch (err) {
       const error = AppError.parseError(err);
+
+      analytics.captureException(err, {
+        source: 'editor',
+        location: 'redistribute_document',
+        envelopeId: envelope.id,
+      });
+
       const errorMessage = getDistributeErrorMessage(error.code);
 
       toast({

apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx

@@ -1,4 +1,7 @@
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TBulkSendCsvError } from '@documenso/lib/server-only/template/validate-bulk-send-csv';
 import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
@@ -15,9 +18,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
+import { Plural, Trans } from '@lingui/react/macro';
 import { File as FileIcon, Upload, X } from 'lucide-react';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { useCurrentTeam } from '~/providers/team';
@@ -29,6 +34,8 @@ const ZBulkSendFormSchema = z.object({
 
 type TBulkSendFormSchema = z.infer<typeof ZBulkSendFormSchema>;
 
+type TBulkSendValidationError = TBulkSendCsvError | { type: 'UPLOAD_ERROR'; code: string };
+
 export type TemplateBulkSendDialogProps = {
   templateId: number;
   recipients: Array<{ email: string; name?: string | null }>;
@@ -42,6 +49,9 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
 
   const team = useCurrentTeam();
 
+  const [open, setOpen] = useState(false);
+  const [validationError, setValidationError] = useState<TBulkSendValidationError | null>(null);
+
   const form = useForm<TBulkSendFormSchema>({
     resolver: zodResolver(ZBulkSendFormSchema),
     defaultValues: {
@@ -51,6 +61,20 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
 
   const { mutateAsync: uploadBulkSend } = trpc.template.uploadBulkSend.useMutation();
 
+  const onOpenChange = (value: boolean) => {
+    if (form.formState.isSubmitting) {
+      return;
+    }
+
+    setOpen(value);
+
+    if (!value) {
+      setValidationError(null);
+
+      form.reset();
+    }
+  };
+
   const onDownloadTemplate = () => {
     const headers = recipients.flatMap((_, index) => [`recipient_${index + 1}_email`, `recipient_${index + 1}_name`]);
 
@@ -71,36 +95,44 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
   };
 
   const onSubmit = async (values: TBulkSendFormSchema) => {
+    setValidationError(null);
+
     try {
       const csv = await values.file.text();
 
-      await uploadBulkSend({
+      const result = await uploadBulkSend({
         templateId,
         teamId: team?.id,
         csv: csv,
         sendImmediately: values.sendImmediately,
       });
 
+      if (!result.success) {
+        setValidationError(result.error);
+
+        return;
+      }
+
       toast({
         title: _(msg`Success`),
         description: _(msg`Your bulk send has been initiated. You will receive an email notification upon completion.`),
       });
 
+      setOpen(false);
       form.reset();
+
       onSuccess?.();
     } catch (err) {
       console.error(err);
 
-      toast({
-        title: _(msg`Error`),
-        description: _(msg`Failed to upload CSV. Please check the file format and try again.`),
-        variant: 'destructive',
-      });
+      const error = AppError.parseError(err);
+
+      setValidationError({ type: 'UPLOAD_ERROR', code: error.code });
     }
   };
 
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTrigger asChild>
         {trigger ?? (
           <Button variant="outline" className="shrink-0" size="sm">
@@ -174,7 +206,10 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
                             className="hidden"
                             onChange={(e) => {
                               const file = e.target.files?.[0];
+
                               if (file) {
+                                setValidationError(null);
+
                                 onChange(file);
                               }
                             }}
@@ -195,7 +230,11 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
                           type="button"
                           variant="link"
                           className="p-0 text-destructive text-xs hover:text-destructive"
-                          onClick={() => onChange(null)}
+                          onClick={() => {
+                            setValidationError(null);
+
+                            form.resetField('file');
+                          }}
                           disabled={form.formState.isSubmitting}
                         >
                           <X className="h-4 w-4" />
@@ -218,6 +257,72 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
               )}
             />
 
+            {validationError !== null && (
+              <Alert variant="destructive">
+                <AlertDescription className="max-h-32 overflow-y-auto">
+                  {match(validationError)
+                    .with({ type: 'PARSE_ERROR' }, () => (
+                      <Trans>The CSV could not be parsed. Please check the file format and try again.</Trans>
+                    ))
+                    .with({ type: 'EMPTY' }, () => (
+                      <Trans>
+                        The CSV does not contain any rows. Please add at least one row of recipient details.
+                      </Trans>
+                    ))
+                    .with({ type: 'ROW_LIMIT_EXCEEDED' }, ({ rowCount, maxRows }) => (
+                      <Trans>
+                        <Plural value={rowCount} one="The CSV contains # row." other="The CSV contains # rows." />{' '}
+                        <Plural
+                          value={maxRows}
+                          one="A maximum of # row is allowed per upload."
+                          other="A maximum of # rows is allowed per upload."
+                        />
+                      </Trans>
+                    ))
+                    .with({ type: 'MISSING_COLUMNS' }, ({ missingColumns }) => (
+                      <>
+                        <Trans>
+                          The CSV is missing the following required columns. Please download the template CSV for the
+                          correct format.
+                        </Trans>
+
+                        <ul className="mt-1 list-inside list-disc">
+                          {missingColumns.map((column) => (
+                            <li key={column} className="font-mono">
+                              {column}
+                            </li>
+                          ))}
+                        </ul>
+                      </>
+                    ))
+                    .with({ type: 'INVALID_RECIPIENTS' }, ({ rowErrors }) => (
+                      <>
+                        <Trans>The CSV contains invalid recipient emails. Please fix the following rows:</Trans>
+
+                        <ul className="mt-1 list-inside list-disc">
+                          {rowErrors.map((rowError, index) => (
+                            <li key={index}>
+                              <Trans>
+                                Row {rowError.row}: <span className="font-mono">{rowError.column}</span> must be a valid
+                                email or empty
+                              </Trans>
+                            </li>
+                          ))}
+                        </ul>
+                      </>
+                    ))
+                    .with({ type: 'UPLOAD_ERROR' }, ({ code }) =>
+                      code === AppErrorCode.LIMIT_EXCEEDED ? (
+                        <Trans>The CSV exceeds the maximum file size.</Trans>
+                      ) : (
+                        <Trans>Failed to upload CSV. Please check the file format and try again.</Trans>
+                      ),
+                    )
+                    .exhaustive()}
+                </AlertDescription>
+              </Alert>
+            )}
+
             <FormField
               control={form.control}
               name="sendImmediately"
@@ -240,7 +345,12 @@ export const TemplateBulkSendDialog = ({ templateId, recipients, trigger, onSucc
             />
 
             <DialogFooter className="mt-4">
-              <Button variant="secondary" onClick={() => form.reset()} type="button">
+              <Button
+                variant="secondary"
+                onClick={() => onOpenChange(false)}
+                disabled={form.formState.isSubmitting}
+                type="button"
+              >
                 <Trans>Cancel</Trans>
               </Button>
 

apps/remix/app/components/embed/authoring/configure-document-recipients.tsx

@@ -18,6 +18,8 @@ import { useCallback, useRef } from 'react';
 import type { Control } from 'react-hook-form';
 import { useFieldArray, useFormContext, useFormState } from 'react-hook-form';
 
+import { useCspNonce } from '~/utils/nonce';
+
 import { useConfigureDocument } from './configure-document-context';
 import type { TConfigureEmbedFormSchema } from './configure-document-view.types';
 
@@ -32,6 +34,7 @@ export interface ConfigureDocumentRecipientsProps {
 export const ConfigureDocumentRecipients = ({ control, isSubmitting }: ConfigureDocumentRecipientsProps) => {
   const { _ } = useLingui();
   const { isTemplate } = useConfigureDocument();
+  const cspNonce = useCspNonce();
 
   const $sensorApi = useRef<SensorAPI | null>(null);
 
@@ -212,6 +215,7 @@ export const ConfigureDocumentRecipients = ({ control, isSubmitting }: Configure
       />
 
       <DragDropContext
+        nonce={cspNonce}
         onDragEnd={onDragEnd}
         sensors={[
           (api: SensorAPI) => {

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
@@ -77,6 +78,7 @@ export const EmbedDirectTemplateClientPage = ({
 }: EmbedDirectTemplateClientPageProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const [searchParams] = useSearchParams();
 
@@ -264,6 +266,13 @@ export const EmbedDirectTemplateClientPage = ({
       const error = AppError.parseError(err);
       const errorMessage = getDirectTemplateErrorMessage(error.code);
 
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'direct_template',
+        recipientId: recipient.id,
+        envelopeId,
+      });
+
       toast({
         title: _(errorMessage.title),
         description: _(errorMessage.description),
@@ -308,6 +317,14 @@ export const EmbedDirectTemplateClientPage = ({
       }
     } catch (err) {
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'embed_init',
+        recipientId: recipient.id,
+        envelopeId,
+      });
+
       setHasFinishedInit(true);
     }
 

apps/remix/app/components/embed/embed-document-signing-page-v1.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
 import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
@@ -75,6 +76,7 @@ export const EmbedSignDocumentV1ClientPage = ({
 }: EmbedSignDocumentV1ClientPageProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const { fullName, email, signature, setFullName, setEmail, setSignature } = useRequiredDocumentSigningContext();
 
@@ -154,6 +156,14 @@ export const EmbedSignDocumentV1ClientPage = ({
 
       setHasCompletedDocument(true);
     } catch (err) {
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'complete_document',
+        recipientId: recipient.id,
+        documentId,
+        envelopeId,
+      });
+
       if (window.parent) {
         window.parent.postMessage(
           {
@@ -236,6 +246,15 @@ export const EmbedSignDocumentV1ClientPage = ({
       }
     } catch (err) {
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'embed_init',
+        recipientId: recipient.id,
+        documentId,
+        envelopeId,
+      });
+
       setHasFinishedInit(true);
     }
 

apps/remix/app/components/embed/embed-document-signing-page-v2.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
 import { ZSignDocumentEmbedDataSchema } from '@documenso/lib/types/embed-document-sign-schema';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
@@ -25,6 +26,7 @@ export const EmbedSignDocumentV2ClientPage = ({
   allowWhitelabelling = false,
 }: EmbedSignDocumentV2ClientPageProps) => {
   const { _ } = useLingui();
+  const analytics = useAnalytics();
 
   const { envelope, recipient, envelopeData, setFullName, setEmail, fullName, email } =
     useRequiredEnvelopeSigningContext();
@@ -170,6 +172,14 @@ export const EmbedSignDocumentV2ClientPage = ({
       }
     } catch (err) {
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'embed_init',
+        recipientId: recipient.id,
+        envelopeId: envelope.id,
+      });
+
       setHasFinishedInit(true);
     }
 

apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getDocumentDataUrlForPdfViewer } from '@documenso/lib/utils/envelope-download';
@@ -57,6 +58,7 @@ export const MultiSignDocumentSigningView = ({
 }: MultiSignDocumentSigningViewProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const { fullName, email, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();
 
@@ -101,6 +103,13 @@ export const MultiSignDocumentSigningView = ({
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'sign_field',
+        recipientId,
+        documentId: document?.id,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while signing the document.`),
@@ -120,6 +129,13 @@ export const MultiSignDocumentSigningView = ({
       }
 
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'remove_field',
+        recipientId,
+        documentId: document?.id,
+      });
     }
   };
 
@@ -140,6 +156,13 @@ export const MultiSignDocumentSigningView = ({
         recipientId,
       });
     } catch (err) {
+      analytics.captureException(err, {
+        source: 'embed',
+        location: 'complete_document',
+        recipientId,
+        documentId: document?.id,
+      });
+
       onDocumentError?.();
 
       const error = AppError.parseError(err);

apps/remix/app/components/forms/2fa/disable-authenticator-app-dialog.tsx

@@ -1,5 +1,6 @@
 import { authClient } from '@documenso/auth/client';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { AppError } from '@documenso/lib/errors/app-error';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -68,15 +69,23 @@ export const DisableAuthenticatorAppDialog = () => {
 
   const { isSubmitting: isDisable2FASubmitting } = disable2FAForm.formState;
 
+  // Todo: (2FA enforcement, step 5) Once org enforcement state is available
+  // client-side, warn BEFORE disabling that org/team access will block at the
+  // org 2FA deadline. Until then the warning is shown after the fact based on
+  // the server response.
   const onDisable2FAFormSubmit = async ({ totpCode, backupCode }: TDisable2FAForm) => {
     try {
-      await authClient.twoFactor.disable({ totpCode, backupCode });
+      const { orgEnforcementApplies } = await authClient.twoFactor.disable({ totpCode, backupCode });
 
       toast({
         title: _(msg`Two-factor authentication disabled`),
-        description: _(
-          msg`Two-factor authentication has been disabled for your account. You will no longer be required to enter a code from your authenticator app when signing in.`,
-        ),
+        description: orgEnforcementApplies
+          ? _(
+              msg`Two-factor authentication has been disabled for your account. One of your organisations requires two-factor authentication: access to it will be blocked at its deadline until you re-enable 2FA.`,
+            )
+          : _(
+              msg`Two-factor authentication has been disabled for your account. You will no longer be required to enter a code from your authenticator app when signing in.`,
+            ),
       });
 
       flushSync(() => {
@@ -84,7 +93,19 @@ export const DisableAuthenticatorAppDialog = () => {
       });
 
       await refreshSession();
-    } catch (_err) {
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === 'TWO_FACTOR_DISABLE_FORBIDDEN') {
+        toast({
+          title: _(msg`Unable to disable two-factor authentication`),
+          description: _(msg`Two-factor authentication is required by this instance and cannot be disabled.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
       toast({
         title: _(msg`Unable to disable two-factor authentication`),
         description: _(

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

@@ -1,6 +1,7 @@
 import { authClient } from '@documenso/auth/client';
 import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { AppError } from '@documenso/lib/errors/app-error';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -69,11 +70,18 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
 
       setSetup2FAData(data);
     } catch (err) {
+      const error = AppError.parseError(err);
+
       toast({
         title: _(msg`Unable to setup two-factor authentication`),
-        description: _(
-          msg`We were unable to setup two-factor authentication for your account. Please ensure that you have entered your code correctly and try again.`,
-        ),
+        description:
+          error.code === 'TWO_FACTOR_ALREADY_ENABLED'
+            ? _(
+                msg`Two-factor authentication is already enabled for your account. Disable it before setting it up again.`,
+              )
+            : _(
+                msg`We were unable to setup two-factor authentication for your account. Please ensure that you have entered your code correctly and try again.`,
+              ),
         variant: 'destructive',
       });
     }

apps/remix/app/components/forms/2fa/two-factor-code-dialog.tsx

@@ -0,0 +1,158 @@
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+import { Trans } from '@lingui/react/macro';
+import type React from 'react';
+import { useState } from 'react';
+import { type FieldValues, type Path, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+
+/**
+ * Schema for forms that accept a two factor code. Compose with `.extend()` or `.merge()`.
+ */
+export const ZTwoFactorCodeFieldSchema = z.object({
+  totpCode: z.string().trim().optional(),
+  backupCode: z.string().trim().optional(),
+});
+
+export type TTwoFactorCodeFieldSchema = z.infer<typeof ZTwoFactorCodeFieldSchema>;
+
+export const hasTwoFactorCode = (data: TTwoFactorCodeFieldSchema) => !!data.totpCode || !!data.backupCode;
+
+type TwoFactorMethod = 'totp' | 'backup';
+
+export type TwoFactorCodeDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  isSubmitting?: boolean;
+  submitLabel: React.ReactNode;
+
+  /**
+   * Called when the user submits the code. Typically the parent form's submit handler.
+   */
+  onSubmit: () => void;
+};
+
+/**
+ * Collects a TOTP or backup code on top of an existing form, mirroring the
+ * sign in and disable 2FA dialogs.
+ *
+ * Must be rendered inside a `<Form>` whose values include `totpCode` and `backupCode`.
+ */
+export const TwoFactorCodeDialog = <T extends FieldValues & TTwoFactorCodeFieldSchema>({
+  open,
+  onOpenChange,
+  isSubmitting,
+  submitLabel,
+  onSubmit,
+}: TwoFactorCodeDialogProps) => {
+  const form = useFormContext<T>();
+
+  const [method, setMethod] = useState<TwoFactorMethod>('totp');
+
+  const totpCodeName = 'totpCode' as Path<T>;
+  const backupCodeName = 'backupCode' as Path<T>;
+
+  const onToggleMethod = () => {
+    form.resetField(totpCodeName);
+    form.resetField(backupCodeName);
+
+    setMethod((current) => (current === 'totp' ? 'backup' : 'totp'));
+  };
+
+  const handleOpenChange = (value: boolean) => {
+    if (isSubmitting) {
+      return;
+    }
+
+    if (!value) {
+      form.resetField(totpCodeName);
+      form.resetField(backupCodeName);
+      setMethod('totp');
+    }
+
+    onOpenChange(value);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Two-Factor Authentication</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            {method === 'totp' ? (
+              <Trans>Enter the code from your authenticator app to continue.</Trans>
+            ) : (
+              <Trans>Enter one of your backup codes to continue.</Trans>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <fieldset disabled={isSubmitting}>
+          {method === 'totp' && (
+            <FormField
+              control={form.control}
+              name={totpCodeName}
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <PinInput {...field} value={field.value ?? ''} maxLength={6} autoFocus>
+                      {Array(6)
+                        .fill(null)
+                        .map((_, i) => (
+                          <PinInputGroup key={i}>
+                            <PinInputSlot index={i} />
+                          </PinInputGroup>
+                        ))}
+                    </PinInput>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {method === 'backup' && (
+            <FormField
+              control={form.control}
+              name={backupCodeName}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>Backup Code</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="text" autoComplete="off" autoFocus {...field} value={field.value ?? ''} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          <DialogFooter className="mt-4">
+            <Button type="button" variant="secondary" onClick={onToggleMethod}>
+              {method === 'totp' ? <Trans>Use Backup Code</Trans> : <Trans>Use Authenticator</Trans>}
+            </Button>
+
+            <Button type="button" loading={isSubmitting} onClick={onSubmit}>
+              {submitLabel}
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/forms/organisation-two-factor-enforcement-form.tsx

@@ -0,0 +1,282 @@
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { isTwoFactorGracePeriodReduction } from '@documenso/lib/utils/two-factor';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const ZTwoFactorEnforcementFormSchema = z.object({
+  twoFactorRequired: z.boolean(),
+  twoFactorGracePeriodDays: z.coerce.number().int().min(0).max(365),
+  acknowledgeGracePeriodReduction: z.boolean(),
+});
+
+type TTwoFactorEnforcementFormSchema = z.infer<typeof ZTwoFactorEnforcementFormSchema>;
+
+/**
+ * Organisation 2FA enforcement settings (require toggle + grace period).
+ *
+ * Rendered only for MANAGE_ORGANISATION_SECURITY holders (ADMIN). When
+ * instance-wide enforcement is active the fields are shown disabled — not
+ * hidden — with a banner explaining that the instance policy takes
+ * precedence, so a configured organisation policy stays visible instead of
+ * resurfacing already-expired later.
+ */
+export const OrganisationTwoFactorEnforcementForm = () => {
+  const { _, i18n } = useLingui();
+  const { toast } = useToast();
+
+  const organisation = useCurrentOrganisation();
+  const { twoFactorEnforcement: instanceTwoFactorEnforcement } = useSession();
+
+  const isInstanceEnforcementActive = instanceTwoFactorEnforcement.required;
+
+  const { data: organisationWithSettings, isLoading } = trpc.organisation.get.useQuery({
+    organisationReference: organisation.url,
+  });
+
+  const utils = trpc.useUtils();
+
+  const { mutateAsync: updateOrganisationSettings } = trpc.organisation.settings.update.useMutation();
+
+  const settings = organisationWithSettings?.organisationGlobalSettings;
+
+  const form = useForm<TTwoFactorEnforcementFormSchema>({
+    values: {
+      twoFactorRequired: settings?.twoFactorRequired ?? false,
+      twoFactorGracePeriodDays: settings?.twoFactorGracePeriodDays ?? 7,
+      acknowledgeGracePeriodReduction: false,
+    },
+    resolver: zodResolver(ZTwoFactorEnforcementFormSchema),
+  });
+
+  const watchedValues = form.watch();
+
+  // Client-side mirror of the server's grace-reduction detection so we can
+  // surface the acknowledgement checkbox before submitting.
+  const isGraceReduction =
+    settings !== undefined &&
+    isTwoFactorGracePeriodReduction({
+      previous: settings.twoFactorRequired
+        ? {
+            anchors: [settings.twoFactorEnforcedFrom],
+            gracePeriodDays: settings.twoFactorGracePeriodDays,
+          }
+        : null,
+      next: watchedValues.twoFactorRequired
+        ? {
+            anchors: [settings.twoFactorRequired ? settings.twoFactorEnforcedFrom : new Date()],
+            gracePeriodDays: watchedValues.twoFactorGracePeriodDays,
+          }
+        : null,
+      now: new Date(),
+    });
+
+  const onSubmit = async (data: TTwoFactorEnforcementFormSchema) => {
+    try {
+      await updateOrganisationSettings({
+        organisationId: organisation.id,
+        acknowledgeGracePeriodReduction: data.acknowledgeGracePeriodReduction,
+        data: {
+          twoFactorRequired: data.twoFactorRequired,
+          twoFactorGracePeriodDays: data.twoFactorGracePeriodDays,
+        },
+      });
+
+      await utils.organisation.get.invalidate();
+
+      toast({
+        title: _(msg`Two-factor enforcement settings updated`),
+      });
+
+      form.setValue('acknowledgeGracePeriodReduction', false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.TWO_FACTOR_REQUIRED) {
+        toast({
+          title: _(msg`Two-factor authentication required`),
+          description: _(
+            msg`You must have two-factor authentication enabled and verified on this session before requiring it for the organisation.`,
+          ),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`We were unable to update the two-factor enforcement settings. Please try again.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (isLoading || !settings) {
+    return (
+      <div className="flex justify-center rounded-lg border py-16">
+        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <fieldset
+          disabled={form.formState.isSubmitting || isInstanceEnforcementActive}
+          className="flex flex-col gap-y-4"
+        >
+          {isInstanceEnforcementActive && (
+            <Alert variant="neutral">
+              <AlertTitle>
+                <Trans>Instance policy takes precedence</Trans>
+              </AlertTitle>
+              <AlertDescription>
+                <Trans>
+                  Two-factor authentication is enforced instance-wide by your administrator, so the organisation policy
+                  below is not editable while the instance policy is active.
+                </Trans>
+              </AlertDescription>
+            </Alert>
+          )}
+
+          <FormField
+            control={form.control}
+            name="twoFactorRequired"
+            render={({ field }) => (
+              <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                <div className="space-y-0.5 pr-4">
+                  <FormLabel>
+                    <Trans>Require two-factor authentication</Trans>
+                  </FormLabel>
+                  <FormDescription>
+                    <Trans>
+                      Members must enable two-factor authentication to access this organisation. Joining is never
+                      blocked — the grace period starts when a member joins.
+                    </Trans>
+                  </FormDescription>
+                </div>
+                <FormControl>
+                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="twoFactorGracePeriodDays"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Grace period (days)</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input type="number" min={0} max={365} {...field} />
+                </FormControl>
+                <FormDescription>
+                  <Trans>
+                    Number of days a member has to enable two-factor authentication after joining. 0 blocks organisation
+                    access immediately until they enrol.
+                  </Trans>
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {settings.twoFactorRequired && settings.twoFactorEnforcedFrom && (
+            <p className="text-muted-foreground text-sm">
+              <Trans>
+                Enforcement has been active since {i18n.date(settings.twoFactorEnforcedFrom, { dateStyle: 'long' })}.
+              </Trans>
+            </p>
+          )}
+
+          <Alert variant="neutral">
+            <AlertDescription>
+              <ul className="list-disc space-y-1 pl-4">
+                <li>
+                  <Trans>
+                    API tokens are exempt: tokens minted before a member's deadline keep working after it. Blocked
+                    members cannot mint new tokens.
+                  </Trans>
+                </li>
+                <li>
+                  <Trans>
+                    Members who have not yet complied still occupy a seat and count towards your member limit.
+                  </Trans>
+                </li>
+              </ul>
+            </AlertDescription>
+          </Alert>
+
+          {isGraceReduction && (
+            <Alert variant="warning">
+              <AlertTitle>
+                <Trans>This change reduces an active grace period</Trans>
+              </AlertTitle>
+              <AlertDescription className="flex flex-col gap-y-3">
+                <Trans>
+                  Members who have not yet enabled two-factor authentication will have less time to comply — possibly
+                  none, which blocks their organisation access immediately.
+                </Trans>
+
+                <FormField
+                  control={form.control}
+                  name="acknowledgeGracePeriodReduction"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center gap-x-2 space-y-0">
+                      <FormControl>
+                        <Checkbox
+                          checked={field.value}
+                          onCheckedChange={(checked) => field.onChange(checked === true)}
+                        />
+                      </FormControl>
+                      <FormLabel className="font-normal">
+                        <Trans>I understand that this reduces the remaining grace period for members</Trans>
+                      </FormLabel>
+                    </FormItem>
+                  )}
+                />
+              </AlertDescription>
+            </Alert>
+          )}
+
+          <div className="flex justify-end">
+            <Button
+              type="submit"
+              loading={form.formState.isSubmitting}
+              disabled={isGraceReduction && !watchedValues.acknowledgeGracePeriodReduction}
+            >
+              <Trans>Update</Trans>
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/password-setup-request-button.tsx

@@ -0,0 +1,53 @@
+import { usePasswordSetupRequest } from '@documenso/lib/client-only/hooks/use-password-setup-request';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { CheckIcon } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+/**
+ * Compact "send me a setup link" button that reports via toast, for settings
+ * cards where the surrounding layout provides the explanation.
+ */
+export const PasswordSetupRequestButton = () => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { user } = useSession();
+
+  const { requestSetupLink, isPending, isSuccess } = usePasswordSetupRequest({
+    onSuccess: () => {
+      toast({
+        title: _(msg`Check your email`),
+        description: _(msg`We've sent a link to ${user.email}. Follow it to set your password.`),
+        duration: 5000,
+      });
+    },
+    onError: (errorCode) => {
+      toast({
+        title: _(msg`An error occurred`),
+        description: match(errorCode)
+          .with('SIGNIN_DISABLED', () => _(msg`Password sign in is disabled for this instance.`))
+          .otherwise(() => _(msg`We were unable to send the email. Please try again later.`)),
+        variant: 'destructive',
+      });
+    },
+  });
+
+  if (isSuccess) {
+    return (
+      <Button variant="outline" className="flex-shrink-0 bg-background" disabled>
+        <CheckIcon className="mr-2 h-4 w-4" />
+        <Trans>Link sent</Trans>
+      </Button>
+    );
+  }
+
+  return (
+    <Button variant="outline" className="flex-shrink-0 bg-background" loading={isPending} onClick={requestSetupLink}>
+      <Trans>Send setup link</Trans>
+    </Button>
+  );
+};

apps/remix/app/components/forms/password-setup-request.tsx

@@ -0,0 +1,61 @@
+import { usePasswordSetupRequest } from '@documenso/lib/client-only/hooks/use-password-setup-request';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { match } from 'ts-pattern';
+
+export type PasswordSetupRequestProps = {
+  className?: string;
+};
+
+/**
+ * Inline "send me a setup link" control with its own sent/error states, for
+ * contexts like dialogs where a toast would be missed.
+ */
+export const PasswordSetupRequest = ({ className }: PasswordSetupRequestProps) => {
+  const { _ } = useLingui();
+  const { user } = useSession();
+
+  const { requestSetupLink, isPending, isSuccess, errorCode } = usePasswordSetupRequest();
+
+  if (isSuccess) {
+    return (
+      <Alert className={className} variant="neutral">
+        <AlertTitle>
+          <Trans>Check your email</Trans>
+        </AlertTitle>
+        <AlertDescription>
+          <Trans>
+            We've sent a link to {user.email}. Follow it to set your password, then sign in again to continue.
+          </Trans>
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <div className={className}>
+      {errorCode && (
+        <Alert className="mb-4" variant="destructive">
+          <AlertTitle>
+            <Trans>An error occurred</Trans>
+          </AlertTitle>
+          <AlertDescription>
+            {match(errorCode)
+              .with('SIGNIN_DISABLED', () =>
+                _(msg`Password sign in is disabled for this instance. Please contact support.`),
+              )
+              .otherwise(() => _(msg`We were unable to send the email. Please try again or contact support.`))}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <Button type="button" loading={isPending} onClick={requestSetupLink}>
+        <Trans>Send setup link</Trans>
+      </Button>
+    </div>
+  );
+};

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

@@ -1,6 +1,6 @@
 import { authClient } from '@documenso/auth/client';
 import type { SessionUser } from '@documenso/auth/server/lib/session/session';
-import { AppError } from '@documenso/lib/errors/app-error';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { ZCurrentPasswordSchema, ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -11,20 +11,21 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
-import { z } from 'zod';
+import type { z } from 'zod';
 
-export const ZPasswordFormSchema = z
-  .object({
-    currentPassword: ZCurrentPasswordSchema,
-    password: ZPasswordSchema,
-    repeatedPassword: ZPasswordSchema,
-  })
-  .refine((data) => data.password === data.repeatedPassword, {
-    message: 'Passwords do not match',
-    path: ['repeatedPassword'],
-  });
+import { hasTwoFactorCode, TwoFactorCodeDialog, ZTwoFactorCodeFieldSchema } from './2fa/two-factor-code-dialog';
+
+export const ZPasswordFormSchema = ZTwoFactorCodeFieldSchema.extend({
+  currentPassword: ZCurrentPasswordSchema,
+  password: ZPasswordSchema,
+  repeatedPassword: ZPasswordSchema,
+}).refine((data) => data.password === data.repeatedPassword, {
+  message: 'Passwords do not match',
+  path: ['repeatedPassword'],
+});
 
 export type TPasswordFormSchema = z.infer<typeof ZPasswordFormSchema>;
 
@@ -33,29 +34,51 @@ export type PasswordFormProps = {
   user: SessionUser;
 };
 
-export const PasswordForm = ({ className }: PasswordFormProps) => {
+export const PasswordForm = ({ className, user }: PasswordFormProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
+  const [isTwoFactorDialogOpen, setIsTwoFactorDialogOpen] = useState(false);
+
   const form = useForm<TPasswordFormSchema>({
     values: {
       currentPassword: '',
       password: '',
       repeatedPassword: '',
+      totpCode: '',
+      backupCode: '',
     },
     resolver: zodResolver(ZPasswordFormSchema),
   });
 
   const isSubmitting = form.formState.isSubmitting;
 
-  const onFormSubmit = async ({ currentPassword, password }: TPasswordFormSchema) => {
+  const onFormSubmit = async (values: TPasswordFormSchema) => {
+    const { currentPassword, password, totpCode, backupCode } = values;
+
+    // Collect the 2FA code in a dialog once the password fields are valid.
+    if (user.twoFactorEnabled && !hasTwoFactorCode(values)) {
+      if (isTwoFactorDialogOpen) {
+        const message = _(msg`A code is required`);
+
+        form.setError('totpCode', { message });
+        form.setError('backupCode', { message });
+      }
+
+      setIsTwoFactorDialogOpen(true);
+      return;
+    }
+
     try {
       await authClient.emailPassword.updatePassword({
         currentPassword,
         password,
+        totpCode: totpCode || undefined,
+        backupCode: backupCode || undefined,
       });
 
       form.reset();
+      setIsTwoFactorDialogOpen(false);
 
       toast({
         title: _(msg`Password updated`),
@@ -66,9 +89,14 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
       const error = AppError.parseError(err);
 
       const errorMessage = match(error.code)
-        .with('NO_PASSWORD', () => msg`User has no password.`)
-        .with('INCORRECT_PASSWORD', () => msg`Current password is incorrect.`)
-        .with('SAME_PASSWORD', () => msg`Your new password cannot be the same as your old password.`)
+        .with(AppErrorCode.NO_PASSWORD, () => msg`User has no password.`)
+        .with(AppErrorCode.INCORRECT_PASSWORD, () => msg`Current password is incorrect.`)
+        .with(AppErrorCode.SAME_PASSWORD, () => msg`Your new password cannot be the same as your old password.`)
+        .with(
+          AppErrorCode.INCORRECT_TWO_FACTOR_CODE,
+          AppErrorCode.TWO_FACTOR_MISSING_CREDENTIALS,
+          () => msg`The two factor code you provided is invalid. Please try again.`,
+        )
         .otherwise(
           () => msg`We encountered an unknown error while attempting to update your password. Please try again later.`,
         );
@@ -83,7 +111,12 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
 
   return (
     <Form {...form}>
-      <form className={cn('flex w-full flex-col gap-y-4', className)} onSubmit={form.handleSubmit(onFormSubmit)}>
+      {/* method="post" so a pre-hydration native submit can't leak passwords into the URL. */}
+      <form
+        method="post"
+        className={cn('flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      >
         <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
           <FormField
             control={form.control}
@@ -140,6 +173,14 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           </Button>
         </div>
       </form>
+
+      <TwoFactorCodeDialog<TPasswordFormSchema>
+        open={isTwoFactorDialogOpen}
+        onOpenChange={setIsTwoFactorDialogOpen}
+        isSubmitting={isSubmitting}
+        submitLabel={<Trans>Update password</Trans>}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      />
     </Form>
   );
 };

apps/remix/app/components/general/admin-two-factor-enforcement-section.tsx

@@ -0,0 +1,332 @@
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { isTwoFactorGracePeriodReduction } from '@documenso/lib/utils/two-factor';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { LoaderIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const ZTwoFactorEnforcementFormSchema = z.object({
+  enabled: z.boolean(),
+  gracePeriodDays: z.coerce.number().int().min(0).max(365),
+  acknowledgeGracePeriodReduction: z.boolean(),
+});
+
+type TTwoFactorEnforcementFormSchema = z.infer<typeof ZTwoFactorEnforcementFormSchema>;
+
+/**
+ * Instance-wide 2FA enforcement settings for the admin site-settings page.
+ *
+ * License-gated states:
+ *
+ * - Licensed: full form.
+ * - Unlicensed + unconfigured: section visible but disabled with a "requires
+ *   license" note.
+ * - Unlicensed + configured ("configured but inactive", e.g. license lapsed):
+ *   stored values shown read-only with a disable-only affordance — the only
+ *   permitted unlicensed update is turning the stored policy off.
+ */
+export const AdminTwoFactorEnforcementSection = () => {
+  const { _, i18n } = useLingui();
+  const { toast } = useToast();
+
+  const { data: enforcementConfig, isLoading } = trpc.admin.getTwoFactorEnforcement.useQuery();
+
+  const utils = trpc.useUtils();
+
+  const { mutateAsync: updateTwoFactorEnforcement, isPending: isUpdatePending } =
+    trpc.admin.updateTwoFactorEnforcement.useMutation();
+
+  const form = useForm<TTwoFactorEnforcementFormSchema>({
+    values: {
+      enabled: enforcementConfig?.enabled ?? false,
+      gracePeriodDays: enforcementConfig?.gracePeriodDays ?? 7,
+      acknowledgeGracePeriodReduction: false,
+    },
+    resolver: zodResolver(ZTwoFactorEnforcementFormSchema),
+  });
+
+  const watchedValues = form.watch();
+
+  const isLicensed = enforcementConfig?.isLicensed ?? false;
+  const isConfiguredButInactive = !isLicensed && (enforcementConfig?.enabled ?? false);
+
+  // Client-side mirror of the server's grace-reduction detection so we can
+  // surface the acknowledgement checkbox before submitting. The server resets
+  // `enforcedFrom` to now on an off→on transition, hence the `new Date()`
+  // anchor when the stored policy is currently disabled.
+  const isGraceReduction =
+    enforcementConfig !== undefined &&
+    isTwoFactorGracePeriodReduction({
+      previous: enforcementConfig.enabled
+        ? {
+            anchors: [enforcementConfig.enforcedFrom ? new Date(enforcementConfig.enforcedFrom) : null],
+            gracePeriodDays: enforcementConfig.gracePeriodDays,
+          }
+        : null,
+      next: watchedValues.enabled
+        ? {
+            anchors: [
+              enforcementConfig.enabled && enforcementConfig.enforcedFrom
+                ? new Date(enforcementConfig.enforcedFrom)
+                : new Date(),
+            ],
+            gracePeriodDays: watchedValues.gracePeriodDays,
+          }
+        : null,
+      now: new Date(),
+    });
+
+  const onUpdate = async (data: {
+    enabled: boolean;
+    gracePeriodDays: number;
+    acknowledgeGracePeriodReduction?: boolean;
+  }) => {
+    try {
+      await updateTwoFactorEnforcement(data);
+
+      await utils.admin.getTwoFactorEnforcement.invalidate();
+
+      toast({
+        title: _(msg`Two-factor enforcement settings updated`),
+      });
+
+      form.setValue('acknowledgeGracePeriodReduction', false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.TWO_FACTOR_REQUIRED) {
+        toast({
+          title: _(msg`Two-factor authentication required`),
+          description: _(
+            msg`Enable two-factor authentication on your own account and verify it on this session before requiring it for the instance.`,
+          ),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      if (error.code === AppErrorCode.FORBIDDEN) {
+        toast({
+          title: _(msg`License required`),
+          description: _(
+            msg`Your license does not include instance-wide two-factor enforcement. Only disabling the stored configuration is permitted.`,
+          ),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`We were unable to update the two-factor enforcement settings. Please try again.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onSubmit = async (data: TTwoFactorEnforcementFormSchema) => {
+    await onUpdate(data);
+  };
+
+  // Disable-only affordance for the "configured but inactive" state: submits
+  // an enabled→disabled transition with the stored values unchanged, which is
+  // the only unlicensed update the server accepts.
+  const onDisableOnly = async () => {
+    if (!enforcementConfig) {
+      return;
+    }
+
+    await onUpdate({
+      enabled: false,
+      gracePeriodDays: enforcementConfig.gracePeriodDays,
+    });
+  };
+
+  return (
+    <div>
+      <h2 className="font-semibold">
+        <Trans>Instance Two-Factor Enforcement</Trans>
+      </h2>
+      <p className="mt-2 text-muted-foreground text-sm">
+        <Trans>
+          Require every user on this instance, including administrators, to enable two-factor authentication within a
+          grace period.
+        </Trans>
+      </p>
+
+      {isLoading || !enforcementConfig ? (
+        <div className="mt-4 flex justify-center rounded-lg border py-16">
+          <LoaderIcon className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : (
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset disabled={form.formState.isSubmitting || !isLicensed} className="mt-4 flex flex-col gap-y-4">
+              {!isLicensed && !isConfiguredButInactive && (
+                <Alert variant="neutral">
+                  <AlertTitle>
+                    <Trans>Requires a license</Trans>
+                  </AlertTitle>
+                  <AlertDescription>
+                    <Trans>
+                      Instance-wide two-factor enforcement requires a Documenso license that includes this feature.
+                    </Trans>
+                  </AlertDescription>
+                </Alert>
+              )}
+
+              {isConfiguredButInactive && (
+                <Alert variant="warning">
+                  <AlertTitle>
+                    <Trans>Configured but inactive</Trans>
+                  </AlertTitle>
+                  <AlertDescription>
+                    <Trans>
+                      Two-factor enforcement is configured but your current license does not include this feature, so it
+                      is not being enforced. You can disable the stored configuration below; changing it requires a
+                      license.
+                    </Trans>
+                  </AlertDescription>
+                </Alert>
+              )}
+
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5 pr-4">
+                      <FormLabel>
+                        <Trans>Require two-factor authentication</Trans>
+                      </FormLabel>
+                      <FormDescription>
+                        <Trans>
+                          Users who have not enabled two-factor authentication by their deadline are redirected to a
+                          forced enrolment page before they can continue.
+                        </Trans>
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="gracePeriodDays"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Grace period (days)</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input type="number" min={0} max={365} {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      <Trans>
+                        Number of days a user has to enable two-factor authentication. 0 forces enrolment immediately
+                        after signing up or signing in.
+                      </Trans>
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {enforcementConfig.isActive && enforcementConfig.enforcedFrom && (
+                <p className="text-muted-foreground text-sm">
+                  <Trans>
+                    Enforcement has been active since{' '}
+                    {i18n.date(new Date(enforcementConfig.enforcedFrom), { dateStyle: 'long' })}.
+                  </Trans>
+                </p>
+              )}
+
+              <Alert variant="neutral">
+                <AlertDescription>
+                  <Trans>
+                    API tokens are exempt: tokens minted before a user's deadline keep working after it. Blocked users
+                    cannot mint new tokens.
+                  </Trans>
+                </AlertDescription>
+              </Alert>
+
+              {isGraceReduction && (
+                <Alert variant="warning">
+                  <AlertTitle>
+                    <Trans>This change reduces an active grace period</Trans>
+                  </AlertTitle>
+                  <AlertDescription className="flex flex-col gap-y-3">
+                    <Trans>
+                      Users who have not yet enabled two-factor authentication will have less time to comply — possibly
+                      none, which blocks their access immediately.
+                    </Trans>
+
+                    <FormField
+                      control={form.control}
+                      name="acknowledgeGracePeriodReduction"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-row items-center gap-x-2 space-y-0">
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value}
+                              onCheckedChange={(checked) => field.onChange(checked === true)}
+                            />
+                          </FormControl>
+                          <FormLabel className="font-normal">
+                            <Trans>I understand that this reduces the remaining grace period for users</Trans>
+                          </FormLabel>
+                        </FormItem>
+                      )}
+                    />
+                  </AlertDescription>
+                </Alert>
+              )}
+
+              <div className="flex justify-end">
+                <Button
+                  type="submit"
+                  loading={form.formState.isSubmitting}
+                  disabled={isGraceReduction && !watchedValues.acknowledgeGracePeriodReduction}
+                >
+                  <Trans>Update</Trans>
+                </Button>
+              </div>
+            </fieldset>
+
+            {isConfiguredButInactive && (
+              <div className="mt-4 flex justify-end">
+                <Button type="button" variant="destructive" loading={isUpdatePending} onClick={onDisableOnly}>
+                  <Trans>Disable enforcement</Trans>
+                </Button>
+              </div>
+            )}
+          </form>
+        </Form>
+      )}
+    </div>
+  );
+};

apps/remix/app/components/general/direct-template/direct-template-page.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { AppError } from '@documenso/lib/errors/app-error';
 import type { TTemplate } from '@documenso/lib/types/template';
@@ -41,6 +42,7 @@ export const DirectTemplatePageView = ({
 
   const { _ } = useLingui();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const { email, fullName, setEmail } = useRequiredDocumentSigningContext();
   const { recipient, setRecipient } = useRequiredDocumentSigningAuthContext();
@@ -124,6 +126,13 @@ export const DirectTemplatePageView = ({
       const error = AppError.parseError(err);
       const errorMessage = getDirectTemplateErrorMessage(error.code);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'direct_template',
+        recipientId: directTemplateRecipient.id,
+        envelopeId: template.envelopeId,
+      });
+
       toast({
         title: _(errorMessage.title),
         description: _(errorMessage.description),

apps/remix/app/components/general/document-signing/document-signing-auth-password.tsx

@@ -1,5 +1,7 @@
 import { AppError } from '@documenso/lib/errors/app-error';
 import { DocumentAuth, type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { UserAuthMethod } from '@documenso/lib/types/user-auth-method';
+import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { DialogFooter } from '@documenso/ui/primitives/dialog';
@@ -7,11 +9,13 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 import { Input } from '@documenso/ui/primitives/input';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
+import { Loader2Icon } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningAuthSetPassword } from './document-signing-auth-set-password';
 
 export type DocumentSigningAuthPasswordProps = {
   open: boolean;
@@ -35,8 +39,12 @@ export const DocumentSigningAuthPassword = ({
 }: DocumentSigningAuthPasswordProps) => {
   const { t } = useLingui();
 
-  const { recipient, isCurrentlyAuthenticating, setIsCurrentlyAuthenticating } =
-    useRequiredDocumentSigningAuthContext();
+  const { user, isCurrentlyAuthenticating, setIsCurrentlyAuthenticating } = useRequiredDocumentSigningAuthContext();
+
+  // Fetched on demand since this is only needed once the user opts for password auth.
+  const { data: authMethodsData, isPending: isAuthMethodsPending } = trpc.auth.getAuthMethods.useQuery(undefined, {
+    enabled: !!user,
+  });
 
   const form = useForm<TPasswordAuthFormSchema>({
     resolver: zodResolver(ZPasswordAuthFormSchema),
@@ -47,6 +55,10 @@ export const DocumentSigningAuthPassword = ({
 
   const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
 
+  // If the query fails we fall through to the regular password form rather than blocking.
+  const isPasswordSetupRequired =
+    !!user && !!authMethodsData && !authMethodsData.authMethods.includes(UserAuthMethod.PASSWORD);
+
   const onFormSubmit = async ({ password }: TPasswordAuthFormSchema) => {
     try {
       setIsCurrentlyAuthenticating(true);
@@ -64,8 +76,6 @@ export const DocumentSigningAuthPassword = ({
 
       const error = AppError.parseError(err);
       setFormErrorCode(error.code);
-
-      // Todo: Alert.
     }
   };
 
@@ -79,9 +89,22 @@ export const DocumentSigningAuthPassword = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
+  if (user && isAuthMethodsPending) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2Icon className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (isPasswordSetupRequired) {
+    return <DocumentSigningAuthSetPassword onOpenChange={onOpenChange} />;
+  }
+
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+      {/* method="post" so a pre-hydration native submit can't leak the password into the URL. */}
+      <form method="post" onSubmit={form.handleSubmit(onFormSubmit)}>
         <fieldset disabled={isCurrentlyAuthenticating}>
           <div className="space-y-4">
             {formErrorCode && (

apps/remix/app/components/general/document-signing/document-signing-auth-set-password.tsx

@@ -0,0 +1,63 @@
+import { isSigninEnabledForProvider } from '@documenso/lib/constants/auth';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { DialogFooter } from '@documenso/ui/primitives/dialog';
+import { Trans } from '@lingui/react/macro';
+
+import { PasswordSetupRequest } from '~/components/forms/password-setup-request';
+
+export type DocumentSigningAuthSetPasswordProps = {
+  onOpenChange: (value: boolean) => void;
+};
+
+/**
+ * Shown in place of the password reauth form when the signed in user has no
+ * password (e.g. they signed up via OAuth or a passkey).
+ *
+ * Password based action auth is meant to prove more than possession of a session,
+ * so rather than letting the session set a password inline we send the user the
+ * verified reset link and ask them to come back.
+ */
+export const DocumentSigningAuthSetPassword = ({ onOpenChange }: DocumentSigningAuthSetPasswordProps) => {
+  const isEmailPasswordSigninEnabled = isSigninEnabledForProvider('email');
+
+  return (
+    <div className="space-y-4">
+      {isEmailPasswordSigninEnabled ? (
+        <>
+          <Alert variant="neutral">
+            <AlertTitle>
+              <Trans>No password set</Trans>
+            </AlertTitle>
+            <AlertDescription>
+              <Trans>
+                Signing this field requires a password, but your account does not have one. We can email you a link to
+                set one. Once done, sign in again and return to this document to continue.
+              </Trans>
+            </AlertDescription>
+          </Alert>
+
+          <PasswordSetupRequest />
+        </>
+      ) : (
+        <Alert variant="warning">
+          <AlertTitle>
+            <Trans>Password authentication unavailable</Trans>
+          </AlertTitle>
+          <AlertDescription>
+            <Trans>
+              Your account does not have a password and password sign in is disabled for this instance. Please contact
+              the document sender to use a different authentication method.
+            </Trans>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <DialogFooter>
+        <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+          <Trans>Close</Trans>
+        </Button>
+      </DialogFooter>
+    </div>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -39,6 +40,7 @@ export const DocumentSigningCheckboxField = ({
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
 
@@ -126,6 +128,13 @@ export const DocumentSigningCheckboxField = ({
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -157,6 +166,13 @@ export const DocumentSigningCheckboxField = ({
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),
@@ -216,6 +232,13 @@ export const DocumentSigningCheckboxField = ({
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while updating the signature.`),

apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { type TRecipientAccessAuth, ZDocumentAccessAuthSchema } from '@documenso/lib/types/document-auth';
 import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
@@ -88,6 +89,7 @@ export const DocumentSigningCompleteDialog = ({
   position,
   disableNameInput = false,
 }: DocumentSigningCompleteDialogProps) => {
+  const analytics = useAnalytics();
   const { t, i18n } = useLingui();
   const { toast } = useToast();
 
@@ -179,6 +181,11 @@ export const DocumentSigningCompleteDialog = ({
         return;
       }
 
+      analytics.captureException(error, {
+        source: 'signing',
+        location: 'complete_document',
+      });
+
       // This dialog owns the completion error toast for every signing surface
       // so the user gets a specific, actionable message. Callers should run
       // their own side effects (e.g. embeds posting document-error) and

apps/remix/app/components/general/document-signing/document-signing-date-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { convertToLocalSystemFormat, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -39,6 +40,7 @@ export const DocumentSigningDateField = ({
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
 
@@ -85,6 +87,13 @@ export const DocumentSigningDateField = ({
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -113,6 +122,13 @@ export const DocumentSigningDateField = ({
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -35,6 +36,7 @@ export const DocumentSigningDropdownField = ({
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
 
@@ -86,6 +88,13 @@ export const DocumentSigningDropdownField = ({
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -120,6 +129,13 @@ export const DocumentSigningDropdownField = ({
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document-signing/document-signing-email-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -33,6 +34,7 @@ export const DocumentSigningEmailField = ({ field, onSignField, onUnsignField }:
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { email: providedEmail } = useRequiredDocumentSigningContext();
 
@@ -78,6 +80,13 @@ export const DocumentSigningEmailField = ({ field, onSignField, onUnsignField }:
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -106,6 +115,13 @@ export const DocumentSigningEmailField = ({ field, onSignField, onUnsignField }:
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -38,6 +39,7 @@ export const DocumentSigningInitialsField = ({
   const { toast } = useToast();
   const { _ } = useLingui();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { fullName } = useRequiredDocumentSigningContext();
   const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
@@ -84,6 +86,13 @@ export const DocumentSigningInitialsField = ({
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -112,6 +121,13 @@ export const DocumentSigningInitialsField = ({
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document-signing/document-signing-name-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -39,6 +40,7 @@ export const DocumentSigningNameField = ({ field, onSignField, onUnsignField }:
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { fullName: providedFullName, setFullName: setProvidedFullName } = useRequiredDocumentSigningContext();
 
@@ -116,6 +118,13 @@ export const DocumentSigningNameField = ({ field, onSignField, onUnsignField }:
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -144,6 +153,13 @@ export const DocumentSigningNameField = ({ field, onSignField, onUnsignField }:
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document-signing/document-signing-number-field.tsx

@@ -1,4 +1,5 @@
 import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -47,6 +48,7 @@ export const DocumentSigningNumberField = ({ field, onSignField, onUnsignField }
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
 
@@ -142,6 +144,13 @@ export const DocumentSigningNumberField = ({ field, onSignField, onUnsignField }
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -193,6 +202,13 @@ export const DocumentSigningNumberField = ({ field, onSignField, onUnsignField }
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx

@@ -1,4 +1,3 @@
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
@@ -83,8 +82,6 @@ export const DocumentSigningPageViewV1 = ({
     ? authUser.twoFactorEnabled && authUser.email === recipient.email
     : false;
 
-  const analytics = useAnalytics();
-
   const [selectedSignerId, setSelectedSignerId] = useState<number | null>(allRecipients?.[0]?.id);
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -118,12 +115,6 @@ export const DocumentSigningPageViewV1 = ({
 
     await completeDocumentWithToken(payload);
 
-    analytics.capture('App: Recipient has completed signing', {
-      signerId: recipient.id,
-      documentId: document.id,
-      timestamp: new Date().toISOString(),
-    });
-
     if (documentMeta?.redirectUrl) {
       window.location.href = documentMeta.redirectUrl;
     } else {

apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -31,6 +32,7 @@ export const DocumentSigningRadioField = ({ field, onSignField, onUnsignField }:
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient, targetSigner, isAssistantMode } = useDocumentSigningRecipientContext();
 
@@ -91,6 +93,13 @@ export const DocumentSigningRadioField = ({ field, onSignField, onUnsignField }:
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -120,6 +129,13 @@ export const DocumentSigningRadioField = ({ field, onSignField, onUnsignField }:
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the selection.`),

apps/remix/app/components/general/document-signing/document-signing-reject-dialog.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -41,6 +42,7 @@ export function DocumentSigningRejectDialog({
 }: DocumentSigningRejectDialogProps) {
   const { t } = useLingui();
   const { toast } = useToast();
+  const analytics = useAnalytics();
   const [searchParams] = useSearchParams();
 
   const [isOpen, setIsOpen] = useState(false);
@@ -76,6 +78,12 @@ export function DocumentSigningRejectDialog({
         window.location.href = `/sign/${token}/rejected`;
       }
     } catch (err) {
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'reject_document',
+        documentId,
+      });
+
       toast({
         title: t`Error`,
         description: t`An error occurred while rejecting the document. Please try again.`,

apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -47,6 +48,7 @@ export const DocumentSigningSignatureField = ({
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient } = useDocumentSigningRecipientContext();
 
@@ -157,6 +159,13 @@ export const DocumentSigningSignatureField = ({
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while signing the document.`),
@@ -183,6 +192,13 @@ export const DocumentSigningSignatureField = ({
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the signature.`),

apps/remix/app/components/general/document-signing/document-signing-text-field.tsx

@@ -1,4 +1,5 @@
 import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -50,6 +51,7 @@ export const DocumentSigningTextField = ({ field, onSignField, onUnsignField }:
   const { _ } = useLingui();
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
+  const analytics = useAnalytics();
 
   const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
 
@@ -170,6 +172,13 @@ export const DocumentSigningTextField = ({ field, onSignField, onUnsignField }:
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: isAssistantMode
@@ -200,6 +209,13 @@ export const DocumentSigningTextField = ({ field, onSignField, onUnsignField }:
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'remove_field',
+        fieldType: field.type,
+        recipientId: field.recipientId,
+      });
+
       toast({
         title: _(msg`Error`),
         description: _(msg`An error occurred while removing the field.`),

apps/remix/app/components/general/document/document-edit-form.tsx

@@ -28,6 +28,7 @@ import { useNavigate, useSearchParams } from 'react-router';
 import { z } from 'zod';
 import PDFViewerLazy from '~/components/general/pdf-viewer/pdf-viewer-lazy';
 import { useCurrentTeam } from '~/providers/team';
+import { useCspNonce } from '~/utils/nonce';
 import { getDistributeErrorMessage } from '~/utils/toast-error-messages';
 
 export type DocumentEditFormProps = {
@@ -42,6 +43,7 @@ const EditDocumentSteps: EditDocumentStep[] = ['settings', 'signers', 'fields',
 export const DocumentEditForm = ({ className, initialDocument, documentRootPath }: DocumentEditFormProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
+  const cspNonce = useCspNonce();
 
   const navigate = useNavigate();
 
@@ -473,6 +475,7 @@ export const DocumentEditForm = ({ className, initialDocument, documentRootPath
               onSubmit={onAddSignersFormSubmit}
               onAutoSave={onAddSignersFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
+              nonce={cspNonce}
             />
 
             <AddFieldsFormPartial

apps/remix/app/components/general/document/document-upload-button-legacy.tsx

@@ -1,5 +1,4 @@
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
@@ -38,7 +37,6 @@ export const DocumentUploadButtonLegacy = ({ className, type }: DocumentUploadBu
   const team = useCurrentTeam();
 
   const navigate = useNavigate();
-  const analytics = useAnalytics();
   const organisation = useCurrentOrganisation();
 
   const userTimezone =
@@ -103,12 +101,6 @@ export const DocumentUploadButtonLegacy = ({ className, type }: DocumentUploadBu
           description: _(msg`Your document has been uploaded successfully.`),
           duration: 5000,
         });
-
-        analytics.capture('App: Document Uploaded', {
-          userId: user.id,
-          documentId: id,
-          timestamp: new Date().toISOString(),
-        });
       }
 
       // Handle legacy template creation.

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import type { TLocalField } from '@documenso/lib/client-only/hooks/use-editor-fields';
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
@@ -37,8 +38,12 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { fieldButtonList } from './envelope-editor-fields-drag-drop';
 import { EnvelopeRecipientSelectorCommand } from './envelope-recipient-selector';
 
+/** How far past a resize handle you can still grab it, in screen pixels. */
+const TRANSFORMER_ANCHOR_HIT_STROKE_PX = 24;
+
 export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageRenderData }) => {
   const { t, i18n } = useLingui();
+  const analytics = useAnalytics();
   const { envelope, editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
   const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
 
@@ -276,6 +281,13 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
       unsafeRenderFieldOnLayer(field);
     } catch (err) {
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'editor',
+        location: 'envelope_page_render',
+        envelopeId: envelope.id,
+      });
+
       setRenderError(true);
     }
   };
@@ -350,6 +362,9 @@ export const EnvelopeEditorFieldsPageRenderer = ({ pageData }: { pageData: PageR
       shouldOverdrawWholeArea: true,
       ignoreStroke: true,
       flipEnabled: false,
+      anchorStyleFunc: (anchor) => {
+        anchor.hitStrokeWidth(TRANSFORMER_ANCHOR_HIT_STROKE_PX / scale);
+      },
       boundBoxFunc: (oldBox, newBox) => {
         // Enforce minimum size
         if (newBox.width < 30 || newBox.height < 20) {

apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx

@@ -45,6 +45,7 @@ import { isDeepEqual } from 'remeda';
 import { AiFeaturesEnableDialog } from '~/components/dialogs/ai-features-enable-dialog';
 import { AiRecipientDetectionDialog } from '~/components/dialogs/ai-recipient-detection-dialog';
 import { useCurrentTeam } from '~/providers/team';
+import { useCspNonce } from '~/utils/nonce';
 
 export const EnvelopeEditorRecipientForm = () => {
   const { envelope, setRecipientsDebounced, updateEnvelope, editorRecipients, isEmbedded, editorConfig } =
@@ -52,6 +53,7 @@ export const EnvelopeEditorRecipientForm = () => {
 
   const organisation = useCurrentOrganisation();
   const team = useCurrentTeam();
+  const cspNonce = useCspNonce();
 
   const { t } = useLingui();
   const { toast } = useToast();
@@ -795,6 +797,7 @@ export const EnvelopeEditorRecipientForm = () => {
           </div>
 
           <DragDropContext
+            nonce={cspNonce}
             onDragEnd={onDragEnd}
             sensors={[
               (api: SensorAPI) => {

apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx

@@ -1,4 +1,5 @@
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useEnvelopeAutosave } from '@documenso/lib/client-only/hooks/use-envelope-autosave';
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
@@ -25,6 +26,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { ErrorCode as DropzoneErrorCode, type FileRejection, useDropzone } from 'react-dropzone';
 
 import { EnvelopeItemDeleteDialog } from '~/components/dialogs/envelope-item-delete-dialog';
+import { useCspNonce } from '~/utils/nonce';
 
 import { EnvelopeEditorInvalidDirectTemplateAlert } from './envelope-editor-invalid-direct-template-alert';
 import { EnvelopeEditorRecipientForm } from './envelope-editor-recipient-form';
@@ -41,10 +43,12 @@ type LocalFile = {
 
 export const EnvelopeEditorUploadPage = () => {
   const organisation = useCurrentOrganisation();
+  const cspNonce = useCspNonce();
 
   const { t, i18n } = useLingui();
   const { maximumEnvelopeItemCount, remaining } = useLimits();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const {
     envelope,
@@ -213,6 +217,12 @@ export const EnvelopeEditorUploadPage = () => {
     const { data } = await createPromise.catch((error) => {
       console.error(error);
 
+      analytics.captureException(error, {
+        source: isEmbedded ? 'embed' : 'editor',
+        location: 'create_envelope_items',
+        envelopeId: envelope.id,
+      });
+
       // Set error state on files in batch upload.
       setLocalFiles((prev) =>
         prev.map((uploadingFile) =>
@@ -290,6 +300,12 @@ export const EnvelopeEditorUploadPage = () => {
     } catch (error) {
       console.error(error);
 
+      analytics.captureException(error, {
+        source: isEmbedded ? 'embed' : 'editor',
+        location: 'replace_pdf',
+        envelopeId: envelope.id,
+      });
+
       toast({
         title: t`Replace failed`,
         description: t`Something went wrong while replacing the PDF`,
@@ -480,7 +496,7 @@ export const EnvelopeEditorUploadPage = () => {
 
           {/* Uploaded Files List */}
           <div className="mt-4">
-            <DragDropContext onDragEnd={onDragEnd}>
+            <DragDropContext nonce={cspNonce} onDragEnd={onDragEnd}>
               <Droppable droppableId="files">
                 {(provided) => (
                   <div

apps/remix/app/components/general/envelope-editor/envelope-generic-page-renderer.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
 import {
   type PageRenderData,
@@ -18,6 +19,7 @@ type GenericLocalField = TEnvelope['fields'][number] & {
 
 export const EnvelopeGenericPageRenderer = ({ pageData }: { pageData: PageRenderData }) => {
   const { i18n } = useLingui();
+  const analytics = useAnalytics();
 
   const {
     envelopeStatus,
@@ -114,6 +116,13 @@ export const EnvelopeGenericPageRenderer = ({ pageData }: { pageData: PageRender
       unsafeRenderFieldOnLayer(field);
     } catch (err) {
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'editor',
+        location: 'envelope_page_render',
+        envelopeId: currentEnvelopeItem?.envelopeId,
+      });
+
       setRenderError(true);
     }
   };

apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
 import {
   type PageRenderData,
@@ -53,6 +54,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
 
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const {
     envelopeData,
@@ -426,6 +428,14 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
       unsafeRenderFieldOnLayer(unparsedField, fieldCanvasStyleCache);
     } catch (err) {
       console.error(err);
+
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'page_render',
+        recipientId: recipient.id,
+        envelopeId: envelope.id,
+      });
+
       setRenderError(true);
     }
   };
@@ -507,6 +517,14 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
     } catch (err) {
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'sign_field',
+        fieldType: payload.type,
+        recipientId: recipient.id,
+        envelopeId: envelope.id,
+      });
+
       toast({
         title: t`Error`,
         description: t`An error occurred while signing the field.`,

apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx

@@ -118,12 +118,6 @@ export const EnvelopeSignerCompleteDialog = () => {
           title: t`Document already signed`,
           description: t`This document was already signed and no further action was taken.`,
         });
-      } else {
-        analytics.capture('App: Recipient has completed signing', {
-          signerId: recipient.id,
-          documentId: envelope.id,
-          timestamp: new Date().toISOString(),
-        });
       }
 
       if (onDocumentCompleted) {
@@ -148,6 +142,13 @@ export const EnvelopeSignerCompleteDialog = () => {
       const error = AppError.parseError(err);
 
       if (error.code !== AppErrorCode.TWO_FACTOR_AUTH_FAILED) {
+        analytics.captureException(err, {
+          source: 'signing',
+          location: 'complete_document',
+          recipientId: recipient.id,
+          envelopeId: envelope.id,
+        });
+
         onDocumentError?.();
       }
 
@@ -221,6 +222,13 @@ export const EnvelopeSignerCompleteDialog = () => {
     } catch (err) {
       console.log('err', err);
 
+      analytics.captureException(err, {
+        source: 'signing',
+        location: 'complete_document_next_signer',
+        recipientId: recipient.id,
+        envelopeId: envelope.id,
+      });
+
       onDocumentError?.();
 
       // Rethrow so DocumentSigningCompleteDialog can toast a specific

apps/remix/app/components/general/envelope/envelope-drop-zone-wrapper.tsx

@@ -93,14 +93,6 @@ export const EnvelopeDropZoneWrapper = ({ children, type, className }: EnvelopeD
         duration: 5000,
       });
 
-      if (type === EnvelopeType.DOCUMENT) {
-        analytics.capture('App: Document Uploaded', {
-          userId: user.id,
-          documentId: id,
-          timestamp: new Date().toISOString(),
-        });
-      }
-
       const pathPrefix = type === EnvelopeType.DOCUMENT ? formatDocumentsPath(team.url) : formatTemplatesPath(team.url);
 
       const aiQueryParam = team.preferences.aiFeaturesEnabled ? '?ai=true' : '';
@@ -109,6 +101,11 @@ export const EnvelopeDropZoneWrapper = ({ children, type, className }: EnvelopeD
     } catch (err) {
       const error = AppError.parseError(err);
 
+      analytics.captureException(err, {
+        source: 'editor',
+        location: 'upload_document',
+      });
+
       const errorMessage = getUploadErrorMessage(error.code);
 
       toast({

apps/remix/app/components/general/envelope/envelope-upload-button.tsx

@@ -1,4 +1,5 @@
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
@@ -34,6 +35,7 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
   const { t, i18n } = useLingui();
   const { toast } = useToast();
   const { user } = useSession();
+  const analytics = useAnalytics();
 
   const team = useCurrentTeam();
 
@@ -112,6 +114,11 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
 
       console.error(err);
 
+      analytics.captureException(err, {
+        source: 'editor',
+        location: 'upload_document',
+      });
+
       const errorMessage = getUploadErrorMessage(error.code);
 
       toast({

apps/remix/app/components/general/pdf-viewer/pdf-viewer.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import type { ImageLoadingState, PageRenderData } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { PDF_VIEWER_PAGE_CLASSNAME } from '@documenso/lib/constants/pdf-viewer';
 import { cn } from '@documenso/ui/lib/utils';
@@ -68,6 +69,7 @@ export default function PDFViewer({
 }: PDFViewerProps) {
   const { t } = useLingui();
   const { toast } = useToast();
+  const analytics = useAnalytics();
 
   const $el = useRef<HTMLDivElement>(null);
 
@@ -150,6 +152,11 @@ export default function PDFViewer({
         console.error(err);
         setLoadingState('error');
 
+        analytics.captureException(err, {
+          source: 'pdf_viewer',
+          location: 'pdf_load',
+        });
+
         toast({
           title: t`Error`,
           description: t`An error occurred while loading the document.`,
@@ -366,6 +373,8 @@ const PdfViewerPage = ({
  * Manages rendering a page from a pdf.
  */
 const usePdfPageImage = ({ pageNumber, pdf, scale, scaledWidth, scaledHeight }: PdfViewerPageProps) => {
+  const analytics = useAnalytics();
+
   const [imageLoadingState, setImageLoadingState] = useState<ImageLoadingState>('loading');
 
   const [imageUrl, setImageUrl] = useState('');
@@ -457,6 +466,12 @@ const usePdfPageImage = ({ pageNumber, pdf, scale, scaledWidth, scaledHeight }:
 
         if (!isCancelled) {
           console.error(err);
+
+          analytics.captureException(err, {
+            source: 'pdf_viewer',
+            location: 'pdf_page_render',
+          });
+
           setImageLoadingState('error');
         }
       } finally {

apps/remix/app/components/general/template/template-edit-form.tsx

@@ -25,6 +25,7 @@ import { z } from 'zod';
 
 import PDFViewerLazy from '~/components/general/pdf-viewer/pdf-viewer-lazy';
 import { useCurrentTeam } from '~/providers/team';
+import { useCspNonce } from '~/utils/nonce';
 
 export type TemplateEditFormProps = {
   className?: string;
@@ -38,6 +39,7 @@ const EditTemplateSteps: EditTemplateStep[] = ['settings', 'signers', 'fields'];
 export const TemplateEditForm = ({ initialTemplate, className, templateRootPath }: TemplateEditFormProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const cspNonce = useCspNonce();
 
   const navigate = useNavigate();
   const team = useCurrentTeam();
@@ -339,6 +341,7 @@ export const TemplateEditForm = ({ initialTemplate, className, templateRootPath
               onSubmit={onAddTemplatePlaceholderFormSubmit}
               onAutoSave={onAddTemplatePlaceholderFormAutoSave}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
+              nonce={cspNonce}
             />
 
             <AddTemplateFieldsFormPartial

apps/remix/app/components/general/two-factor-grace-banner.tsx

@@ -0,0 +1,144 @@
+import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import type { TTwoFactorEnforcementStatus } from '@documenso/lib/utils/two-factor';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { AlertTriangleIcon, XIcon } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { Link, useLocation } from 'react-router';
+
+type GraceBannerCandidate = {
+  /**
+   * Dismissal scope: `instance` or `org:<organisationId>`.
+   */
+  scope: string;
+  deadline: Date;
+  isSessionUnverified: boolean;
+};
+
+const buildDismissalKey = (userId: number, candidate: GraceBannerCandidate) =>
+  `2fa-grace-banner:${userId}:${candidate.scope}:${candidate.deadline.getTime()}`;
+
+const toCandidate = (
+  status: TTwoFactorEnforcementStatus,
+  scope: string,
+  isSessionUnverified: boolean,
+): GraceBannerCandidate | null => {
+  // Banner territory is the grace window only: required, not yet satisfied,
+  // not yet expired. Expiry is handled by the org 403 screen (and, for
+  // instance enforcement, the onboarding redirect).
+  if (!status.required || status.isSatisfied || status.isDeadlineExpired) {
+    return null;
+  }
+
+  return {
+    scope,
+    deadline: status.deadline,
+    isSessionUnverified,
+  };
+};
+
+/**
+ * Shared grace-period banner for 2FA enforcement.
+ *
+ * Shows the NEAREST applicable deadline between instance enforcement and the
+ * current organisation's enforcement. Dismissal is stored in `sessionStorage`
+ * keyed by userId + scope + deadline, so a changed deadline re-shows the
+ * banner.
+ */
+export const TwoFactorGraceBanner = () => {
+  const { i18n } = useLingui();
+
+  const { sessionData } = useOptionalSession();
+  const currentOrganisation = useOptionalCurrentOrganisation();
+
+  const location = useLocation();
+
+  const [dismissedKeys, setDismissedKeys] = useState<string[]>([]);
+
+  const candidate = useMemo(() => {
+    if (!sessionData) {
+      return null;
+    }
+
+    const isSessionUnverified = sessionData.user.twoFactorEnabled && !sessionData.session.twoFactorVerified;
+
+    const candidates = [
+      toCandidate(sessionData.twoFactorEnforcement, 'instance', isSessionUnverified),
+      currentOrganisation
+        ? toCandidate(currentOrganisation.twoFactorEnforcement, `org:${currentOrganisation.id}`, isSessionUnverified)
+        : null,
+    ].filter((value): value is GraceBannerCandidate => value !== null);
+
+    if (candidates.length === 0) {
+      return null;
+    }
+
+    return candidates.reduce((nearest, current) =>
+      current.deadline.getTime() < nearest.deadline.getTime() ? current : nearest,
+    );
+  }, [sessionData, currentOrganisation]);
+
+  if (!sessionData || !candidate) {
+    return null;
+  }
+
+  const dismissalKey = buildDismissalKey(sessionData.user.id, candidate);
+
+  const isDismissed =
+    dismissedKeys.includes(dismissalKey) ||
+    (typeof window !== 'undefined' && window.sessionStorage.getItem(dismissalKey) === 'true');
+
+  if (isDismissed) {
+    return null;
+  }
+
+  const onDismiss = () => {
+    try {
+      window.sessionStorage.setItem(dismissalKey, 'true');
+    } catch {
+      // Storage may be unavailable (private browsing); fall back to state.
+    }
+
+    setDismissedKeys((keys) => [...keys, dismissalKey]);
+  };
+
+  const returnTo = encodeURIComponent(`${location.pathname}${location.search}`);
+
+  return (
+    <div className="bg-yellow-200 dark:bg-yellow-400">
+      <div className="mx-auto flex max-w-screen-xl items-center justify-between gap-x-4 px-4 py-2 font-medium text-sm text-yellow-900">
+        <div className="flex items-center gap-x-2">
+          <AlertTriangleIcon className="h-4 w-4 flex-shrink-0" />
+
+          <span>
+            {candidate.isSessionUnverified ? (
+              <Trans>
+                Two-factor authentication is required from {i18n.date(candidate.deadline, { dateStyle: 'long' })}.
+                Two-factor authentication is enabled for your account, but this session has not been verified with a
+                second factor — sign out and log back in to verify this session.
+              </Trans>
+            ) : (
+              <Trans>
+                Two-factor authentication is required from {i18n.date(candidate.deadline, { dateStyle: 'long' })}.{' '}
+                <Link to={`/onboarding/2fa?returnTo=${returnTo}`} className="underline">
+                  Enable it now
+                </Link>{' '}
+                to keep access.
+              </Trans>
+            )}
+          </span>
+        </div>
+
+        <button
+          type="button"
+          className="rounded p-1 hover:bg-yellow-300 dark:hover:bg-yellow-500"
+          aria-label="Dismiss"
+          onClick={onDismiss}
+        >
+          <XIcon className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/use-admin-search-categories.ts

@@ -39,13 +39,14 @@ const ADMIN_GROUP_ICONS: Record<TAdminSearchResultType, LucideIcon> = {
 
 /**
  * Admin list pages which support prefilling their search from the URL, used
- * for the "View all results" links on capped groups. Teams, recipients and
+ * for the "View all results" links on capped groups. Teams and
  * subscriptions have no admin list pages.
  */
 const ADMIN_GROUP_LIST_PATHS: Partial<Record<TAdminSearchResultType, (_query: string) => string>> = {
   document: (query) => `/admin/documents?term=${encodeURIComponent(query)}`,
   user: (query) => `/admin/users?search=${encodeURIComponent(query)}`,
   organisation: (query) => `/admin/organisations?query=${encodeURIComponent(query)}`,
+  recipient: (query) => `/admin/documents?term=${encodeURIComponent(`recipient:${query}`)}`,
 };
 
 export type UseAdminSearchCategoriesOptions = {

apps/remix/app/components/tables/organisation-members-table.tsx

@@ -6,6 +6,7 @@ import { isOrganisationRoleWithinUserHierarchy } from '@documenso/lib/utils/orga
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { trpc } from '@documenso/trpc/react';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Badge } from '@documenso/ui/primitives/badge';
 import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
@@ -100,6 +101,23 @@ export const OrganisationMembersDataTable = () => {
         header: _(msg`Groups`),
         cell: ({ row }) => row.original.groups.filter((group) => group.type === OrganisationGroupType.CUSTOM).length,
       },
+      {
+        // Per-member 2FA compliance indicator: enrolment is the durable half
+        // of the satisfaction rule, so org admins can see who has and hasn't
+        // enrolled (non-compliant members still consume seats).
+        header: _(msg`2FA`),
+        accessorKey: 'twoFactorEnabled',
+        cell: ({ row }) =>
+          row.original.twoFactorEnabled ? (
+            <Badge variant="default">
+              <Trans>Enrolled</Trans>
+            </Badge>
+          ) : (
+            <Badge variant="neutral">
+              <Trans>Not enrolled</Trans>
+            </Badge>
+          ),
+      },
       {
         header: _(msg`Actions`),
         cell: ({ row }) => (

apps/remix/app/entry.client.tsx

@@ -18,6 +18,23 @@ import './utils/polyfills/promise-with-resolvers';
  * the page early, leaving dead event handlers (broken dropdowns, native form
  * submits).
  */
+/**
+ * Signing and direct template URLs contain recipient tokens which must never
+ * be sent to PostHog. Recipient context is attached explicitly via
+ * `recipientId` where needed instead.
+ */
+const redactTokensFromUrl = (value: string) => {
+  return value.replace(/(\/(?:sign|d|direct)\/)([^/?#]+)/g, '$1:token');
+};
+
+const URL_EVENT_PROPERTIES = [
+  '$current_url',
+  '$pathname',
+  '$referrer',
+  '$initial_referrer',
+  '$prev_pageview_pathname',
+] as const;
+
 function initPosthog() {
   const postHogConfig = extractPostHogConfig();
 
@@ -25,7 +42,34 @@ function initPosthog() {
     void import('posthog-js').then(({ default: posthog }) => {
       posthog.init(postHogConfig.key, {
         api_host: postHogConfig.host,
+        // Only create person profiles for identified (authenticated) users,
+        // anonymous recipients on signing pages stay anonymous.
+        person_profiles: 'identified_only',
+        // Explicit events only, autocapture on signing pages blows up usage
+        // without providing actionable data.
+        autocapture: false,
+        capture_pageview: true,
+        capture_pageleave: false,
         capture_exceptions: true,
+        before_send: (event) => {
+          if (!event) {
+            return null;
+          }
+
+          for (const property of URL_EVENT_PROPERTIES) {
+            const value = event.properties?.[property];
+
+            if (typeof value === 'string') {
+              event.properties[property] = redactTokensFromUrl(value);
+            }
+          }
+
+          if (event.$set_once && typeof event.$set_once['$initial_current_url'] === 'string') {
+            event.$set_once['$initial_current_url'] = redactTokensFromUrl(event.$set_once['$initial_current_url']);
+          }
+
+          return event;
+        },
       });
     });
   }

apps/remix/app/entry.server.tsx

@@ -7,10 +7,11 @@ import { createReadableStreamFromReadable } from '@react-router/node';
 import { isbot } from 'isbot';
 import type { RenderToPipeableStreamOptions } from 'react-dom/server';
 import { renderToPipeableStream } from 'react-dom/server';
-import type { AppLoadContext, EntryContext } from 'react-router';
+import type { EntryContext, RouterContextProvider } from 'react-router';
 import { ServerRouter } from 'react-router';
 
 import { langCookie } from './storage/lang-cookie.server';
+import { nonceContext } from './utils/nonce';
 
 export const streamTimeout = 5_000;
 
@@ -19,7 +20,7 @@ export default async function handleRequest(
   responseStatusCode: number,
   responseHeaders: Headers,
   routerContext: EntryContext,
-  loadContext: AppLoadContext,
+  loadContext: RouterContextProvider,
 ) {
   let language = await langCookie.parse(request.headers.get('cookie') ?? '');
 
@@ -33,7 +34,7 @@ export default async function handleRequest(
   // scripts it injects (route manifest, hydration data, module preloads).
   // The same nonce is also exposed to the React tree via the root loader so
   // our own inline scripts/styles can carry it.
-  const nonce = loadContext.nonce || undefined;
+  const nonce = loadContext.get(nonceContext) || undefined;
 
   return new Promise((resolve, reject) => {
     let shellRendered = false;

apps/remix/app/middleware/admin.ts

@@ -0,0 +1,13 @@
+import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { isAdmin } from '@documenso/lib/utils/is-admin';
+import { type MiddlewareFunction, redirect } from 'react-router';
+
+export const adminMiddleware: MiddlewareFunction = async ({ request }, next) => {
+  const { user } = await getOptionalSession(request);
+
+  if (!user || !isAdmin(user)) {
+    throw redirect('/');
+  }
+
+  return next();
+};

apps/remix/app/middleware/nonce.ts

@@ -0,0 +1,8 @@
+import type { MiddlewareFunction } from 'react-router';
+
+import { getRequestNonce } from '../../server/load-context';
+import { nonceContext } from '../utils/nonce';
+
+export const nonceMiddleware: MiddlewareFunction = ({ context }) => {
+  context.set(nonceContext, getRequestNonce());
+};

apps/remix/app/root.tsx

@@ -1,14 +1,18 @@
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { SessionProvider } from '@documenso/lib/client-only/providers/session';
 import { getBasePath } from '@documenso/lib/constants/app';
 import { APP_I18N_OPTIONS, type SupportedLanguageCodes } from '@documenso/lib/constants/i18n';
+import { getTwoFactorEnforcementStatus } from '@documenso/lib/server-only/2fa/get-two-factor-enforcement-status';
 import { createPublicEnv } from '@documenso/lib/utils/env';
 import { extractLocaleData } from '@documenso/lib/utils/i18n';
+import type { TTwoFactorEnforcementStatus } from '@documenso/lib/utils/two-factor';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { getOrganisationSession } from '@documenso/trpc/server/organisation-router/get-organisation-session';
 import { Toaster } from '@documenso/ui/primitives/toaster';
 import { TooltipProvider } from '@documenso/ui/primitives/tooltip';
 import { NuqsAdapter } from 'nuqs/adapters/react-router/v7';
+import { useEffect } from 'react';
 import {
   data,
   isRouteErrorResponse,
@@ -21,13 +25,16 @@ import {
   useMatches,
 } from 'react-router';
 import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from 'remix-themes';
+import { nonceMiddleware } from '~/middleware/nonce';
 import type { Route } from './+types/root';
 import stylesheet from './app.css?url';
 import { GenericErrorLayout } from './components/general/generic-error-layout';
 import { langCookie } from './storage/lang-cookie.server';
 import { themeSessionResolver } from './storage/theme-session.server';
 import { appMetaTags } from './utils/meta';
-import { nonce } from './utils/nonce';
+import { nonce, nonceContext } from './utils/nonce';
+
+export const middleware = [nonceMiddleware];
 
 export const links: Route.LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }];
 
@@ -58,9 +65,19 @@ export async function loader({ context, request }: Route.LoaderArgs) {
   const disableAnimations = cookieHeader.includes('__disable_animations=true');
 
   let organisations = null;
+  let twoFactorEnforcement: TTwoFactorEnforcementStatus = { required: false };
 
   if (session.isAuthenticated) {
-    organisations = await getOrganisationSession({ userId: session.user.id });
+    [organisations, twoFactorEnforcement] = await Promise.all([
+      getOrganisationSession({
+        userId: session.user.id,
+        user: session.user,
+        session: session.session,
+      }),
+      // Instance 2FA enforcement status is part of the session payload so
+      // layouts can derive banners/redirects client-side without new queries.
+      getTwoFactorEnforcementStatus({ user: session.user, session: session.session }),
+    ]);
   }
 
   return data(
@@ -72,12 +89,13 @@ export async function loader({ context, request }: Route.LoaderArgs) {
       // Surface the per-request CSP nonce produced by `securityHeadersMiddleware` so all
       // SSR-rendered <script>/<style> elements in this layout (and child
       // routes that need it) can carry the matching nonce attribute.
-      nonce: context.nonce,
+      nonce: context.get(nonceContext),
       session: session.isAuthenticated
         ? {
             user: session.user,
             session: session.session,
             organisations: organisations || [],
+            twoFactorEnforcement,
           }
         : null,
       publicEnv: createPublicEnv(),
@@ -200,11 +218,19 @@ export default function App() {
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const analytics = useAnalytics();
+
   const errorCode = isRouteErrorResponse(error) ? error.status : 500;
 
   if (errorCode !== 404) {
     console.error('[RootErrorBoundary]', error);
   }
 
+  useEffect(() => {
+    if (errorCode !== 404) {
+      analytics.captureException(error, { source: 'app', location: 'root_boundary' });
+    }
+  }, [error]);
+
   return <GenericErrorLayout errorCode={errorCode} />;
 }

apps/remix/app/routes/_authenticated+/_layout.tsx

@@ -1,31 +1,44 @@
+import { authClient } from '@documenso/auth/client';
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
 import { useChildRouteFlags } from '@documenso/lib/client-only/hooks/use-child-route-flags';
 import { OrganisationProvider } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { getTwoFactorEnforcementStatus } from '@documenso/lib/server-only/2fa/get-two-factor-enforcement-status';
 import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
 import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
+import { isValidReturnTo, normalizeReturnTo } from '@documenso/lib/utils/is-valid-return-to';
+import { calculateTwoFactorDeadlineTimerDelay } from '@documenso/lib/utils/two-factor';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
-import { Link, Outlet, redirect } from 'react-router';
+import { useEffect } from 'react';
+import { Link, Outlet, redirect, useLocation, useNavigate } from 'react-router';
 
 import { AppBanner } from '~/components/general/app-banner';
 import { Header } from '~/components/general/app-header';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import { OrganisationBillingBanner } from '~/components/general/organisations/organisation-billing-banner';
 import { OrganisationQuotaBanner } from '~/components/general/organisations/organisation-quota-banner';
+import { TwoFactorGraceBanner } from '~/components/general/two-factor-grace-banner';
 import { VerifyEmailBanner } from '~/components/general/verify-email-banner';
 import { TeamProvider } from '~/providers/team';
 
 import type { Route } from './+types/_layout';
 
 /**
- * Don't revalidate (run the loader on sequential navigations)
- *
- * Update values via providers.
+ * Builds the enrolment redirect for an instance-blocked user, carrying the
+ * current path so they land back where they were after enrolling.
  */
-export const shouldRevalidate = () => false;
+const buildTwoFactorOnboardingPath = (currentPath: string) => {
+  const returnTo = (isValidReturnTo(currentPath) && normalizeReturnTo(currentPath)) || '/';
+
+  return `/onboarding/2fa?returnTo=${encodeURIComponent(returnTo)}`;
+};
+
+// Note: no `shouldRevalidate` suppression on this layout (the root layout
+// keeps its own) — the loader must rerun on navigations so the instance
+// enforcement redirect below is re-evaluated server-side.
 
 export async function loader({ request }: Route.LoaderArgs) {
   const [session, banner] = await Promise.all([
@@ -37,6 +50,22 @@ export async function loader({ request }: Route.LoaderArgs) {
     throw redirect('/signin');
   }
 
+  // Instance-wide 2FA enforcement (UX chokepoint — the security boundary is
+  // the tRPC/Hono asserts): a blocked user is redirected into forced
+  // enrolment. `/onboarding/2fa` lives outside this layout, so the redirect
+  // cannot loop. Never blocks login itself — signin/onboarding are outside
+  // this layout too.
+  const twoFactorEnforcement = await getTwoFactorEnforcementStatus({
+    user: session.user,
+    session: session.session,
+  });
+
+  if (twoFactorEnforcement.required && twoFactorEnforcement.isBlocked) {
+    const url = new URL(request.url);
+
+    throw redirect(buildTwoFactorOnboardingPath(`${url.pathname}${url.search}`));
+  }
+
   return {
     banner,
   };
@@ -45,7 +74,51 @@ export async function loader({ request }: Route.LoaderArgs) {
 export default function Layout({ loaderData, params, matches }: Route.ComponentProps) {
   const { banner } = loaderData;
 
-  const { user, organisations } = useSession();
+  const { user, session, organisations, twoFactorEnforcement } = useSession();
+
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // Client-side counterpart of the loader's instance enforcement redirect:
+  // parent-layout loaders don't rerun on every child navigation, and a grace
+  // deadline can pass while the app is open. The session provider refreshes
+  // the enforcement status on navigation/focus; the timer covers a deadline
+  // crossing while the tab sits idle.
+  const isInstanceTwoFactorBlocked = twoFactorEnforcement.required && twoFactorEnforcement.isBlocked;
+
+  useEffect(() => {
+    if (!twoFactorEnforcement.required || twoFactorEnforcement.isSatisfied) {
+      return;
+    }
+
+    const redirectToOnboarding = () => {
+      void navigate(buildTwoFactorOnboardingPath(`${location.pathname}${location.search}`));
+    };
+
+    if (twoFactorEnforcement.isBlocked) {
+      redirectToOnboarding();
+
+      return;
+    }
+
+    // Within grace: fire at the deadline instant. A `null` delay means the
+    // deadline is beyond `setTimeout` range (~24.8 days) — no timer needed,
+    // the status is re-evaluated long before then.
+    const timerDelay = calculateTwoFactorDeadlineTimerDelay({
+      deadline: twoFactorEnforcement.deadline,
+      now: new Date(),
+    });
+
+    if (timerDelay === null) {
+      return;
+    }
+
+    const timeout = window.setTimeout(redirectToOnboarding, timerDelay);
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [twoFactorEnforcement, location.pathname, location.search, navigate]);
 
   const { layoutMode } = useChildRouteFlags();
 
@@ -80,6 +153,65 @@ export default function Layout({ loaderData, params, matches }: Route.ComponentP
       match?.id === 'routes/_authenticated+/t.$teamUrl+/templates.$id.edit',
   );
 
+  // Per-organisation 2FA enforcement: when the current org/team context's
+  // organisation blocks the user, render a 403 screen (NOT a redirect — the
+  // rest of the app stays usable) linking to the enrolment page. Derived
+  // client-side from the session provider's bootstrap payload, which stays
+  // readable while blocked. This is UX only — the security boundary is the
+  // tRPC/Hono asserts.
+  const isCurrentOrganisationTwoFactorBlocked =
+    Boolean(orgUrl || teamUrl) &&
+    Boolean(currentOrganisation?.twoFactorEnforcement.required && currentOrganisation.twoFactorEnforcement.isBlocked);
+
+  // State (b): enrolled, but this session never passed a second factor —
+  // enrolment would rightly refuse, so the remediation is a fresh sign-in.
+  const requiresRelogin = user.twoFactorEnabled && !session.twoFactorVerified;
+
+  // Instance enforcement takes precedence over the org 403 below: render
+  // nothing while the effect above navigates to forced enrolment.
+  if (isInstanceTwoFactorBlocked) {
+    return null;
+  }
+
+  if (isCurrentOrganisationTwoFactorBlocked) {
+    const returnTo = encodeURIComponent(`${location.pathname}${location.search}`);
+
+    return (
+      <GenericErrorLayout
+        errorCode={403}
+        errorCodeMap={{
+          403: {
+            heading: msg`Two-factor authentication required`,
+            subHeading: msg`403 Forbidden`,
+            message: requiresRelogin
+              ? msg`This organisation requires two-factor authentication. Two-factor authentication is enabled for your account, but this session has not been verified with a second factor. Sign out and log back in to verify this session.`
+              : msg`This organisation requires two-factor authentication. Enable it for your account to regain access. The rest of your account remains available.`,
+          },
+        }}
+        primaryButton={
+          requiresRelogin ? (
+            <Button onClick={() => void authClient.signOut()}>
+              <Trans>Sign out</Trans>
+            </Button>
+          ) : (
+            <Button asChild>
+              <Link to={`/onboarding/2fa?returnTo=${returnTo}`}>
+                <Trans>Set up two-factor authentication</Trans>
+              </Link>
+            </Button>
+          )
+        }
+        secondaryButton={
+          <Button variant="ghost" asChild>
+            <Link to="/">
+              <Trans>Go home</Trans>
+            </Link>
+          </Button>
+        }
+      />
+    );
+  }
+
   if (orgNotFound || teamNotFound) {
     return (
       <GenericErrorLayout
@@ -112,6 +244,8 @@ export default function Layout({ loaderData, params, matches }: Route.ComponentP
     <OrganisationProvider organisation={currentOrganisation}>
       <TeamProvider team={currentTeam || null}>
         <div className={cn({ 'md:flex md:h-dvh md:flex-col md:overflow-hidden': layoutMode === 'settings' })}>
+          <TwoFactorGraceBanner />
+
           <OrganisationBillingBanner />
 
           <OrganisationQuotaBanner />

apps/remix/app/routes/_authenticated+/admin+/_layout.tsx

@@ -1,4 +1,4 @@
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
 import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
 import { isAdmin } from '@documenso/lib/utils/is-admin';
 import { cn } from '@documenso/ui/lib/utils';
@@ -20,16 +20,18 @@ import {
 import { Link, Outlet, redirect, useLocation } from 'react-router';
 
 import { AdminLicenseStatusBanner } from '~/components/general/admin-license-status-banner';
+import { adminMiddleware } from '~/middleware/admin';
 import { appMetaTags } from '~/utils/meta';
-
 import type { Route } from './+types/_layout';
 
 export function meta() {
   return appMetaTags(msg`Admin`);
 }
 
+export const middleware = [adminMiddleware];
+
 export async function loader({ request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
+  const { user } = await getOptionalSession(request);
 
   const license = await LicenseClient.getInstance()?.getCachedLicense();
 

apps/remix/app/routes/_authenticated+/admin+/claims.tsx

@@ -1,9 +1,7 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
 import { Input } from '@documenso/ui/primitives/input';
 import { useLingui } from '@lingui/react/macro';
-import { useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 
 import { ClaimCreateDialog } from '~/components/dialogs/claim-create-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
@@ -24,32 +22,10 @@ export default function Claims({ loaderData }: Route.ComponentProps) {
 
   const { t } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { pathname } = useLocation();
-
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   return (
     <div>
@@ -59,8 +35,8 @@ export default function Claims({ loaderData }: Route.ComponentProps) {
 
       <div className="mt-4">
         <Input
-          defaultValue={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
+          value={searchQuery}
+          onChange={(e) => void setSearchQuery(e.target.value || null)}
           placeholder={t`Search by claim ID or name`}
           className="mb-4"
         />

apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx

@@ -12,7 +12,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link, useSearchParams } from 'react-router';
 
 import { DocumentStatus } from '~/components/general/document/document-status';
@@ -30,6 +30,12 @@ export default function AdminDocumentsPage() {
   const page = searchParams?.get?.('page') ? Number(searchParams.get('page')) : undefined;
   const perPage = searchParams?.get?.('perPage') ? Number(searchParams.get('perPage')) : undefined;
 
+  const urlTerm = searchParams?.get?.('term') ?? '';
+
+  useEffect(() => {
+    setTerm(urlTerm);
+  }, [urlTerm]);
+
   const { data: findDocumentsData, isPending: isFindDocumentsLoading } = trpc.admin.document.find.useQuery(
     {
       query: debouncedTerm,
@@ -131,7 +137,7 @@ export default function AdminDocumentsPage() {
         <div>
           <Input
             type="search"
-            placeholder={_(msg`Search by document title, team:123, user:123 or recipient:email@example.com`)}
+            placeholder={_(msg`Search by document title, recipient:123, team:123 or user:123`)}
             value={term}
             onChange={(e) => setTerm(e.target.value)}
           />

apps/remix/app/routes/_authenticated+/admin+/email-transports._index.tsx

@@ -1,8 +1,6 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
 import { useLingui } from '@lingui/react/macro';
-import { useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 
 import { EmailTransportCreateDialog } from '~/components/dialogs/email-transport-create-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
@@ -11,32 +9,10 @@ import { AdminEmailTransportsTable } from '~/components/tables/admin-email-trans
 export default function AdminEmailTransportsPage() {
   const { t } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { pathname } = useLocation();
-
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   return (
     <div>
@@ -46,8 +22,8 @@ export default function AdminEmailTransportsPage() {
 
       <div className="mt-4">
         <Input
-          defaultValue={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
+          value={searchQuery}
+          onChange={(e) => void setSearchQuery(e.target.value || null)}
           placeholder={t`Search by name or from address`}
           className="mb-4"
         />

apps/remix/app/routes/_authenticated+/admin+/organisation-stats._index.tsx

@@ -1,4 +1,3 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { currentMonthlyPeriod } from '@documenso/lib/universal/monthly-period';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
@@ -6,8 +5,9 @@ import { Input } from '@documenso/ui/primitives/input';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { useEffect, useMemo, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsInteger, parseAsString, useQueryStates } from 'nuqs';
+import { useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router';
 
 import { SettingsHeader } from '~/components/general/settings-header';
 import {
@@ -52,14 +52,17 @@ export default function OrganisationStats() {
   const { t } = useLingui();
 
   const [searchParams, setSearchParams] = useSearchParams();
-  const { pathname } = useLocation();
 
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+  const [{ query: searchQuery }, setSearchFilters] = useQueryStates(
+    {
+      query: parseAsString.withDefault(''),
+      page: parseAsInteger,
+    },
+    { shallow: false, limitUrlUpdates: debounce(500) },
+  );
 
   const [displayMode, setDisplayMode] = useState<OrganisationStatsDisplayMode>('usage');
 
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
   const periodOptions = useMemo(() => generatePeriodOptions(), []);
 
   const selectedPeriod = searchParams?.get('period') ?? currentMonthlyPeriod();
@@ -71,29 +74,12 @@ export default function OrganisationStats() {
 
   const claimOptions = claimsData?.data ?? [];
 
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    if ((searchParams?.get('query') || '') !== debouncedSearchQuery) {
-      params.delete('page');
-    }
-
-    // If nothing to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const onSearchQueryChange = (value: string) => {
+    void setSearchFilters({
+      query: value || null,
+      page: null,
+    });
+  };
 
   const onPeriodChange = (value: string) => {
     const params = new URLSearchParams(searchParams?.toString());
@@ -128,8 +114,8 @@ export default function OrganisationStats() {
 
       <div className="mt-4 flex flex-col gap-4 sm:flex-row">
         <Input
-          defaultValue={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
+          value={searchQuery}
+          onChange={(e) => onSearchQueryChange(e.target.value)}
           placeholder={t`Search by organisation name, URL or ID`}
           className="flex-1"
         />

apps/remix/app/routes/_authenticated+/admin+/organisations._index.tsx

@@ -1,8 +1,6 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
 import { useLingui } from '@lingui/react/macro';
-import { useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 
 import { SettingsHeader } from '~/components/general/settings-header';
 import { AdminOrganisationsTable } from '~/components/tables/admin-organisations-table';
@@ -10,32 +8,10 @@ import { AdminOrganisationsTable } from '~/components/tables/admin-organisations
 export default function Organisations() {
   const { t } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { pathname } = useLocation();
-
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   return (
     <div>
@@ -43,8 +19,8 @@ export default function Organisations() {
 
       <div className="mt-4">
         <Input
-          defaultValue={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
+          value={searchQuery}
+          onChange={(e) => void setSearchQuery(e.target.value || null)}
           placeholder={t`Search by organisation ID, name, customer ID or owner email`}
           className="mb-4"
         />

apps/remix/app/routes/_authenticated+/admin+/site-settings.tsx

@@ -6,6 +6,7 @@ import { useLingui } from '@lingui/react';
 
 import { AdminEmailBlocklistSection } from '~/components/general/admin-email-blocklist-section';
 import { AdminSiteBannerSection } from '~/components/general/admin-site-banner-section';
+import { AdminTwoFactorEnforcementSection } from '~/components/general/admin-two-factor-enforcement-section';
 import { SettingsHeader } from '~/components/general/settings-header';
 import type { Route } from './+types/site-settings';
 
@@ -31,6 +32,8 @@ export default function AdminSiteSettingsPage({ loaderData }: Route.ComponentPro
         <AdminSiteBannerSection banner={banner} />
 
         <AdminEmailBlocklistSection emailBlocklist={emailBlocklist} />
+
+        <AdminTwoFactorEnforcementSection />
       </div>
     </div>
   );

apps/remix/app/routes/_authenticated+/admin+/users.$id.tsx

@@ -1,3 +1,4 @@
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { trpc } from '@documenso/trpc/react';
 import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { ZUpdateUserRequestSchema } from '@documenso/trpc/server/admin-router/update-user.types';
@@ -75,6 +76,11 @@ const AdminUserPage = ({ user }: { user: TGetUserResponse }) => {
   const { toast } = useToast();
   const { revalidate } = useRevalidator();
 
+  const { user: currentUser } = useSession();
+
+  // Self-reset is forbidden server-side; hide the affordance entirely.
+  const canResetTwoFactor = user.twoFactorEnabled && user.id !== currentUser.id;
+
   const roles = user.roles ?? [];
 
   const { mutateAsync: updateUserMutation } = trpc.admin.user.update.useMutation();
@@ -228,7 +234,7 @@ const AdminUserPage = ({ user }: { user: TGetUserResponse }) => {
       </Accordion>
 
       <div className="mt-16 flex flex-col gap-4">
-        {user && user.twoFactorEnabled && <AdminUserResetTwoFactorDialog user={user} />}
+        {canResetTwoFactor && <AdminUserResetTwoFactorDialog user={user} />}
         {user && user.disabled && <AdminUserEnableDialog userToEnable={user} />}
         {user && !user.disabled && <AdminUserDisableDialog userToDisable={user} />}
         {user && <AdminUserDeleteDialog user={user} />}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.general.tsx

@@ -7,6 +7,7 @@ import { Trans } from '@lingui/react/macro';
 
 import { OrganisationDeleteDialog } from '~/components/dialogs/organisation-delete-dialog';
 import { AvatarImageForm } from '~/components/forms/avatar-image';
+import { OrganisationTwoFactorEnforcementForm } from '~/components/forms/organisation-two-factor-enforcement-form';
 import { OrganisationUpdateForm } from '~/components/forms/organisation-update-form';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { appMetaTags } from '~/utils/meta';
@@ -29,6 +30,19 @@ export default function OrganisationSettingsGeneral() {
         <OrganisationUpdateForm />
       </div>
 
+      {canExecuteOrganisationAction('MANAGE_ORGANISATION_SECURITY', organisation.currentOrganisationRole) && (
+        <>
+          <hr className="my-6" />
+
+          <SettingsHeader
+            title={_(msg`Two-factor authentication`)}
+            subtitle={_(msg`Require members of this organisation to use two-factor authentication.`)}
+          />
+
+          <OrganisationTwoFactorEnforcementForm />
+        </>
+      )}
+
       {canExecuteOrganisationAction('DELETE_ORGANISATION', organisation.currentOrganisationRole) && (
         <Alert className="flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
           <div className="mb-4 sm:mb-0">

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.members.tsx

@@ -1,10 +1,9 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { useEffect, useState } from 'react';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 import { Link, useLocation, useSearchParams } from 'react-router';
 
 import { OrganisationMemberInviteDialog } from '~/components/dialogs/organisation-member-invite-dialog';
@@ -15,35 +14,16 @@ import { OrganisationMembersDataTable } from '~/components/tables/organisation-m
 export default function TeamsSettingsMembersPage() {
   const { _ } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
   const { pathname } = useLocation();
 
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   const currentTab = searchParams?.get('tab') === 'invites' ? 'invites' : 'members';
 
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
-
   return (
     <div>
       <SettingsHeader
@@ -57,8 +37,8 @@ export default function TeamsSettingsMembersPage() {
       <div>
         <div className="my-4 flex flex-row items-center justify-between space-x-4">
           <Input
-            defaultValue={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
+            value={searchQuery}
+            onChange={(e) => void setSearchQuery(e.target.value || null)}
             placeholder={_(msg`Search`)}
           />
 

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.teams.tsx

@@ -1,8 +1,6 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
 import { useLingui } from '@lingui/react/macro';
-import { useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 
 import { TeamCreateDialog } from '~/components/dialogs/team-create-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
@@ -11,27 +9,10 @@ import { OrganisationTeamsTable } from '~/components/tables/organisation-teams-t
 export default function OrganisationSettingsTeamsPage() {
   const { t } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { pathname } = useLocation();
-
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   return (
     <div>
@@ -40,8 +21,8 @@ export default function OrganisationSettingsTeamsPage() {
       </SettingsHeader>
 
       <Input
-        defaultValue={searchQuery}
-        onChange={(e) => setSearchQuery(e.target.value)}
+        value={searchQuery}
+        onChange={(e) => void setSearchQuery(e.target.value || null)}
         placeholder={t`Search`}
         className="mb-4"
       />

apps/remix/app/routes/_authenticated+/settings+/security._index.tsx

@@ -1,6 +1,8 @@
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { prisma } from '@documenso/prisma';
+import { isSigninEnabledForProvider } from '@documenso/lib/constants/auth';
+import { getUserAuthMethods } from '@documenso/lib/server-only/user/get-user-auth-methods';
+import { UserAuthMethod } from '@documenso/lib/types/user-auth-method';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import { msg } from '@lingui/core/macro';
@@ -12,6 +14,7 @@ import { DisableAuthenticatorAppDialog } from '~/components/forms/2fa/disable-au
 import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
 import { ViewRecoveryCodesDialog } from '~/components/forms/2fa/view-recovery-codes-dialog';
 import { PasswordForm } from '~/components/forms/password';
+import { PasswordSetupRequestButton } from '~/components/forms/password-setup-request-button';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { appMetaTags } from '~/utils/meta';
 
@@ -24,33 +27,10 @@ export function meta() {
 export async function loader({ request }: Route.LoaderArgs) {
   const { user } = await getSession(request);
 
-  // Todo: Use providers instead after RR7 migration.
-  // const accounts = await prisma.account.findMany({
-  //   where: {
-  //     userId: user.id,
-  //   },
-  //   select: {
-  //     provider: true,
-  //   },
-  // });
-
-  // const providers = accounts.map((account) => account.provider);
-  // let hasEmailPasswordAccount = providers.includes('DOCUMENSO');
-
-  const hasEmailPasswordAccount: boolean = await prisma.user
-    .count({
-      where: {
-        id: user.id,
-        password: {
-          not: null,
-        },
-      },
-    })
-    .then((value) => value > 0);
+  const authMethods = await getUserAuthMethods({ userId: user.id });
 
   return {
-    // providers,
-    hasEmailPasswordAccount,
+    hasEmailPasswordAccount: authMethods.includes(UserAuthMethod.PASSWORD),
   };
 }
 
@@ -60,14 +40,36 @@ export default function SettingsSecurity({ loaderData }: Route.ComponentProps) {
   const { _ } = useLingui();
   const { user } = useSession();
 
+  const isEmailPasswordSigninEnabled = isSigninEnabledForProvider('email');
+
   return (
     <div>
       <SettingsHeader
         title={_(msg`Security`)}
         subtitle={_(msg`Here you can manage your password and security settings.`)}
       />
+
       {hasEmailPasswordAccount && <PasswordForm user={user} />}
 
+      {!hasEmailPasswordAccount && isEmailPasswordSigninEnabled && (
+        <Alert className="flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
+          <div className="mb-4 sm:mb-0">
+            <AlertTitle>
+              <Trans>Set a password</Trans>
+            </AlertTitle>
+
+            <AlertDescription className="mr-4">
+              <Trans>
+                Your account has no password. Add one to sign in with your email and to sign documents that require it.
+                We'll email you a link.
+              </Trans>
+            </AlertDescription>
+          </div>
+
+          <PasswordSetupRequestButton />
+        </Alert>
+      )}
+
       <Alert className="mt-6 flex flex-col justify-between p-6 sm:flex-row sm:items-center" variant="neutral">
         <div className="mb-4 sm:mb-0">
           <AlertTitle>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id._layout.tsx

@@ -1,4 +1,5 @@
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getEnvelopeById } from '@documenso/lib/server-only/envelope/get-envelope-by-id';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
@@ -7,6 +8,7 @@ import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import { ChevronLeftIcon } from 'lucide-react';
+import { useEffect } from 'react';
 import type { ShouldRevalidateFunctionArgs } from 'react-router';
 import { isRouteErrorResponse, Link, Outlet, redirect } from 'react-router';
 
@@ -66,8 +68,18 @@ export default function DocumentsLayout() {
 }
 
 export function ErrorBoundary({ error, params }: Route.ErrorBoundaryProps) {
+  const analytics = useAnalytics();
+
   const errorCode = isRouteErrorResponse(error) ? error.status : 500;
 
+  useEffect(() => {
+    analytics.captureException(error, {
+      source: 'editor',
+      location: 'editor_layout_boundary',
+      envelopeId: params.id,
+    });
+  }, [error]);
+
   const errorCodeMap = {
     404: {
       subHeading: msg`404 Document not found`,

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.groups.tsx

@@ -1,11 +1,9 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { trpc } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { Input } from '@documenso/ui/primitives/input';
 import { useLingui } from '@lingui/react/macro';
 import { OrganisationGroupType, OrganisationMemberRole } from '@prisma/client';
-import { useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 
 import { TeamGroupCreateDialog } from '~/components/dialogs/team-group-create-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
@@ -16,34 +14,12 @@ import { useCurrentTeam } from '~/providers/team';
 export default function TeamsSettingsGroupsPage() {
   const { t } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const { pathname } = useLocation();
   const team = useCurrentTeam();
 
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   const everyoneGroupQuery = trpc.team.group.find.useQuery({
     teamId: team.id,
@@ -61,8 +37,8 @@ export default function TeamsSettingsGroupsPage() {
       </SettingsHeader>
 
       <Input
-        defaultValue={searchQuery}
-        onChange={(e) => setSearchQuery(e.target.value)}
+        value={searchQuery}
+        onChange={(e) => void setSearchQuery(e.target.value || null)}
         placeholder={t`Search`}
         className="mb-4"
       />

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.members.tsx

@@ -1,8 +1,6 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
 import { useLingui } from '@lingui/react/macro';
-import { useEffect, useState } from 'react';
-import { useLocation, useSearchParams } from 'react-router';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
 
 import { TeamMemberCreateDialog } from '~/components/dialogs/team-member-create-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
@@ -11,32 +9,10 @@ import { TeamMembersTable } from '~/components/tables/team-members-table';
 export default function TeamsSettingsMembersPage() {
   const { t } = useLingui();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { pathname } = useLocation();
-
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
-
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   return (
     <div>
@@ -45,8 +21,8 @@ export default function TeamsSettingsMembersPage() {
       </SettingsHeader>
 
       <Input
-        defaultValue={searchQuery}
-        onChange={(e) => setSearchQuery(e.target.value)}
+        value={searchQuery}
+        onChange={(e) => void setSearchQuery(e.target.value || null)}
         placeholder={t`Search`}
         className="mb-4"
       />

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.tokens.tsx

@@ -68,6 +68,20 @@ export default function ApiTokensPage() {
           return i18n.date(row.original.expires);
         },
       },
+      {
+        header: t`Last Used`,
+        cell: ({ row }) => {
+          if (!row.original.lastUsedAt) {
+            return (
+              <span className="text-muted-foreground">
+                <Trans>Never</Trans>
+              </span>
+            );
+          }
+
+          return <span className="text-foreground">{i18n.date(row.original.lastUsedAt)}</span>;
+        },
+      },
       {
         header: t`Actions`,
         cell: ({ row }) => (
@@ -146,6 +160,9 @@ export default function ApiTokensPage() {
                 <TableCell>
                   <Skeleton className="h-4 w-16 rounded-full" />
                 </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-16 rounded-full" />
+                </TableCell>
                 <TableCell>
                   <Skeleton className="h-4 w-12 rounded-full" />
                 </TableCell>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks.$id._index.tsx

@@ -1,4 +1,3 @@
-import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
@@ -20,7 +19,8 @@ import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { WebhookCallStatus, WebhookTriggerEvents } from '@prisma/client';
 import { CheckCircle2Icon, ChevronRightIcon, PencilIcon, TerminalIcon, XCircleIcon } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
+import { debounce, parseAsString, useQueryState } from 'nuqs';
+import { useMemo } from 'react';
 import { Link, useLocation, useNavigate, useSearchParams } from 'react-router';
 import { z } from 'zod';
 
@@ -51,13 +51,14 @@ export default function WebhookPage({ params }: Route.ComponentProps) {
   const { toast } = useToast();
 
   const { pathname } = useLocation();
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
   const team = useCurrentTeam();
 
-  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
-
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+  const [searchQuery, setSearchQuery] = useQueryState(
+    'query',
+    parseAsString.withDefault('').withOptions({ shallow: false, limitUrlUpdates: debounce(500) }),
+  );
 
   const parsedSearchParams = WebhookSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
 
@@ -81,26 +82,6 @@ export default function WebhookPage({ params }: Route.ComponentProps) {
     query: parsedSearchParams.query,
   });
 
-  /**
-   * Handle debouncing the search query.
-   */
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams?.toString());
-
-    params.set('query', debouncedSearchQuery);
-
-    if (debouncedSearchQuery === '') {
-      params.delete('query');
-    }
-
-    // If nothing  to change then do nothing.
-    if (params.toString() === searchParams?.toString()) {
-      return;
-    }
-
-    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, searchParams]);
-
   const onPaginationChange = (page: number, perPage: number) => {
     updateSearchParams({
       page,
@@ -252,8 +233,8 @@ export default function WebhookPage({ params }: Route.ComponentProps) {
       <div className="mt-4">
         <div className="mb-4 flex flex-row items-center justify-between gap-x-4">
           <Input
-            defaultValue={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
+            value={searchQuery}
+            onChange={(e) => void setSearchQuery(e.target.value || null)}
             placeholder={t`Search by ID`}
           />
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id._layout.tsx

@@ -1,4 +1,5 @@
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getEnvelopeById } from '@documenso/lib/server-only/envelope/get-envelope-by-id';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
@@ -8,6 +9,7 @@ import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import { ChevronLeftIcon } from 'lucide-react';
+import { useEffect } from 'react';
 import { isRouteErrorResponse, Link, Outlet, redirect, type ShouldRevalidateFunctionArgs } from 'react-router';
 
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
@@ -84,8 +86,18 @@ export default function TemplatesLayout() {
 }
 
 export function ErrorBoundary({ error, params }: Route.ErrorBoundaryProps) {
+  const analytics = useAnalytics();
+
   const errorCode = isRouteErrorResponse(error) ? error.status : 500;
 
+  useEffect(() => {
+    analytics.captureException(error, {
+      source: 'editor',
+      location: 'editor_layout_boundary',
+      envelopeId: params.id,
+    });
+  }, [error]);
+
   const errorCodeMap = {
     404: {
       subHeading: msg`404 Template not found`,

apps/remix/app/routes/_recipient+/_layout.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -5,6 +6,7 @@ import { i18n } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { ChevronLeft } from 'lucide-react';
+import { useEffect } from 'react';
 import { isRouteErrorResponse, Link, Outlet } from 'react-router';
 import { Header as AuthenticatedHeader } from '~/components/general/app-header';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
@@ -48,8 +50,14 @@ export default function RecipientLayout({ matches }: Route.ComponentProps) {
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const analytics = useAnalytics();
+
   const errorCode = isRouteErrorResponse(error) ? error.status : 500;
 
+  useEffect(() => {
+    analytics.captureException(error, { source: 'signing', location: 'recipient_layout_boundary' });
+  }, [error]);
+
   return (
     <GenericErrorLayout
       errorCode={errorCode}

apps/remix/app/routes/_unauthenticated+/2fa-challenge.tsx

@@ -0,0 +1,244 @@
+import { authClient } from '@documenso/auth/client';
+import { AuthenticationErrorCode } from '@documenso/auth/server/lib/errors/error-codes';
+import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { Button } from '@documenso/ui/primitives/button';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Loader2Icon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Link, redirect, useNavigate } from 'react-router';
+import { z } from 'zod';
+
+import { appMetaTags } from '~/utils/meta';
+
+import type { Route } from './+types/2fa-challenge';
+
+export function meta() {
+  return appMetaTags(msg`Two-Factor Authentication`);
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const { isAuthenticated } = await getOptionalSession(request);
+
+  // A signed-in user has no pending challenge to complete (any successful
+  // sign-in clears it server-side).
+  if (isAuthenticated) {
+    throw redirect('/');
+  }
+
+  return null;
+}
+
+const ZTwoFactorChallengeFormSchema = z.object({
+  totpCode: z.string().trim().optional(),
+  backupCode: z.string().trim().optional(),
+});
+
+type TTwoFactorChallengeFormSchema = z.infer<typeof ZTwoFactorChallengeFormSchema>;
+
+export default function TwoFactorChallenge() {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const navigate = useNavigate();
+
+  const [isValidatingChallenge, setIsValidatingChallenge] = useState(true);
+  const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<'totp' | 'backup'>('totp');
+
+  const form = useForm<TTwoFactorChallengeFormSchema>({
+    values: {
+      totpCode: '',
+      backupCode: '',
+    },
+    resolver: zodResolver(ZTwoFactorChallengeFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const onRedirectToSignIn = async () => {
+    toast({
+      title: _(msg`Sign in required`),
+      description: _(msg`Your sign-in attempt has expired. Please sign in again.`),
+      variant: 'destructive',
+    });
+
+    await navigate('/signin');
+  };
+
+  useEffect(() => {
+    void authClient.twoFactor
+      .getChallenge()
+      .then(async ({ valid }) => {
+        if (!valid) {
+          await onRedirectToSignIn();
+
+          return;
+        }
+
+        setIsValidatingChallenge(false);
+      })
+      .catch(async () => onRedirectToSignIn());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onToggleTwoFactorAuthenticationMethodClick = () => {
+    const method = twoFactorAuthenticationMethod === 'totp' ? 'backup' : 'totp';
+
+    if (method === 'totp') {
+      form.setValue('backupCode', '');
+    }
+
+    if (method === 'backup') {
+      form.setValue('totpCode', '');
+    }
+
+    setTwoFactorAuthenticationMethod(method);
+  };
+
+  const onFormSubmit = async ({ totpCode, backupCode }: TTwoFactorChallengeFormSchema) => {
+    try {
+      // On success this navigates to the server-provided redirect path.
+      await authClient.twoFactor.verifyChallenge(
+        twoFactorAuthenticationMethod === 'totp' ? { totpCode } : { backupCode },
+      );
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AuthenticationErrorCode.TwoFactorChallengeExpired) {
+        await onRedirectToSignIn();
+
+        return;
+      }
+
+      if (error.code === AuthenticationErrorCode.InvalidTwoFactorCode) {
+        toast({
+          title: _(msg`Unable to sign in`),
+          description: _(msg`The two-factor authentication code provided is incorrect.`),
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`We were unable to verify your code. Please try again.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (isValidatingChallenge) {
+    return (
+      <div className="w-screen max-w-lg px-4">
+        <div className="flex flex-col items-center justify-center gap-y-4 py-12">
+          <Loader2Icon className="h-8 w-8 animate-spin text-muted-foreground" />
+          <p className="text-muted-foreground text-sm">
+            <Trans>Checking your sign-in...</Trans>
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <div className="z-10 rounded-xl border border-border bg-neutral-100 p-6 dark:bg-background">
+        <h1 className="font-semibold text-2xl">
+          <Trans>Two-Factor Authentication</Trans>
+        </h1>
+
+        <p className="mt-2 text-muted-foreground text-sm">
+          {twoFactorAuthenticationMethod === 'totp' ? (
+            <Trans>Enter the code from your authenticator app to finish signing in.</Trans>
+          ) : (
+            <Trans>Enter one of your backup codes to finish signing in.</Trans>
+          )}
+        </p>
+
+        <hr className="-mx-6 my-4" />
+
+        <Form {...form}>
+          <form className="flex w-full flex-col gap-y-4" onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+              {twoFactorAuthenticationMethod === 'totp' && (
+                <FormField
+                  control={form.control}
+                  name="totpCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>Token</Trans>
+                      </FormLabel>
+                      <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>
+                  )}
+                />
+              )}
+
+              {twoFactorAuthenticationMethod === 'backup' && (
+                <FormField
+                  control={form.control}
+                  name="backupCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>Backup Code</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input type="text" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <div className="flex flex-col gap-y-2 sm:flex-row sm:justify-end sm:gap-x-2">
+                <Button type="button" variant="secondary" onClick={onToggleTwoFactorAuthenticationMethodClick}>
+                  {twoFactorAuthenticationMethod === 'totp' ? (
+                    <Trans>Use Backup Code</Trans>
+                  ) : (
+                    <Trans>Use Authenticator</Trans>
+                  )}
+                </Button>
+
+                <Button type="submit" loading={isSubmitting}>
+                  {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
+                </Button>
+              </div>
+            </fieldset>
+          </form>
+        </Form>
+
+        <p className="mt-6 text-center text-muted-foreground text-sm">
+          <Trans>
+            Not you?{' '}
+            <Link to="/signin" className="text-documenso-700 duration-200 hover:opacity-70">
+              Back to sign in
+            </Link>
+          </Trans>
+        </p>
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_unauthenticated+/organisation.invite.$token.tsx

@@ -32,6 +32,12 @@ export async function loader({ params, request }: Route.LoaderArgs) {
       organisation: {
         select: {
           name: true,
+          organisationGlobalSettings: {
+            select: {
+              twoFactorRequired: true,
+              twoFactorGracePeriodDays: true,
+            },
+          },
         },
       },
     },
@@ -71,6 +77,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     },
   });
 
+  // Non-blocking notice data: joining always succeeds, but the member's 2FA
+  // grace window starts at join when the organisation requires 2FA.
+  const twoFactorSettings = organisationMemberInvite.organisation.organisationGlobalSettings;
+
   return {
     state: 'Pending',
     token: organisationMemberInvite.token,
@@ -78,6 +88,8 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     organisationName,
     userExists: user !== null,
     isSessionUserTheInvitedUser: user !== null && user.id === session.user?.id,
+    organisationTwoFactorRequired: twoFactorSettings.twoFactorRequired,
+    organisationTwoFactorGracePeriodDays: twoFactorSettings.twoFactorGracePeriodDays,
   } as const;
 }
 
@@ -141,6 +153,8 @@ export default function AcceptInvitationPage({ loaderData }: Route.ComponentProp
       organisationName={data.organisationName}
       userExists={data.userExists}
       isSessionUserTheInvitedUser={data.isSessionUserTheInvitedUser}
+      organisationTwoFactorRequired={data.organisationTwoFactorRequired}
+      organisationTwoFactorGracePeriodDays={data.organisationTwoFactorGracePeriodDays}
     />
   );
 }
@@ -151,6 +165,8 @@ type PendingInvitationProps = {
   organisationName: string;
   userExists: boolean;
   isSessionUserTheInvitedUser: boolean;
+  organisationTwoFactorRequired: boolean;
+  organisationTwoFactorGracePeriodDays: number;
 };
 
 type InvitationResult = 'idle' | 'accepted' | 'declined';
@@ -163,6 +179,8 @@ const PendingInvitation = ({
   organisationName,
   userExists,
   isSessionUserTheInvitedUser,
+  organisationTwoFactorRequired,
+  organisationTwoFactorGracePeriodDays,
 }: PendingInvitationProps) => {
   const { t } = useLingui();
   const { toast } = useToast();
@@ -289,6 +307,24 @@ const PendingInvitation = ({
           </Trans>
         </p>
 
+        {/* Non-blocking notice: accepting always succeeds; access to the
+            organisation blocks only after the grace period expires. */}
+        {organisationTwoFactorRequired && !actionIsDecline && (
+          <p className="mt-2 mb-4 text-muted-foreground text-sm">
+            {organisationTwoFactorGracePeriodDays > 0 ? (
+              <Trans>
+                This organisation requires two-factor authentication. You will need to enable it within{' '}
+                {organisationTwoFactorGracePeriodDays} days of joining to keep access to the organisation.
+              </Trans>
+            ) : (
+              <Trans>
+                This organisation requires two-factor authentication. You will need to enable it immediately after
+                joining to access the organisation.
+              </Trans>
+            )}
+          </p>
+        )}
+
         {acceptFailureReason && (
           <p className="mt-2 mb-4 text-destructive text-sm">
             {match(acceptFailureReason)

apps/remix/app/routes/_unauthenticated+/organisation.sso.confirmation.$token.tsx

@@ -86,6 +86,12 @@ export async function loader({ params }: Route.LoaderArgs) {
       name: true,
       url: true,
       avatarImageId: true,
+      organisationGlobalSettings: {
+        select: {
+          twoFactorRequired: true,
+          twoFactorGracePeriodDays: true,
+        },
+      },
     },
   });
 
@@ -107,6 +113,10 @@ export async function loader({ params }: Route.LoaderArgs) {
       name: organisation.name,
       url: organisation.url,
       avatar: organisation.avatarImageId,
+      // Non-blocking notice data: SSO membership creation always succeeds;
+      // the 2FA grace window starts at join.
+      twoFactorRequired: organisation.organisationGlobalSettings.twoFactorRequired,
+      twoFactorGracePeriodDays: organisation.organisationGlobalSettings.twoFactorGracePeriodDays,
     },
   } as const;
 }
@@ -266,6 +276,26 @@ export default function OrganisationSsoConfirmationTokenPage({ loaderData }: Rou
             </div>
           </div>
 
+          {/* Non-blocking notice: confirming always succeeds; organisation
+              access blocks only after the grace period expires. */}
+          {organisation.twoFactorRequired && (
+            <Alert variant="neutral">
+              <AlertDescription>
+                {organisation.twoFactorGracePeriodDays > 0 ? (
+                  <Trans>
+                    This organisation requires two-factor authentication. You will need to enable it within{' '}
+                    {organisation.twoFactorGracePeriodDays} days of joining to keep access to the organisation.
+                  </Trans>
+                ) : (
+                  <Trans>
+                    This organisation requires two-factor authentication. You will need to enable it immediately after
+                    joining to access the organisation.
+                  </Trans>
+                )}
+              </AlertDescription>
+            </Alert>
+          )}
+
           <div className="mb-4 flex items-center gap-x-2">
             <Checkbox
               id={`accept-conditions`}

apps/remix/app/routes/api+/certificate-status.ts

@@ -1,8 +1,8 @@
 import { getCertificateStatus } from '@documenso/lib/server-only/cert/cert-status';
 
-export const loader = () => {
+export const loader = async () => {
   try {
-    const certStatus = getCertificateStatus();
+    const certStatus = await getCertificateStatus();
 
     return Response.json({
       isAvailable: certStatus.isAvailable,

apps/remix/app/routes/api+/health.ts

@@ -22,7 +22,7 @@ export const loader = async () => {
   }
 
   try {
-    const certStatus = getCertificateStatus();
+    const certStatus = await getCertificateStatus();
 
     if (certStatus.isAvailable) {
       checks.certificate = { status: 'ok' };

apps/remix/app/routes/embed+/_v0+/_layout.tsx

@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import {
   IS_GOOGLE_SSO_ENABLED,
   IS_MICROSOFT_SSO_ENABLED,
@@ -5,6 +6,7 @@ import {
   OIDC_PROVIDER_LABEL,
 } from '@documenso/lib/constants/auth';
 import { Trans } from '@lingui/react/macro';
+import { useEffect } from 'react';
 import { isRouteErrorResponse, Outlet, useRouteError } from 'react-router';
 
 import { EmbedAuthenticationRequired } from '~/components/embed/embed-authentication-required';
@@ -47,10 +49,30 @@ export default function Layout() {
 export function ErrorBoundary({ loaderData }: Route.ErrorBoundaryProps) {
   const { isGoogleSSOEnabled, isMicrosoftSSOEnabled, isOIDCSSOEnabled, oidcProviderLabel } = loaderData || {};
 
+  const analytics = useAnalytics();
   const error = useRouteError();
 
   console.log({ routeError: error });
 
+  useEffect(() => {
+    const isExpectedEmbedResponse =
+      isRouteErrorResponse(error) &&
+      [
+        'embed-authentication-required',
+        'embed-paywall',
+        'embed-waiting-for-turn',
+        'embed-recipient-expired',
+        'embed-document-rejected',
+        'embed-document-completed',
+      ].includes(error.data?.type);
+
+    if (isExpectedEmbedResponse) {
+      return;
+    }
+
+    analytics.captureException(error, { source: 'embed', location: 'embed_layout_boundary' });
+  }, [error]);
+
   if (isRouteErrorResponse(error)) {
     if (error.status === 401 && error.data.type === 'embed-authentication-required') {
       return (

apps/remix/app/routes/embed+/_v0+/direct.$token.tsx

@@ -2,11 +2,13 @@ import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session
 import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { captureServerEvent } from '@documenso/lib/server-only/analytics/capture-server-event';
 import { getEnvelopeForDirectTemplateSigning } from '@documenso/lib/server-only/envelope/get-envelope-for-direct-template-signing';
 import { getEnvelopeRequiredAccessData } from '@documenso/lib/server-only/envelope/get-envelope-required-access-data';
 import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
 import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { fireAndForget } from '@documenso/lib/universal/fire-and-forget';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { prisma } from '@documenso/prisma';
 import { data } from 'react-router';
@@ -93,6 +95,30 @@ async function handleV1Loader({ params, request }: Route.LoaderArgs) {
 
   const fields = template.fields.filter((field) => field.recipientId === directTemplateRecipientId);
 
+  fireAndForget(async () => {
+    const team = await prisma.team.findFirst({
+      where: {
+        id: template.teamId,
+      },
+      select: {
+        organisationId: true,
+      },
+    });
+
+    captureServerEvent({
+      event: 'App: Embed Session Started',
+      userId: user?.id,
+      organisationId: team?.organisationId,
+      teamId: template.teamId,
+      properties: {
+        type: 'signing',
+        version: 'v0',
+        recipientId: recipient.id,
+        envelopeId: template.envelopeId,
+      },
+    });
+  });
+
   return {
     token,
     user,
@@ -194,6 +220,30 @@ async function handleV2Loader({ params, request }: Route.LoaderArgs) {
     );
   }
 
+  fireAndForget(async () => {
+    const team = await prisma.team.findFirst({
+      where: {
+        id: envelope.teamId,
+      },
+      select: {
+        organisationId: true,
+      },
+    });
+
+    captureServerEvent({
+      event: 'App: Embed Session Started',
+      userId: user?.id,
+      organisationId: team?.organisationId,
+      teamId: envelope.teamId,
+      properties: {
+        type: 'signing',
+        version: 'v0',
+        recipientId: recipient.id,
+        envelopeId: envelope.id,
+      },
+    });
+  });
+
   return {
     token,
     user,

apps/remix/app/routes/embed+/_v0+/sign.$token.tsx

@@ -2,6 +2,7 @@ import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session
 import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { captureServerEvent } from '@documenso/lib/server-only/analytics/capture-server-event';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
 import { getEnvelopeForRecipientSigning } from '@documenso/lib/server-only/envelope/get-envelope-for-recipient-signing';
@@ -13,6 +14,7 @@ import { getIsRecipientsTurnToSign } from '@documenso/lib/server-only/recipient/
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientsForAssistant } from '@documenso/lib/server-only/recipient/get-recipients-for-assistant';
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { fireAndForget } from '@documenso/lib/universal/fire-and-forget';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
 import { isRecipientExpired } from '@documenso/lib/utils/recipients';
@@ -139,6 +141,30 @@ async function handleV1Loader({ params, request }: Route.LoaderArgs) {
         })
       : [];
 
+  fireAndForget(async () => {
+    const team = await prisma.team.findFirst({
+      where: {
+        id: document.teamId,
+      },
+      select: {
+        organisationId: true,
+      },
+    });
+
+    captureServerEvent({
+      event: 'App: Embed Session Started',
+      userId: user?.id,
+      organisationId: team?.organisationId,
+      teamId: document.teamId,
+      properties: {
+        type: 'signing',
+        version: 'v0',
+        recipientId: recipient.id,
+        envelopeId: document.envelopeId,
+      },
+    });
+  });
+
   return {
     token,
     user,
@@ -272,6 +298,30 @@ async function handleV2Loader({ params, request }: Route.LoaderArgs) {
     recipientAccessAuth: derivedRecipientAccessAuth,
   }).catch(() => null);
 
+  fireAndForget(async () => {
+    const team = await prisma.team.findFirst({
+      where: {
+        id: envelope.teamId,
+      },
+      select: {
+        organisationId: true,
+      },
+    });
+
+    captureServerEvent({
+      event: 'App: Embed Session Started',
+      userId: user?.id,
+      organisationId: team?.organisationId,
+      teamId: envelope.teamId,
+      properties: {
+        type: 'signing',
+        version: 'v0',
+        recipientId: recipient.id,
+        envelopeId: envelope.id,
+      },
+    });
+  });
+
   return {
     token,
     user,

apps/remix/app/routes/embed+/v1+/authoring+/_layout.tsx

@@ -1,8 +1,11 @@
 import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
+import { captureServerEvent } from '@documenso/lib/server-only/analytics/capture-server-event';
 import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
 import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
 import { ZBaseEmbedAuthoringSchema } from '@documenso/lib/types/embed-authoring-base-schema';
+import { fireAndForget } from '@documenso/lib/universal/fire-and-forget';
 import { dynamicActivate } from '@documenso/lib/utils/i18n';
+import { prisma } from '@documenso/prisma';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { Spinner } from '@documenso/ui/primitives/spinner';
 import { Trans } from '@lingui/react/macro';
@@ -35,6 +38,40 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
     });
 
     allowEmbedAuthoringWhiteLabel = organisationClaim.flags.embedAuthoringWhiteLabel ?? false;
+
+    // Derive the kind of authoring session from the child route path, e.g.
+    // /embed/v1/authoring/document/create -> resource 'document', mode 'create'.
+    // Completed and error pages are not new sessions and are skipped.
+    const [resource, mode] = url.pathname.split('/').filter(Boolean).slice(3);
+
+    const isAuthoringSession =
+      (resource === 'document' || resource === 'template') && (mode === 'create' || mode === 'edit');
+
+    if (isAuthoringSession) {
+      fireAndForget(async () => {
+        const team = await prisma.team.findFirst({
+          where: {
+            id: result.teamId,
+          },
+          select: {
+            organisationId: true,
+          },
+        });
+
+        captureServerEvent({
+          event: 'App: Embed Session Started',
+          userId: result.userId,
+          organisationId: team?.organisationId,
+          teamId: result.teamId,
+          properties: {
+            type: 'authoring',
+            version: 'v1',
+            resource,
+            mode,
+          },
+        });
+      });
+    }
   }
 
   return {

apps/remix/app/routes/embed+/v1+/multisign+/_index.tsx

@@ -1,8 +1,11 @@
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { captureServerEvent } from '@documenso/lib/server-only/analytics/capture-server-event';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { ZSignDocumentEmbedDataSchema } from '@documenso/lib/types/embed-document-sign-schema';
+import { fireAndForget } from '@documenso/lib/universal/fire-and-forget';
+import { prisma } from '@documenso/prisma';
 import { Trans } from '@lingui/react/macro';
 import { SigningStatus } from '@prisma/client';
 import { useEffect, useLayoutEffect, useState } from 'react';
@@ -42,6 +45,15 @@ export async function loader({ request }: Route.LoaderArgs) {
   const firstDocument = envelopes[0]?.document;
 
   if (!firstDocument) {
+    captureServerEvent({
+      event: 'App: Embed Session Started',
+      userId: user?.id,
+      properties: {
+        type: 'signing',
+        version: 'v1',
+      },
+    });
+
     return superLoaderJson({
       envelopes,
       user,
@@ -55,6 +67,29 @@ export async function loader({ request }: Route.LoaderArgs) {
   const allowWhitelabelling = organisationClaim.flags.embedSigningWhiteLabel;
   const hidePoweredBy = organisationClaim.flags.hidePoweredBy;
 
+  fireAndForget(async () => {
+    const team = await prisma.team.findFirst({
+      where: {
+        id: firstDocument.teamId,
+      },
+      select: {
+        organisationId: true,
+      },
+    });
+
+    captureServerEvent({
+      event: 'App: Embed Session Started',
+      userId: user?.id,
+      organisationId: team?.organisationId,
+      teamId: firstDocument.teamId,
+      properties: {
+        type: 'signing',
+        version: 'v1',
+        envelopeId: firstDocument.envelopeId,
+      },
+    });
+  });
+
   return superLoaderJson({
     envelopes,
     user,

apps/remix/app/routes/embed+/v2+/authoring+/_layout.tsx

@@ -1,5 +1,6 @@
 import { PAID_PLAN_LIMITS } from '@documenso/ee/server-only/limits/constants';
 import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { OrganisationProvider } from '@documenso/lib/client-only/providers/organisation';
 import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
 import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
@@ -12,7 +13,7 @@ import type { OrganisationSession } from '@documenso/trpc/server/organisation-ro
 import { Spinner } from '@documenso/ui/primitives/spinner';
 import { Trans } from '@lingui/react/macro';
 import { OrganisationMemberRole, OrganisationType, TeamMemberRole } from '@prisma/client';
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import { isRouteErrorResponse, Outlet, useLoaderData } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -136,6 +137,9 @@ export default function AuthoringLayout() {
     teams: [team],
     subscription: null,
     currentOrganisationRole: OrganisationMemberRole.MEMBER,
+    // Hardcoded non-enforcing status: embed authoring is presign-token
+    // authorized (machine access), which is exempt from 2FA enforcement.
+    twoFactorEnforcement: { required: false },
   };
 
   return (
@@ -166,8 +170,17 @@ export default function AuthoringLayout() {
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const analytics = useAnalytics();
+
   const errorCode = isRouteErrorResponse(error) ? error.status : 500;
 
+  useEffect(() => {
+    analytics.captureException(error, {
+      source: 'embed',
+      location: 'embed_authoring_boundary',
+    });
+  }, [error]);
+
   return (
     <div>
       {match(errorCode)