feat: demo

## Description

**Fixes issues with mismatching state between document steps.**

For example, editing a recipient and proceeding to the next step may not
display the updated recipient. And going back will display the old
recipient instead of the updated values.

**This PR also improves mutation and query speeds by adding logic to
bypass query invalidation.**

```ts
export const trpc = createTRPCReact<AppRouter>({
  unstable_overrides: {
    useMutation: {
      async onSuccess(opts) {
        await opts.originalFn();

        // This forces mutations to wait for all the queries on the page to reload, and in
        // this case one of the queries is `searchDocument` for the command overlay, which
        // on average takes ~500ms. This means that every single mutation must wait for this.
        await opts.queryClient.invalidateQueries(); 
      },
    },
  },
});
```

I've added workarounds to allow us to bypass things such as batching and
invalidating queries. But I think we should instead remove this and
update all the mutations where a query is required for a more optimised
system.

## Example benchmarks

Using stg-app vs this preview there's an average 50% speed increase
across mutations.

**Set signer step:**
Average old speed: ~1100ms
Average new speed: ~550ms

**Set recipient step:**
Average old speed: ~1200ms
Average new speed: ~600ms

**Set fields step:**
Average old speed: ~1200ms
Average new speed: ~600ms

## Related Issue

This will resolve #470

## Changes Made

- Added ability to skip batch queries
- Added a state to store the required document data.
- Refetch the data between steps if/when required
- Optimise mutations and queries

## Checklist

- [X] I have tested these changes locally and they work as expected.
- [X] I have followed the project's coding style guidelines.

---------

Co-authored-by: Lucas Smith <me@lucasjamessmith.me>

.devcontainer/on-create.sh

@@ -1,13 +1,10 @@
 #!/usr/bin/env bash
 
-# Start the database and mailserver
-docker compose -f ./docker/compose-without-app.yml up -d
-
 # Install dependencies
 npm install
 
 # Copy the env file
 cp .env.example .env
 
-# Run the migrations
-npm run prisma:migrate-dev
+# Run the dev setup
+npm run dx

.env.example

@@ -22,10 +22,23 @@ NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documen
 # Defines the URL to use for the database when running migrations and other commands that won't work with a connection pool.
 NEXT_PRIVATE_DIRECT_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
 
-# [[E2E Tests]]
-E2E_TEST_AUTHENTICATE_USERNAME="Test User"
-E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
-E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
+# [[SIGNING]]
+# The transport to use for document signing. Available options: local (default) | gcloud-hsm
+NEXT_PRIVATE_SIGNING_TRANSPORT="local"
+# OPTIONAL: The passphrase to use for the local file-based signing transport.
+NEXT_PRIVATE_SIGNING_PASSPHRASE=
+# OPTIONAL: The local file path to the .p12 file to use for the local signing transport.
+NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH=
+# OPTIONAL: The base64-encoded contents of the .p12 file to use for the local signing transport.
+NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS=
+# OPTIONAL: The path to the Google Cloud HSM key to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_HSM_KEY_PATH=
+# OPTIONAL: The path to the Google Cloud HSM public certificate file to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_PATH=
+# OPTIONAL: The base64-encoded contents of the Google Cloud HSM public certificate file to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_CONTENTS=
+# OPTIONAL: The path to the Google Cloud Credentials file to use for the gcloud-hsm signing transport.
+NEXT_PRIVATE_SIGNING_GCLOUD_APPLICATION_CREDENTIALS_CONTENTS=
 
 # [[SIGNING]]
 # OPTIONAL: Defines the signing transport to use. Available options: local (default)
@@ -100,6 +113,11 @@ NEXT_PUBLIC_FEATURE_BILLING_ENABLED=
 # OPTIONAL: Leave blank to allow users to signup through /signup page.
 NEXT_PUBLIC_DISABLE_SIGNUP=
 
+# [[E2E Tests]]
+E2E_TEST_AUTHENTICATE_USERNAME="Test User"
+E2E_TEST_AUTHENTICATE_USER_EMAIL="testuser@mail.com"
+E2E_TEST_AUTHENTICATE_USER_PASSWORD="test_Password123"
+
 # This is only required for the marketing site
 # [[REDIS]]
 NEXT_PRIVATE_REDIS_URL=

.vscode/settings.json

@@ -1,7 +1,9 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll": "explicit"
   },
   "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
   "javascript.preferences.importModuleSpecifier": "non-relative",

apps/marketing/next.config.js

@@ -21,7 +21,7 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
 const config = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt'],
+    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign'],
     serverActions: {
       bodySizeLimit: '50mb',
     },

apps/marketing/src/app/(marketing)/layout.tsx

@@ -38,7 +38,8 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
   return (
     <div
       className={cn('relative flex min-h-[100vh] max-w-[100vw] flex-col pt-20 md:pt-28', {
-        'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
+        'overflow-y-auto overflow-x-hidden':
+          pathname && !['/singleplayer', '/pricing'].includes(pathname),
       })}
     >
       <div

apps/marketing/src/app/(marketing)/open/bar-metrics.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLDivElement> & {
   data: T;
@@ -34,13 +33,13 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
     .reverse();
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">{title}</h3>
-        <span>{extraInfo}</span>
-      </div>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">{title}</h3>
+          <span>{extraInfo}</span>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={chartHeight}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />

apps/marketing/src/app/(marketing)/open/cap-table.tsx

@@ -5,8 +5,6 @@ import { useEffect, useState } from 'react';
 
 import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';
 
-import { cn } from '@documenso/ui/lib/utils';
-
 import { CAP_TABLE } from './data';
 
 const COLORS = ['#7fd843', '#a2e771', '#c6f2a4'];
@@ -49,10 +47,12 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
     setIsSSR(false);
   }, []);
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Cap Table</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
         {!isSSR && (
           <PieChart width={400} height={400}>
             <Pie

apps/marketing/src/app/(marketing)/open/funding-raised.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
   data: Record<string, string | number>[];
@@ -18,10 +17,12 @@ export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps)
   }));
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Funding Raised</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
             <XAxis dataKey="date" />

apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+
+export type MonthlyCompletedDocumentsChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const MonthlyCompletedDocumentsChart = ({
+  className,
+  data,
+}: MonthlyCompletedDocumentsChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Completed Documents per Month</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value).toLocaleString('en-US'), 'Completed Documents']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Completed Documents"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx

@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyNewUsersChartProps = {
   className?: string;
@@ -20,12 +19,12 @@ export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartPr
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">New Users</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">New Users</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />

apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx

@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyTotalUsersChartProps = {
   className?: string;
@@ -20,12 +19,12 @@ export const MonthlyTotalUsersChart = ({ className, data }: MonthlyTotalUsersCha
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">Total Users</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Users</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -2,20 +2,23 @@ import type { Metadata } from 'next';
 
 import { z } from 'zod';
 
+import { getCompletedDocumentsMonthly } from '@documenso/lib/server-only/user/get-monthly-completed-document';
 import { getUserMonthlyGrowth } from '@documenso/lib/server-only/user/get-user-monthly-growth';
 
 import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
-import { MetricCard } from '~/app/(marketing)/open/metric-card';
-import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 import { CallToAction } from '~/components/(marketing)/call-to-action';
 
 import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
+import { MetricCard } from './metric-card';
+import { MonthlyCompletedDocumentsChart } from './monthly-completed-documents-chart';
 import { MonthlyNewUsersChart } from './monthly-new-users-chart';
 import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
+import { SalaryBands } from './salary-bands';
 import { TeamMembers } from './team-members';
 import { OpenPageTooltip } from './tooltip';
+import { TotalSignedDocumentsChart } from './total-signed-documents-chart';
 import { Typefully } from './typefully';
 
 export const metadata: Metadata = {
@@ -131,16 +134,18 @@ export default async function OpenPage() {
     { total_count: mergedPullRequests },
     STARGAZERS_DATA,
     EARLY_ADOPTERS_DATA,
+    MONTHLY_USERS,
+    MONTHLY_COMPLETED_DOCUMENTS,
   ] = await Promise.all([
     fetchGithubStats(),
     fetchOpenIssues(),
     fetchMergedPullRequests(),
     fetchStargazers(),
     fetchEarlyAdopters(),
+    getUserMonthlyGrowth(),
+    getCompletedDocumentsMonthly(),
   ]);
 
-  const MONTHLY_USERS = await getUserMonthlyGrowth();
-
   return (
     <div>
       <div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
@@ -161,7 +166,7 @@ export default async function OpenPage() {
           </p>
         </div>
 
-        <div className="mt-12 grid grid-cols-12 gap-8">
+        <div className="my-12 grid grid-cols-12 gap-8">
           <div className="col-span-12 grid grid-cols-4 gap-4">
             <MetricCard
               className="col-span-2 lg:col-span-1"
@@ -188,11 +193,57 @@ export default async function OpenPage() {
           <TeamMembers className="col-span-12" />
 
           <SalaryBands className="col-span-12" />
+        </div>
 
+        <h2 className="px-4 text-2xl font-semibold">Finances</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
           <FundingRaised data={FUNDING_RAISED} className="col-span-12 lg:col-span-6" />
 
           <CapTable className="col-span-12 lg:col-span-6" />
+        </div>
 
+        <h2 className="px-4 text-2xl font-semibold">Community</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="stars"
+            title="GitHub: Total Stars"
+            label="Stars"
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="mergedPRs"
+            title="GitHub: Total Merged PRs"
+            label="Merged PRs"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="forks"
+            title="GitHub: Total Forks"
+            label="Forks"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <BarMetric<StargazersType>
+            data={STARGAZERS_DATA}
+            metricKey="openIssues"
+            title="GitHub: Total Open Issues"
+            label="Open Issues"
+            chartHeight={400}
+            className="col-span-12 lg:col-span-6"
+          />
+
+          <Typefully className="col-span-12 lg:col-span-6" />
+        </div>
+
+        <h2 className="px-4 text-2xl font-semibold">Growth</h2>
+        <div className="mb-12 mt-4 grid grid-cols-12 gap-8">
           <BarMetric<EarlyAdoptersType>
             data={EARLY_ADOPTERS_DATA}
             metricKey="earlyAdopters"
@@ -202,57 +253,29 @@ export default async function OpenPage() {
             extraInfo={<OpenPageTooltip />}
           />
 
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="stars"
-            title="Github: Total Stars"
-            label="Stars"
-            className="col-span-12 lg:col-span-6"
-          />
-
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="mergedPRs"
-            title="Github: Total Merged PRs"
-            label="Merged PRs"
-            chartHeight={300}
-            className="col-span-12 lg:col-span-6"
-          />
-
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="forks"
-            title="Github: Total Forks"
-            label="Forks"
-            chartHeight={300}
-            className="col-span-12 lg:col-span-6"
-          />
-
-          <BarMetric<StargazersType>
-            data={STARGAZERS_DATA}
-            metricKey="openIssues"
-            title="Github: Total Open Issues"
-            label="Open Issues"
-            chartHeight={300}
-            className="col-span-12 lg:col-span-6"
-          />
-
           <MonthlyTotalUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
           <MonthlyNewUsersChart data={MONTHLY_USERS} className="col-span-12 lg:col-span-6" />
 
-          <Typefully className="col-span-12 lg:col-span-6" />
-
-          <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
-            <h2 className="text-2xl font-bold">Where's the rest?</h2>
-
-            <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
-              We're still working on getting all our metrics together. We'll update this page as
-              soon as we have more to share.
-            </p>
-          </div>
+          <MonthlyCompletedDocumentsChart
+            data={MONTHLY_COMPLETED_DOCUMENTS}
+            className="col-span-12 lg:col-span-6"
+          />
+          <TotalSignedDocumentsChart
+            data={MONTHLY_COMPLETED_DOCUMENTS}
+            className="col-span-12 lg:col-span-6"
+          />
         </div>
       </div>
 
+      <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
+        <h2 className="text-2xl font-bold">Is there more?</h2>
+
+        <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
+          This page is evolving as we learn what makes a great signing company. We'll update it when
+          we have more to share.
+        </p>
+      </div>
+
       <CallToAction className="mt-12" utmSource="open-page" />
     </div>
   );

apps/marketing/src/app/(marketing)/open/team-members.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import {

apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+
+export type TotalSignedDocumentsChartProps = {
+  className?: string;
+  data: GetUserMonthlyGrowthResult;
+};
+
+export const TotalSignedDocumentsChart = ({ className, data }: TotalSignedDocumentsChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, cume_count: count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLLL'),
+      count: Number(count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Completed Documents</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [
+                Number(value).toLocaleString('en-US'),
+                'Total Completed Documents',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Total Completed Documents"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/typefully.tsx

@@ -6,18 +6,19 @@ import Link from 'next/link';
 
 import { FaXTwitter } from 'react-icons/fa6';
 
-import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
 export type TypefullyProps = HTMLAttributes<HTMLDivElement>;
 
 export const Typefully = ({ className, ...props }: TypefullyProps) => {
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Twitter Stats</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Twitter Stats</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border py-8 shadow-sm hover:shadow">
-        <div className="flex flex-col items-center gap-y-4 text-center">
+        <div className="my-12 flex flex-col items-center gap-y-4 text-center">
           <FaXTwitter className="h-12 w-12" />
           <Link href="https://typefully.com/documenso/stats" target="_blank">
             <h1>Documenso on X</h1>

apps/marketing/src/components/(marketing)/callout.tsx

@@ -53,7 +53,7 @@ export const Callout = ({ starCount }: CalloutProps) => {
       >
         <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
           <LuGithub className="mr-2 h-5 w-5" />
-          Star on Github
+          Star on GitHub
           {starCount && starCount > 0 && (
             <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
               {starCount.toLocaleString('en-US')}

apps/marketing/src/components/(marketing)/hero.tsx

@@ -123,7 +123,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           <Link href="https://github.com/documenso/documenso" onClick={() => event('view-github')}>
             <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
               <LuGithub className="mr-2 h-5 w-5" />
-              Star on Github
+              Star on GitHub
             </Button>
           </Link>
         </motion.div>

apps/marketing/src/components/(marketing)/pricing-table.tsx

@@ -23,7 +23,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
 
   return (
     <div className={cn('', className)} {...props}>
-      <div className="flex items-center justify-center gap-x-6">
+      <div className="bg-background sticky top-32 flex items-center justify-end gap-x-6 shadow-[-1px_-5px_2px_6px_hsl(var(--background))] md:top-[7.5rem] lg:static lg:justify-center">
         <AnimatePresence>
           <motion.button
             key="MONTHLY"
@@ -40,7 +40,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             {period === 'MONTHLY' && (
               <motion.div
                 layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
               />
             )}
           </motion.button>
@@ -63,7 +63,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             {period === 'YEARLY' && (
               <motion.div
                 layoutId={SELECTED_PLAN_BAR_LAYOUT_ID}
-                className="bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
+                className="bg-foreground lg:bg-primary absolute bottom-0 left-0 h-[3px] w-full rounded-full"
               />
             )}
           </motion.button>

apps/web/next.config.js

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+const { withAxiom } = require('next-axiom');
 const fs = require('fs');
 const path = require('path');
 const { version } = require('./package.json');
@@ -22,7 +23,7 @@ const config = {
   output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
-    serverComponentsExternalPackages: ['@node-rs/bcrypt'],
+    serverComponentsExternalPackages: ['@node-rs/bcrypt', '@documenso/pdf-sign'],
     serverActions: {
       bodySizeLimit: '50mb',
     },
@@ -91,4 +92,4 @@ const config = {
   },
 };
 
-module.exports = config;
+module.exports = withAxiom(config);

apps/web/package.json

@@ -22,7 +22,10 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
+    "@simplewebauthn/browser": "^9.0.1",
+    "@simplewebauthn/server": "^9.0.3",
     "@tanstack/react-query": "^4.29.5",
+    "cookie-es": "^1.0.0",
     "formidable": "^2.1.1",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.279.0",
@@ -30,6 +33,7 @@
     "micro": "^10.0.1",
     "next": "14.0.3",
     "next-auth": "4.24.5",
+    "next-axiom": "^1.1.1",
     "next-plausible": "^3.10.1",
     "next-themes": "^0.2.1",
     "perfect-freehand": "^1.2.0",
@@ -51,6 +55,7 @@
   },
   "devDependencies": {
     "@documenso/tailwind-config": "*",
+    "@simplewebauthn/types": "^9.0.1",
     "@types/formidable": "^2.0.6",
     "@types/luxon": "^3.3.1",
     "@types/node": "20.1.0",

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -1,18 +1,15 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
 import {
-  type DocumentData,
-  type DocumentMeta,
-  DocumentStatus,
-  type Field,
-  type Recipient,
-  type User,
-} from '@documenso/prisma/client';
-import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+  SKIP_QUERY_BATCH_META,
+} from '@documenso/lib/constants/trpc';
+import { DocumentStatus } from '@documenso/prisma/client';
+import type { DocumentWithDetails } from '@documenso/prisma/types/document';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -34,12 +31,7 @@ import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type EditDocumentFormProps = {
   className?: string;
-  user: User;
-  document: DocumentWithData;
-  recipients: Recipient[];
-  documentMeta: DocumentMeta | null;
-  fields: Field[];
-  documentData: DocumentData;
+  initialDocument: DocumentWithDetails;
   documentRootPath: string;
 };
 
@@ -48,12 +40,7 @@ const EditDocumentSteps: EditDocumentStep[] = ['title', 'signers', 'fields', 'su
 
 export const EditDocumentForm = ({
   className,
-  document,
-  recipients,
-  fields,
-  documentMeta,
-  user: _user,
-  documentData,
+  initialDocument,
   documentRootPath,
 }: EditDocumentFormProps) => {
   const { toast } = useToast();
@@ -62,10 +49,74 @@ export const EditDocumentForm = ({
   const searchParams = useSearchParams();
   const team = useOptionalCurrentTeam();
 
-  const { mutateAsync: addTitle } = trpc.document.setTitleForDocument.useMutation();
-  const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
-  const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation();
-  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation();
+  const utils = trpc.useUtils();
+
+  const { data: document, refetch: refetchDocument } =
+    trpc.document.getDocumentWithDetailsById.useQuery(
+      {
+        id: initialDocument.id,
+        teamId: team?.id,
+      },
+      {
+        initialData: initialDocument,
+        ...SKIP_QUERY_BATCH_META,
+      },
+    );
+
+  const { Recipient: recipients, Field: fields } = document;
+
+  const { mutateAsync: addTitle } = trpc.document.setTitleForDocument.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newData) => {
+      utils.document.getDocumentWithDetailsById.setData(
+        {
+          id: initialDocument.id,
+          teamId: team?.id,
+        },
+        (oldData) => ({ ...(oldData || initialDocument), ...newData }),
+      );
+    },
+  });
+
+  const { mutateAsync: addFields } = trpc.field.addFields.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newFields) => {
+      utils.document.getDocumentWithDetailsById.setData(
+        {
+          id: initialDocument.id,
+          teamId: team?.id,
+        },
+        (oldData) => ({ ...(oldData || initialDocument), Field: newFields }),
+      );
+    },
+  });
+
+  const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newRecipients) => {
+      utils.document.getDocumentWithDetailsById.setData(
+        {
+          id: initialDocument.id,
+          teamId: team?.id,
+        },
+        (oldData) => ({ ...(oldData || initialDocument), Recipient: newRecipients }),
+      );
+    },
+  });
+
+  const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newData) => {
+      utils.document.getDocumentWithDetailsById.setData(
+        {
+          id: initialDocument.id,
+          teamId: team?.id,
+        },
+        (oldData) => ({ ...(oldData || initialDocument), ...newData }),
+      );
+    },
+  });
+
   const { mutateAsync: setPasswordForDocument } =
     trpc.document.setPasswordForDocument.useMutation();
 
@@ -112,13 +163,13 @@ export const EditDocumentForm = ({
 
   const onAddTitleFormSubmit = async (data: TAddTitleFormSchema) => {
     try {
-      // Custom invocation server action
       await addTitle({
         documentId: document.id,
         teamId: team?.id,
         title: data.title,
       });
 
+      // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
 
       setStep('signers');
@@ -135,14 +186,15 @@ export const EditDocumentForm = ({
 
   const onAddSignersFormSubmit = async (data: TAddSignersFormSchema) => {
     try {
-      // Custom invocation server action
       await addSigners({
         documentId: document.id,
         teamId: team?.id,
         signers: data.signers,
       });
 
+      // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
+
       setStep('fields');
     } catch (err) {
       console.error(err);
@@ -157,13 +209,14 @@ export const EditDocumentForm = ({
 
   const onAddFieldsFormSubmit = async (data: TAddFieldsFormSchema) => {
     try {
-      // Custom invocation server action
       await addFields({
         documentId: document.id,
         fields: data.fields,
       });
 
+      // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
+
       setStep('subject');
     } catch (err) {
       console.error(err);
@@ -219,6 +272,15 @@ export const EditDocumentForm = ({
 
   const currentDocumentFlow = documentFlow[step];
 
+  /**
+   * Refresh the data in the background when steps change.
+   */
+  useEffect(() => {
+    void refetchDocument();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [step]);
+
   return (
     <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
       <Card
@@ -227,10 +289,10 @@ export const EditDocumentForm = ({
       >
         <CardContent className="p-2">
           <LazyPDFViewer
-            key={documentData.id}
-            documentData={documentData}
+            key={document.documentData.id}
+            documentData={document.documentData}
             document={document}
-            password={documentMeta?.password}
+            password={document.documentMeta?.password}
             onPasswordSubmit={onPasswordSubmit}
           />
         </CardContent>

apps/web/src/app/(dashboard)/documents/[id]/edit/document-edit-page-view.tsx

@@ -5,9 +5,7 @@ import { ChevronLeft, Users2 } from 'lucide-react';
 
 import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
-import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
-import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Team } from '@documenso/prisma/client';
@@ -37,13 +35,13 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
 
   const { user } = await getRequiredServerComponentSession();
 
-  const document = await getDocumentById({
+  const document = await getDocumentWithDetailsById({
     id: documentId,
     userId: user.id,
     teamId: team?.id,
   }).catch(() => null);
 
-  if (!document || !document.documentData) {
+  if (!document) {
     redirect(documentRootPath);
   }
 
@@ -51,7 +49,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
     redirect(`${documentRootPath}/${documentId}`);
   }
 
-  const { documentData, documentMeta } = document;
+  const { documentMeta, Recipient: recipients } = document;
 
   if (documentMeta?.password) {
     const key = DOCUMENSO_ENCRYPTION_KEY;
@@ -70,18 +68,6 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
     documentMeta.password = securePassword;
   }
 
-  const [recipients, fields] = await Promise.all([
-    getRecipientsForDocument({
-      documentId,
-      userId: user.id,
-      teamId: team?.id,
-    }),
-    getFieldsForDocument({
-      documentId,
-      userId: user.id,
-    }),
-  ]);
-
   return (
     <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
       <Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
@@ -109,12 +95,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
 
       <EditDocumentForm
         className="mt-8"
-        document={document}
-        user={user}
-        documentMeta={documentMeta}
-        recipients={recipients}
-        fields={fields}
-        documentData={documentData}
+        initialDocument={document}
         documentRootPath={documentRootPath}
       />
     </div>

apps/web/src/app/(dashboard)/settings/security/activity/page.tsx

@@ -15,15 +15,14 @@ export default function SettingsSecurityActivityPage() {
       <SettingsHeader
         title="Security activity"
         subtitle="View all recent security activity related to your account."
+        hideDivider={true}
       >
-        <div>
-          <ActivityPageBackButton />
-        </div>
+        <ActivityPageBackButton />
       </SettingsHeader>
 
-      <hr className="my-4" />
-
-      <UserSecurityActivityDataTable />
+      <div className="mt-4">
+        <UserSecurityActivityDataTable />
+      </div>
     </div>
   );
 }

apps/web/src/app/(dashboard)/settings/security/page.tsx

@@ -1,14 +1,15 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 
-import { IDENTITY_PROVIDER_NAME } from '@documenso/lib/constants/auth';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
-import { AuthenticatorApp } from '~/components/forms/2fa/authenticator-app';
-import { RecoveryCodes } from '~/components/forms/2fa/recovery-codes';
+import { DisableAuthenticatorAppDialog } from '~/components/forms/2fa/disable-authenticator-app-dialog';
+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';
 
 export const metadata: Metadata = {
@@ -18,6 +19,8 @@ export const metadata: Metadata = {
 export default async function SecuritySettingsPage() {
   const { user } = await getRequiredServerComponentSession();
 
+  const isPasskeyEnabled = await getServerComponentFlag('app_passkey');
+
   return (
     <div>
       <SettingsHeader
@@ -25,57 +28,70 @@ export default async function SecuritySettingsPage() {
         subtitle="Here you can manage your password and security settings."
       />
 
-      {user.identityProvider === 'DOCUMENSO' ? (
-        <div>
+      {user.identityProvider === 'DOCUMENSO' && (
+        <>
           <PasswordForm user={user} />
 
           <hr className="border-border/50 mt-6" />
+        </>
+      )}
 
-          <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>Two factor authentication</AlertTitle>
+      <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>Two factor authentication</AlertTitle>
 
-              <AlertDescription className="mr-4">
-                Create one-time passwords that serve as a secondary authentication method for
-                confirming your identity when requested during the sign-in process.
-              </AlertDescription>
-            </div>
-
-            <AuthenticatorApp isTwoFactorEnabled={user.twoFactorEnabled} />
-          </Alert>
-
-          {user.twoFactorEnabled && (
-            <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>Recovery codes</AlertTitle>
-
-                <AlertDescription className="mr-4">
-                  Two factor authentication recovery codes are used to access your account in the
-                  event that you lose access to your authenticator app.
-                </AlertDescription>
-              </div>
-
-              <RecoveryCodes isTwoFactorEnabled={user.twoFactorEnabled} />
-            </Alert>
-          )}
-        </div>
-      ) : (
-        <Alert className="p-6" variant="neutral">
-          <AlertTitle>
-            Your account is managed by {IDENTITY_PROVIDER_NAME[user.identityProvider]}
-          </AlertTitle>
-
-          <AlertDescription>
-            To update your password, enable two-factor authentication, and manage other security
-            settings, please go to your {IDENTITY_PROVIDER_NAME[user.identityProvider]} account
-            settings.
+          <AlertDescription className="mr-4">
+            Add an authenticator to serve as a secondary authentication method{' '}
+            {user.identityProvider === 'DOCUMENSO'
+              ? 'when signing in, or when signing documents.'
+              : 'for signing documents.'}
           </AlertDescription>
+        </div>
+
+        {user.twoFactorEnabled ? (
+          <DisableAuthenticatorAppDialog />
+        ) : (
+          <EnableAuthenticatorAppDialog />
+        )}
+      </Alert>
+
+      {user.twoFactorEnabled && (
+        <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>Recovery codes</AlertTitle>
+
+            <AlertDescription className="mr-4">
+              Two factor authentication recovery codes are used to access your account in the event
+              that you lose access to your authenticator app.
+            </AlertDescription>
+          </div>
+
+          <ViewRecoveryCodesDialog />
+        </Alert>
+      )}
+
+      {isPasskeyEnabled && (
+        <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>Passkeys</AlertTitle>
+
+            <AlertDescription className="mr-4">
+              Allows authenticating using biometrics, password managers, hardware keys, etc.
+            </AlertDescription>
+          </div>
+
+          <Button asChild variant="outline" className="bg-background">
+            <Link href="/settings/security/passkeys">Manage passkeys</Link>
+          </Button>
         </Alert>
       )}
 
@@ -91,7 +107,7 @@ export default async function SecuritySettingsPage() {
           </AlertDescription>
         </div>
 
-        <Button asChild>
+        <Button asChild variant="outline" className="bg-background">
           <Link href="/settings/security/activity">View activity</Link>
         </Button>
       </Alert>

apps/web/src/app/(dashboard)/settings/security/passkeys/create-passkey-dialog.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { startRegistration } from '@simplewebauthn/browser';
+import { KeyRoundIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import { UAParser } from 'ua-parser-js';
+import { z } from 'zod';
+
+import { MAXIMUM_PASSKEYS } from '@documenso/lib/constants/auth';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type CreatePasskeyDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreatePasskeyFormSchema = z.object({
+  passkeyName: z.string().min(3),
+});
+
+type TCreatePasskeyFormSchema = z.infer<typeof ZCreatePasskeyFormSchema>;
+
+const parser = new UAParser();
+
+export const CreatePasskeyDialog = ({ trigger, ...props }: CreatePasskeyDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const { toast } = useToast();
+
+  const form = useForm<TCreatePasskeyFormSchema>({
+    resolver: zodResolver(ZCreatePasskeyFormSchema),
+    defaultValues: {
+      passkeyName: '',
+    },
+  });
+
+  const { mutateAsync: createPasskeyRegistrationOptions, isLoading } =
+    trpc.auth.createPasskeyRegistrationOptions.useMutation();
+
+  const { mutateAsync: createPasskey } = trpc.auth.createPasskey.useMutation();
+
+  const onFormSubmit = async ({ passkeyName }: TCreatePasskeyFormSchema) => {
+    setFormError(null);
+
+    try {
+      const passkeyRegistrationOptions = await createPasskeyRegistrationOptions();
+
+      const registrationResult = await startRegistration(passkeyRegistrationOptions);
+
+      await createPasskey({
+        passkeyName,
+        verificationResponse: registrationResult,
+      });
+
+      toast({
+        description: 'Successfully created passkey',
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch (err) {
+      if (err.name === 'NotAllowedError') {
+        return;
+      }
+
+      const error = AppError.parseError(err);
+
+      setFormError(err.code || error.code);
+    }
+  };
+
+  const extractDefaultPasskeyName = () => {
+    if (!window || !window.navigator) {
+      return;
+    }
+
+    parser.setUA(window.navigator.userAgent);
+
+    const result = parser.getResult();
+    const operatingSystem = result.os.name;
+    const browser = result.browser.name;
+
+    let passkeyName = '';
+
+    if (operatingSystem && browser) {
+      passkeyName = `${browser} (${operatingSystem})`;
+    }
+
+    return passkeyName;
+  };
+
+  useEffect(() => {
+    if (!open) {
+      const defaultPasskeyName = extractDefaultPasskeyName();
+
+      form.reset({
+        passkeyName: defaultPasskeyName,
+      });
+
+      setFormError(null);
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button variant="secondary" loading={isLoading}>
+            <KeyRoundIcon className="-ml-1 mr-1 h-5 w-5" />
+            Add passkey
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Add passkey</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            Passkeys allow you to sign in and authenticate using biometrics, password managers, etc.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="passkeyName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Passkey name</FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" placeholder="eg. Mac" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Alert variant="neutral">
+                <AlertDescription>
+                  When you click continue, you will be prompted to add the first available
+                  authenticator on your system.
+                </AlertDescription>
+
+                <AlertDescription className="mt-2">
+                  If you do not want to use the authenticator prompted, you can close it, which will
+                  then display the next available authenticator.
+                </AlertDescription>
+              </Alert>
+
+              {formError && (
+                <Alert variant="destructive">
+                  {match(formError)
+                    .with('ERROR_AUTHENTICATOR_PREVIOUSLY_REGISTERED', () => (
+                      <AlertDescription>This passkey has already been registered.</AlertDescription>
+                    ))
+                    .with('TOO_MANY_PASSKEYS', () => (
+                      <AlertDescription>
+                        You cannot have more than {MAXIMUM_PASSKEYS} passkeys.
+                      </AlertDescription>
+                    ))
+                    .with('InvalidStateError', () => (
+                      <>
+                        <AlertTitle className="text-sm">
+                          Passkey creation cancelled due to one of the following reasons:
+                        </AlertTitle>
+                        <AlertDescription>
+                          <ul className="mt-1 list-inside list-disc">
+                            <li>Cancelled by user</li>
+                            <li>Passkey already exists for the provided authenticator</li>
+                            <li>Exceeded timeout</li>
+                          </ul>
+                        </AlertDescription>
+                      </>
+                    ))
+                    .otherwise(() => (
+                      <AlertDescription>
+                        Something went wrong. Please try again or contact support.
+                      </AlertDescription>
+                    ))}
+                </Alert>
+              )}
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  Continue
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/web/src/app/(dashboard)/settings/security/passkeys/page.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from 'next';
+import { redirect } from 'next/navigation';
+
+import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+
+import { CreatePasskeyDialog } from './create-passkey-dialog';
+import { UserPasskeysDataTable } from './user-passkeys-data-table';
+
+export const metadata: Metadata = {
+  title: 'Manage passkeys',
+};
+
+export default async function SettingsManagePasskeysPage() {
+  const isPasskeyEnabled = await getServerComponentFlag('app_passkey');
+
+  if (!isPasskeyEnabled) {
+    redirect('/settings/security');
+  }
+
+  return (
+    <div>
+      <SettingsHeader title="Passkeys" subtitle="Manage your passkeys." hideDivider={true}>
+        <CreatePasskeyDialog />
+      </SettingsHeader>
+
+      <div className="mt-4">
+        <UserPasskeysDataTable />
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table-actions.tsx

@@ -0,0 +1,200 @@
+import { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type UserPasskeysDataTableActionsProps = {
+  className?: string;
+  passkeyId: string;
+  passkeyName: string;
+};
+
+const ZUpdatePasskeySchema = z.object({
+  name: z.string(),
+});
+
+type TUpdatePasskeySchema = z.infer<typeof ZUpdatePasskeySchema>;
+
+export const UserPasskeysDataTableActions = ({
+  className,
+  passkeyId,
+  passkeyName,
+}: UserPasskeysDataTableActionsProps) => {
+  const { toast } = useToast();
+
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isUpdateDialogOpen, setIsUpdateDialogOpen] = useState(false);
+
+  const form = useForm<TUpdatePasskeySchema>({
+    resolver: zodResolver(ZUpdatePasskeySchema),
+    defaultValues: {
+      name: passkeyName,
+    },
+  });
+
+  const { mutateAsync: updatePasskey, isLoading: isUpdatingPasskey } =
+    trpc.auth.updatePasskey.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Passkey has been updated',
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          description:
+            'We are unable to update this passkey at the moment. Please try again later.',
+          duration: 10000,
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const { mutateAsync: deletePasskey, isLoading: isDeletingPasskey } =
+    trpc.auth.deletePasskey.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Passkey has been removed',
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          description:
+            'We are unable to remove this passkey at the moment. Please try again later.',
+          duration: 10000,
+          variant: 'destructive',
+        });
+      },
+    });
+
+  return (
+    <div className={cn('flex justify-end space-x-2', className)}>
+      <Dialog
+        open={isUpdateDialogOpen}
+        onOpenChange={(value) => !isUpdatingPasskey && setIsUpdateDialogOpen(value)}
+      >
+        <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+          <Button variant="outline">Edit</Button>
+        </DialogTrigger>
+
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>Update passkey</DialogTitle>
+
+            <DialogDescription className="mt-4">
+              You are currently updating the <strong>{passkeyName}</strong> passkey.
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(async ({ name }) =>
+                updatePasskey({
+                  passkeyId,
+                  name,
+                }),
+              )}
+            >
+              <fieldset className="flex h-full flex-col" disabled={isUpdatingPasskey}>
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem className="w-full">
+                      <FormLabel required>Name</FormLabel>
+                      <FormControl>
+                        <Input {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <DialogFooter className="mt-4">
+                  <DialogClose asChild>
+                    <Button type="button" variant="secondary">
+                      Cancel
+                    </Button>
+                  </DialogClose>
+
+                  <Button type="submit" loading={isUpdatingPasskey}>
+                    Update
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={isDeleteDialogOpen}
+        onOpenChange={(value) => !isDeletingPasskey && setIsDeleteDialogOpen(value)}
+      >
+        <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+          <Button variant="destructive">Delete</Button>
+        </DialogTrigger>
+
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>Delete passkey</DialogTitle>
+
+            <DialogDescription className="mt-4">
+              Are you sure you want to remove the <strong>{passkeyName}</strong> passkey.
+            </DialogDescription>
+          </DialogHeader>
+
+          <fieldset disabled={isDeletingPasskey}>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button type="button" variant="secondary">
+                  Cancel
+                </Button>
+              </DialogClose>
+
+              <Button
+                onClick={async () =>
+                  deletePasskey({
+                    passkeyId,
+                  })
+                }
+                variant="destructive"
+                loading={isDeletingPasskey}
+              >
+                Delete
+              </Button>
+            </DialogFooter>
+          </fieldset>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import { DateTime } from 'luxon';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { UserPasskeysDataTableActions } from './user-passkeys-data-table-actions';
+
+export const UserPasskeysDataTable = () => {
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } = trpc.auth.findPasskeys.useQuery(
+    {
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Name',
+          accessorKey: 'name',
+        },
+        {
+          header: 'Created',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => DateTime.fromJSDate(row.original.createdAt).toRelative(),
+        },
+
+        {
+          header: 'Last used',
+          accessorKey: 'updatedAt',
+          cell: ({ row }) =>
+            row.original.lastUsedAt
+              ? DateTime.fromJSDate(row.original.lastUsedAt).toRelative()
+              : 'Never',
+        },
+        {
+          id: 'actions',
+          cell: ({ row }) => (
+            <UserPasskeysDataTableActions
+              className="justify-end"
+              passkeyId={row.original.id}
+              passkeyName={row.original.name}
+            />
+          ),
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      hasFilters={parsedSearchParams.page !== undefined || parsedSearchParams.perPage !== undefined}
+      onClearFilters={() => router.push(pathname ?? '/')}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <div className="flex flex-row space-x-2">
+                <Skeleton className="h-8 w-16 rounded" />
+                <Skeleton className="h-8 w-16 rounded" />
+              </div>
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination table={table} />}
+    </DataTable>
+  );
+};

apps/web/src/app/(signing)/sign/[token]/date-field.tsx

@@ -11,6 +11,7 @@ import {
   convertToLocalSystemFormat,
 } 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';
 import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
@@ -38,12 +39,12 @@ export const DateField = ({
   const [isPending, startTransition] = useTransition();
 
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation();
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const {
     mutateAsync: removeSignedFieldWithToken,
     isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation();
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 

apps/web/src/app/(signing)/sign/[token]/email-field.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
@@ -29,12 +30,12 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
   const [isPending, startTransition] = useTransition();
 
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation();
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const {
     mutateAsync: removeSignedFieldWithToken,
     isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation();
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 

apps/web/src/app/(signing)/sign/[token]/name-field.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
@@ -34,12 +35,12 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
   const [isPending, startTransition] = useTransition();
 
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation();
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const {
     mutateAsync: removeSignedFieldWithToken,
     isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation();
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
@@ -35,12 +36,12 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
   const [isPending, startTransition] = useTransition();
 
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation();
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const {
     mutateAsync: removeSignedFieldWithToken,
     isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation();
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const { Signature: signature } = field;
 

apps/web/src/app/(signing)/sign/[token]/text-field.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
@@ -30,12 +31,12 @@ export const TextField = ({ field, recipient }: TextFieldProps) => {
   const [isPending, startTransition] = useTransition();
 
   const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
-    trpc.field.signFieldWithToken.useMutation();
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const {
     mutateAsync: removeSignedFieldWithToken,
     isLoading: isRemoveSignedFieldWithTokenLoading,
-  } = trpc.field.removeSignedFieldWithToken.useMutation();
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 

apps/web/src/app/layout.tsx

@@ -2,6 +2,7 @@ import { Suspense } from 'react';
 
 import { Caveat, Inter } from 'next/font/google';
 
+import { AxiomWebVitals } from 'next-axiom';
 import { PublicEnvScript } from 'next-runtime-env';
 
 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
@@ -71,6 +72,8 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <PublicEnvScript />
       </head>
 
+      <AxiomWebVitals />
+
       <Suspense>
         <PostHogPageview />
       </Suspense>

apps/web/src/components/(dashboard)/common/command-menu.tsx

@@ -14,6 +14,10 @@ import {
   SETTINGS_PAGE_SHORTCUT,
   TEMPLATES_PAGE_SHORTCUT,
 } from '@documenso/lib/constants/keyboard-shortcuts';
+import {
+  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+  SKIP_QUERY_BATCH_META,
+} from '@documenso/lib/constants/trpc';
 import type { Document, Recipient } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
@@ -82,6 +86,10 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
       },
       {
         keepPreviousData: true,
+        // Do not batch this due to relatively long request time compared to
+        // other queries which are generally batched with this.
+        ...SKIP_QUERY_BATCH_META,
+        ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
       },
     );
 

apps/web/src/components/(dashboard)/settings/layout/header.tsx

@@ -5,11 +5,18 @@ import { cn } from '@documenso/ui/lib/utils';
 export type SettingsHeaderProps = {
   title: string;
   subtitle: string;
+  hideDivider?: boolean;
   children?: React.ReactNode;
   className?: string;
 };
 
-export const SettingsHeader = ({ children, title, subtitle, className }: SettingsHeaderProps) => {
+export const SettingsHeader = ({
+  children,
+  title,
+  subtitle,
+  className,
+  hideDivider,
+}: SettingsHeaderProps) => {
   return (
     <>
       <div className={cn('flex flex-row items-center justify-between', className)}>
@@ -22,7 +29,7 @@ export const SettingsHeader = ({ children, title, subtitle, className }: Setting
         {children}
       </div>
 
-      <hr className="my-4" />
+      {!hideDivider && <hr className="my-4" />}
     </>
   );
 };

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

@@ -1,43 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-import { DisableAuthenticatorAppDialog } from './disable-authenticator-app-dialog';
-import { EnableAuthenticatorAppDialog } from './enable-authenticator-app-dialog';
-
-type AuthenticatorAppProps = {
-  isTwoFactorEnabled: boolean;
-};
-
-export const AuthenticatorApp = ({ isTwoFactorEnabled }: AuthenticatorAppProps) => {
-  const [modalState, setModalState] = useState<'enable' | 'disable' | null>(null);
-
-  const isEnableDialogOpen = modalState === 'enable';
-  const isDisableDialogOpen = modalState === 'disable';
-
-  return (
-    <>
-      <div className="flex-shrink-0">
-        {isTwoFactorEnabled ? (
-          <Button variant="destructive" onClick={() => setModalState('disable')}>
-            Disable 2FA
-          </Button>
-        ) : (
-          <Button onClick={() => setModalState('enable')}>Enable 2FA</Button>
-        )}
-      </div>
-
-      <EnableAuthenticatorAppDialog
-        open={isEnableDialogOpen}
-        onOpenChange={(open) => !open && setModalState(null)}
-      />
-
-      <DisableAuthenticatorAppDialog
-        open={isDisableDialogOpen}
-        onOpenChange={(open) => !open && setModalState(null)}
-      />
-    </>
-  );
-};

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

@@ -1,3 +1,7 @@
+'use client';
+
+import { useState } from 'react';
+
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -9,65 +13,51 @@ import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export const ZDisableTwoFactorAuthenticationForm = z.object({
-  password: z.string().min(6).max(72),
-  backupCode: z.string(),
+export const ZDisable2FAForm = z.object({
+  token: z.string(),
 });
 
-export type TDisableTwoFactorAuthenticationForm = z.infer<
-  typeof ZDisableTwoFactorAuthenticationForm
->;
+export type TDisable2FAForm = z.infer<typeof ZDisable2FAForm>;
 
-export type DisableAuthenticatorAppDialogProps = {
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-};
-
-export const DisableAuthenticatorAppDialog = ({
-  open,
-  onOpenChange,
-}: DisableAuthenticatorAppDialogProps) => {
+export const DisableAuthenticatorAppDialog = () => {
   const router = useRouter();
+
   const { toast } = useToast();
 
-  const { mutateAsync: disableTwoFactorAuthentication } =
-    trpc.twoFactorAuthentication.disable.useMutation();
+  const [isOpen, setIsOpen] = useState(false);
 
-  const disableTwoFactorAuthenticationForm = useForm<TDisableTwoFactorAuthenticationForm>({
+  const { mutateAsync: disable2FA } = trpc.twoFactorAuthentication.disable.useMutation();
+
+  const disable2FAForm = useForm<TDisable2FAForm>({
     defaultValues: {
-      password: '',
-      backupCode: '',
+      token: '',
     },
-    resolver: zodResolver(ZDisableTwoFactorAuthenticationForm),
+    resolver: zodResolver(ZDisable2FAForm),
   });
 
-  const { isSubmitting: isDisableTwoFactorAuthenticationSubmitting } =
-    disableTwoFactorAuthenticationForm.formState;
+  const { isSubmitting: isDisable2FASubmitting } = disable2FAForm.formState;
 
-  const onDisableTwoFactorAuthenticationFormSubmit = async ({
-    password,
-    backupCode,
-  }: TDisableTwoFactorAuthenticationForm) => {
+  const onDisable2FAFormSubmit = async ({ token }: TDisable2FAForm) => {
     try {
-      await disableTwoFactorAuthentication({ password, backupCode });
+      await disable2FA({ token });
 
       toast({
         title: 'Two-factor authentication disabled',
@@ -76,7 +66,7 @@ export const DisableAuthenticatorAppDialog = ({
       });
 
       flushSync(() => {
-        onOpenChange(false);
+        setIsOpen(false);
       });
 
       router.refresh();
@@ -91,74 +81,51 @@ export const DisableAuthenticatorAppDialog = ({
   };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild={true}>
+        <Button className="flex-shrink-0" variant="destructive">
+          Disable 2FA
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent position="center">
         <DialogHeader>
-          <DialogTitle>Disable Authenticator App</DialogTitle>
+          <DialogTitle>Disable 2FA</DialogTitle>
 
           <DialogDescription>
-            To disable the Authenticator App for your account, please enter your password and a
-            backup code. If you do not have a backup code available, please contact support.
+            Please provide a token from the authenticator, or a backup code. If you do not have a
+            backup code available, please contact support.
           </DialogDescription>
         </DialogHeader>
 
-        <Form {...disableTwoFactorAuthenticationForm}>
-          <form
-            onSubmit={disableTwoFactorAuthenticationForm.handleSubmit(
-              onDisableTwoFactorAuthenticationFormSubmit,
-            )}
-            className="flex flex-col gap-y-4"
-          >
-            <fieldset
-              className="flex flex-col gap-y-4"
-              disabled={isDisableTwoFactorAuthenticationSubmitting}
-            >
+        <Form {...disable2FAForm}>
+          <form onSubmit={disable2FAForm.handleSubmit(onDisable2FAFormSubmit)}>
+            <fieldset className="flex flex-col gap-y-4" disabled={isDisable2FASubmitting}>
               <FormField
-                name="password"
-                control={disableTwoFactorAuthenticationForm.control}
+                name="token"
+                control={disable2FAForm.control}
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel className="text-muted-foreground">Password</FormLabel>
                     <FormControl>
-                      <PasswordInput
-                        {...field}
-                        autoComplete="current-password"
-                        value={field.value ?? ''}
-                      />
+                      <Input {...field} placeholder="Token" />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
                 )}
               />
 
-              <FormField
-                name="backupCode"
-                control={disableTwoFactorAuthenticationForm.control}
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="text-muted-foreground">Backup Code</FormLabel>
-                    <FormControl>
-                      <Input {...field} type="text" value={field.value ?? ''} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    Cancel
+                  </Button>
+                </DialogClose>
+
+                <Button type="submit" variant="destructive" loading={isDisable2FASubmitting}>
+                  Disable 2FA
+                </Button>
+              </DialogFooter>
             </fieldset>
-
-            <DialogFooter>
-              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                Cancel
-              </Button>
-
-              <Button
-                type="submit"
-                variant="destructive"
-                loading={isDisableTwoFactorAuthenticationSubmitting}
-              >
-                Disable 2FA
-              </Button>
-            </DialogFooter>
           </form>
         </Form>
       </DialogContent>

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

@@ -1,8 +1,11 @@
-import { useEffect, useMemo } from 'react';
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import { match } from 'ts-pattern';
 import { renderSVG } from 'uqr';
 import { z } from 'zod';
 
@@ -11,11 +14,13 @@ import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 import {
   Form,
@@ -26,85 +31,60 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { RecoveryCodeList } from './recovery-code-list';
 
-export const ZSetupTwoFactorAuthenticationForm = z.object({
-  password: z.string().min(6).max(72),
-});
-
-export type TSetupTwoFactorAuthenticationForm = z.infer<typeof ZSetupTwoFactorAuthenticationForm>;
-
-export const ZEnableTwoFactorAuthenticationForm = z.object({
+export const ZEnable2FAForm = z.object({
   token: z.string(),
 });
 
-export type TEnableTwoFactorAuthenticationForm = z.infer<typeof ZEnableTwoFactorAuthenticationForm>;
+export type TEnable2FAForm = z.infer<typeof ZEnable2FAForm>;
 
-export type EnableAuthenticatorAppDialogProps = {
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-};
-
-export const EnableAuthenticatorAppDialog = ({
-  open,
-  onOpenChange,
-}: EnableAuthenticatorAppDialogProps) => {
+export const EnableAuthenticatorAppDialog = () => {
   const { toast } = useToast();
+  const router = useRouter();
 
-  const { mutateAsync: setupTwoFactorAuthentication, data: setupTwoFactorAuthenticationData } =
-    trpc.twoFactorAuthentication.setup.useMutation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null);
+
+  const { mutateAsync: enable2FA } = trpc.twoFactorAuthentication.enable.useMutation();
 
   const {
-    mutateAsync: enableTwoFactorAuthentication,
-    data: enableTwoFactorAuthenticationData,
-    isLoading: isEnableTwoFactorAuthenticationDataLoading,
-  } = trpc.twoFactorAuthentication.enable.useMutation();
-
-  const setupTwoFactorAuthenticationForm = useForm<TSetupTwoFactorAuthenticationForm>({
-    defaultValues: {
-      password: '',
+    mutateAsync: setup2FA,
+    data: setup2FAData,
+    isLoading: isSettingUp2FA,
+  } = trpc.twoFactorAuthentication.setup.useMutation({
+    onError: () => {
+      toast({
+        title: 'Unable to setup two-factor authentication',
+        description:
+          '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',
+      });
     },
-    resolver: zodResolver(ZSetupTwoFactorAuthenticationForm),
   });
 
-  const { isSubmitting: isSetupTwoFactorAuthenticationSubmitting } =
-    setupTwoFactorAuthenticationForm.formState;
-
-  const enableTwoFactorAuthenticationForm = useForm<TEnableTwoFactorAuthenticationForm>({
+  const enable2FAForm = useForm<TEnable2FAForm>({
     defaultValues: {
       token: '',
     },
-    resolver: zodResolver(ZEnableTwoFactorAuthenticationForm),
+    resolver: zodResolver(ZEnable2FAForm),
   });
 
-  const { isSubmitting: isEnableTwoFactorAuthenticationSubmitting } =
-    enableTwoFactorAuthenticationForm.formState;
+  const { isSubmitting: isEnabling2FA } = enable2FAForm.formState;
 
-  const step = useMemo(() => {
-    if (!setupTwoFactorAuthenticationData || isSetupTwoFactorAuthenticationSubmitting) {
-      return 'setup';
-    }
-
-    if (!enableTwoFactorAuthenticationData || isEnableTwoFactorAuthenticationSubmitting) {
-      return 'enable';
-    }
-
-    return 'view';
-  }, [
-    setupTwoFactorAuthenticationData,
-    isSetupTwoFactorAuthenticationSubmitting,
-    enableTwoFactorAuthenticationData,
-    isEnableTwoFactorAuthenticationSubmitting,
-  ]);
-
-  const onSetupTwoFactorAuthenticationFormSubmit = async ({
-    password,
-  }: TSetupTwoFactorAuthenticationForm) => {
+  const onEnable2FAFormSubmit = async ({ token }: TEnable2FAForm) => {
     try {
-      await setupTwoFactorAuthentication({ password });
+      const data = await enable2FA({ code: token });
+
+      setRecoveryCodes(data.recoveryCodes);
+
+      toast({
+        title: 'Two-factor authentication enabled',
+        description:
+          'You will now be required to enter a code from your authenticator app when signing in.',
+      });
     } catch (_err) {
       toast({
         title: 'Unable to setup two-factor authentication',
@@ -116,8 +96,8 @@ export const EnableAuthenticatorAppDialog = ({
   };
 
   const downloadRecoveryCodes = () => {
-    if (enableTwoFactorAuthenticationData && enableTwoFactorAuthenticationData.recoveryCodes) {
-      const blob = new Blob([enableTwoFactorAuthenticationData.recoveryCodes.join('\n')], {
+    if (recoveryCodes) {
+      const blob = new Blob([recoveryCodes.join('\n')], {
         type: 'text/plain',
       });
 
@@ -128,175 +108,126 @@ export const EnableAuthenticatorAppDialog = ({
     }
   };
 
-  const onEnableTwoFactorAuthenticationFormSubmit = async ({
-    token,
-  }: TEnableTwoFactorAuthenticationForm) => {
-    try {
-      await enableTwoFactorAuthentication({ code: token });
-
-      toast({
-        title: 'Two-factor authentication enabled',
-        description:
-          'Two-factor authentication has been enabled for your account. You will now be required to enter a code from your authenticator app when signing in.',
-      });
-    } catch (_err) {
-      toast({
-        title: 'Unable to setup two-factor authentication',
-        description:
-          'We were unable to setup two-factor authentication for your account. Please ensure that you have entered your password correctly and try again.',
-        variant: 'destructive',
-      });
+  const handleEnable2FA = async () => {
+    if (!setup2FAData) {
+      await setup2FA();
     }
+
+    setIsOpen(true);
   };
 
   useEffect(() => {
-    // Reset the form when the Dialog closes
-    if (!open) {
-      setupTwoFactorAuthenticationForm.reset();
+    enable2FAForm.reset();
+
+    if (!isOpen && recoveryCodes && recoveryCodes.length > 0) {
+      setRecoveryCodes(null);
+      router.refresh();
     }
-  }, [open, setupTwoFactorAuthenticationForm]);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
-        <DialogHeader>
-          <DialogTitle>Enable Authenticator App</DialogTitle>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild={true}>
+        <Button
+          className="flex-shrink-0"
+          loading={isSettingUp2FA}
+          onClick={(e) => {
+            e.preventDefault();
+            void handleEnable2FA();
+          }}
+        >
+          Enable 2FA
+        </Button>
+      </DialogTrigger>
 
-          {step === 'setup' && (
-            <DialogDescription>
-              To enable two-factor authentication, please enter your password below.
-            </DialogDescription>
-          )}
+      <DialogContent position="center">
+        {setup2FAData && (
+          <>
+            {recoveryCodes ? (
+              <div>
+                <DialogHeader>
+                  <DialogTitle>Backup codes</DialogTitle>
+                  <DialogDescription>
+                    Your recovery codes are listed below. Please store them in a safe place.
+                  </DialogDescription>
+                </DialogHeader>
 
-          {step === 'view' && (
-            <DialogDescription>
-              Your recovery codes are listed below. Please store them in a safe place.
-            </DialogDescription>
-          )}
-        </DialogHeader>
+                <div className="mt-4">
+                  <RecoveryCodeList recoveryCodes={recoveryCodes} />
+                </div>
 
-        {match(step)
-          .with('setup', () => {
-            return (
-              <Form {...setupTwoFactorAuthenticationForm}>
-                <form
-                  onSubmit={setupTwoFactorAuthenticationForm.handleSubmit(
-                    onSetupTwoFactorAuthenticationFormSubmit,
-                  )}
-                  className="flex flex-col gap-y-4"
-                >
-                  <FormField
-                    name="password"
-                    control={setupTwoFactorAuthenticationForm.control}
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel className="text-muted-foreground">Password</FormLabel>
-                        <FormControl>
-                          <PasswordInput
-                            {...field}
-                            autoComplete="current-password"
-                            value={field.value ?? ''}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
+                <DialogFooter className="mt-4">
+                  <DialogClose asChild>
+                    <Button variant="secondary">Close</Button>
+                  </DialogClose>
 
-                  <DialogFooter>
-                    <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                      Cancel
-                    </Button>
+                  <Button onClick={downloadRecoveryCodes}>Download</Button>
+                </DialogFooter>
+              </div>
+            ) : (
+              <Form {...enable2FAForm}>
+                <form onSubmit={enable2FAForm.handleSubmit(onEnable2FAFormSubmit)}>
+                  <DialogHeader>
+                    <DialogTitle>Enable Authenticator App</DialogTitle>
+                    <DialogDescription>
+                      To enable two-factor authentication, scan the following QR code using your
+                      authenticator app.
+                    </DialogDescription>
+                  </DialogHeader>
 
-                    <Button type="submit" loading={isSetupTwoFactorAuthenticationSubmitting}>
-                      Continue
-                    </Button>
-                  </DialogFooter>
+                  <fieldset disabled={isEnabling2FA} className="mt-4 flex flex-col gap-y-4">
+                    <div
+                      className="flex h-36 justify-center"
+                      dangerouslySetInnerHTML={{
+                        __html: renderSVG(setup2FAData?.uri ?? ''),
+                      }}
+                    />
+
+                    <p className="text-muted-foreground text-sm">
+                      If your authenticator app does not support QR codes, you can use the following
+                      code instead:
+                    </p>
+
+                    <p className="bg-muted/60 text-muted-foreground rounded-lg p-2 text-center font-mono tracking-widest">
+                      {setup2FAData?.secret}
+                    </p>
+
+                    <p className="text-muted-foreground text-sm">
+                      Once you have scanned the QR code or entered the code manually, enter the code
+                      provided by your authenticator app below.
+                    </p>
+
+                    <FormField
+                      name="token"
+                      control={enable2FAForm.control}
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="text-muted-foreground">Token</FormLabel>
+                          <FormControl>
+                            <Input {...field} type="text" value={field.value ?? ''} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <DialogFooter>
+                      <DialogClose asChild>
+                        <Button variant="secondary">Cancel</Button>
+                      </DialogClose>
+
+                      <Button type="submit" loading={isEnabling2FA}>
+                        Enable 2FA
+                      </Button>
+                    </DialogFooter>
+                  </fieldset>
                 </form>
               </Form>
-            );
-          })
-          .with('enable', () => (
-            <Form {...enableTwoFactorAuthenticationForm}>
-              <form
-                onSubmit={enableTwoFactorAuthenticationForm.handleSubmit(
-                  onEnableTwoFactorAuthenticationFormSubmit,
-                )}
-                className="flex flex-col gap-y-4"
-              >
-                <p className="text-muted-foreground text-sm">
-                  To enable two-factor authentication, scan the following QR code using your
-                  authenticator app.
-                </p>
-
-                <div
-                  className="flex h-36 justify-center"
-                  dangerouslySetInnerHTML={{
-                    __html: renderSVG(setupTwoFactorAuthenticationData?.uri ?? ''),
-                  }}
-                />
-
-                <p className="text-muted-foreground text-sm">
-                  If your authenticator app does not support QR codes, you can use the following
-                  code instead:
-                </p>
-
-                <p className="bg-muted/60 text-muted-foreground rounded-lg p-2 text-center font-mono tracking-widest">
-                  {setupTwoFactorAuthenticationData?.secret}
-                </p>
-
-                <p className="text-muted-foreground text-sm">
-                  Once you have scanned the QR code or entered the code manually, enter the code
-                  provided by your authenticator app below.
-                </p>
-
-                <FormField
-                  name="token"
-                  control={enableTwoFactorAuthenticationForm.control}
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className="text-muted-foreground">Token</FormLabel>
-                      <FormControl>
-                        <Input {...field} type="text" value={field.value ?? ''} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <DialogFooter>
-                  <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                    Cancel
-                  </Button>
-
-                  <Button type="submit" loading={isEnableTwoFactorAuthenticationSubmitting}>
-                    Enable 2FA
-                  </Button>
-                </DialogFooter>
-              </form>
-            </Form>
-          ))
-          .with('view', () => (
-            <div>
-              {enableTwoFactorAuthenticationData?.recoveryCodes && (
-                <RecoveryCodeList recoveryCodes={enableTwoFactorAuthenticationData.recoveryCodes} />
-              )}
-
-              <div className="mt-4 flex flex-row-reverse items-center gap-2">
-                <Button onClick={() => onOpenChange(false)}>Complete</Button>
-
-                <Button
-                  variant="secondary"
-                  onClick={downloadRecoveryCodes}
-                  disabled={!enableTwoFactorAuthenticationData?.recoveryCodes}
-                  loading={isEnableTwoFactorAuthenticationDataLoading}
-                >
-                  Download
-                </Button>
-              </div>
-            </div>
-          ))
-          .exhaustive()}
+            )}
+          </>
+        )}
       </DialogContent>
     </Dialog>
   );

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

@@ -1,33 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { Button } from '@documenso/ui/primitives/button';
-
-import { ViewRecoveryCodesDialog } from './view-recovery-codes-dialog';
-
-type RecoveryCodesProps = {
-  isTwoFactorEnabled: boolean;
-};
-
-export const RecoveryCodes = ({ isTwoFactorEnabled }: RecoveryCodesProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <Button
-        className="flex-shrink-0"
-        onClick={() => setIsOpen(true)}
-        disabled={!isTwoFactorEnabled}
-      >
-        View Codes
-      </Button>
-
-      <ViewRecoveryCodesDialog
-        key={isOpen ? 'open' : 'closed'}
-        open={isOpen}
-        onOpenChange={setIsOpen}
-      />
-    </>
-  );
-};

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

@@ -1,4 +1,6 @@
-import { useEffect, useMemo } from 'react';
+'use client';
+
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
@@ -6,69 +8,61 @@ import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { downloadFile } from '@documenso/lib/client-only/download-file';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { ErrorCode } from '@documenso/lib/next-auth/error-codes';
 import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { PasswordInput } from '@documenso/ui/primitives/password-input';
-import { useToast } from '@documenso/ui/primitives/use-toast';
+import { Input } from '@documenso/ui/primitives/input';
 
 import { RecoveryCodeList } from './recovery-code-list';
 
 export const ZViewRecoveryCodesForm = z.object({
-  password: z.string().min(6).max(72),
+  token: z.string().min(1, { message: 'Token is required' }),
 });
 
 export type TViewRecoveryCodesForm = z.infer<typeof ZViewRecoveryCodesForm>;
 
-export type ViewRecoveryCodesDialogProps = {
-  open: boolean;
-  onOpenChange: (_open: boolean) => void;
-};
-
-export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCodesDialogProps) => {
-  const { toast } = useToast();
+export const ViewRecoveryCodesDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
 
   const {
-    mutateAsync: viewRecoveryCodes,
-    data: viewRecoveryCodesData,
-    isLoading: isViewRecoveryCodesDataLoading,
+    data: recoveryCodes,
+    mutate,
+    isLoading,
+    isError,
+    error,
   } = trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();
 
+  // error?.data?.code
+
   const viewRecoveryCodesForm = useForm<TViewRecoveryCodesForm>({
     defaultValues: {
-      password: '',
+      token: '',
     },
     resolver: zodResolver(ZViewRecoveryCodesForm),
   });
 
-  const { isSubmitting: isViewRecoveryCodesSubmitting } = viewRecoveryCodesForm.formState;
-
-  const step = useMemo(() => {
-    if (!viewRecoveryCodesData || isViewRecoveryCodesSubmitting) {
-      return 'authenticate';
-    }
-
-    return 'view';
-  }, [viewRecoveryCodesData, isViewRecoveryCodesSubmitting]);
-
   const downloadRecoveryCodes = () => {
-    if (viewRecoveryCodesData && viewRecoveryCodesData.recoveryCodes) {
-      const blob = new Blob([viewRecoveryCodesData.recoveryCodes.join('\n')], {
+    if (recoveryCodes) {
+      const blob = new Blob([recoveryCodes.join('\n')], {
         type: 'text/plain',
       });
 
@@ -79,105 +73,88 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
     }
   };
 
-  const onViewRecoveryCodesFormSubmit = async ({ password }: TViewRecoveryCodesForm) => {
-    try {
-      await viewRecoveryCodes({ password });
-    } catch (_err) {
-      toast({
-        title: 'Unable to view recovery codes',
-        description:
-          'We were unable to view your recovery codes. Please ensure that you have entered your password correctly and try again.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    // Reset the form when the Dialog closes
-    if (!open) {
-      viewRecoveryCodesForm.reset();
-    }
-  }, [open, viewRecoveryCodesForm]);
-
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button className="flex-shrink-0">View Codes</Button>
+      </DialogTrigger>
+
       <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
-        <DialogHeader>
-          <DialogTitle>View Recovery Codes</DialogTitle>
+        {recoveryCodes ? (
+          <div>
+            <DialogHeader className="mb-4">
+              <DialogTitle>View Recovery Codes</DialogTitle>
 
-          {step === 'authenticate' && (
-            <DialogDescription>
-              To view your recovery codes, please enter your password below.
-            </DialogDescription>
-          )}
+              <DialogDescription>
+                Your recovery codes are listed below. Please store them in a safe place.
+              </DialogDescription>
+            </DialogHeader>
 
-          {step === 'view' && (
-            <DialogDescription>
-              Your recovery codes are listed below. Please store them in a safe place.
-            </DialogDescription>
-          )}
-        </DialogHeader>
+            <RecoveryCodeList recoveryCodes={recoveryCodes} />
 
-        {match(step)
-          .with('authenticate', () => {
-            return (
-              <Form {...viewRecoveryCodesForm}>
-                <form
-                  onSubmit={viewRecoveryCodesForm.handleSubmit(onViewRecoveryCodesFormSubmit)}
-                  className="flex flex-col gap-y-4"
-                >
-                  <FormField
-                    name="password"
-                    control={viewRecoveryCodesForm.control}
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel className="text-muted-foreground">Password</FormLabel>
-                        <FormControl>
-                          <PasswordInput
-                            {...field}
-                            autoComplete="current-password"
-                            value={field.value ?? ''}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
+            <DialogFooter className="mt-4">
+              <DialogClose asChild>
+                <Button variant="secondary">Close</Button>
+              </DialogClose>
 
-                  <DialogFooter>
-                    <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+              <Button onClick={downloadRecoveryCodes}>Download</Button>
+            </DialogFooter>
+          </div>
+        ) : (
+          <Form {...viewRecoveryCodesForm}>
+            <form onSubmit={viewRecoveryCodesForm.handleSubmit((value) => mutate(value))}>
+              <DialogHeader className="mb-4">
+                <DialogTitle>View Recovery Codes</DialogTitle>
+
+                <DialogDescription>
+                  Please provide a token from your authenticator, or a backup code.
+                </DialogDescription>
+              </DialogHeader>
+
+              <fieldset className="flex flex-col space-y-4" disabled={isLoading}>
+                <FormField
+                  name="token"
+                  control={viewRecoveryCodesForm.control}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input {...field} placeholder="Token" />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {error && (
+                  <Alert variant="destructive">
+                    <AlertDescription>
+                      {match(AppError.parseError(error).message)
+                        .with(
+                          ErrorCode.INCORRECT_TWO_FACTOR_CODE,
+                          () => 'Invalid code. Please try again.',
+                        )
+                        .otherwise(
+                          () => 'Something went wrong. Please try again or contact support.',
+                        )}
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button type="button" variant="secondary">
                       Cancel
                     </Button>
+                  </DialogClose>
 
-                    <Button type="submit" loading={isViewRecoveryCodesSubmitting}>
-                      Continue
-                    </Button>
-                  </DialogFooter>
-                </form>
-              </Form>
-            );
-          })
-          .with('view', () => (
-            <div>
-              {viewRecoveryCodesData?.recoveryCodes && (
-                <RecoveryCodeList recoveryCodes={viewRecoveryCodesData.recoveryCodes} />
-              )}
-
-              <div className="mt-4 flex flex-row-reverse items-center gap-2">
-                <Button onClick={() => onOpenChange(false)}>Complete</Button>
-
-                <Button
-                  variant="secondary"
-                  disabled={!viewRecoveryCodesData?.recoveryCodes}
-                  loading={isViewRecoveryCodesDataLoading}
-                  onClick={downloadRecoveryCodes}
-                >
-                  Download
-                </Button>
-              </div>
-            </div>
-          ))
-          .exhaustive()}
+                  <Button type="submit" loading={isLoading}>
+                    View
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        )}
       </DialogContent>
     </Dialog>
   );

apps/web/src/components/forms/public-profile-claim-dialog.tsx

@@ -154,7 +154,7 @@ export const ClaimPublicProfileDialogForm = ({
 
                         <FormMessage />
 
-                        <div className="bg-muted/50 text-muted-foreground mt-2 inline-block truncate rounded-md px-2 py-1 text-sm">
+                        <div className="bg-muted/50 text-muted-foreground mt-2 inline-block max-w-[29rem] truncate rounded-md px-2 py-1 text-sm lowercase">
                           {baseUrl.host}/u/{field.value || '<username>'}
                         </div>
                       </FormItem>

apps/web/src/components/forms/signin.tsx

@@ -6,12 +6,18 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser';
+import { KeyRoundIcon } from 'lucide-react';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import { FcGoogle } from 'react-icons/fc';
+import { match } from 'ts-pattern';
 import { z } from 'zod';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
+import { trpc } from '@documenso/trpc/react';
 import { ZCurrentPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -66,14 +72,24 @@ export type SignInFormProps = {
 
 export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignInFormProps) => {
   const { toast } = useToast();
+  const { getFlag } = useFeatureFlags();
+
+  const router = useRouter();
+
   const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
     useState(false);
-  const router = useRouter();
 
   const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<
     'totp' | 'backup'
   >('totp');
 
+  const [isPasskeyLoading, setIsPasskeyLoading] = useState(false);
+
+  const isPasskeyEnabled = getFlag('app_passkey');
+
+  const { mutateAsync: createPasskeySigninOptions } =
+    trpc.auth.createPasskeySigninOptions.useMutation();
+
   const form = useForm<TSignInFormSchema>({
     values: {
       email: initialEmail ?? '',
@@ -107,6 +123,63 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
     setTwoFactorAuthenticationMethod(method);
   };
 
+  const onSignInWithPasskey = async () => {
+    if (!browserSupportsWebAuthn) {
+      toast({
+        title: 'Not supported',
+        description: 'Passkeys are not supported on this browser',
+        duration: 10000,
+        variant: 'destructive',
+      });
+
+      return;
+    }
+
+    try {
+      setIsPasskeyLoading(true);
+
+      const options = await createPasskeySigninOptions();
+
+      const credential = await startAuthentication(options);
+
+      const result = await signIn('webauthn', {
+        credential: JSON.stringify(credential),
+        callbackUrl: LOGIN_REDIRECT_PATH,
+        redirect: false,
+      });
+
+      if (!result?.url || result.error) {
+        throw new AppError(result?.error ?? '');
+      }
+
+      window.location.href = result.url;
+    } catch (err) {
+      setIsPasskeyLoading(false);
+
+      if (err.name === 'NotAllowedError') {
+        return;
+      }
+
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(
+          AppErrorCode.NOT_SETUP,
+          () =>
+            'This passkey is not configured for this application. Please login and add one in the user settings.',
+        )
+        .with(AppErrorCode.EXPIRED_CODE, () => 'This session has expired. Please try again.')
+        .otherwise(() => 'Please try again later or login using your normal details');
+
+      toast({
+        title: 'Something went wrong',
+        description: errorMessage,
+        duration: 10000,
+        variant: 'destructive',
+      });
+    }
+  };
+
   const onFormSubmit = async ({ email, password, totpCode, backupCode }: TSignInFormSchema) => {
     try {
       const credentials: Record<string, string> = {
@@ -189,7 +262,10 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
         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}>
+        <fieldset
+          className="flex w-full flex-col gap-y-4"
+          disabled={isSubmitting || isPasskeyLoading}
+        >
           <FormField
             control={form.control}
             name="email"
@@ -217,6 +293,8 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
                   <PasswordInput {...field} />
                 </FormControl>
 
+                <FormMessage />
+
                 <p className="mt-2 text-right">
                   <Link
                     href="/forgot-password"
@@ -225,29 +303,28 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
                     Forgot your password?
                   </Link>
                 </p>
-                <FormMessage />
               </FormItem>
             )}
           />
-        </fieldset>
 
-        <Button
-          type="submit"
-          size="lg"
-          loading={isSubmitting}
-          className="dark:bg-documenso dark:hover:opacity-90"
-        >
-          {isSubmitting ? 'Signing in...' : 'Sign In'}
-        </Button>
+          <Button
+            type="submit"
+            size="lg"
+            loading={isSubmitting}
+            className="dark:bg-documenso dark:hover:opacity-90"
+          >
+            {isSubmitting ? 'Signing in...' : 'Sign In'}
+          </Button>
 
-        {isGoogleSSOEnabled && (
-          <>
+          {(isGoogleSSOEnabled || isPasskeyEnabled) && (
             <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
               <div className="bg-border h-px flex-1" />
               <span className="text-muted-foreground bg-transparent">Or continue with</span>
               <div className="bg-border h-px flex-1" />
             </div>
+          )}
 
+          {isGoogleSSOEnabled && (
             <Button
               type="button"
               size="lg"
@@ -259,8 +336,23 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
               <FcGoogle className="mr-2 h-5 w-5" />
               Google
             </Button>
-          </>
-        )}
+          )}
+
+          {isPasskeyEnabled && (
+            <Button
+              type="button"
+              size="lg"
+              variant="outline"
+              disabled={isSubmitting}
+              loading={isPasskeyLoading}
+              className="bg-background text-muted-foreground border"
+              onClick={onSignInWithPasskey}
+            >
+              {!isPasskeyLoading && <KeyRoundIcon className="-ml-1 mr-1 h-5 w-5" />}
+              Passkey
+            </Button>
+          )}
+        </fieldset>
       </form>
 
       <Dialog

lint-staged.config.cjs

@@ -1,7 +1,15 @@
+const path = require('path');
+
+const eslint = (filenames) =>
+  `eslint --fix ${filenames.map((f) => `"${path.relative(process.cwd(), f)}"`).join(' ')}`;
+
+const prettier = (filenames) =>
+  `prettier --write ${filenames.map((f) => `"${path.relative(process.cwd(), f)}"`).join(' ')}`;
+
 /** @type {import('lint-staged').Config} */
 module.exports = {
-  '**/*.{ts,tsx,cts,mts}': (files) => files.map((file) => `eslint --fix ${file}`),
-  '**/*.{js,jsx,cjs,mjs}': (files) => files.map((file) => `prettier --write ${file}`),
-  '**/*.{yml,mdx}': (files) => files.map((file) => `prettier --write ${file}`),
+  '**/*.{ts,tsx,cts,mts}': [eslint, prettier],
+  '**/*.{js,jsx,cjs,mjs}': [prettier],
+  '**/*.{yml,mdx}': [prettier],
   '**/*/package.json': 'npm run precommit',
 };

package.json

@@ -36,8 +36,8 @@
     "dotenv-cli": "^7.3.0",
     "eslint": "^8.40.0",
     "eslint-config-custom": "*",
-    "husky": "^8.0.0",
-    "lint-staged": "^14.0.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
     "prettier": "^2.5.1",
     "rimraf": "^5.0.1",
     "turbo": "^1.9.3"
@@ -48,6 +48,7 @@
     "packages/*"
   ],
   "dependencies": {
+    "@documenso/pdf-sign": "^0.1.0",
     "next-runtime-env": "^3.2.0"
   },
   "overrides": {

packages/app-tests/e2e/pr-718-add-stepper-component.spec.ts

@@ -1,6 +1,9 @@
 import { expect, test } from '@playwright/test';
 import path from 'node:path';
 
+import { getDocumentByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { getRecipientByEmail } from '@documenso/lib/server-only/recipient/get-recipient-by-email';
+import { DocumentStatus } from '@documenso/prisma/client';
 import { TEST_USER } from '@documenso/prisma/seed/pr-718-add-stepper-component';
 
 test(`[PR-718]: should be able to create a document`, async ({ page }) => {
@@ -73,3 +76,264 @@ test(`[PR-718]: should be able to create a document`, async ({ page }) => {
   // Assert document was created
   await expect(page.getByRole('link', { name: documentTitle })).toBeVisible();
 });
+
+test('should be able to create a document with multiple recipients', async ({ page }) => {
+  await page.goto('/signin');
+
+  const documentTitle = `example-${Date.now()}.pdf`;
+
+  // Sign in
+  await page.getByLabel('Email').fill(TEST_USER.email);
+  await page.getByLabel('Password', { exact: true }).fill(TEST_USER.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  // Upload document
+  const [fileChooser] = await Promise.all([
+    page.waitForEvent('filechooser'),
+    page.locator('input[type=file]').evaluate((e) => {
+      if (e instanceof HTMLInputElement) {
+        e.click();
+      }
+    }),
+  ]);
+
+  await fileChooser.setFiles(path.join(__dirname, '../../../assets/example.pdf'));
+
+  // Wait to be redirected to the edit page
+  await page.waitForURL(/\/documents\/\d+/);
+
+  // Set title
+  await expect(page.getByRole('heading', { name: 'Add Title' })).toBeVisible();
+
+  await page.getByLabel('Title').fill(documentTitle);
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add signers
+  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
+
+  await page.getByLabel('Email*').fill('user1@example.com');
+  await page.getByLabel('Name').fill('User 1');
+
+  await page.getByRole('button', { name: 'Add Signer' }).click();
+
+  await page.getByLabel('Email*').nth(1).fill('user2@example.com');
+  await page.getByLabel('Name').nth(1).fill('User 2');
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add fields
+  await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'User 1 Signature' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 100,
+      y: 100,
+    },
+  });
+
+  await page.getByRole('button', { name: 'Email Email' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 100,
+      y: 200,
+    },
+  });
+
+  await page.getByText('User 1 (user1@example.com)').click();
+  await page.getByText('User 2 (user2@example.com)').click();
+
+  await page.getByRole('button', { name: 'User 2 Signature' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 500,
+      y: 100,
+    },
+  });
+
+  await page.getByRole('button', { name: 'Email Email' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 500,
+      y: 200,
+    },
+  });
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add subject and send
+  await expect(page.getByRole('heading', { name: 'Add Subject' })).toBeVisible();
+  await page.getByRole('button', { name: 'Send' }).click();
+
+  await page.waitForURL('/documents');
+
+  // Assert document was created
+  await expect(page.getByRole('link', { name: documentTitle })).toBeVisible();
+});
+
+test('should be able to create, send and sign a document', async ({ page }) => {
+  await page.goto('/signin');
+
+  const documentTitle = `example-${Date.now()}.pdf`;
+
+  // Sign in
+  await page.getByLabel('Email').fill(TEST_USER.email);
+  await page.getByLabel('Password', { exact: true }).fill(TEST_USER.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  // Upload document
+  const [fileChooser] = await Promise.all([
+    page.waitForEvent('filechooser'),
+    page.locator('input[type=file]').evaluate((e) => {
+      if (e instanceof HTMLInputElement) {
+        e.click();
+      }
+    }),
+  ]);
+
+  await fileChooser.setFiles(path.join(__dirname, '../../../assets/example.pdf'));
+
+  // Wait to be redirected to the edit page
+  await page.waitForURL(/\/documents\/\d+/);
+
+  // Set title
+  await expect(page.getByRole('heading', { name: 'Add Title' })).toBeVisible();
+
+  await page.getByLabel('Title').fill(documentTitle);
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add signers
+  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
+
+  await page.getByLabel('Email*').fill('user1@example.com');
+  await page.getByLabel('Name').fill('User 1');
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add fields
+  await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add subject and send
+  await expect(page.getByRole('heading', { name: 'Add Subject' })).toBeVisible();
+  await page.getByRole('button', { name: 'Send' }).click();
+
+  await page.waitForURL('/documents');
+
+  // Assert document was created
+  await expect(page.getByRole('link', { name: documentTitle })).toBeVisible();
+  await page.getByRole('link', { name: documentTitle }).click();
+
+  const url = await page.url().split('/');
+  const documentId = url[url.length - 1];
+
+  const { token } = await getRecipientByEmail({
+    email: 'user1@example.com',
+    documentId: Number(documentId),
+  });
+
+  await page.goto(`/sign/${token}`);
+  await page.waitForURL(`/sign/${token}`);
+
+  // Check if document has been viewed
+  const { status } = await getDocumentByToken({ token });
+  expect(status).toBe(DocumentStatus.PENDING);
+
+  await page.getByRole('button', { name: 'Complete' }).click();
+  await expect(page.getByRole('dialog').getByText('Sign Document')).toBeVisible();
+  await page.getByRole('button', { name: 'Sign' }).click();
+
+  await page.waitForURL(`/sign/${token}/complete`);
+  await expect(page.getByText('You have signed')).toBeVisible();
+
+  // Check if document has been signed
+  const { status: completedStatus } = await getDocumentByToken({ token });
+  expect(completedStatus).toBe(DocumentStatus.COMPLETED);
+});
+
+test('should be able to create, send with redirect url, sign a document and redirect to redirect url', async ({
+  page,
+}) => {
+  await page.goto('/signin');
+
+  const documentTitle = `example-${Date.now()}.pdf`;
+
+  // Sign in
+  await page.getByLabel('Email').fill(TEST_USER.email);
+  await page.getByLabel('Password', { exact: true }).fill(TEST_USER.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  // Upload document
+  const [fileChooser] = await Promise.all([
+    page.waitForEvent('filechooser'),
+    page.locator('input[type=file]').evaluate((e) => {
+      if (e instanceof HTMLInputElement) {
+        e.click();
+      }
+    }),
+  ]);
+
+  await fileChooser.setFiles(path.join(__dirname, '../../../assets/example.pdf'));
+
+  // Wait to be redirected to the edit page
+  await page.waitForURL(/\/documents\/\d+/);
+
+  // Set title
+  await expect(page.getByRole('heading', { name: 'Add Title' })).toBeVisible();
+
+  await page.getByLabel('Title').fill(documentTitle);
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add signers
+  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
+
+  await page.getByLabel('Email*').fill('user1@example.com');
+  await page.getByLabel('Name').fill('User 1');
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add fields
+  await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add subject and send
+  await expect(page.getByRole('heading', { name: 'Add Subject' })).toBeVisible();
+  await page.getByRole('button', { name: 'Advanced Options' }).click();
+  await page.getByLabel('Redirect URL').fill('https://documenso.com');
+
+  await page.getByRole('button', { name: 'Send' }).click();
+
+  await page.waitForURL('/documents');
+
+  // Assert document was created
+  await expect(page.getByRole('link', { name: documentTitle })).toBeVisible();
+  await page.getByRole('link', { name: documentTitle }).click();
+
+  const url = await page.url().split('/');
+  const documentId = url[url.length - 1];
+
+  const { token } = await getRecipientByEmail({
+    email: 'user1@example.com',
+    documentId: Number(documentId),
+  });
+
+  await page.goto(`/sign/${token}`);
+  await page.waitForURL(`/sign/${token}`);
+
+  // Check if document has been viewed
+  const { status } = await getDocumentByToken({ token });
+  expect(status).toBe(DocumentStatus.PENDING);
+
+  await page.getByRole('button', { name: 'Complete' }).click();
+  await expect(page.getByRole('dialog').getByText('Sign Document')).toBeVisible();
+  await page.getByRole('button', { name: 'Sign' }).click();
+
+  await page.waitForURL('https://documenso.com');
+
+  // Check if document has been signed
+  const { status: completedStatus } = await getDocumentByToken({ token });
+  expect(completedStatus).toBe(DocumentStatus.COMPLETED);
+});

packages/app-tests/e2e/test-update-user-name.spec.ts

@@ -0,0 +1,37 @@
+import { expect, test } from '@playwright/test';
+
+import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { manualLogin } from './fixtures/authentication';
+
+test('update user name', async ({ page }) => {
+  const user = await seedUser();
+
+  await manualLogin({
+    page,
+    email: user.email,
+    redirectPath: '/settings/profile',
+  });
+
+  await page.getByLabel('Full Name').fill('John Doe');
+
+  const canvas = page.locator('canvas');
+  const box = await canvas.boundingBox();
+
+  if (box) {
+    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(box.x + box.width / 4, box.y + box.height / 4);
+    await page.mouse.up();
+  }
+
+  await page.getByRole('button', { name: 'Update profile' }).click();
+
+  // wait for it to finish
+  await expect(page.getByText('Profile updated', { exact: true })).toBeVisible();
+
+  await page.waitForURL('/settings/profile');
+
+  expect((await getUserByEmail({ email: user.email })).name).toEqual('John Doe');
+});

packages/app-tests/package.json

@@ -6,6 +6,7 @@
   "main": "index.js",
   "scripts": {
     "test:dev": "playwright test",
+    "test-ui:dev": "playwright test --ui",
     "test:e2e": "start-server-and-test \"npm run start -w @documenso/web\" http://localhost:3000 \"playwright test\""
   },
   "keywords": [],

packages/eslint-config/index.cjs

@@ -4,16 +4,15 @@ module.exports = {
     'turbo',
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
     'plugin:package-json/recommended',
   ],
 
-  plugins: ['prettier', 'package-json', 'unused-imports'],
+  plugins: ['package-json', 'unused-imports'],
 
   env: {
+    es2022: true,
     node: true,
     browser: true,
-    es6: true,
   },
 
   parser: '@typescript-eslint/parser',

packages/eslint-config/package.json

@@ -7,16 +7,14 @@
     "clean": "rimraf node_modules"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "6.8.0",
-    "@typescript-eslint/parser": "6.8.0",
-    "eslint": "^8.40.0",
-    "eslint-config-next": "13.4.19",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-turbo": "^1.9.3",
-    "eslint-plugin-package-json": "^0.2.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-unused-imports": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.1.3",
+    "eslint-config-turbo": "^1.12.5",
+    "eslint-plugin-package-json": "^0.10.4",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-unused-imports": "^3.1.0",
     "typescript": "5.2.2"
   }
 }

packages/lib/constants/auth.ts

@@ -16,10 +16,24 @@ export const USER_SECURITY_AUDIT_LOG_MAP: { [key in UserSecurityAuditLogType]: s
   [UserSecurityAuditLogType.ACCOUNT_PROFILE_UPDATE]: 'Profile updated',
   [UserSecurityAuditLogType.AUTH_2FA_DISABLE]: '2FA Disabled',
   [UserSecurityAuditLogType.AUTH_2FA_ENABLE]: '2FA Enabled',
+  [UserSecurityAuditLogType.PASSKEY_CREATED]: 'Passkey created',
+  [UserSecurityAuditLogType.PASSKEY_DELETED]: 'Passkey deleted',
+  [UserSecurityAuditLogType.PASSKEY_UPDATED]: 'Passkey updated',
   [UserSecurityAuditLogType.PASSWORD_RESET]: 'Password reset',
   [UserSecurityAuditLogType.PASSWORD_UPDATE]: 'Password updated',
   [UserSecurityAuditLogType.SIGN_OUT]: 'Signed Out',
   [UserSecurityAuditLogType.SIGN_IN]: 'Signed In',
   [UserSecurityAuditLogType.SIGN_IN_FAIL]: 'Sign in attempt failed',
+  [UserSecurityAuditLogType.SIGN_IN_PASSKEY_FAIL]: 'Passkey sign in failed',
   [UserSecurityAuditLogType.SIGN_IN_2FA_FAIL]: 'Sign in 2FA attempt failed',
 };
+
+/**
+ * The duration to wait for a passkey to be verified in MS.
+ */
+export const PASSKEY_TIMEOUT = 60000;
+
+/**
+ * The maximum number of passkeys are user can have.
+ */
+export const MAXIMUM_PASSKEYS = 50;

packages/lib/constants/date-formats.ts

@@ -13,7 +13,7 @@ export const DATE_FORMATS = [
   {
     key: 'YYYYMMDD',
     label: 'YYYY-MM-DD',
-    value: 'YYYY-MM-DD',
+    value: 'yyyy-MM-dd',
   },
   {
     key: 'DDMMYYYY',

packages/lib/constants/feature-flags.ts

@@ -1,6 +1,6 @@
 import { env } from 'next-runtime-env';
 
-import { APP_BASE_URL } from './app';
+import { APP_BASE_URL, WEBAPP_BASE_URL } from './app';
 
 const NEXT_PUBLIC_FEATURE_BILLING_ENABLED = () => env('NEXT_PUBLIC_FEATURE_BILLING_ENABLED');
 const NEXT_PUBLIC_POSTHOG_KEY = () => env('NEXT_PUBLIC_POSTHOG_KEY');
@@ -23,6 +23,7 @@ export const FEATURE_FLAG_POLL_INTERVAL = 30000;
 export const LOCAL_FEATURE_FLAGS: Record<string, boolean> = {
   app_billing: NEXT_PUBLIC_FEATURE_BILLING_ENABLED() === 'true',
   app_document_page_view_history_sheet: false,
+  app_passkey: WEBAPP_BASE_URL === 'http://localhost:3000', // Temp feature flag.
   marketing_header_single_player_mode: false,
   marketing_profiles_announcement_bar: true,
 } as const;

packages/lib/constants/trpc.ts

@@ -0,0 +1,25 @@
+/**
+ * For TRPC useQueries that should not be batched with other queries.
+ */
+export const SKIP_QUERY_BATCH_META = {
+  trpc: {
+    context: {
+      skipBatch: true,
+    },
+  },
+};
+
+/**
+ * For TRPC useQueries and useMutations to adjust the logic on when query invalidation
+ * should occur.
+ *
+ * When used in:
+ * - useQuery: Will not invalidate the given query when a mutation occurs.
+ * - useMutation: Will not trigger invalidation on all queries when mutation succeeds.
+ *
+ */
+export const DO_NOT_INVALIDATE_QUERY_ON_MUTATION = {
+  meta: {
+    doNotInvalidateQueryOnMutation: true,
+  },
+};

packages/lib/next-auth/auth-options.ts

@@ -1,6 +1,7 @@
 /// <reference types="../types/next-auth.d.ts" />
 import { PrismaAdapter } from '@next-auth/prisma-adapter';
 import { compare } from '@node-rs/bcrypt';
+import { verifyAuthenticationResponse } from '@simplewebauthn/server';
 import { DateTime } from 'luxon';
 import type { AuthOptions, Session, User } from 'next-auth';
 import type { JWT } from 'next-auth/jwt';
@@ -12,12 +13,16 @@ import { env } from 'next-runtime-env';
 import { prisma } from '@documenso/prisma';
 import { IdentityProvider, UserSecurityAuditLogType } from '@documenso/prisma/client';
 
+import { AppError, AppErrorCode } from '../errors/app-error';
 import { isTwoFactorAuthenticationEnabled } from '../server-only/2fa/is-2fa-availble';
 import { validateTwoFactorAuthentication } from '../server-only/2fa/validate-2fa';
 import { getMostRecentVerificationTokenByUserId } from '../server-only/user/get-most-recent-verification-token-by-user-id';
 import { getUserByEmail } from '../server-only/user/get-user-by-email';
 import { sendConfirmationToken } from '../server-only/user/send-confirmation-token';
+import type { TAuthenticationResponseJSONSchema } from '../types/webauthn';
+import { ZAuthenticationResponseJSONSchema } from '../types/webauthn';
 import { extractNextAuthRequestMetadata } from '../universal/extract-request-metadata';
+import { getAuthenticatorRegistrationOptions } from '../utils/authenticator';
 import { ErrorCode } from './error-codes';
 
 export const NEXT_AUTH_OPTIONS: AuthOptions = {
@@ -131,6 +136,113 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
         };
       },
     }),
+    CredentialsProvider({
+      id: 'webauthn',
+      name: 'Keypass',
+      credentials: {
+        csrfToken: { label: 'csrfToken', type: 'csrfToken' },
+      },
+      async authorize(credentials, req) {
+        const csrfToken = credentials?.csrfToken;
+
+        if (typeof csrfToken !== 'string' || csrfToken.length === 0) {
+          throw new AppError(AppErrorCode.INVALID_REQUEST);
+        }
+
+        let requestBodyCrediential: TAuthenticationResponseJSONSchema | null = null;
+
+        try {
+          const parsedBodyCredential = JSON.parse(req.body?.credential);
+          requestBodyCrediential = ZAuthenticationResponseJSONSchema.parse(parsedBodyCredential);
+        } catch {
+          throw new AppError(AppErrorCode.INVALID_REQUEST);
+        }
+
+        const challengeToken = await prisma.anonymousVerificationToken
+          .delete({
+            where: {
+              id: csrfToken,
+            },
+          })
+          .catch(() => null);
+
+        if (!challengeToken) {
+          return null;
+        }
+
+        if (challengeToken.expiresAt < new Date()) {
+          throw new AppError(AppErrorCode.EXPIRED_CODE);
+        }
+
+        const passkey = await prisma.passkey.findFirst({
+          where: {
+            credentialId: Buffer.from(requestBodyCrediential.id, 'base64'),
+          },
+          include: {
+            User: {
+              select: {
+                id: true,
+                email: true,
+                name: true,
+                emailVerified: true,
+              },
+            },
+          },
+        });
+
+        if (!passkey) {
+          throw new AppError(AppErrorCode.NOT_SETUP);
+        }
+
+        const user = passkey.User;
+
+        const { rpId, origin } = getAuthenticatorRegistrationOptions();
+
+        const verification = await verifyAuthenticationResponse({
+          response: requestBodyCrediential,
+          expectedChallenge: challengeToken.token,
+          expectedOrigin: origin,
+          expectedRPID: rpId,
+          authenticator: {
+            credentialID: new Uint8Array(Array.from(passkey.credentialId)),
+            credentialPublicKey: new Uint8Array(passkey.credentialPublicKey),
+            counter: Number(passkey.counter),
+          },
+        }).catch(() => null);
+
+        const requestMetadata = extractNextAuthRequestMetadata(req);
+
+        if (!verification?.verified) {
+          await prisma.userSecurityAuditLog.create({
+            data: {
+              userId: user.id,
+              ipAddress: requestMetadata.ipAddress,
+              userAgent: requestMetadata.userAgent,
+              type: UserSecurityAuditLogType.SIGN_IN_PASSKEY_FAIL,
+            },
+          });
+
+          return null;
+        }
+
+        await prisma.passkey.update({
+          where: {
+            id: passkey.id,
+          },
+          data: {
+            lastUsedAt: new Date(),
+            counter: verification.authenticationInfo.newCounter,
+          },
+        });
+
+        return {
+          id: Number(user.id),
+          email: user.email,
+          name: user.name,
+          emailVerified: user.emailVerified?.toISOString() ?? null,
+        } satisfies User;
+      },
+    }),
   ],
   callbacks: {
     async jwt({ token, user, trigger, account }) {

packages/lib/server-only/2fa/disable-2fa.ts

@@ -1,40 +1,30 @@
-import { compare } from '@node-rs/bcrypt';
-
 import { prisma } from '@documenso/prisma';
 import type { User } from '@documenso/prisma/client';
 import { UserSecurityAuditLogType } from '@documenso/prisma/client';
 
-import { ErrorCode } from '../../next-auth/error-codes';
+import { AppError } from '../../errors/app-error';
 import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { validateTwoFactorAuthentication } from './validate-2fa';
 
 type DisableTwoFactorAuthenticationOptions = {
   user: User;
-  backupCode: string;
-  password: string;
+  token: string;
   requestMetadata?: RequestMetadata;
 };
 
 export const disableTwoFactorAuthentication = async ({
-  backupCode,
+  token,
   user,
-  password,
   requestMetadata,
 }: DisableTwoFactorAuthenticationOptions) => {
-  if (!user.password) {
-    throw new Error(ErrorCode.USER_MISSING_PASSWORD);
-  }
-
-  const isCorrectPassword = await compare(password, user.password);
-
-  if (!isCorrectPassword) {
-    throw new Error(ErrorCode.INCORRECT_PASSWORD);
-  }
-
-  const isValid = await validateTwoFactorAuthentication({ backupCode, user });
+  let isValid = await validateTwoFactorAuthentication({ totpCode: token, user });
 
   if (!isValid) {
-    throw new Error(ErrorCode.INCORRECT_TWO_FACTOR_BACKUP_CODE);
+    isValid = await validateTwoFactorAuthentication({ backupCode: token, user });
+  }
+
+  if (!isValid) {
+    throw new AppError('INCORRECT_TWO_FACTOR_CODE');
   }
 
   await prisma.$transaction(async (tx) => {

packages/lib/server-only/2fa/enable-2fa.ts

@@ -1,7 +1,7 @@
-import { ErrorCode } from '@documenso/lib/next-auth/error-codes';
 import { prisma } from '@documenso/prisma';
 import { type User, UserSecurityAuditLogType } from '@documenso/prisma/client';
 
+import { AppError } from '../../errors/app-error';
 import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { getBackupCodes } from './get-backup-code';
 import { verifyTwoFactorAuthenticationToken } from './verify-2fa-token';
@@ -17,25 +17,38 @@ export const enableTwoFactorAuthentication = async ({
   code,
   requestMetadata,
 }: EnableTwoFactorAuthenticationOptions) => {
-  if (user.identityProvider !== 'DOCUMENSO') {
-    throw new Error(ErrorCode.INCORRECT_IDENTITY_PROVIDER);
-  }
-
   if (user.twoFactorEnabled) {
-    throw new Error(ErrorCode.TWO_FACTOR_ALREADY_ENABLED);
+    throw new AppError('TWO_FACTOR_ALREADY_ENABLED');
   }
 
   if (!user.twoFactorSecret) {
-    throw new Error(ErrorCode.TWO_FACTOR_SETUP_REQUIRED);
+    throw new AppError('TWO_FACTOR_SETUP_REQUIRED');
   }
 
   const isValidToken = await verifyTwoFactorAuthenticationToken({ user, totpCode: code });
 
   if (!isValidToken) {
-    throw new Error(ErrorCode.INCORRECT_TWO_FACTOR_CODE);
+    throw new AppError('INCORRECT_TWO_FACTOR_CODE');
   }
 
-  const updatedUser = await prisma.$transaction(async (tx) => {
+  let recoveryCodes: string[] = [];
+
+  await prisma.$transaction(async (tx) => {
+    const updatedUser = await tx.user.update({
+      where: {
+        id: user.id,
+      },
+      data: {
+        twoFactorEnabled: true,
+      },
+    });
+
+    recoveryCodes = getBackupCodes({ user: updatedUser }) ?? [];
+
+    if (recoveryCodes.length === 0) {
+      throw new AppError('MISSING_BACKUP_CODE');
+    }
+
     await tx.userSecurityAuditLog.create({
       data: {
         userId: user.id,
@@ -44,18 +57,7 @@ export const enableTwoFactorAuthentication = async ({
         ipAddress: requestMetadata?.ipAddress,
       },
     });
-
-    return await tx.user.update({
-      where: {
-        id: user.id,
-      },
-      data: {
-        twoFactorEnabled: true,
-      },
-    });
   });
 
-  const recoveryCodes = getBackupCodes({ user: updatedUser });
-
   return { recoveryCodes };
 };

packages/lib/server-only/2fa/setup-2fa.ts

@@ -1,4 +1,3 @@
-import { compare } from '@node-rs/bcrypt';
 import { base32 } from '@scure/base';
 import crypto from 'crypto';
 import { createTOTPKeyURI } from 'oslo/otp';
@@ -12,14 +11,12 @@ import { symmetricEncrypt } from '../../universal/crypto';
 
 type SetupTwoFactorAuthenticationOptions = {
   user: User;
-  password: string;
 };
 
 const ISSUER = 'Documenso';
 
 export const setupTwoFactorAuthentication = async ({
   user,
-  password,
 }: SetupTwoFactorAuthenticationOptions) => {
   const key = DOCUMENSO_ENCRYPTION_KEY;
 
@@ -27,20 +24,6 @@ export const setupTwoFactorAuthentication = async ({
     throw new Error(ErrorCode.MISSING_ENCRYPTION_KEY);
   }
 
-  if (user.identityProvider !== 'DOCUMENSO') {
-    throw new Error(ErrorCode.INCORRECT_IDENTITY_PROVIDER);
-  }
-
-  if (!user.password) {
-    throw new Error(ErrorCode.USER_MISSING_PASSWORD);
-  }
-
-  const isCorrectPassword = await compare(password, user.password);
-
-  if (!isCorrectPassword) {
-    throw new Error(ErrorCode.INCORRECT_PASSWORD);
-  }
-
   const secret = crypto.randomBytes(10);
 
   const backupCodes = Array.from({ length: 10 })

packages/lib/server-only/2fa/view-backup-codes.ts

@@ -0,0 +1,30 @@
+import type { User } from '@documenso/prisma/client';
+
+import { AppError } from '../../errors/app-error';
+import { getBackupCodes } from './get-backup-code';
+import { validateTwoFactorAuthentication } from './validate-2fa';
+
+type ViewBackupCodesOptions = {
+  user: User;
+  token: string;
+};
+
+export const viewBackupCodes = async ({ token, user }: ViewBackupCodesOptions) => {
+  let isValid = await validateTwoFactorAuthentication({ totpCode: token, user });
+
+  if (!isValid) {
+    isValid = await validateTwoFactorAuthentication({ backupCode: token, user });
+  }
+
+  if (!isValid) {
+    throw new AppError('INCORRECT_TWO_FACTOR_CODE');
+  }
+
+  const backupCodes = getBackupCodes({ user });
+
+  if (!backupCodes) {
+    throw new AppError('MISSING_BACKUP_CODE');
+  }
+
+  return backupCodes;
+};

packages/lib/server-only/auth/create-passkey-registration-options.ts

@@ -0,0 +1,58 @@
+import { generateRegistrationOptions } from '@simplewebauthn/server';
+import type { AuthenticatorTransportFuture } from '@simplewebauthn/types';
+import { DateTime } from 'luxon';
+
+import { prisma } from '@documenso/prisma';
+
+import { PASSKEY_TIMEOUT } from '../../constants/auth';
+import { getAuthenticatorRegistrationOptions } from '../../utils/authenticator';
+
+type CreatePasskeyRegistrationOptions = {
+  userId: number;
+};
+
+export const createPasskeyRegistrationOptions = async ({
+  userId,
+}: CreatePasskeyRegistrationOptions) => {
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    select: {
+      name: true,
+      email: true,
+      passkeys: true,
+    },
+  });
+
+  const { passkeys } = user;
+
+  const { rpName, rpId: rpID } = getAuthenticatorRegistrationOptions();
+
+  const options = await generateRegistrationOptions({
+    rpName,
+    rpID,
+    userID: userId.toString(),
+    userName: user.email,
+    userDisplayName: user.name ?? undefined,
+    timeout: PASSKEY_TIMEOUT,
+    attestationType: 'none',
+    excludeCredentials: passkeys.map((passkey) => ({
+      id: passkey.credentialId,
+      type: 'public-key',
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      transports: passkey.transports as AuthenticatorTransportFuture[],
+    })),
+  });
+
+  await prisma.verificationToken.create({
+    data: {
+      userId,
+      token: options.challenge,
+      expires: DateTime.now().plus({ minutes: 2 }).toJSDate(),
+      identifier: 'PASSKEY_CHALLENGE',
+    },
+  });
+
+  return options;
+};

packages/lib/server-only/auth/create-passkey-signin-options.ts

@@ -0,0 +1,41 @@
+import { generateAuthenticationOptions } from '@simplewebauthn/server';
+import { DateTime } from 'luxon';
+
+import { prisma } from '@documenso/prisma';
+
+import { getAuthenticatorRegistrationOptions } from '../../utils/authenticator';
+
+type CreatePasskeySigninOptions = {
+  sessionId: string;
+};
+
+export const createPasskeySigninOptions = async ({ sessionId }: CreatePasskeySigninOptions) => {
+  const { rpId, timeout } = getAuthenticatorRegistrationOptions();
+
+  const options = await generateAuthenticationOptions({
+    rpID: rpId,
+    userVerification: 'preferred',
+    timeout,
+  });
+
+  const { challenge } = options;
+
+  await prisma.anonymousVerificationToken.upsert({
+    where: {
+      id: sessionId,
+    },
+    update: {
+      token: challenge,
+      expiresAt: DateTime.now().plus({ minutes: 2 }).toJSDate(),
+      createdAt: new Date(),
+    },
+    create: {
+      id: sessionId,
+      token: challenge,
+      expiresAt: DateTime.now().plus({ minutes: 2 }).toJSDate(),
+      createdAt: new Date(),
+    },
+  });
+
+  return options;
+};

packages/lib/server-only/auth/create-passkey.ts

@@ -0,0 +1,106 @@
+import { verifyRegistrationResponse } from '@simplewebauthn/server';
+import type { RegistrationResponseJSON } from '@simplewebauthn/types';
+
+import { prisma } from '@documenso/prisma';
+import { UserSecurityAuditLogType } from '@documenso/prisma/client';
+
+import { MAXIMUM_PASSKEYS } from '../../constants/auth';
+import { AppError, AppErrorCode } from '../../errors/app-error';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import { getAuthenticatorRegistrationOptions } from '../../utils/authenticator';
+
+type CreatePasskeyOptions = {
+  userId: number;
+  passkeyName: string;
+  verificationResponse: RegistrationResponseJSON;
+  requestMetadata?: RequestMetadata;
+};
+
+export const createPasskey = async ({
+  userId,
+  passkeyName,
+  verificationResponse,
+  requestMetadata,
+}: CreatePasskeyOptions) => {
+  const { _count } = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    include: {
+      _count: {
+        select: {
+          passkeys: true,
+        },
+      },
+    },
+  });
+
+  if (_count.passkeys >= MAXIMUM_PASSKEYS) {
+    throw new AppError('TOO_MANY_PASSKEYS');
+  }
+
+  const verificationToken = await prisma.verificationToken.findFirst({
+    where: {
+      userId,
+      identifier: 'PASSKEY_CHALLENGE',
+    },
+    orderBy: {
+      createdAt: 'desc',
+    },
+  });
+
+  if (!verificationToken) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Challenge token not found');
+  }
+
+  await prisma.verificationToken.deleteMany({
+    where: {
+      userId,
+      identifier: 'PASSKEY_CHALLENGE',
+    },
+  });
+
+  if (verificationToken.expires < new Date()) {
+    throw new AppError(AppErrorCode.EXPIRED_CODE, 'Challenge token expired');
+  }
+
+  const { rpId: expectedRPID, origin: expectedOrigin } = getAuthenticatorRegistrationOptions();
+
+  const verification = await verifyRegistrationResponse({
+    response: verificationResponse,
+    expectedChallenge: verificationToken.token,
+    expectedOrigin,
+    expectedRPID,
+  });
+
+  if (!verification.verified || !verification.registrationInfo) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, 'Verification failed');
+  }
+
+  const { credentialPublicKey, credentialID, counter, credentialDeviceType, credentialBackedUp } =
+    verification.registrationInfo;
+
+  await prisma.$transaction(async (tx) => {
+    await tx.passkey.create({
+      data: {
+        userId,
+        name: passkeyName,
+        credentialId: Buffer.from(credentialID),
+        credentialPublicKey: Buffer.from(credentialPublicKey),
+        counter,
+        credentialDeviceType,
+        credentialBackedUp,
+        transports: verificationResponse.response.transports,
+      },
+    });
+
+    await tx.userSecurityAuditLog.create({
+      data: {
+        userId,
+        type: UserSecurityAuditLogType.PASSKEY_CREATED,
+        userAgent: requestMetadata?.userAgent,
+        ipAddress: requestMetadata?.ipAddress,
+      },
+    });
+  });
+};

packages/lib/server-only/auth/delete-passkey.ts

@@ -0,0 +1,41 @@
+import { prisma } from '@documenso/prisma';
+import { UserSecurityAuditLogType } from '@documenso/prisma/client';
+
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+
+export interface DeletePasskeyOptions {
+  userId: number;
+  passkeyId: string;
+  requestMetadata?: RequestMetadata;
+}
+
+export const deletePasskey = async ({
+  userId,
+  passkeyId,
+  requestMetadata,
+}: DeletePasskeyOptions) => {
+  await prisma.passkey.findFirstOrThrow({
+    where: {
+      id: passkeyId,
+      userId,
+    },
+  });
+
+  await prisma.$transaction(async (tx) => {
+    await tx.passkey.delete({
+      where: {
+        id: passkeyId,
+        userId,
+      },
+    });
+
+    await tx.userSecurityAuditLog.create({
+      data: {
+        userId,
+        type: UserSecurityAuditLogType.PASSKEY_DELETED,
+        userAgent: requestMetadata?.userAgent,
+        ipAddress: requestMetadata?.ipAddress,
+      },
+    });
+  });
+};

packages/lib/server-only/auth/find-passkeys.ts

@@ -0,0 +1,71 @@
+import type { FindResultSet } from '@documenso/lib/types/find-result-set';
+import { prisma } from '@documenso/prisma';
+import type { Passkey } from '@documenso/prisma/client';
+import { Prisma } from '@documenso/prisma/client';
+
+export interface FindPasskeysOptions {
+  userId: number;
+  term?: string;
+  page?: number;
+  perPage?: number;
+  orderBy?: {
+    column: keyof Passkey;
+    direction: 'asc' | 'desc';
+  };
+}
+
+export const findPasskeys = async ({
+  userId,
+  term = '',
+  page = 1,
+  perPage = 10,
+  orderBy,
+}: FindPasskeysOptions) => {
+  const orderByColumn = orderBy?.column ?? 'name';
+  const orderByDirection = orderBy?.direction ?? 'desc';
+
+  const whereClause: Prisma.PasskeyWhereInput = {
+    userId,
+  };
+
+  if (term.length > 0) {
+    whereClause.name = {
+      contains: term,
+      mode: Prisma.QueryMode.insensitive,
+    };
+  }
+
+  const [data, count] = await Promise.all([
+    prisma.passkey.findMany({
+      where: whereClause,
+      skip: Math.max(page - 1, 0) * perPage,
+      take: perPage,
+      orderBy: {
+        [orderByColumn]: orderByDirection,
+      },
+      select: {
+        id: true,
+        userId: true,
+        name: true,
+        createdAt: true,
+        updatedAt: true,
+        lastUsedAt: true,
+        counter: true,
+        credentialDeviceType: true,
+        credentialBackedUp: true,
+        transports: true,
+      },
+    }),
+    prisma.passkey.count({
+      where: whereClause,
+    }),
+  ]);
+
+  return {
+    data,
+    count,
+    currentPage: Math.max(page, 1),
+    perPage,
+    totalPages: Math.ceil(count / perPage),
+  } satisfies FindResultSet<typeof data>;
+};

packages/lib/server-only/auth/update-passkey.ts

@@ -0,0 +1,51 @@
+import { prisma } from '@documenso/prisma';
+import { UserSecurityAuditLogType } from '@documenso/prisma/client';
+
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+
+export interface UpdateAuthenticatorsOptions {
+  userId: number;
+  passkeyId: string;
+  name: string;
+  requestMetadata?: RequestMetadata;
+}
+
+export const updatePasskey = async ({
+  userId,
+  passkeyId,
+  name,
+  requestMetadata,
+}: UpdateAuthenticatorsOptions) => {
+  const passkey = await prisma.passkey.findFirstOrThrow({
+    where: {
+      id: passkeyId,
+      userId,
+    },
+  });
+
+  if (passkey.name === name) {
+    return;
+  }
+
+  await prisma.$transaction(async (tx) => {
+    await tx.passkey.update({
+      where: {
+        id: passkeyId,
+        userId,
+      },
+      data: {
+        name,
+        updatedAt: new Date(),
+      },
+    });
+
+    await tx.userSecurityAuditLog.create({
+      data: {
+        userId,
+        type: UserSecurityAuditLogType.PASSKEY_UPDATED,
+        userAgent: requestMetadata?.userAgent,
+        ipAddress: requestMetadata?.ipAddress,
+      },
+    });
+  });
+};

packages/lib/server-only/document/find-document-audit-logs.ts

@@ -3,8 +3,11 @@ import { prisma } from '@documenso/prisma';
 import type { DocumentAuditLog } from '@documenso/prisma/client';
 import type { Prisma } from '@documenso/prisma/client';
 
+import { AppError } from '../../errors/app-error';
+import type { TDocumentAuditLog } from '../../types/document-audit-logs';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
 import { parseDocumentAuditLogData } from '../../utils/document-audit-logs';
+import { buildServerLogger } from '../../utils/logger';
 
 export interface FindDocumentAuditLogsOptions {
   userId: number;
@@ -97,7 +100,26 @@ export const findDocumentAuditLogs = async ({
 
   let nextCursor: string | undefined = undefined;
 
-  const parsedData = data.map((auditLog) => parseDocumentAuditLogData(auditLog));
+  let parsedData: TDocumentAuditLog[] = [];
+
+  try {
+    parsedData = data.map((auditLog) => parseDocumentAuditLogData(auditLog));
+  } catch (err) {
+    const error = AppError.parseError(err);
+
+    if (error.code === 'MIGRATION_REQUIRED') {
+      const logger = buildServerLogger();
+
+      logger.error('findDocumentAuditLogs', {
+        level: 'ALERT',
+        error,
+      });
+
+      void logger.flush();
+    }
+
+    throw error;
+  }
 
   if (parsedData.length > perPage) {
     const nextItem = parsedData.pop();

packages/lib/server-only/document/get-document-by-token.ts

@@ -1,13 +1,30 @@
 import { prisma } from '@documenso/prisma';
 import type { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
 
-export interface GetDocumentAndSenderByTokenOptions {
+export type GetDocumentByTokenOptions = {
   token: string;
-}
+};
 
-export interface GetDocumentAndRecipientByTokenOptions {
-  token: string;
-}
+export type GetDocumentAndSenderByTokenOptions = GetDocumentByTokenOptions;
+export type GetDocumentAndRecipientByTokenOptions = GetDocumentByTokenOptions;
+
+export const getDocumentByToken = async ({ token }: GetDocumentByTokenOptions) => {
+  if (!token) {
+    throw new Error('Missing token');
+  }
+
+  const result = await prisma.document.findFirstOrThrow({
+    where: {
+      Recipient: {
+        some: {
+          token,
+        },
+      },
+    },
+  });
+
+  return result;
+};
 
 export const getDocumentAndSenderByToken = async ({
   token,

packages/lib/server-only/document/get-document-with-details-by-id.ts

@@ -0,0 +1,32 @@
+import { prisma } from '@documenso/prisma';
+import type { DocumentWithDetails } from '@documenso/prisma/types/document';
+
+import { getDocumentWhereInput } from './get-document-by-id';
+
+export type GetDocumentWithDetailsByIdOptions = {
+  id: number;
+  userId: number;
+  teamId?: number;
+};
+
+export const getDocumentWithDetailsById = async ({
+  id,
+  userId,
+  teamId,
+}: GetDocumentWithDetailsByIdOptions): Promise<DocumentWithDetails> => {
+  const documentWhereInput = await getDocumentWhereInput({
+    documentId: id,
+    userId,
+    teamId,
+  });
+
+  return await prisma.document.findFirstOrThrow({
+    where: documentWhereInput,
+    include: {
+      documentData: true,
+      documentMeta: true,
+      Recipient: true,
+      Field: true,
+    },
+  });
+};

packages/lib/server-only/field/set-fields-for-document.ts

@@ -5,7 +5,7 @@ import {
   diffFieldChanges,
 } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
-import type { FieldType } from '@documenso/prisma/client';
+import type { Field, FieldType } from '@documenso/prisma/client';
 import { SendStatus, SigningStatus } from '@documenso/prisma/client';
 
 export interface SetFieldsForDocumentOptions {
@@ -29,7 +29,7 @@ export const setFieldsForDocument = async ({
   documentId,
   fields,
   requestMetadata,
-}: SetFieldsForDocumentOptions) => {
+}: SetFieldsForDocumentOptions): Promise<Field[]> => {
   const document = await prisma.document.findFirst({
     where: {
       id: documentId,
@@ -99,7 +99,7 @@ export const setFieldsForDocument = async ({
     });
 
   const persistedFields = await prisma.$transaction(async (tx) => {
-    await Promise.all(
+    return await Promise.all(
       linkedFields.map(async (field) => {
         const fieldSignerEmail = field.signerEmail.toLowerCase();
 
@@ -218,5 +218,13 @@ export const setFieldsForDocument = async ({
     });
   }
 
-  return persistedFields;
+  // Filter out fields that have been removed or have been updated.
+  const filteredFields = existingFields.filter((field) => {
+    const isRemoved = removedFields.find((removedField) => removedField.id === field.id);
+    const isUpdated = persistedFields.find((persistedField) => persistedField.id === field.id);
+
+    return !isRemoved && !isUpdated;
+  });
+
+  return [...filteredFields, ...persistedFields];
 };

packages/lib/server-only/recipient/set-recipients-for-document.ts

@@ -6,6 +6,7 @@ import {
   diffRecipientChanges,
 } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
+import type { Recipient } from '@documenso/prisma/client';
 import { RecipientRole } from '@documenso/prisma/client';
 import { SendStatus, SigningStatus } from '@documenso/prisma/client';
 
@@ -28,7 +29,7 @@ export const setRecipientsForDocument = async ({
   documentId,
   recipients,
   requestMetadata,
-}: SetRecipientsForDocumentOptions) => {
+}: SetRecipientsForDocumentOptions): Promise<Recipient[]> => {
   const document = await prisma.document.findFirst({
     where: {
       id: documentId,
@@ -226,5 +227,17 @@ export const setRecipientsForDocument = async ({
     });
   }
 
-  return persistedRecipients;
+  // Filter out recipients that have been removed or have been updated.
+  const filteredRecipients: Recipient[] = existingRecipients.filter((recipient) => {
+    const isRemoved = removedRecipients.find(
+      (removedRecipient) => removedRecipient.id === recipient.id,
+    );
+    const isUpdated = persistedRecipients.find(
+      (persistedRecipient) => persistedRecipient.id === recipient.id,
+    );
+
+    return !isRemoved && !isUpdated;
+  });
+
+  return [...filteredRecipients, ...persistedRecipients];
 };

packages/lib/server-only/user/get-monthly-completed-document.ts

@@ -0,0 +1,35 @@
+import { DateTime } from 'luxon';
+
+import { prisma } from '@documenso/prisma';
+
+export type GetCompletedDocumentsMonthlyResult = Array<{
+  month: string;
+  count: number;
+  cume_count: number;
+}>;
+
+type GetCompletedDocumentsMonthlyQueryResult = Array<{
+  month: Date;
+  count: bigint;
+  cume_count: bigint;
+}>;
+
+export const getCompletedDocumentsMonthly = async () => {
+  const result = await prisma.$queryRaw<GetCompletedDocumentsMonthlyQueryResult>`
+    SELECT
+      DATE_TRUNC('month', "updatedAt") AS "month",
+      COUNT("id") as "count",
+      SUM(COUNT("id")) OVER (ORDER BY DATE_TRUNC('month', "updatedAt")) as "cume_count"
+    FROM "Document"
+    WHERE "status" = 'COMPLETED'
+    GROUP BY "month"
+    ORDER BY "month" DESC
+    LIMIT 12
+  `;
+
+  return result.map((row) => ({
+    month: DateTime.fromJSDate(row.month).toFormat('yyyy-MM'),
+    count: Number(row.count),
+    cume_count: Number(row.cume_count),
+  }));
+};

packages/lib/types/webauthn.ts

@@ -0,0 +1,44 @@
+import { z } from 'zod';
+
+const ZClientExtensionResults = z.object({
+  appid: z.boolean().optional(),
+  credProps: z
+    .object({
+      rk: z.boolean().optional(),
+    })
+    .optional(),
+  hmacCreateSecret: z.boolean().optional(),
+});
+
+export const ZAuthenticationResponseJSONSchema = z.object({
+  id: z.string(),
+  rawId: z.string(),
+  response: z.object({
+    clientDataJSON: z.string(),
+    authenticatorData: z.string(),
+    signature: z.string(),
+    userHandle: z.string().optional(),
+  }),
+  authenticatorAttachment: z.union([z.literal('cross-platform'), z.literal('platform')]).optional(),
+  clientExtensionResults: ZClientExtensionResults,
+  type: z.literal('public-key'),
+});
+
+export const ZRegistrationResponseJSONSchema = z.object({
+  id: z.string(),
+  rawId: z.string(),
+  response: z.object({
+    clientDataJSON: z.string(),
+    attestationObject: z.string(),
+    authenticatorData: z.string().optional(),
+    transports: z.array(z.string()).optional(),
+    publicKeyAlgorithm: z.number().optional(),
+    publicKey: z.string().optional(),
+  }),
+  authenticatorAttachment: z.string().optional(),
+  clientExtensionResults: ZClientExtensionResults.optional(),
+  type: z.string(),
+});
+
+export type TAuthenticationResponseJSONSchema = z.infer<typeof ZAuthenticationResponseJSONSchema>;
+export type TRegistrationResponseJSONSchema = z.infer<typeof ZRegistrationResponseJSONSchema>;

packages/lib/utils/authenticator.ts

@@ -0,0 +1,17 @@
+import { WEBAPP_BASE_URL } from '../constants/app';
+import { PASSKEY_TIMEOUT } from '../constants/auth';
+
+/**
+ * Extracts common fields to identify the RP (relying party)
+ */
+export const getAuthenticatorRegistrationOptions = () => {
+  const webAppBaseUrl = new URL(WEBAPP_BASE_URL);
+  const rpId = webAppBaseUrl.hostname;
+
+  return {
+    rpName: 'Documenso',
+    rpId,
+    origin: WEBAPP_BASE_URL,
+    timeout: PASSKEY_TIMEOUT,
+  };
+};

packages/lib/utils/document-audit-logs.ts

@@ -9,6 +9,7 @@ import type {
 } from '@documenso/prisma/client';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '../constants/recipient-roles';
+import { AppError } from '../errors/app-error';
 import type {
   TDocumentAuditLog,
   TDocumentAuditLogDocumentMetaDiffSchema,
@@ -69,7 +70,7 @@ export const parseDocumentAuditLogData = (auditLog: DocumentAuditLog): TDocument
   // Handle any required migrations here.
   if (!data.success) {
     console.error(data.error);
-    throw new Error('Migration required');
+    throw new AppError('MIGRATION_REQUIRED');
   }
 
   return data.data;

packages/lib/utils/logger.ts

@@ -0,0 +1,16 @@
+import type { LoggerConfig } from 'next-axiom';
+import { Logger } from 'next-axiom';
+
+/**
+ * For usage in server-side code.
+ *
+ * When used in a server component, you must flush the logs.
+ *
+ * https://github.com/axiomhq/next-axiom?tab=readme-ov-file#server-components
+ */
+export const buildServerLogger = (config?: LoggerConfig) => {
+  return new Logger({
+    source: 'server',
+    ...config,
+  });
+};

packages/prisma/migrations/20240306060259_add_passkeys/migration.sql

@@ -0,0 +1,49 @@
+-- AlterEnum
+-- This migration adds more than one value to an enum.
+-- With PostgreSQL versions 11 and earlier, this is not possible
+-- in a single migration. This can be worked around by creating
+-- multiple migrations, each migration adding only one value to
+-- the enum.
+
+
+ALTER TYPE "UserSecurityAuditLogType" ADD VALUE 'PASSKEY_CREATED';
+ALTER TYPE "UserSecurityAuditLogType" ADD VALUE 'PASSKEY_DELETED';
+ALTER TYPE "UserSecurityAuditLogType" ADD VALUE 'PASSKEY_UPDATED';
+ALTER TYPE "UserSecurityAuditLogType" ADD VALUE 'SIGN_IN_PASSKEY_FAIL';
+
+-- CreateTable
+CREATE TABLE "Passkey" (
+    "id" TEXT NOT NULL,
+    "userId" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "lastUsedAt" TIMESTAMP(3),
+    "credentialId" BYTEA NOT NULL,
+    "credentialPublicKey" BYTEA NOT NULL,
+    "counter" BIGINT NOT NULL,
+    "credentialDeviceType" TEXT NOT NULL,
+    "credentialBackedUp" BOOLEAN NOT NULL,
+    "transports" TEXT[],
+
+    CONSTRAINT "Passkey_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "AnonymousVerificationToken" (
+    "id" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "AnonymousVerificationToken_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "AnonymousVerificationToken_id_key" ON "AnonymousVerificationToken"("id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "AnonymousVerificationToken_token_key" ON "AnonymousVerificationToken"("token");
+
+-- AddForeignKey
+ALTER TABLE "Passkey" ADD CONSTRAINT "Passkey_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/schema.prisma

@@ -52,6 +52,7 @@ model User {
   securityAuditLogs UserSecurityAuditLog[]
   Webhooks          Webhook[]
   siteSettings      SiteSettings[]
+  passkeys          Passkey[]
 
   @@index([email])
 }
@@ -68,12 +69,16 @@ enum UserSecurityAuditLogType {
   ACCOUNT_SSO_LINK
   AUTH_2FA_DISABLE
   AUTH_2FA_ENABLE
+  PASSKEY_CREATED
+  PASSKEY_DELETED
+  PASSKEY_UPDATED
   PASSWORD_RESET
   PASSWORD_UPDATE
   SIGN_OUT
   SIGN_IN
   SIGN_IN_FAIL
   SIGN_IN_2FA_FAIL
+  SIGN_IN_PASSKEY_FAIL
 }
 
 model UserSecurityAuditLog {
@@ -96,6 +101,30 @@ model PasswordResetToken {
   User      User     @relation(fields: [userId], references: [id])
 }
 
+model Passkey {
+  id                   String    @id @default(cuid())
+  userId               Int
+  name                 String
+  createdAt            DateTime  @default(now())
+  updatedAt            DateTime  @default(now())
+  lastUsedAt           DateTime?
+  credentialId         Bytes
+  credentialPublicKey  Bytes
+  counter              BigInt
+  credentialDeviceType String
+  credentialBackedUp   Boolean
+  transports           String[]
+
+  User User @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
+model AnonymousVerificationToken {
+  id        String   @id @unique @default(cuid())
+  token     String   @unique
+  expiresAt DateTime
+  createdAt DateTime @default(now())
+}
+
 model VerificationToken {
   id         Int      @id @default(autoincrement())
   identifier String

packages/prisma/seed/pr-711-deletion-of-documents.ts

@@ -182,6 +182,7 @@ const createCompletedDocument = async (sender: User, recipients: User[]) => {
       title: `[${PULL_REQUEST_NUMBER}] Document 1 - Completed`,
       status: DocumentStatus.COMPLETED,
       documentDataId: documentData.id,
+      completedAt: new Date(),
       userId: sender.id,
     },
   });

packages/prisma/types/document.ts

@@ -1,4 +1,10 @@
-import { Document, Recipient } from '@documenso/prisma/client';
+import type {
+  Document,
+  DocumentData,
+  DocumentMeta,
+  Field,
+  Recipient,
+} from '@documenso/prisma/client';
 
 export type DocumentWithRecipientAndSender = Omit<Document, 'document'> & {
   recipient: Recipient;
@@ -10,3 +16,10 @@ export type DocumentWithRecipientAndSender = Omit<Document, 'document'> & {
   subject: string;
   description: string;
 };
+
+export type DocumentWithDetails = Document & {
+  documentData: DocumentData;
+  documentMeta: DocumentMeta | null;
+  Recipient: Recipient[];
+  Field: Field[];
+};

packages/signing/constants/byte-range.ts

@@ -0,0 +1,3 @@
+// We use stars as a placeholder since it's easy to find and replace,
+// the length of the placeholder is to support larger pdf files
+export const BYTE_RANGE_PLACEHOLDER = '**********';

packages/signing/helpers/add-signing-placeholder.ts

@@ -1,4 +1,3 @@
-import signer from 'node-signpdf';
 import {
   PDFArray,
   PDFDocument,
@@ -9,6 +8,8 @@ import {
   rectangle,
 } from 'pdf-lib';
 
+import { BYTE_RANGE_PLACEHOLDER } from '../constants/byte-range';
+
 export type AddSigningPlaceholderOptions = {
   pdf: Buffer;
 };
@@ -20,9 +21,9 @@ export const addSigningPlaceholder = async ({ pdf }: AddSigningPlaceholderOption
   const byteRange = PDFArray.withContext(doc.context);
 
   byteRange.push(PDFNumber.of(0));
-  byteRange.push(PDFName.of(signer.byteRangePlaceholder));
-  byteRange.push(PDFName.of(signer.byteRangePlaceholder));
-  byteRange.push(PDFName.of(signer.byteRangePlaceholder));
+  byteRange.push(PDFName.of(BYTE_RANGE_PLACEHOLDER));
+  byteRange.push(PDFName.of(BYTE_RANGE_PLACEHOLDER));
+  byteRange.push(PDFName.of(BYTE_RANGE_PLACEHOLDER));
 
   const signature = doc.context.obj({
     Type: 'Sig',

packages/signing/helpers/update-signing-placeholder.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest';
+
+import { updateSigningPlaceholder } from './update-signing-placeholder';
+
+describe('updateSigningPlaceholder', () => {
+  const pdf = Buffer.from(`
+      20 0 obj
+      <<
+      /Type /Sig
+      /Filter /Adobe.PPKLite
+      /SubFilter /adbe.pkcs7.detached
+      /ByteRange [ 0 /********** /********** /********** ]
+      /Contents <0000000000000000000000000000000000000000000000000000000>
+      /Reason (Signed by Documenso)
+      /M (D:20210101000000Z)
+      >>
+      endobj
+    `);
+
+  it('should not throw an error', () => {
+      expect(() => updateSigningPlaceholder({ pdf })).not.toThrowError();
+  });
+
+  it('should not modify the original PDF', () => {
+    const result = updateSigningPlaceholder({ pdf });
+
+    expect(result.pdf).not.toEqual(pdf);
+  });
+
+  it('should return a PDF with the same length as the original', () => {
+    const result = updateSigningPlaceholder({ pdf });
+
+    expect(result.pdf).toHaveLength(pdf.length);
+  });
+
+  it('should update the byte range and return it', () => {
+    const result = updateSigningPlaceholder({ pdf });
+
+    expect(result.byteRange).toEqual([0, 184, 241, 92]);
+  });
+
+  it('should only update the last signature in the PDF', () => {
+    const pdf = Buffer.from(`
+      20 0 obj
+      <<
+      /Type /Sig
+      /Filter /Adobe.PPKLite
+      /SubFilter /adbe.pkcs7.detached
+      /ByteRange [ 0 /********** /********** /********** ]
+      /Contents <0000000000000000000000000000000000000000000000000000000>
+      /Reason (Signed by Documenso)
+      /M (D:20210101000000Z)
+      >>
+      endobj
+      21 0 obj
+      <<
+      /Type /Sig
+      /Filter /Adobe.PPKLite
+      /SubFilter /adbe.pkcs7.detached
+      /ByteRange [ 0 /********** /********** /********** ]
+      /Contents <0000000000000000000000000000000000000000000000000000000>
+      /Reason (Signed by Documenso)
+      /M (D:20210101000000Z)
+      >>
+      endobj
+    `);
+
+    const result = updateSigningPlaceholder({ pdf });
+
+    expect(result.byteRange).toEqual([0, 512, 569, 92]);
+  });
+});

packages/signing/helpers/update-signing-placeholder.ts

@@ -0,0 +1,39 @@
+export type UpdateSigningPlaceholderOptions = {
+  pdf: Buffer;
+};
+
+export const updateSigningPlaceholder = ({ pdf }: UpdateSigningPlaceholderOptions) => {
+  const length = pdf.length;
+
+  const byteRangePos = pdf.lastIndexOf('/ByteRange');
+  const byteRangeStart = pdf.indexOf('[', byteRangePos);
+  const byteRangeEnd = pdf.indexOf(']', byteRangePos);
+
+  const byteRangeSlice = pdf.subarray(byteRangeStart, byteRangeEnd + 1);
+
+  const signaturePos = pdf.indexOf('/Contents', byteRangeEnd);
+  const signatureStart = pdf.indexOf('<', signaturePos);
+  const signatureEnd = pdf.indexOf('>', signaturePos);
+
+  const signatureSlice = pdf.subarray(signatureStart, signatureEnd + 1);
+
+  const byteRange = [0, 0, 0, 0];
+
+  byteRange[1] = signatureStart;
+  byteRange[2] = byteRange[1] + signatureSlice.length;
+  byteRange[3] = length - byteRange[2];
+
+  const newByteRange = `[${byteRange.join(' ')}]`.padEnd(byteRangeSlice.length, ' ');
+
+  const updatedPdf = Buffer.concat([
+    pdf.subarray(0, byteRangeStart),
+    Buffer.from(newByteRange),
+    pdf.subarray(byteRangeEnd + 1),
+  ]);
+
+  if (updatedPdf.length !== length) {
+    throw new Error('Updated PDF length does not match original length');
+  }
+
+  return { pdf: updatedPdf, byteRange };
+};

packages/signing/index.ts

@@ -1,5 +1,6 @@
 import { match } from 'ts-pattern';
 
+import { signWithGoogleCloudHSM } from './transports/google-cloud-hsm';
 import { signWithLocalCert } from './transports/local-cert';
 
 export type SignOptions = {
@@ -11,6 +12,7 @@ export const signPdf = async ({ pdf }: SignOptions) => {
 
   return await match(transport)
     .with('local', async () => signWithLocalCert({ pdf }))
+    .with('gcloud-hsm', async () => signWithGoogleCloudHSM({ pdf }))
     .otherwise(() => {
       throw new Error(`Unsupported signing transport: ${transport}`);
     });

packages/signing/package.json

@@ -9,15 +9,15 @@
     "index.ts"
   ],
   "scripts": {
+    "test": "vitest"
   },
   "dependencies": {
     "@documenso/tsconfig": "*",
-    "node-forge": "^1.3.1",
-    "node-signpdf": "^2.0.0",
+    "@documenso/pdf-sign": "^0.1.0",
     "pdf-lib": "^1.17.1",
     "ts-pattern": "^5.0.5"
   },
   "devDependencies": {
-    "@types/node-forge": "^1.3.4"
+    "vitest": "^1.3.1"
   }
 }

packages/signing/transports/google-cloud-hsm.ts

@@ -0,0 +1,79 @@
+import fs from 'node:fs';
+
+import { signWithGCloud } from '@documenso/pdf-sign';
+
+import { addSigningPlaceholder } from '../helpers/add-signing-placeholder';
+import { updateSigningPlaceholder } from '../helpers/update-signing-placeholder';
+
+export type SignWithGoogleCloudHSMOptions = {
+  pdf: Buffer;
+};
+
+export const signWithGoogleCloudHSM = async ({ pdf }: SignWithGoogleCloudHSMOptions) => {
+  const keyPath = process.env.NEXT_PRIVATE_SIGNING_GCLOUD_HSM_KEY_PATH;
+
+  if (!keyPath) {
+    throw new Error('No certificate path provided for Google Cloud HSM signing');
+  }
+
+  // To handle hosting in serverless environments like Vercel we can supply the base64 encoded
+  // application credentials as an environment variable and write it to a file if it doesn't exist
+  if (
+    process.env.GOOGLE_APPLICATION_CREDENTIALS &&
+    process.env.NEXT_PRIVATE_SIGNING_GCLOUD_APPLICATION_CREDENTIALS_CONTENTS
+  ) {
+    if (!fs.existsSync(process.env.GOOGLE_APPLICATION_CREDENTIALS)) {
+      fs.writeFileSync(
+        process.env.GOOGLE_APPLICATION_CREDENTIALS,
+        Buffer.from(
+          process.env.NEXT_PRIVATE_SIGNING_GCLOUD_APPLICATION_CREDENTIALS_CONTENTS,
+          'base64',
+        ),
+      );
+    }
+  }
+
+  const { pdf: pdfWithPlaceholder, byteRange } = updateSigningPlaceholder({
+    pdf: await addSigningPlaceholder({ pdf }),
+  });
+
+  const pdfWithoutSignature = Buffer.concat([
+    pdfWithPlaceholder.subarray(0, byteRange[1]),
+    pdfWithPlaceholder.subarray(byteRange[2]),
+  ]);
+
+  const signatureLength = byteRange[2] - byteRange[1];
+
+  let cert: Buffer | null = null;
+
+  if (process.env.NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_CONTENTS) {
+    cert = Buffer.from(
+      process.env.NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_CONTENTS,
+      'base64',
+    );
+  }
+
+  if (!cert) {
+    cert = Buffer.from(
+      fs.readFileSync(
+        process.env.NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_PATH || './example/cert.crt',
+      ),
+    );
+  }
+
+  const signature = signWithGCloud({
+    keyPath,
+    cert,
+    content: pdfWithoutSignature,
+  });
+
+  const signatureAsHex = signature.toString('hex');
+
+  const signedPdf = Buffer.concat([
+    pdfWithPlaceholder.subarray(0, byteRange[1]),
+    Buffer.from(`<${signatureAsHex.padEnd(signatureLength - 2, '0')}>`),
+    pdfWithPlaceholder.subarray(byteRange[2]),
+  ]);
+
+  return signedPdf;
+};

packages/signing/transports/local-cert.ts

@@ -1,32 +1,51 @@
-import signer from 'node-signpdf';
 import fs from 'node:fs';
 
-import { addSigningPlaceholder } from '../helpers/addSigningPlaceholder';
+import { signWithP12 } from '@documenso/pdf-sign';
+
+import { addSigningPlaceholder } from '../helpers/add-signing-placeholder';
+import { updateSigningPlaceholder } from '../helpers/update-signing-placeholder';
 
 export type SignWithLocalCertOptions = {
   pdf: Buffer;
 };
 
 export const signWithLocalCert = async ({ pdf }: SignWithLocalCertOptions) => {
-  const pdfWithPlaceholder = await addSigningPlaceholder({ pdf });
+  const { pdf: pdfWithPlaceholder, byteRange } = updateSigningPlaceholder({
+    pdf: await addSigningPlaceholder({ pdf }),
+  });
 
-  let p12Cert: Buffer | null = null;
+  const pdfWithoutSignature = Buffer.concat([
+    pdfWithPlaceholder.subarray(0, byteRange[1]),
+    pdfWithPlaceholder.subarray(byteRange[2]),
+  ]);
+
+  const signatureLength = byteRange[2] - byteRange[1];
+
+  let cert: Buffer | null = null;
 
   if (process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS) {
-    p12Cert = Buffer.from(process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS, 'base64');
+    cert = Buffer.from(process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS, 'base64');
   }
 
-  if (!p12Cert) {
-    p12Cert = Buffer.from(
+  if (!cert) {
+    cert = Buffer.from(
       fs.readFileSync(process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH || './example/cert.p12'),
     );
   }
 
-  if (process.env.NEXT_PRIVATE_SIGNING_PASSPHRASE) {
-    return signer.sign(pdfWithPlaceholder, p12Cert, {
-      passphrase: process.env.NEXT_PRIVATE_SIGNING_PASSPHRASE,
-    });
-  }
+  const signature = signWithP12({
+    cert,
+    content: pdfWithoutSignature,
+    password: process.env.NEXT_PRIVATE_SIGNING_PASSPHRASE || undefined,
+  });
 
-  return signer.sign(pdfWithPlaceholder, p12Cert);
+  const signatureAsHex = signature.toString('hex');
+
+  const signedPdf = Buffer.concat([
+    pdfWithPlaceholder.subarray(0, byteRange[1]),
+    Buffer.from(`<${signatureAsHex.padEnd(signatureLength - 2, '0')}>`),
+    pdfWithPlaceholder.subarray(byteRange[2]),
+  ]);
+
+  return signedPdf;
 };

packages/trpc/client/index.ts

@@ -1,16 +1,22 @@
-import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
+import { createTRPCProxyClient, httpBatchLink, httpLink, splitLink } from '@trpc/client';
 import SuperJSON from 'superjson';
 
 import { getBaseUrl } from '@documenso/lib/universal/get-base-url';
 
-import { AppRouter } from '../server/router';
+import type { AppRouter } from '../server/router';
 
 export const trpc = createTRPCProxyClient<AppRouter>({
   transformer: SuperJSON,
 
   links: [
-    httpBatchLink({
-      url: `${getBaseUrl()}/api/trpc`,
+    splitLink({
+      condition: (op) => op.context.skipBatch === true,
+      true: httpLink({
+        url: `${getBaseUrl()}/api/trpc`,
+      }),
+      false: httpBatchLink({
+        url: `${getBaseUrl()}/api/trpc`,
+      }),
     }),
   ],
 });

packages/trpc/react/index.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import type { QueryClientConfig } from '@tanstack/react-query';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { httpBatchLink } from '@trpc/client';
+import { httpBatchLink, httpLink, splitLink } from '@trpc/client';
 import { createTRPCReact } from '@trpc/react-query';
 import SuperJSON from 'superjson';
 
@@ -12,12 +12,22 @@ import { getBaseUrl } from '@documenso/lib/universal/get-base-url';
 
 import type { AppRouter } from '../server/router';
 
+export { getQueryKey } from '@trpc/react-query';
+
 export const trpc = createTRPCReact<AppRouter>({
-  unstable_overrides: {
+  overrides: {
     useMutation: {
       async onSuccess(opts) {
         await opts.originalFn();
-        await opts.queryClient.invalidateQueries();
+
+        if (opts.meta.doNotInvalidateQueryOnMutation) {
+          return;
+        }
+
+        // Invalidate all queries besides ones that specify not to in the meta data.
+        await opts.queryClient.invalidateQueries({
+          predicate: (query) => !query?.meta?.doNotInvalidateQueryOnMutation,
+        });
       },
     },
   },
@@ -55,8 +65,14 @@ export function TrpcProvider({ children }: TrpcProviderProps) {
       transformer: SuperJSON,
 
       links: [
-        httpBatchLink({
-          url: `${getBaseUrl()}/api/trpc`,
+        splitLink({
+          condition: (op) => op.context.skipBatch === true,
+          true: httpLink({
+            url: `${getBaseUrl()}/api/trpc`,
+          }),
+          false: httpBatchLink({
+            url: `${getBaseUrl()}/api/trpc`,
+          }),
         }),
       ],
     }),

packages/trpc/server/auth-router/router.ts

@@ -1,15 +1,31 @@
+import type { RegistrationResponseJSON } from '@simplewebauthn/types';
 import { TRPCError } from '@trpc/server';
+import { parse } from 'cookie-es';
 import { env } from 'next-runtime-env';
 
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { ErrorCode } from '@documenso/lib/next-auth/error-codes';
+import { createPasskey } from '@documenso/lib/server-only/auth/create-passkey';
+import { createPasskeyRegistrationOptions } from '@documenso/lib/server-only/auth/create-passkey-registration-options';
+import { createPasskeySigninOptions } from '@documenso/lib/server-only/auth/create-passkey-signin-options';
+import { deletePasskey } from '@documenso/lib/server-only/auth/delete-passkey';
+import { findPasskeys } from '@documenso/lib/server-only/auth/find-passkeys';
 import { compareSync } from '@documenso/lib/server-only/auth/hash';
+import { updatePasskey } from '@documenso/lib/server-only/auth/update-passkey';
 import { createUser } from '@documenso/lib/server-only/user/create-user';
 import { sendConfirmationToken } from '@documenso/lib/server-only/user/send-confirmation-token';
+import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 
 import { authenticatedProcedure, procedure, router } from '../trpc';
-import { ZSignUpMutationSchema, ZVerifyPasswordMutationSchema } from './schema';
+import {
+  ZCreatePasskeyMutationSchema,
+  ZDeletePasskeyMutationSchema,
+  ZFindPasskeysQuerySchema,
+  ZSignUpMutationSchema,
+  ZUpdatePasskeyMutationSchema,
+  ZVerifyPasswordMutationSchema,
+} from './schema';
 
 const NEXT_PUBLIC_DISABLE_SIGNUP = () => env('NEXT_PUBLIC_DISABLE_SIGNUP');
 
@@ -78,4 +94,126 @@ export const authRouter = router({
 
       return valid;
     }),
+
+  createPasskey: authenticatedProcedure
+    .input(ZCreatePasskeyMutationSchema)
+    .mutation(async ({ ctx, input }) => {
+      try {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        const verificationResponse = input.verificationResponse as RegistrationResponseJSON;
+
+        return await createPasskey({
+          userId: ctx.user.id,
+          verificationResponse,
+          passkeyName: input.passkeyName,
+          requestMetadata: extractNextApiRequestMetadata(ctx.req),
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
+  createPasskeyRegistrationOptions: authenticatedProcedure.mutation(async ({ ctx }) => {
+    try {
+      return await createPasskeyRegistrationOptions({
+        userId: ctx.user.id,
+      });
+    } catch (err) {
+      console.error(err);
+
+      throw new TRPCError({
+        code: 'BAD_REQUEST',
+        message:
+          'We were unable to create the registration options for the passkey. Please try again later.',
+      });
+    }
+  }),
+
+  createPasskeySigninOptions: procedure.mutation(async ({ ctx }) => {
+    const sessionIdToken = parse(ctx.req.headers.cookie ?? '')['next-auth.csrf-token'];
+
+    if (!sessionIdToken) {
+      throw new Error('Missing CSRF token');
+    }
+
+    const [sessionId] = decodeURI(sessionIdToken).split('|');
+
+    try {
+      return await createPasskeySigninOptions({ sessionId });
+    } catch (err) {
+      console.error(err);
+
+      throw new TRPCError({
+        code: 'BAD_REQUEST',
+        message: 'We were unable to create the options for passkey signin. Please try again later.',
+      });
+    }
+  }),
+
+  deletePasskey: authenticatedProcedure
+    .input(ZDeletePasskeyMutationSchema)
+    .mutation(async ({ ctx, input }) => {
+      try {
+        const { passkeyId } = input;
+
+        await deletePasskey({
+          userId: ctx.user.id,
+          passkeyId,
+          requestMetadata: extractNextApiRequestMetadata(ctx.req),
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to delete this passkey. Please try again later.',
+        });
+      }
+    }),
+
+  findPasskeys: authenticatedProcedure
+    .input(ZFindPasskeysQuerySchema)
+    .query(async ({ input, ctx }) => {
+      try {
+        const { page, perPage, orderBy } = input;
+
+        return await findPasskeys({
+          page,
+          perPage,
+          orderBy,
+          userId: ctx.user.id,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to find passkeys. Please try again later.',
+        });
+      }
+    }),
+
+  updatePasskey: authenticatedProcedure
+    .input(ZUpdatePasskeyMutationSchema)
+    .mutation(async ({ ctx, input }) => {
+      try {
+        const { passkeyId, name } = input;
+
+        await updatePasskey({
+          userId: ctx.user.id,
+          passkeyId,
+          name,
+          requestMetadata: extractNextApiRequestMetadata(ctx.req),
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to update this passkey. Please try again later.',
+        });
+      }
+    }),
 });

packages/trpc/server/auth-router/schema.ts

@@ -1,5 +1,8 @@
 import { z } from 'zod';
 
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { ZRegistrationResponseJSONSchema } from '@documenso/lib/types/webauthn';
+
 export const ZCurrentPasswordSchema = z
   .string()
   .min(6, { message: 'Must be at least 6 characters in length' })
@@ -32,6 +35,29 @@ export const ZSignUpMutationSchema = z.object({
     .optional(),
 });
 
+export const ZCreatePasskeyMutationSchema = z.object({
+  passkeyName: z.string().trim().min(1),
+  verificationResponse: ZRegistrationResponseJSONSchema,
+});
+
+export const ZDeletePasskeyMutationSchema = z.object({
+  passkeyId: z.string().trim().min(1),
+});
+
+export const ZUpdatePasskeyMutationSchema = z.object({
+  passkeyId: z.string().trim().min(1),
+  name: z.string().trim().min(1),
+});
+
+export const ZFindPasskeysQuerySchema = ZBaseTableSearchParamsSchema.extend({
+  orderBy: z
+    .object({
+      column: z.enum(['createdAt', 'updatedAt', 'name']),
+      direction: z.enum(['asc', 'desc']),
+    })
+    .optional(),
+});
+
 export type TSignUpMutationSchema = z.infer<typeof ZSignUpMutationSchema>;
 
 export const ZVerifyPasswordMutationSchema = ZSignUpMutationSchema.pick({ password: true });

packages/trpc/server/document-router/router.ts

@@ -9,12 +9,14 @@ import { duplicateDocumentById } from '@documenso/lib/server-only/document/dupli
 import { findDocumentAuditLogs } from '@documenso/lib/server-only/document/find-document-audit-logs';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
 import { resendDocument } from '@documenso/lib/server-only/document/resend-document';
 import { searchDocumentsWithKeyword } from '@documenso/lib/server-only/document/search-documents-with-keyword';
 import { sendDocument } from '@documenso/lib/server-only/document/send-document';
 import { updateTitle } from '@documenso/lib/server-only/document/update-title';
 import { symmetricEncrypt } from '@documenso/lib/universal/crypto';
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { buildServerLogger } from '@documenso/lib/utils/logger';
 
 import { authenticatedProcedure, procedure, router } from '../trpc';
 import {
@@ -23,6 +25,7 @@ import {
   ZFindDocumentAuditLogsQuerySchema,
   ZGetDocumentByIdQuerySchema,
   ZGetDocumentByTokenQuerySchema,
+  ZGetDocumentWithDetailsByIdQuerySchema,
   ZResendDocumentMutationSchema,
   ZSearchDocumentsMutationSchema,
   ZSendDocumentMutationSchema,
@@ -30,6 +33,12 @@ import {
   ZSetTitleForDocumentMutationSchema,
 } from './schema';
 
+const logger = buildServerLogger({
+  args: {
+    context: 'trpcDocumentRouter',
+  },
+});
+
 export const documentRouter = router({
   getDocumentById: authenticatedProcedure
     .input(ZGetDocumentByIdQuerySchema)
@@ -40,6 +49,10 @@ export const documentRouter = router({
           userId: ctx.user.id,
         });
       } catch (err) {
+        logger.error('getDocumentById', {
+          error: err,
+        });
+
         console.error(err);
 
         throw new TRPCError({
@@ -57,6 +70,10 @@ export const documentRouter = router({
         token,
       });
     } catch (err) {
+      logger.error('getDocumentByToken', {
+        error: err,
+      });
+
       console.error(err);
 
       throw new TRPCError({
@@ -66,6 +83,28 @@ export const documentRouter = router({
     }
   }),
 
+  getDocumentWithDetailsById: authenticatedProcedure
+    .input(ZGetDocumentWithDetailsByIdQuerySchema)
+    .query(async ({ input, ctx }) => {
+      try {
+        return await getDocumentWithDetailsById({
+          ...input,
+          userId: ctx.user.id,
+        });
+      } catch (err) {
+        logger.error('getDocumentWithDetailsById', {
+          error: err,
+        });
+
+        console.error(err);
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to find this document. Please try again later.',
+        });
+      }
+    }),
+
   createDocument: authenticatedProcedure
     .input(ZCreateDocumentMutationSchema)
     .mutation(async ({ input, ctx }) => {
@@ -90,6 +129,10 @@ export const documentRouter = router({
           requestMetadata: extractNextApiRequestMetadata(ctx.req),
         });
       } catch (err) {
+        logger.error('createDocument', {
+          error: err,
+        });
+
         if (err instanceof TRPCError) {
           throw err;
         }
@@ -116,6 +159,10 @@ export const documentRouter = router({
           requestMetadata: extractNextApiRequestMetadata(ctx.req),
         });
       } catch (err) {
+        logger.error('deleteDocument', {
+          error: err,
+        });
+
         console.error(err);
 
         throw new TRPCError({
@@ -141,6 +188,10 @@ export const documentRouter = router({
           userId: ctx.user.id,
         });
       } catch (err) {
+        logger.error('findDocumentAuditLogs', {
+          error: err,
+        });
+
         console.error(err);
 
         throw new TRPCError({
@@ -157,13 +208,21 @@ export const documentRouter = router({
 
       const userId = ctx.user.id;
 
-      return await updateTitle({
-        title,
-        userId,
-        teamId,
-        documentId,
-        requestMetadata: extractNextApiRequestMetadata(ctx.req),
-      });
+      try {
+        return await updateTitle({
+          title,
+          userId,
+          teamId,
+          documentId,
+          requestMetadata: extractNextApiRequestMetadata(ctx.req),
+        });
+      } catch (err) {
+        logger.error('setTitleForDocument', {
+          error: err,
+        });
+
+        console.error(err);
+      }
     }),
 
   setPasswordForDocument: authenticatedProcedure
@@ -190,6 +249,10 @@ export const documentRouter = router({
           requestMetadata: extractNextApiRequestMetadata(ctx.req),
         });
       } catch (err) {
+        logger.error('setPasswordForDocument', {
+          error: err,
+        });
+
         console.error(err);
 
         throw new TRPCError({
@@ -225,6 +288,10 @@ export const documentRouter = router({
           requestMetadata: extractNextApiRequestMetadata(ctx.req),
         });
       } catch (err) {
+        logger.error('sendDocument', {
+          error: err,
+        });
+
         console.error(err);
 
         throw new TRPCError({
@@ -244,6 +311,10 @@ export const documentRouter = router({
           requestMetadata: extractNextApiRequestMetadata(ctx.req),
         });
       } catch (err) {
+        logger.error('resendDocument', {
+          error: err,
+        });
+
         console.error(err);
 
         throw new TRPCError({
@@ -262,6 +333,10 @@ export const documentRouter = router({
           ...input,
         });
       } catch (err) {
+        logger.error('duplicateDocument', {
+          error: err,
+        });
+
         console.log(err);
 
         throw new TRPCError({
@@ -282,7 +357,11 @@ export const documentRouter = router({
           userId: ctx.user.id,
         });
         return documents;
-      } catch (error) {
+      } catch (err) {
+        logger.error('searchDocuments', {
+          error: err,
+        });
+
         throw new TRPCError({
           code: 'BAD_REQUEST',
           message: 'We are unable to search for documents. Please try again later.',

packages/trpc/server/document-router/schema.ts

@@ -29,6 +29,15 @@ export const ZGetDocumentByTokenQuerySchema = z.object({
 
 export type TGetDocumentByTokenQuerySchema = z.infer<typeof ZGetDocumentByTokenQuerySchema>;
 
+export const ZGetDocumentWithDetailsByIdQuerySchema = z.object({
+  id: z.number().min(1),
+  teamId: z.number().min(1).optional(),
+});
+
+export type TGetDocumentWithDetailsByIdQuerySchema = z.infer<
+  typeof ZGetDocumentWithDetailsByIdQuerySchema
+>;
+
 export const ZCreateDocumentMutationSchema = z.object({
   title: z.string().min(1),
   documentDataId: z.string().min(1),

packages/trpc/server/field-router/router.ts

@@ -21,6 +21,10 @@ export const fieldRouter = router({
       try {
         const { documentId, fields } = input;
 
+        if (Date.now() > 0) {
+          throw new Error('Some demo error');
+        }
+
         return await setFieldsForDocument({
           documentId,
           userId: ctx.user.id,
@@ -37,7 +41,10 @@ export const fieldRouter = router({
           requestMetadata: extractNextApiRequestMetadata(ctx.req),
         });
       } catch (err) {
-        console.error(err);
+        console.error(err, {
+          level: 'CRITICAL',
+          context: 'fieldRouter.addFields',
+        });
 
         throw new TRPCError({
           code: 'BAD_REQUEST',

packages/trpc/server/two-factor-authentication-router/router.ts

@@ -1,34 +1,34 @@
 import { TRPCError } from '@trpc/server';
 
-import { ErrorCode } from '@documenso/lib/next-auth/error-codes';
+import { AppError } from '@documenso/lib/errors/app-error';
 import { disableTwoFactorAuthentication } from '@documenso/lib/server-only/2fa/disable-2fa';
 import { enableTwoFactorAuthentication } from '@documenso/lib/server-only/2fa/enable-2fa';
-import { getBackupCodes } from '@documenso/lib/server-only/2fa/get-backup-code';
 import { setupTwoFactorAuthentication } from '@documenso/lib/server-only/2fa/setup-2fa';
-import { compareSync } from '@documenso/lib/server-only/auth/hash';
+import { viewBackupCodes } from '@documenso/lib/server-only/2fa/view-backup-codes';
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 
 import { authenticatedProcedure, router } from '../trpc';
 import {
   ZDisableTwoFactorAuthenticationMutationSchema,
   ZEnableTwoFactorAuthenticationMutationSchema,
-  ZSetupTwoFactorAuthenticationMutationSchema,
   ZViewRecoveryCodesMutationSchema,
 } from './schema';
 
 export const twoFactorAuthenticationRouter = router({
-  setup: authenticatedProcedure
-    .input(ZSetupTwoFactorAuthenticationMutationSchema)
-    .mutation(async ({ ctx, input }) => {
-      const user = ctx.user;
-
-      const { password } = input;
-
+  setup: authenticatedProcedure.mutation(async ({ ctx }) => {
+    try {
       return await setupTwoFactorAuthentication({
-        user,
-        password,
+        user: ctx.user,
       });
-    }),
+    } catch (err) {
+      console.error(err);
+
+      throw new TRPCError({
+        code: 'BAD_REQUEST',
+        message: 'We were unable to setup two-factor authentication. Please try again later.',
+      });
+    }
+  }),
 
   enable: authenticatedProcedure
     .input(ZEnableTwoFactorAuthenticationMutationSchema)
@@ -44,7 +44,11 @@ export const twoFactorAuthenticationRouter = router({
           requestMetadata: extractNextApiRequestMetadata(ctx.req),
         });
       } catch (err) {
-        console.error(err);
+        const error = AppError.parseError(err);
+
+        if (error.code !== 'INCORRECT_TWO_FACTOR_CODE') {
+          console.error(err);
+        }
 
         throw new TRPCError({
           code: 'BAD_REQUEST',
@@ -59,16 +63,17 @@ export const twoFactorAuthenticationRouter = router({
       try {
         const user = ctx.user;
 
-        const { password, backupCode } = input;
-
         return await disableTwoFactorAuthentication({
           user,
-          password,
-          backupCode,
+          token: input.token,
           requestMetadata: extractNextApiRequestMetadata(ctx.req),
         });
       } catch (err) {
-        console.error(err);
+        const error = AppError.parseError(err);
+
+        if (error.code !== 'INCORRECT_TWO_FACTOR_CODE') {
+          console.error(err);
+        }
 
         throw new TRPCError({
           code: 'BAD_REQUEST',
@@ -81,38 +86,18 @@ export const twoFactorAuthenticationRouter = router({
     .input(ZViewRecoveryCodesMutationSchema)
     .mutation(async ({ ctx, input }) => {
       try {
-        const user = ctx.user;
-
-        const { password } = input;
-
-        if (!user.twoFactorEnabled) {
-          throw new TRPCError({
-            code: 'BAD_REQUEST',
-            message: ErrorCode.TWO_FACTOR_SETUP_REQUIRED,
-          });
-        }
-
-        if (!user.password || !compareSync(password, user.password)) {
-          throw new TRPCError({
-            code: 'UNAUTHORIZED',
-            message: ErrorCode.INCORRECT_PASSWORD,
-          });
-        }
-
-        const recoveryCodes = await getBackupCodes({ user });
-
-        return { recoveryCodes };
-      } catch (err) {
-        console.error(err);
-
-        if (err instanceof TRPCError) {
-          throw err;
-        }
-
-        throw new TRPCError({
-          code: 'BAD_REQUEST',
-          message: 'We were unable to view your recovery codes. Please try again later.',
+        return await viewBackupCodes({
+          user: ctx.user,
+          token: input.token,
         });
+      } catch (err) {
+        const error = AppError.parseError(err);
+
+        if (error.code !== 'INCORRECT_TWO_FACTOR_CODE') {
+          console.error(err);
+        }
+
+        throw AppError.parseErrorToTRPCError(err);
       }
     }),
 });

packages/trpc/server/two-factor-authentication-router/schema.ts

@@ -1,13 +1,5 @@
 import { z } from 'zod';
 
-export const ZSetupTwoFactorAuthenticationMutationSchema = z.object({
-  password: z.string().min(1),
-});
-
-export type TSetupTwoFactorAuthenticationMutationSchema = z.infer<
-  typeof ZSetupTwoFactorAuthenticationMutationSchema
->;
-
 export const ZEnableTwoFactorAuthenticationMutationSchema = z.object({
   code: z.string().min(6).max(6),
 });
@@ -17,8 +9,7 @@ export type TEnableTwoFactorAuthenticationMutationSchema = z.infer<
 >;
 
 export const ZDisableTwoFactorAuthenticationMutationSchema = z.object({
-  password: z.string().min(6).max(72),
-  backupCode: z.string().trim(),
+  token: z.string().trim().min(1),
 });
 
 export type TDisableTwoFactorAuthenticationMutationSchema = z.infer<
@@ -26,7 +17,7 @@ export type TDisableTwoFactorAuthenticationMutationSchema = z.infer<
 >;
 
 export const ZViewRecoveryCodesMutationSchema = z.object({
-  password: z.string().min(6).max(72),
+  token: z.string().trim().min(1),
 });
 
 export type TViewRecoveryCodesMutationSchema = z.infer<typeof ZViewRecoveryCodesMutationSchema>;

packages/tsconfig/process-env.d.ts

@@ -30,6 +30,10 @@ declare namespace NodeJS {
     NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH?: string;
     NEXT_PRIVATE_SIGNING_LOCAL_FILE_CONTENTS?: string;
     NEXT_PRIVATE_SIGNING_LOCAL_FILE_ENCODING?: string;
+    NEXT_PRIVATE_SIGNING_GCLOUD_HSM_KEY_PATH?: string;
+    NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_PATH?: string;
+    NEXT_PRIVATE_SIGNING_GCLOUD_HSM_PUBLIC_CRT_FILE_CONTENTS?: string;
+    NEXT_PRIVATE_SIGNING_GCLOUD_APPLICATION_CREDENTIALS_CONTENTS?: string;
 
     NEXT_PRIVATE_SMTP_TRANSPORT?: 'mailchannels' | 'resend' | 'smtp-auth' | 'smtp-api';
 

packages/ui/primitives/document-flow/add-signers.tsx

@@ -151,9 +151,10 @@ export const AddSignersFormPartial = ({
 
           <AnimatePresence>
             {signers.map((signer, index) => (
-              <motion.div
+              <motion.fieldset
                 key={signer.id}
                 data-native-id={signer.nativeId}
+                disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
                 className="flex flex-wrap items-end gap-x-4"
               >
                 <div className="flex-1">
@@ -202,7 +203,11 @@ export const AddSignersFormPartial = ({
                     control={control}
                     name={`signers.${index}.role`}
                     render={({ field: { value, onChange } }) => (
-                      <Select value={value} onValueChange={(x) => onChange(x)}>
+                      <Select
+                        value={value}
+                        onValueChange={(x) => onChange(x)}
+                        disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
+                      >
                         <SelectTrigger className="bg-background">{ROLE_ICONS[value]}</SelectTrigger>
 
                         <SelectContent className="" align="end">
@@ -258,7 +263,7 @@ export const AddSignersFormPartial = ({
                   <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.email} />
                   <FormErrorMessage className="mt-2" error={errors.signers?.[index]?.name} />
                 </div>
-              </motion.div>
+              </motion.fieldset>
             ))}
           </AnimatePresence>
         </div>