Merge branch 'main' into chore/sunset-early-adopters

.env.example

@@ -13,6 +13,10 @@ NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="DEADBEEF"
 NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
 NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
 
+NEXT_PRIVATE_OIDC_WELL_KNOWN=""
+NEXT_PRIVATE_OIDC_CLIENT_ID=""
+NEXT_PRIVATE_OIDC_CLIENT_SECRET=""
+
 # [[URLS]]
 NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
 NEXT_PUBLIC_MARKETING_URL="http://localhost:3001"
@@ -75,7 +79,7 @@ NEXT_PRIVATE_SMTP_APIKEY=
 # OPTIONAL: Defines whether to force the use of TLS.
 NEXT_PRIVATE_SMTP_SECURE=
 # REQUIRED: Defines the sender name to use for the from address.
-NEXT_PRIVATE_SMTP_FROM_NAME="No Reply @ Documenso"
+NEXT_PRIVATE_SMTP_FROM_NAME="Documenso"
 # REQUIRED: Defines the email address to use as the from address.
 NEXT_PRIVATE_SMTP_FROM_ADDRESS="noreply@documenso.com"
 # OPTIONAL: The API key to use for Resend.com

.gitpod.yml

@@ -6,7 +6,7 @@ tasks:
       set -a; source .env &&
       export NEXTAUTH_URL="$(gp url 3000)" &&
       export NEXT_PUBLIC_WEBAPP_URL="$(gp url 3000)" &&
-      export NEXT_PUBLIC_MARKETING_URL="$(gp url 3001)" 
+      export NEXT_PUBLIC_MARKETING_URL="$(gp url 3001)"
     command: npm run d
 
 ports:
@@ -25,20 +25,10 @@ ports:
   - port: 2500
     visibility: private
     onOpen: ignore
-  - port: 54320 
-    visibility: private 
+  - port: 54320
+    visibility: private
     onOpen: ignore
 
-
-github:
-  prebuilds:
-    master: true
-    pullRequests: true
-    pullRequestsFromForks: true
-    addCheck: true
-    addComment: true
-    addBadge: true
-
 vscode:
   extensions:
     - aaron-bond.better-comments
@@ -47,9 +37,5 @@ vscode:
     - esbenp.prettier-vscode
     - mikestead.dotenv
     - unifiedjs.vscode-mdx
-    - GitHub.copilot-chat
-    - GitHub.copilot-labs
-    - GitHub.copilot
     - GitHub.vscode-pull-request-github
     - Prisma.prisma
-    - VisualStudioExptTeam.vscodeintellicode

apps/marketing/next.config.js

@@ -18,6 +18,10 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
   path.join(__dirname, '../../packages/assets/fonts/caveat.ttf'),
 );
 
+const FONT_NOTO_SANS_BYTES = fs.readFileSync(
+  path.join(__dirname, '../../packages/assets/fonts/noto-sans.ttf'),
+);
+
 /** @type {import('next').NextConfig} */
 const config = {
   experimental: {
@@ -38,6 +42,7 @@ const config = {
   env: {
     NEXT_PUBLIC_PROJECT: 'marketing',
     FONT_CAVEAT_URI: `data:font/ttf;base64,${FONT_CAVEAT_BYTES.toString('base64')}`,
+    FONT_NOTO_SANS_URI: `data:font/ttf;base64,${FONT_NOTO_SANS_BYTES.toString('base64')}`,
   },
   modularizeImports: {
     'lucide-react': {

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

@@ -3,11 +3,11 @@
 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 type { GetCompletedDocumentsMonthlyResult } from '@documenso/lib/server-only/user/get-monthly-completed-document';
 
 export type MonthlyCompletedDocumentsChartProps = {
   className?: string;
-  data: GetUserMonthlyGrowthResult;
+  data: GetCompletedDocumentsMonthlyResult;
 };
 
 export const MonthlyCompletedDocumentsChart = ({

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

@@ -3,11 +3,11 @@
 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 type { GetCompletedDocumentsMonthlyResult } from '@documenso/lib/server-only/user/get-monthly-completed-document';
 
 export type TotalSignedDocumentsChartProps = {
   className?: string;
-  data: GetUserMonthlyGrowthResult;
+  data: GetCompletedDocumentsMonthlyResult;
 };
 
 export const TotalSignedDocumentsChart = ({ className, data }: TotalSignedDocumentsChartProps) => {

apps/marketing/src/app/(marketing)/singleplayer/client.tsx

@@ -248,6 +248,7 @@ export const SinglePlayerClient = () => {
                   recipients={uploadedFile ? [placeholderRecipient] : []}
                   fields={fields}
                   onSubmit={onFieldsSubmit}
+                  canGoBack={true}
                   isDocumentPdfLoaded={true}
                 />
               </fieldset>

apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx

@@ -70,7 +70,7 @@ export const ShareConnectPaidWidgetBento = ({
           <CardContent className="grid grid-cols-1 gap-8 p-6">
             <p className="text-foreground/80 leading-relaxed">
               <strong className="block">Get paid (Soon).</strong>
-              Integrated payments with stripe so you don’t have to worry about getting paid.
+              Integrated payments with Stripe so you don’t have to worry about getting paid.
             </p>
 
             <div className="flex items-center justify-center p-8">

apps/marketing/src/pages/api/stripe/webhook/index.ts

@@ -13,6 +13,7 @@ import { updateFile } from '@documenso/lib/universal/upload/update-file';
 import { prisma } from '@documenso/prisma';
 import {
   DocumentDataType,
+  DocumentSource,
   DocumentStatus,
   FieldType,
   ReadStatus,
@@ -104,6 +105,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       const document = await prisma.document.create({
         data: {
+          source: DocumentSource.DOCUMENT,
           title: 'Documenso Supporter Pledge.pdf',
           status: DocumentStatus.COMPLETED,
           userId: user.id,

apps/web/next.config.js

@@ -18,6 +18,10 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
   path.join(__dirname, '../../packages/assets/fonts/caveat.ttf'),
 );
 
+const FONT_NOTO_SANS_BYTES = fs.readFileSync(
+  path.join(__dirname, '../../packages/assets/fonts/noto-sans.ttf'),
+);
+
 /** @type {import('next').NextConfig} */
 const config = {
   output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
@@ -42,6 +46,7 @@ const config = {
     APP_VERSION: version,
     NEXT_PUBLIC_PROJECT: 'web',
     FONT_CAVEAT_URI: `data:font/ttf;base64,${FONT_CAVEAT_BYTES.toString('base64')}`,
+    FONT_NOTO_SANS_URI: `data:font/ttf;base64,${FONT_NOTO_SANS_BYTES.toString('base64')}`,
   },
   modularizeImports: {
     'lucide-react': {

apps/web/package.json

@@ -28,6 +28,7 @@
     "cookie-es": "^1.0.0",
     "formidable": "^2.1.1",
     "framer-motion": "^10.12.8",
+    "input-otp": "^1.2.4",
     "lucide-react": "^0.279.0",
     "luxon": "^3.4.0",
     "micro": "^10.0.1",

apps/web/process-env.d.ts

@@ -12,5 +12,9 @@ declare namespace NodeJS {
 
     NEXT_PRIVATE_GOOGLE_CLIENT_ID: string;
     NEXT_PRIVATE_GOOGLE_CLIENT_SECRET: string;
+
+    NEXT_PRIVATE_OIDC_WELL_KNOWN: string;
+    NEXT_PRIVATE_OIDC_CLIENT_ID: string;
+    NEXT_PRIVATE_OIDC_CLIENT_SECRET: string;
   }
 }

apps/web/src/app/(dashboard)/admin/documents/[id]/admin-actions.tsx

@@ -2,7 +2,8 @@
 
 import Link from 'next/link';
 
-import { type Document, DocumentStatus } from '@documenso/prisma/client';
+import type { Recipient } from '@documenso/prisma/client';
+import { type Document, SigningStatus } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -17,9 +18,10 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type AdminActionsProps = {
   className?: string;
   document: Document;
+  recipients: Recipient[];
 };
 
-export const AdminActions = ({ className, document }: AdminActionsProps) => {
+export const AdminActions = ({ className, document, recipients }: AdminActionsProps) => {
   const { toast } = useToast();
 
   const { mutate: resealDocument, isLoading: isResealDocumentLoading } =
@@ -47,7 +49,9 @@ export const AdminActions = ({ className, document }: AdminActionsProps) => {
             <Button
               variant="outline"
               loading={isResealDocumentLoading}
-              disabled={document.status !== DocumentStatus.COMPLETED}
+              disabled={recipients.some(
+                (recipient) => recipient.signingStatus !== SigningStatus.SIGNED,
+              )}
               onClick={() => resealDocument({ id: document.id })}
             >
               Reseal document

apps/web/src/app/(dashboard)/admin/documents/[id]/page.tsx

@@ -53,7 +53,7 @@ export default async function AdminDocumentDetailsPage({ params }: AdminDocument
 
       <h2 className="text-lg font-semibold">Admin Actions</h2>
 
-      <AdminActions className="mt-2" document={document} />
+      <AdminActions className="mt-2" document={document} recipients={document.Recipient} />
 
       <hr className="my-4" />
       <h2 className="text-lg font-semibold">Recipients</h2>

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -3,6 +3,7 @@
 import { useTransition } from 'react';
 
 import { Loader } from 'lucide-react';
+import { DateTime } from 'luxon';
 import { useSession } from 'next-auth/react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
@@ -62,7 +63,12 @@ export const DocumentsDataTable = ({
           {
             header: 'Created',
             accessorKey: 'createdAt',
-            cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+            cell: ({ row }) => (
+              <LocaleDate
+                date={row.original.createdAt}
+                format={{ ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }}
+              />
+            ),
           },
           {
             header: 'Title',

apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx

@@ -256,6 +256,7 @@ export const EditTemplateForm = ({
               documentFlow={documentFlow.signers}
               recipients={recipients}
               fields={fields}
+              templateDirectLink={template.directLink}
               onSubmit={onAddTemplatePlaceholderFormSubmit}
               isEnterprise={isEnterprise}
               isDocumentPdfLoaded={isDocumentPdfLoaded}

apps/web/src/app/(dashboard)/templates/[id]/template-direct-link-dialog-wrapper.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import { LinkIcon } from 'lucide-react';
+
+import type { Recipient, Template, TemplateDirectLink } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { TemplateDirectLinkDialog } from '../template-direct-link-dialog';
+
+export type TemplatePageViewProps = {
+  template: Template & { directLink?: TemplateDirectLink | null; Recipient: Recipient[] };
+};
+
+export const TemplateDirectLinkDialogWrapper = ({ template }: TemplatePageViewProps) => {
+  const [isTemplateDirectLinkOpen, setTemplateDirectLinkOpen] = useState(false);
+
+  return (
+    <div>
+      <Button
+        variant="outline"
+        className="px-3"
+        onClick={(e) => {
+          e.preventDefault();
+          setTemplateDirectLinkOpen(true);
+        }}
+      >
+        <LinkIcon className="mr-1.5 h-3.5 w-3.5" />
+        {template.directLink ? 'Manage' : 'Create'} Direct Link
+      </Button>
+
+      <TemplateDirectLinkDialog
+        template={template}
+        open={isTemplateDirectLinkOpen}
+        onOpenChange={setTemplateDirectLinkOpen}
+      />
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/templates/[id]/template-page-view.tsx

@@ -13,7 +13,9 @@ import type { Team } from '@documenso/prisma/client';
 
 import { TemplateType } from '~/components/formatter/template-type';
 
+import { TemplateDirectLinkBadge } from '../template-direct-link-badge';
 import { EditTemplateForm } from './edit-template';
+import { TemplateDirectLinkDialogWrapper } from './template-direct-link-dialog-wrapper';
 
 export type TemplatePageViewProps = {
   params: {
@@ -50,17 +52,33 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
 
   return (
     <div className="mx-auto -mt-4 max-w-screen-xl px-4 md:px-8">
-      <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
-        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Templates
-      </Link>
+      <div className="flex flex-col justify-between sm:flex-row">
+        <div>
+          <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
+            <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+            Templates
+          </Link>
 
-      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
-        {template.title}
-      </h1>
+          <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
+            {template.title}
+          </h1>
 
-      <div className="mt-2.5 flex items-center gap-x-6">
-        <TemplateType inheritColor type={template.type} className="text-muted-foreground" />
+          <div className="mt-2.5 flex items-center">
+            <TemplateType inheritColor className="text-muted-foreground" type={template.type} />
+
+            {template.directLink?.token && (
+              <TemplateDirectLinkBadge
+                className="ml-4"
+                token={template.directLink.token}
+                enabled={template.directLink.enabled}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="mt-2 sm:mt-0 sm:self-end">
+          <TemplateDirectLinkDialogWrapper template={template} />
+        </div>
       </div>
 
       <EditTemplateForm

apps/web/src/app/(dashboard)/templates/data-table-action-dropdown.tsx

@@ -4,10 +4,10 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
-import { Copy, Edit, MoreHorizontal, Trash2 } from 'lucide-react';
+import { Copy, Edit, MoreHorizontal, Share2Icon, Trash2 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
-import type { Template } from '@documenso/prisma/client';
+import { type FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -18,9 +18,10 @@ import {
 
 import { DeleteTemplateDialog } from './delete-template-dialog';
 import { DuplicateTemplateDialog } from './duplicate-template-dialog';
+import { TemplateDirectLinkDialog } from './template-direct-link-dialog';
 
 export type DataTableActionDropdownProps = {
-  row: Template;
+  row: FindTemplateRow;
   templateRootPath: string;
   teamId?: number;
 };
@@ -33,6 +34,7 @@ export const DataTableActionDropdown = ({
   const { data: session } = useSession();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isTemplateDirectLinkDialogOpen, setTemplateDirectLinkDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
 
   if (!session) {
@@ -66,6 +68,11 @@ export const DataTableActionDropdown = ({
           Duplicate
         </DropdownMenuItem>
 
+        <DropdownMenuItem onClick={() => setTemplateDirectLinkDialogOpen(true)}>
+          <Share2Icon className="mr-2 h-4 w-4" />
+          Direct link
+        </DropdownMenuItem>
+
         <DropdownMenuItem
           disabled={!isOwner && !isTeamTemplate}
           onClick={() => setDeleteDialogOpen(true)}
@@ -82,6 +89,12 @@ export const DataTableActionDropdown = ({
         onOpenChange={setDuplicateDialogOpen}
       />
 
+      <TemplateDirectLinkDialog
+        template={row}
+        open={isTemplateDirectLinkDialogOpen}
+        onOpenChange={setTemplateDirectLinkDialogOpen}
+      />
+
       <DeleteTemplateDialog
         id={row.id}
         open={isDeleteDialogOpen}

apps/web/src/app/(dashboard)/templates/data-table-templates.tsx

@@ -4,32 +4,26 @@ import { useTransition } from 'react';
 
 import Link from 'next/link';
 
-import { AlertTriangle, Loader } from 'lucide-react';
+import { AlertTriangle, Globe2Icon, InfoIcon, Link2Icon, Loader, LockIcon } from 'lucide-react';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import type { Recipient, Template } from '@documenso/prisma/client';
+import type { FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 import { LocaleDate } from '~/components/formatter/locale-date';
 import { TemplateType } from '~/components/formatter/template-type';
 
 import { DataTableActionDropdown } from './data-table-action-dropdown';
 import { DataTableTitle } from './data-table-title';
+import { TemplateDirectLinkBadge } from './template-direct-link-badge';
 import { UseTemplateDialog } from './use-template-dialog';
 
-type TemplateWithRecipient = Template & {
-  Recipient: Recipient[];
-};
-
 type TemplatesDataTableProps = {
-  templates: Array<
-    TemplateWithRecipient & {
-      team: { id: number; url: string } | null;
-    }
-  >;
+  templates: FindTemplateRow[];
   perPage: number;
   page: number;
   totalPages: number;
@@ -48,6 +42,7 @@ export const TemplatesDataTable = ({
   teamId,
 }: TemplatesDataTableProps) => {
   const [isPending, startTransition] = useTransition();
+
   const updateSearchParams = useUpdateSearchParams();
 
   const { remaining } = useLimits();
@@ -88,9 +83,70 @@ export const TemplatesDataTable = ({
             cell: ({ row }) => <DataTableTitle row={row.original} />,
           },
           {
-            header: 'Type',
+            header: () => (
+              <div className="flex flex-row items-center">
+                Type
+                <Tooltip>
+                  <TooltipTrigger>
+                    <InfoIcon className="mx-2 h-4 w-4" />
+                  </TooltipTrigger>
+
+                  <TooltipContent className="text-foreground max-w-md space-y-2 !p-0">
+                    <ul className="text-muted-foreground space-y-0.5 divide-y [&>li]:p-4">
+                      <li>
+                        <h2 className="mb-2 flex flex-row items-center font-semibold">
+                          <Globe2Icon className="mr-2 h-5 w-5 text-green-500 dark:text-green-300" />
+                          Public
+                        </h2>
+
+                        <p>
+                          Public templates are connected to your public profile. Any modifications
+                          to public templates will also appear in your public profile.
+                        </p>
+                      </li>
+                      <li>
+                        <div className="mb-2 flex w-fit flex-row items-center rounded border border-neutral-300 bg-neutral-200 px-1.5 py-0.5 text-xs dark:border-neutral-500 dark:bg-neutral-600">
+                          <Link2Icon className="mr-1 h-3 w-3" />
+                          direct link
+                        </div>
+
+                        <p>
+                          Direct link templates contain one dynamic recipient placeholder. Anyone
+                          with access to this link can sign the document, and it will then appear on
+                          your documents page.
+                        </p>
+                      </li>
+                      <li>
+                        <h2 className="mb-2 flex flex-row items-center font-semibold">
+                          <LockIcon className="mr-2 h-5 w-5 text-blue-600 dark:text-blue-300" />
+                          {teamId ? 'Team Only' : 'Private'}
+                        </h2>
+
+                        <p>
+                          {teamId
+                            ? 'Team only templates are not linked anywhere and are visible only to your team.'
+                            : 'Private templates can only be modified and viewed by you.'}
+                        </p>
+                      </li>
+                    </ul>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            ),
             accessorKey: 'type',
-            cell: ({ row }) => <TemplateType type={row.original.type} />,
+            cell: ({ row }) => (
+              <div className="flex flex-row items-center">
+                <TemplateType type="PRIVATE" />
+
+                {row.original.directLink?.token && (
+                  <TemplateDirectLinkBadge
+                    className="ml-2"
+                    token={row.original.directLink.token}
+                    enabled={row.original.directLink.enabled}
+                  />
+                )}
+              </div>
+            ),
           },
           {
             header: 'Actions',

apps/web/src/app/(dashboard)/templates/template-direct-link-badge.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { Link2Icon } from 'lucide-react';
+
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import { cn } from '@documenso/ui/lib/utils';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type TemplateDirectLinkBadgeProps = {
+  token: string;
+  enabled: boolean;
+  className?: string;
+};
+
+export const TemplateDirectLinkBadge = ({
+  token,
+  enabled,
+  className,
+}: TemplateDirectLinkBadgeProps) => {
+  const [, copy] = useCopyToClipboard();
+  const { toast } = useToast();
+
+  const onCopyClick = async (token: string) =>
+    copy(formatDirectTemplatePath(token)).then(() => {
+      toast({
+        title: 'Copied to clipboard',
+        description: 'The direct link has been copied to your clipboard',
+      });
+    });
+
+  return (
+    <button
+      title="Copy direct link"
+      className={cn(
+        'flex flex-row items-center rounded border border-neutral-300 bg-neutral-200 px-1.5 py-0.5 text-xs dark:border-neutral-500 dark:bg-neutral-600',
+        className,
+      )}
+      onClick={async () => onCopyClick(token)}
+    >
+      <Link2Icon className="mr-1 h-3 w-3" />
+      direct link {!enabled && 'disabled'}
+    </button>
+  );
+};

apps/web/src/app/(dashboard)/templates/template-direct-link-dialog.tsx

@@ -0,0 +1,448 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { CircleDotIcon, CircleIcon, ClipboardCopyIcon, InfoIcon, LoaderIcon } from 'lucide-react';
+import { P, match } from 'ts-pattern';
+
+import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import {
+  DIRECT_TEMPLATE_DOCUMENTATION,
+  DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+} from '@documenso/lib/constants/template';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import {
+  type Recipient,
+  RecipientRole,
+  type Template,
+  type TemplateDirectLink,
+} from '@documenso/prisma/client';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { Switch } from '@documenso/ui/primitives/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type TemplateDirectLinkDialogProps = {
+  template: Template & {
+    directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
+    Recipient: Recipient[];
+  };
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+type TemplateDirectLinkStep = 'ONBOARD' | 'SELECT_RECIPIENT' | 'MANAGE' | 'CONFIRM_DELETE';
+
+export const TemplateDirectLinkDialog = ({
+  template,
+  open,
+  onOpenChange,
+}: TemplateDirectLinkDialogProps) => {
+  const { toast } = useToast();
+  const { quota, remaining } = useLimits();
+
+  const [, copy] = useCopyToClipboard();
+  const router = useRouter();
+
+  const [isEnabled, setIsEnabled] = useState(template.directLink?.enabled ?? false);
+  const [token, setToken] = useState(template.directLink?.token ?? null);
+  const [selectedRecipientId, setSelectedRecipientId] = useState<number | null>(null);
+  const [currentStep, setCurrentStep] = useState<TemplateDirectLinkStep>(
+    token ? 'MANAGE' : 'ONBOARD',
+  );
+
+  const validDirectTemplateRecipients = useMemo(
+    () => template.Recipient.filter((recipient) => recipient.role !== RecipientRole.CC),
+    [template.Recipient],
+  );
+
+  const {
+    mutateAsync: createTemplateDirectLink,
+    isLoading: isCreatingTemplateDirectLink,
+    reset: resetCreateTemplateDirectLink,
+  } = trpcReact.template.createTemplateDirectLink.useMutation({
+    onSuccess: (data) => {
+      setToken(data.token);
+      setIsEnabled(data.enabled);
+      setCurrentStep('MANAGE');
+
+      router.refresh();
+    },
+    onError: () => {
+      setSelectedRecipientId(null);
+
+      toast({
+        title: 'Something went wrong',
+        description: 'Unable to create direct template access. Please try again later.',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const { mutateAsync: toggleTemplateDirectLink, isLoading: isTogglingTemplateAccess } =
+    trpcReact.template.toggleTemplateDirectLink.useMutation({
+      onSuccess: (data) => {
+        toast({
+          title: 'Success',
+          description: `Direct link signing has been ${data.enabled ? 'enabled' : 'disabled'}`,
+        });
+      },
+      onError: (_ctx, data) => {
+        toast({
+          title: 'Something went wrong',
+          description: `An error occurred while ${
+            data.enabled ? 'enabling' : 'disabling'
+          } direct link signing.`,
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const { mutateAsync: deleteTemplateDirectLink, isLoading: isDeletingTemplateDirectLink } =
+    trpcReact.template.deleteTemplateDirectLink.useMutation({
+      onSuccess: () => {
+        onOpenChange(false);
+        setToken(null);
+
+        toast({
+          title: 'Success',
+          description: 'Direct template link deleted',
+          duration: 5000,
+        });
+
+        router.refresh();
+        setToken(null);
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          description:
+            'We encountered an error while removing the direct template link. Please try again later.',
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const onCopyClick = async (token: string) =>
+    copy(formatDirectTemplatePath(token)).then(() => {
+      toast({
+        title: 'Copied to clipboard',
+        description: 'The direct link has been copied to your clipboard',
+      });
+    });
+
+  const onRecipientTableRowClick = async (recipientId: number) => {
+    if (isLoading) {
+      return;
+    }
+
+    setSelectedRecipientId(recipientId);
+
+    await createTemplateDirectLink({
+      templateId: template.id,
+      directRecipientId: recipientId,
+    });
+  };
+
+  const isLoading =
+    isCreatingTemplateDirectLink || isTogglingTemplateAccess || isDeletingTemplateDirectLink;
+
+  useEffect(() => {
+    resetCreateTemplateDirectLink();
+    setCurrentStep(token ? 'MANAGE' : 'ONBOARD');
+    setSelectedRecipientId(null);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+      <fieldset disabled={isLoading} className="relative">
+        <AnimateGenericFadeInOut motionKey={currentStep}>
+          {match({ token, currentStep })
+            .with({ token: P.nullish, currentStep: 'ONBOARD' }, () => (
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Create Direct Signing Link</DialogTitle>
+
+                  <DialogDescription>Here's how it works:</DialogDescription>
+                </DialogHeader>
+
+                <ul className="mt-4 space-y-4 pl-12">
+                  {DIRECT_TEMPLATE_DOCUMENTATION.map((step, index) => (
+                    <li className="relative" key={index}>
+                      <div className="absolute -left-12">
+                        <div className="flex h-8 w-8 items-center justify-center rounded-full border-[3px] border-neutral-200 text-sm font-bold">
+                          {index + 1}
+                        </div>
+                      </div>
+
+                      <h3 className="font-semibold">{step.title}</h3>
+                      <p className="text-muted-foreground mt-1 text-sm">{step.description}</p>
+                    </li>
+                  ))}
+                </ul>
+
+                {remaining.directTemplates === 0 && (
+                  <Alert variant="warning">
+                    <AlertTitle>
+                      Direct template link usage exceeded ({quota.directTemplates}/
+                      {quota.directTemplates})
+                    </AlertTitle>
+                    <AlertDescription>
+                      You have reached the maximum limit of {quota.directTemplates} direct
+                      templates.{' '}
+                      <Link
+                        className="mt-1 block underline underline-offset-4"
+                        href="/settings/billing"
+                      >
+                        Upgrade your account to continue!
+                      </Link>
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+                {remaining.directTemplates !== 0 && (
+                  <DialogFooter className="mx-auto mt-4">
+                    <Button type="button" onClick={() => setCurrentStep('SELECT_RECIPIENT')}>
+                      Enable direct link signing
+                    </Button>
+                  </DialogFooter>
+                )}
+              </DialogContent>
+            ))
+            .with({ token: P.nullish, currentStep: 'SELECT_RECIPIENT' }, () => (
+              <DialogContent className="relative">
+                {isCreatingTemplateDirectLink && validDirectTemplateRecipients.length !== 0 && (
+                  <div className="absolute inset-0 z-50 flex items-center justify-center rounded bg-white/50 dark:bg-black/50">
+                    <LoaderIcon className="h-6 w-6 animate-spin text-gray-500" />
+                  </div>
+                )}
+
+                <DialogHeader>
+                  <DialogTitle>Choose Direct Link Recipient</DialogTitle>
+
+                  <DialogDescription>
+                    Choose an existing recipient from below to continue
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div className="custom-scrollbar max-h-[60vh] overflow-y-auto rounded-md border">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Recipient</TableHead>
+                        <TableHead>Role</TableHead>
+                        <TableHead></TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {validDirectTemplateRecipients.length === 0 && (
+                        <TableRow>
+                          <TableCell colSpan={3} className="h-16 text-center">
+                            <p className="text-muted-foreground">No valid recipients found</p>
+                          </TableCell>
+                        </TableRow>
+                      )}
+
+                      {validDirectTemplateRecipients.map((row) => (
+                        <TableRow
+                          className="cursor-pointer"
+                          key={row.id}
+                          onClick={async () => onRecipientTableRowClick(row.id)}
+                        >
+                          <TableCell>
+                            <div className="text-muted-foreground text-sm">
+                              <p>{row.name}</p>
+                              <p className="text-muted-foreground/70 text-xs">{row.email}</p>
+                            </div>
+                          </TableCell>
+
+                          <TableCell className="text-muted-foreground text-sm">
+                            {RECIPIENT_ROLES_DESCRIPTION[row.role].roleName}
+                          </TableCell>
+
+                          <TableCell>
+                            {selectedRecipientId === row.id ? (
+                              <CircleDotIcon className="h-5 w-5 text-neutral-300" />
+                            ) : (
+                              <CircleIcon className="h-5 w-5 text-neutral-300" />
+                            )}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+
+                {/* Prevent creating placeholder direct template recipient if the email already exists. */}
+                {!template.Recipient.some(
+                  (recipient) => recipient.email === DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+                ) && (
+                  <DialogFooter className="mx-auto">
+                    <div className="flex flex-col items-center justify-center">
+                      {validDirectTemplateRecipients.length !== 0 && (
+                        <p className="text-muted-foreground text-sm">Or</p>
+                      )}
+
+                      <Button
+                        type="button"
+                        className="mt-2"
+                        loading={isCreatingTemplateDirectLink && !selectedRecipientId}
+                        onClick={async () =>
+                          createTemplateDirectLink({
+                            templateId: template.id,
+                          })
+                        }
+                      >
+                        Create one automatically
+                      </Button>
+                    </div>
+                  </DialogFooter>
+                )}
+              </DialogContent>
+            ))
+            .with({ token: P.string, currentStep: 'MANAGE' }, ({ token }) => (
+              <DialogContent className="relative">
+                <DialogHeader>
+                  <DialogTitle>Direct Link Signing</DialogTitle>
+
+                  <DialogDescription>
+                    Manage the direct link signing for this template
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div>
+                  <div className="flex flex-row items-center justify-between">
+                    <Label className="flex flex-row">
+                      Enable Direct Link Signing
+                      <Tooltip>
+                        <TooltipTrigger tabIndex={-1} className="ml-2">
+                          <InfoIcon className="h-4 w-4" />
+                        </TooltipTrigger>
+                        <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                          Disabling direct link signing will prevent anyone from accessing the link.
+                        </TooltipContent>
+                      </Tooltip>
+                    </Label>
+
+                    <Switch
+                      className="mt-2"
+                      checked={isEnabled}
+                      onCheckedChange={(value) => setIsEnabled(value)}
+                    />
+                  </div>
+
+                  <div className="mt-2">
+                    <Label htmlFor="copy-direct-link">Copy Shareable Link</Label>
+
+                    <div className="relative mt-1">
+                      <Input
+                        id="copy-direct-link"
+                        disabled
+                        value={formatDirectTemplatePath(token).replace(/https?:\/\//, '')}
+                        readOnly
+                        className="pr-12"
+                      />
+
+                      <div className="absolute bottom-0 right-1 top-0 flex items-center justify-center">
+                        <Button
+                          variant="none"
+                          type="button"
+                          className="h-8 w-8"
+                          onClick={() => void onCopyClick(token)}
+                        >
+                          <ClipboardCopyIcon className="h-4 w-4 flex-shrink-0" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <DialogFooter className='mt-4'>
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    className="mr-auto w-full sm:w-auto"
+                    loading={isDeletingTemplateDirectLink}
+                    onClick={() => setCurrentStep('CONFIRM_DELETE')}
+                  >
+                    Remove
+                  </Button>
+
+                  <Button
+                    type="button"
+                    loading={isTogglingTemplateAccess}
+                    onClick={async () =>
+                      toggleTemplateDirectLink({
+                        templateId: template.id,
+                        enabled: isEnabled,
+                      })
+                    }
+                  >
+                    Save
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            ))
+            .with({ token: P.string, currentStep: 'CONFIRM_DELETE' }, () => (
+              <DialogContent className="relative">
+                <DialogHeader>
+                  <DialogTitle>Are you sure?</DialogTitle>
+
+                  <DialogDescription>
+                    Please note that proceeding will remove direct linking recipient and turn it
+                    into a placeholder.
+                  </DialogDescription>
+                </DialogHeader>
+
+                <DialogFooter>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    onClick={() => setCurrentStep('MANAGE')}
+                  >
+                    Cancel
+                  </Button>
+
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    loading={isDeletingTemplateDirectLink}
+                    onClick={() => void deleteTemplateDirectLink({ templateId: template.id })}
+                  >
+                    Confirm
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            ))
+            .otherwise(() => null)}
+        </AnimateGenericFadeInOut>
+      </fieldset>
+    </Dialog>
+  );
+};

apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx

@@ -172,7 +172,7 @@ export function UseTemplateDialog({
   return (
     <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
       <DialogTrigger asChild>
-        <Button className="cursor-pointer">
+        <Button variant="outline" className="bg-background">
           <Plus className="-ml-1 mr-2 h-4 w-4" />
           Use Template
         </Button>

apps/web/src/app/(recipient)/d/[token]/configure-direct-template.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useSession } from 'next-auth/react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { Field, Recipient } from '@documenso/prisma/client';
+import type { TemplateWithDetails } from '@documenso/prisma/types/template';
+import {
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
+  DocumentFlowFormContainerStep,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { ShowFieldItem } from '@documenso/ui/primitives/document-flow/show-field-item';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useStep } from '@documenso/ui/primitives/stepper';
+
+import { useRequiredDocumentAuthContext } from '~/app/(signing)/sign/[token]/document-auth-provider';
+
+const ZConfigureDirectTemplateFormSchema = z.object({
+  email: z.string().email('Email is invalid'),
+});
+
+export type TConfigureDirectTemplateFormSchema = z.infer<typeof ZConfigureDirectTemplateFormSchema>;
+
+export type ConfigureDirectTemplateFormProps = {
+  flowStep: DocumentFlowStep;
+  isDocumentPdfLoaded: boolean;
+  template: TemplateWithDetails;
+  directTemplateRecipient: Recipient & { Field: Field[] };
+  initialEmail?: string;
+  onSubmit: (_data: TConfigureDirectTemplateFormSchema) => void;
+};
+
+export const ConfigureDirectTemplateFormPartial = ({
+  flowStep,
+  isDocumentPdfLoaded,
+  template,
+  directTemplateRecipient,
+  initialEmail,
+  onSubmit,
+}: ConfigureDirectTemplateFormProps) => {
+  const { Recipient } = template;
+  const { derivedRecipientAccessAuth } = useRequiredDocumentAuthContext();
+  const { data: session } = useSession();
+
+  const recipientsWithBlankDirectRecipientEmail = Recipient.map((recipient) => {
+    if (recipient.id === directTemplateRecipient.id) {
+      return {
+        ...recipient,
+        email: '',
+      };
+    }
+
+    return recipient;
+  });
+
+  const form = useForm<TConfigureDirectTemplateFormSchema>({
+    resolver: zodResolver(
+      ZConfigureDirectTemplateFormSchema.superRefine((items, ctx) => {
+        if (template.Recipient.map((recipient) => recipient.email).includes(items.email)) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: 'Email cannot already exist in the template',
+            path: ['email'],
+          });
+        }
+      }),
+    ),
+    defaultValues: {
+      email: initialEmail || '',
+    },
+  });
+
+  const { stepIndex, currentStep, totalSteps, previousStep } = useStep();
+
+  return (
+    <>
+      <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
+
+      <DocumentFlowFormContainerContent>
+        {isDocumentPdfLoaded &&
+          directTemplateRecipient.Field.map((field, index) => (
+            <ShowFieldItem
+              key={index}
+              field={field}
+              recipients={recipientsWithBlankDirectRecipientEmail}
+            />
+          ))}
+
+        <Form {...form}>
+          <fieldset
+            className="flex h-full flex-col space-y-6"
+            disabled={form.formState.isSubmitting}
+          >
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field, fieldState }) => (
+                <FormItem>
+                  <FormLabel required>Email</FormLabel>
+
+                  <FormControl>
+                    <Input
+                      {...field}
+                      disabled={
+                        field.disabled ||
+                        derivedRecipientAccessAuth !== null ||
+                        session?.user.email !== undefined
+                      }
+                      placeholder="recipient@documenso.com"
+                    />
+                  </FormControl>
+
+                  {!fieldState.error && (
+                    <p className="text-muted-foreground text-xs">
+                      Enter your email address to receive the completed document.
+                    </p>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </fieldset>
+        </Form>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep
+          title={flowStep.title}
+          step={currentStep}
+          maxStep={totalSteps}
+        />
+
+        <DocumentFlowFormContainerActions
+          loading={form.formState.isSubmitting}
+          disabled={form.formState.isSubmitting}
+          canGoBack={stepIndex !== 0}
+          onGoBackClick={previousStep}
+          onGoNextClick={form.handleSubmit(onSubmit)}
+        />
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

apps/web/src/app/(recipient)/d/[token]/direct-template.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { Field } from '@documenso/prisma/client';
+import { type Recipient } from '@documenso/prisma/client';
+import type { TemplateWithDetails } from '@documenso/prisma/types/template';
+import { trpc } from '@documenso/trpc/react';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentAuthContext } from '~/app/(signing)/sign/[token]/document-auth-provider';
+import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
+
+import type { TConfigureDirectTemplateFormSchema } from './configure-direct-template';
+import { ConfigureDirectTemplateFormPartial } from './configure-direct-template';
+import type { DirectTemplateLocalField } from './sign-direct-template';
+import { SignDirectTemplateForm } from './sign-direct-template';
+
+export type TemplatesDirectPageViewProps = {
+  template: TemplateWithDetails;
+  directTemplateToken: string;
+  directTemplateRecipient: Recipient & { Field: Field[] };
+};
+
+type DirectTemplateStep = 'configure' | 'sign';
+const DirectTemplateSteps: DirectTemplateStep[] = ['configure', 'sign'];
+
+export const DirectTemplatePageView = ({
+  template,
+  directTemplateRecipient,
+  directTemplateToken,
+}: TemplatesDirectPageViewProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const { email, setEmail } = useRequiredSigningContext();
+  const { recipient, setRecipient } = useRequiredDocumentAuthContext();
+
+  const [step, setStep] = useState<DirectTemplateStep>('configure');
+  const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
+
+  const recipientRoleDescription = RECIPIENT_ROLES_DESCRIPTION[directTemplateRecipient.role];
+
+  const directTemplateFlow: Record<DirectTemplateStep, DocumentFlowStep> = {
+    configure: {
+      title: 'General',
+      description: 'Preview and configure template.',
+      stepIndex: 1,
+    },
+    sign: {
+      title: `${recipientRoleDescription.actionVerb} document`,
+      description: `${recipientRoleDescription.actionVerb} the document to complete the process.`,
+      stepIndex: 2,
+    },
+  };
+
+  const { mutateAsync: createDocumentFromDirectTemplate } =
+    trpc.template.createDocumentFromDirectTemplate.useMutation();
+
+  /**
+   * Set the email into a temporary recipient so it can be used for reauth and signing email fields.
+   */
+  const onConfigureDirectTemplateSubmit = ({ email }: TConfigureDirectTemplateFormSchema) => {
+    setEmail(email);
+
+    setRecipient({
+      ...recipient,
+      email,
+    });
+
+    setStep('sign');
+  };
+
+  const onSignDirectTemplateSubmit = async (fields: DirectTemplateLocalField[]) => {
+    try {
+      const token = await createDocumentFromDirectTemplate({
+        directTemplateToken,
+        directRecipientEmail: recipient.email,
+        templateUpdatedAt: template.updatedAt,
+        signedFieldValues: fields.map((field) => {
+          if (!field.signedValue) {
+            throw new Error('Invalid configuration');
+          }
+
+          return field.signedValue;
+        }),
+      });
+
+      const redirectUrl = template.templateMeta?.redirectUrl;
+
+      redirectUrl ? router.push(redirectUrl) : router.push(`/sign/${token}/complete`);
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description: 'We were unable to submit this document at this time. Please try again later.',
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
+  const currentDocumentFlow = directTemplateFlow[step];
+
+  return (
+    <div className="grid w-full grid-cols-12 gap-8">
+      <Card
+        className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+        gradient
+      >
+        <CardContent className="p-2">
+          <LazyPDFViewer
+            key={template.id}
+            documentData={template.templateDocumentData}
+            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
+          />
+        </CardContent>
+      </Card>
+
+      <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+        <DocumentFlowFormContainer
+          className="lg:h-[calc(100vh-6rem)]"
+          onSubmit={(e) => e.preventDefault()}
+        >
+          <Stepper
+            currentStep={currentDocumentFlow.stepIndex}
+            setCurrentStep={(step) => setStep(DirectTemplateSteps[step - 1])}
+          >
+            <ConfigureDirectTemplateFormPartial
+              flowStep={directTemplateFlow.configure}
+              template={template}
+              directTemplateRecipient={directTemplateRecipient}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
+              onSubmit={onConfigureDirectTemplateSubmit}
+              initialEmail={email}
+            />
+
+            <SignDirectTemplateForm
+              flowStep={directTemplateFlow.sign}
+              directRecipient={recipient}
+              directRecipientFields={directTemplateRecipient.Field}
+              template={template}
+              onSubmit={onSignDirectTemplateSubmit}
+            />
+          </Stepper>
+        </DocumentFlowFormContainer>
+      </div>
+    </div>
+  );
+};

apps/web/src/app/(recipient)/d/[token]/not-found.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import Link from 'next/link';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function NotFound() {
+  return (
+    <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
+      <div>
+        <p className="text-muted-foreground font-semibold">404 Template not found</p>
+
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+        <p className="text-muted-foreground mt-4 text-sm">
+          The template you are looking for may have been disabled, deleted or may have never
+          existed.
+        </p>
+
+        <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+          <Button asChild className="w-32">
+            <Link href="/">
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(recipient)/d/[token]/page.tsx

@@ -0,0 +1,92 @@
+import { notFound, redirect } from 'next/navigation';
+
+import { UsersIcon } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
+import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+
+import { DocumentAuthProvider } from '~/app/(signing)/sign/[token]/document-auth-provider';
+import { SigningProvider } from '~/app/(signing)/sign/[token]/provider';
+import { truncateTitle } from '~/helpers/truncate-title';
+
+import { DirectTemplatePageView } from './direct-template';
+import { DirectTemplateAuthPageView } from './signing-auth-page';
+
+export type TemplatesDirectPageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function TemplatesDirectPage({ params }: TemplatesDirectPageProps) {
+  const { token } = params;
+
+  if (!token) {
+    redirect('/');
+  }
+
+  const { user } = await getServerComponentSession();
+
+  const template = await getTemplateByDirectLinkToken({
+    token,
+  }).catch(() => null);
+
+  if (!template || !template.directLink?.enabled) {
+    notFound();
+  }
+
+  const directTemplateRecipient = template.Recipient.find(
+    (recipient) => recipient.id === template.directLink?.directTemplateRecipientId,
+  );
+
+  if (!directTemplateRecipient) {
+    notFound();
+  }
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: template.authOptions,
+  });
+
+  // Ensure typesafety when we add more options.
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
+    .with(DocumentAccessAuth.ACCOUNT, () => user !== null)
+    .with(null, () => true)
+    .exhaustive();
+
+  if (!isAccessAuthValid) {
+    return <DirectTemplateAuthPageView />;
+  }
+
+  return (
+    <SigningProvider email={user?.email} fullName={user?.name} signature={user?.signature}>
+      <DocumentAuthProvider
+        documentAuthOptions={template.authOptions}
+        recipient={directTemplateRecipient}
+        user={user}
+      >
+        <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+          <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
+            {truncateTitle(template.title)}
+          </h1>
+
+          <div className="text-muted-foreground mb-8 mt-2.5 flex items-center gap-x-2">
+            <UsersIcon className="h-4 w-4" />
+            <p className="text-muted-foreground/80">
+              {template.Recipient.length}{' '}
+              {template.Recipient.length > 1 ? 'recipients' : 'recipient'}
+            </p>
+          </div>
+
+          <DirectTemplatePageView
+            directTemplateRecipient={directTemplateRecipient}
+            directTemplateToken={template.directLink.token}
+            template={template}
+          />
+        </div>
+      </DocumentAuthProvider>
+    </SigningProvider>
+  );
+}

apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx

@@ -0,0 +1,278 @@
+import { useMemo, useState } from 'react';
+
+import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import type { Field, Recipient, Signature } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+import type { TemplateWithDetails } from '@documenso/prisma/types/template';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
+  DocumentFlowFormContainerStep,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useStep } from '@documenso/ui/primitives/stepper';
+
+import { DateField } from '~/app/(signing)/sign/[token]/date-field';
+import { EmailField } from '~/app/(signing)/sign/[token]/email-field';
+import { NameField } from '~/app/(signing)/sign/[token]/name-field';
+import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
+import { SignDialog } from '~/app/(signing)/sign/[token]/sign-dialog';
+import { SignatureField } from '~/app/(signing)/sign/[token]/signature-field';
+import { TextField } from '~/app/(signing)/sign/[token]/text-field';
+
+export type SignDirectTemplateFormProps = {
+  flowStep: DocumentFlowStep;
+  directRecipient: Recipient;
+  directRecipientFields: Field[];
+  template: TemplateWithDetails;
+  onSubmit: (_data: DirectTemplateLocalField[]) => Promise<void>;
+};
+
+export type DirectTemplateLocalField = Field & {
+  signedValue?: TSignFieldWithTokenMutationSchema;
+  Signature?: Signature;
+};
+
+export const SignDirectTemplateForm = ({
+  flowStep,
+  directRecipient,
+  directRecipientFields,
+  template,
+  onSubmit,
+}: SignDirectTemplateFormProps) => {
+  const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
+
+  const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(directRecipientFields);
+  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const { currentStep, totalSteps, previousStep } = useStep();
+
+  const onSignField = (value: TSignFieldWithTokenMutationSchema) => {
+    setLocalFields(
+      localFields.map((field) => {
+        if (field.id !== value.fieldId) {
+          return field;
+        }
+
+        const tempField: DirectTemplateLocalField = {
+          ...field,
+          customText: value.value,
+          inserted: true,
+          signedValue: value,
+        };
+
+        if (field.type === FieldType.SIGNATURE) {
+          tempField.Signature = {
+            id: 1,
+            created: new Date(),
+            recipientId: 1,
+            fieldId: 1,
+            signatureImageAsBase64: value.value,
+            typedSignature: null,
+          };
+        }
+
+        if (field.type === FieldType.DATE) {
+          tempField.customText = DateTime.now()
+            .setZone(template.templateMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE)
+            .toFormat(template.templateMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT);
+        }
+        return tempField;
+      }),
+    );
+  };
+
+  const onUnsignField = (value: TRemovedSignedFieldWithTokenMutationSchema) => {
+    setLocalFields(
+      localFields.map((field) => {
+        if (field.id !== value.fieldId) {
+          return field;
+        }
+
+        return {
+          ...field,
+          customText: '',
+          inserted: false,
+          signedValue: undefined,
+          Signature: undefined,
+        };
+      }),
+    );
+  };
+
+  const uninsertedFields = useMemo(() => {
+    return sortFieldsByPosition(localFields.filter((field) => !field.inserted));
+  }, [localFields]);
+
+  const fieldsValidated = () => {
+    setValidateUninsertedFields(true);
+    validateFieldsInserted(localFields);
+  };
+
+  const handleSubmit = async () => {
+    setValidateUninsertedFields(true);
+
+    const isFieldsValid = validateFieldsInserted(localFields);
+
+    if (!isFieldsValid) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      await onSubmit(localFields);
+    } catch {
+      setIsSubmitting(false);
+    }
+
+    // Do not reset to false since we do a redirect.
+  };
+
+  return (
+    <>
+      <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
+
+      <DocumentFlowFormContainerContent>
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          {validateUninsertedFields && uninsertedFields[0] && (
+            <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
+              Click to insert field
+            </FieldToolTip>
+          )}
+
+          {localFields.map((field) =>
+            match(field.type)
+              .with(FieldType.SIGNATURE, () => (
+                <SignatureField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.NAME, () => (
+                <NameField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.DATE, () => (
+                <DateField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  dateFormat={template.templateMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
+                  timezone={template.templateMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.EMAIL, () => (
+                <EmailField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.TEXT, () => (
+                <TextField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .otherwise(() => null),
+          )}
+        </ElementVisible>
+
+        <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
+          <div className="flex flex-1 flex-col gap-y-4">
+            <div>
+              <Label htmlFor="full-name">Full Name</Label>
+
+              <Input
+                id="full-name"
+                value={fullName}
+                onChange={(e) => setFullName(e.target.value.trimStart())}
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="Signature">Signature</Label>
+
+              <Card className="mt-2" gradient degrees={-120}>
+                <CardContent className="p-0">
+                  <SignaturePad
+                    className="h-44 w-full"
+                    disabled={isSubmitting}
+                    defaultValue={signature ?? undefined}
+                    onChange={(value) => {
+                      setSignature(value);
+                    }}
+                  />
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep
+          title={flowStep.title}
+          step={currentStep}
+          maxStep={totalSteps}
+        />
+
+        <div className="mt-4 flex gap-x-4">
+          <Button
+            className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
+            size="lg"
+            variant="secondary"
+            disabled={isSubmitting}
+            onClick={previousStep}
+          >
+            Back
+          </Button>
+
+          <SignDialog
+            isSubmitting={isSubmitting}
+            onSignatureComplete={handleSubmit}
+            documentTitle={template.title}
+            fields={localFields}
+            fieldsValidated={fieldsValidated}
+            role={directRecipient.role}
+          />
+        </div>
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

apps/web/src/app/(recipient)/d/[token]/signing-auth-page.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+
+import { signOut } from 'next-auth/react';
+
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const DirectTemplateAuthPageView = () => {
+  const { toast } = useToast();
+
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  const handleChangeAccount = async () => {
+    try {
+      setIsSigningOut(true);
+
+      await signOut({
+        callbackUrl: '/signin',
+      });
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'We were unable to log you out at this time.',
+        duration: 10000,
+        variant: 'destructive',
+      });
+    }
+
+    setIsSigningOut(false);
+  };
+
+  return (
+    <div className="mx-auto flex h-[70vh] w-full max-w-md flex-col items-center justify-center">
+      <div>
+        <h1 className="text-3xl font-semibold">Authentication required</h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          You need to be logged in to view this page.
+        </p>
+
+        <Button
+          className="mt-4 w-full"
+          type="submit"
+          onClick={async () => handleChangeAccount()}
+          loading={isSigningOut}
+        >
+          Login
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/web/src/app/(recipient)/layout.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { getTeams } from '@documenso/lib/server-only/team/get-teams';
+
+import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
+import { NextAuthProvider } from '~/providers/next-auth';
+
+type RecipientLayoutProps = {
+  children: React.ReactNode;
+};
+
+/**
+ * A layout to handle scenarios where the user is a recipient of a given resource
+ * where we do not care whether they are authenticated or not.
+ *
+ * Such as direct template access, or signing.
+ */
+export default async function RecipientLayout({ children }: RecipientLayoutProps) {
+  const { user, session } = await getServerComponentSession();
+
+  let teams: GetTeamsResponse = [];
+
+  if (user && session) {
+    teams = await getTeams({ userId: user.id });
+  }
+
+  return (
+    <NextAuthProvider session={session}>
+      <div className="min-h-screen">
+        {user && <AuthenticatedHeader user={user} teams={teams} />}
+
+        <main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">{children}</main>
+      </div>
+    </NextAuthProvider>
+  );
+}

apps/web/src/app/(signing)/sign/[token]/complete/page.tsx

@@ -67,7 +67,7 @@ export default async function CompletedSigningPage({
 
   const isDocumentAccessValid = await isRecipientAuthorized({
     type: 'ACCESS',
-    document,
+    documentAuthOptions: document.authOptions,
     recipient,
     userId: user?.id,
   });
@@ -131,7 +131,7 @@ export default async function CompletedSigningPage({
               </div>
             ))
             .with({ deletedAt: null }, () => (
-              <div className="flex items-center mt-4 text-center text-blue-600">
+              <div className="mt-4 flex items-center text-center text-blue-600">
                 <Clock8 className="mr-2 h-5 w-5" />
                 <span className="text-sm">Waiting for others to sign</span>
               </div>

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

@@ -17,6 +17,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { SigningFieldContainer } from './signing-field-container';
@@ -26,6 +30,8 @@ export type DateFieldProps = {
   recipient: Recipient;
   dateFormat?: string | null;
   timezone?: string | null;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
 export const DateField = ({
@@ -33,6 +39,8 @@ export const DateField = ({
   recipient,
   dateFormat = DEFAULT_DOCUMENT_DATE_FORMAT,
   timezone = DEFAULT_DOCUMENT_TIME_ZONE,
+  onSignField,
+  onUnsignField,
 }: DateFieldProps) => {
   const router = useRouter();
 
@@ -58,12 +66,19 @@ export const DateField = ({
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      await signFieldWithToken({
+      const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
         value: dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
         authOptions,
-      });
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {
@@ -85,10 +100,17 @@ export const DateField = ({
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

apps/web/src/app/(signing)/sign/[token]/document-action-auth-2fa.tsx

@@ -18,7 +18,7 @@ import {
   FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
 
 import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
 
@@ -138,7 +138,15 @@ export const DocumentActionAuth2FA = ({
                   <FormLabel required>2FA token</FormLabel>
 
                   <FormControl>
-                    <Input {...field} placeholder="Token" />
+                    <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                      {Array(6)
+                        .fill(null)
+                        .map((_, i) => (
+                          <PinInputGroup key={i}>
+                            <PinInputSlot index={i} />
+                          </PinInputGroup>
+                        ))}
+                    </PinInput>
                   </FormControl>
 
                   <FormMessage />

apps/web/src/app/(signing)/sign/[token]/document-auth-provider.tsx

@@ -34,9 +34,9 @@ type PasskeyData = {
 
 export type DocumentAuthContextValue = {
   executeActionAuthProcedure: (_value: ExecuteActionAuthProcedureOptions) => Promise<void>;
-  document: Document;
+  documentAuthOptions: Document['authOptions'];
   documentAuthOption: TDocumentAuthOptions;
-  setDocument: (_value: Document) => void;
+  setDocumentAuthOptions: (_value: Document['authOptions']) => void;
   recipient: Recipient;
   recipientAuthOption: TRecipientAuthOptions;
   setRecipient: (_value: Recipient) => void;
@@ -69,19 +69,19 @@ export const useRequiredDocumentAuthContext = () => {
 };
 
 export interface DocumentAuthProviderProps {
-  document: Document;
+  documentAuthOptions: Document['authOptions'];
   recipient: Recipient;
   user?: User | null;
   children: React.ReactNode;
 }
 
 export const DocumentAuthProvider = ({
-  document: initialDocument,
+  documentAuthOptions: initialDocumentAuthOptions,
   recipient: initialRecipient,
   user,
   children,
 }: DocumentAuthProviderProps) => {
-  const [document, setDocument] = useState(initialDocument);
+  const [documentAuthOptions, setDocumentAuthOptions] = useState(initialDocumentAuthOptions);
   const [recipient, setRecipient] = useState(initialRecipient);
 
   const [isCurrentlyAuthenticating, setIsCurrentlyAuthenticating] = useState(false);
@@ -95,10 +95,10 @@ export const DocumentAuthProvider = ({
   } = useMemo(
     () =>
       extractDocumentAuthMethods({
-        documentAuth: document.authOptions,
+        documentAuth: documentAuthOptions,
         recipientAuth: recipient.authOptions,
       }),
-    [document, recipient],
+    [documentAuthOptions, recipient],
   );
 
   const passkeyQuery = trpc.auth.findPasskeys.useQuery(
@@ -189,8 +189,8 @@ export const DocumentAuthProvider = ({
     <DocumentAuthContext.Provider
       value={{
         user,
-        document,
-        setDocument,
+        documentAuthOptions,
+        setDocumentAuthOptions,
         executeActionAuthProcedure,
         recipient,
         setRecipient,

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

@@ -12,6 +12,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredSigningContext } from './provider';
@@ -20,9 +24,11 @@ import { SigningFieldContainer } from './signing-field-container';
 export type EmailFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const EmailField = ({ field, recipient }: EmailFieldProps) => {
+export const EmailField = ({ field, recipient, onSignField, onUnsignField }: EmailFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -43,13 +49,22 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      await signFieldWithToken({
+      const value = providedEmail ?? '';
+
+      const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-        value: providedEmail ?? '',
+        value,
         isBase64: false,
         authOptions,
-      });
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {
@@ -71,10 +86,17 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

apps/web/src/app/(signing)/sign/[token]/form.tsx

@@ -145,7 +145,7 @@ export const SigningForm = ({ document, recipient, fields, redirectUrl }: Signin
                   <SignDialog
                     isSubmitting={isSubmitting}
                     onSignatureComplete={handleSubmit(onFormSubmit)}
-                    document={document}
+                    documentTitle={document.title}
                     fields={fields}
                     fieldsValidated={fieldsValidated}
                     role={recipient.role}
@@ -208,7 +208,7 @@ export const SigningForm = ({ document, recipient, fields, redirectUrl }: Signin
                   <SignDialog
                     isSubmitting={isSubmitting}
                     onSignatureComplete={handleSubmit(onFormSubmit)}
-                    document={document}
+                    documentTitle={document.title}
                     fields={fields}
                     fieldsValidated={fieldsValidated}
                     role={recipient.role}

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

@@ -12,6 +12,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { type Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
@@ -25,9 +29,11 @@ import { SigningFieldContainer } from './signing-field-container';
 export type NameFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const NameField = ({ field, recipient }: NameFieldProps) => {
+export const NameField = ({ field, recipient, onSignField, onUnsignField }: NameFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -83,13 +89,20 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
         return;
       }
 
-      await signFieldWithToken({
+      const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
         value,
         isBase64: false,
         authOptions,
-      });
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {
@@ -111,10 +124,17 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -65,7 +65,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
   const isDocumentAccessValid = await isRecipientAuthorized({
     type: 'ACCESS',
-    document,
+    documentAuthOptions: document.authOptions,
     recipient,
     userId: user?.id,
   });
@@ -126,7 +126,11 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
       fullName={user?.email === recipient.email ? user.name : recipient.name}
       signature={user?.email === recipient.email ? user.signature : undefined}
     >
-      <DocumentAuthProvider document={document} recipient={recipient} user={user}>
+      <DocumentAuthProvider
+        documentAuthOptions={document.authOptions}
+        recipient={recipient}
+        user={user}
+      >
         <SigningPageView
           recipient={recipient}
           document={document}

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import type { Document, Field } from '@documenso/prisma/client';
+import type { Field } from '@documenso/prisma/client';
 import { RecipientRole } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -16,7 +16,7 @@ import { truncateTitle } from '~/helpers/truncate-title';
 
 export type SignDialogProps = {
   isSubmitting: boolean;
-  document: Document;
+  documentTitle: string;
   fields: Field[];
   fieldsValidated: () => void | Promise<void>;
   onSignatureComplete: () => void | Promise<void>;
@@ -25,14 +25,14 @@ export type SignDialogProps = {
 
 export const SignDialog = ({
   isSubmitting,
-  document,
+  documentTitle,
   fields,
   fieldsValidated,
   onSignatureComplete,
   role,
 }: SignDialogProps) => {
   const [showDialog, setShowDialog] = useState(false);
-  const truncatedTitle = truncateTitle(document.title);
+  const truncatedTitle = truncateTitle(documentTitle);
   const isComplete = fields.every((field) => field.inserted);
 
   const handleOpenChange = (open: boolean) => {
@@ -40,18 +40,6 @@ export const SignDialog = ({
       return;
     }
 
-    // Reauth is currently not required for signing the document.
-    // if (isAuthRedirectRequired) {
-    //   await executeActionAuthProcedure({
-    //     actionTarget: 'DOCUMENT',
-    //     onReauthFormSubmit: () => {
-    //       // Do nothing since the user should be redirected.
-    //     },
-    //   });
-
-    //   return;
-    // }
-
     setShowDialog(open);
   };
 

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

@@ -12,6 +12,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { type Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
 import { Label } from '@documenso/ui/primitives/label';
@@ -29,9 +33,16 @@ type SignatureFieldState = 'empty' | 'signed-image' | 'signed-text';
 export type SignatureFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
+export const SignatureField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: SignatureFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -105,13 +116,20 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
         return;
       }
 
-      await signFieldWithToken({
+      const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
         value,
         isBase64: true,
         authOptions,
-      });
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {
@@ -133,10 +151,17 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

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

@@ -12,6 +12,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
@@ -24,9 +28,11 @@ import { SigningFieldContainer } from './signing-field-container';
 export type TextFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const TextField = ({ field, recipient }: TextFieldProps) => {
+export const TextField = ({ field, recipient, onSignField, onUnsignField }: TextFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -81,13 +87,20 @@ export const TextField = ({ field, recipient }: TextFieldProps) => {
         return;
       }
 
-      await signFieldWithToken({
+      const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
         value: localText,
         isBase64: true,
         authOptions,
-      });
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
 
       setLocalCustomText('');
 
@@ -111,10 +124,17 @@ export const TextField = ({ field, recipient }: TextFieldProps) => {
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

apps/web/src/app/(unauthenticated)/signin/page.tsx

@@ -4,7 +4,7 @@ import { redirect } from 'next/navigation';
 
 import { env } from 'next-runtime-env';
 
-import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
+import { IS_GOOGLE_SSO_ENABLED, IS_OIDC_SSO_ENABLED } from '@documenso/lib/constants/auth';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 
 import { SignInForm } from '~/components/forms/signin';
@@ -37,10 +37,13 @@ export default function SignInPage({ searchParams }: SignInPageProps) {
         <p className="text-muted-foreground mt-2 text-sm">
           Welcome back, we are lucky to have you.
         </p>
-
         <hr className="-mx-6 my-4" />
 
-        <SignInForm initialEmail={email || undefined} isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED} />
+        <SignInForm
+          initialEmail={email || undefined}
+          isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
+          isOIDCSSOEnabled={IS_OIDC_SSO_ENABLED}
+        />
 
         {NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
           <p className="text-muted-foreground mt-6 text-center text-sm">

apps/web/src/app/(unauthenticated)/signup/page.tsx

@@ -3,7 +3,7 @@ import { redirect } from 'next/navigation';
 
 import { env } from 'next-runtime-env';
 
-import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
+import { IS_GOOGLE_SSO_ENABLED, IS_OIDC_SSO_ENABLED } from '@documenso/lib/constants/auth';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 
 import { SignUpFormV2 } from '~/components/forms/v2/signup';
@@ -37,6 +37,7 @@ export default function SignUpPage({ searchParams }: SignUpPageProps) {
       className="w-screen max-w-screen-2xl px-4 md:px-16 lg:-my-16"
       initialEmail={email || undefined}
       isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
+      isOIDCSSOEnabled={IS_OIDC_SSO_ENABLED}
     />
   );
 }

apps/web/src/components/(dashboard)/layout/menu-switcher.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
+import { motion } from 'framer-motion';
 import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
 import { signOut } from 'next-auth/react';
 
@@ -25,6 +26,8 @@ import {
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
+const MotionLink = motion(Link);
+
 export type MenuSwitcherProps = {
   user: User;
   teams: GetTeamsResponse;
@@ -170,18 +173,43 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
             <div className="custom-scrollbar max-h-[40vh] overflow-auto">
               {teams.map((team) => (
                 <DropdownMenuItem asChild key={team.id}>
-                  <Link href={formatRedirectUrlOnSwitch(team.url)}>
+                  <MotionLink
+                    initial="initial"
+                    animate="initial"
+                    whileHover="animate"
+                    href={formatRedirectUrlOnSwitch(team.url)}
+                  >
                     <AvatarWithText
                       avatarFallback={formatAvatarFallback(team.name)}
                       primaryText={team.name}
-                      secondaryText={formatSecondaryAvatarText(team)}
+                      secondaryText={
+                        <div className="relative">
+                          <motion.span
+                            className="overflow-hidden"
+                            variants={{
+                              initial: { opacity: 1, translateY: 0 },
+                              animate: { opacity: 0, translateY: '100%' },
+                            }}
+                          >
+                            {formatSecondaryAvatarText(team)}
+                          </motion.span>
+
+                          <motion.span
+                            className="absolute inset-0"
+                            variants={{
+                              initial: { opacity: 0, translateY: '100%' },
+                              animate: { opacity: 1, translateY: 0 },
+                            }}
+                          >{`/t/${team.url}`}</motion.span>
+                        </div>
+                      }
                       rightSideComponent={
                         isPathTeamUrl(team.url) && (
                           <CheckCircle2 className="ml-auto fill-black text-white dark:fill-white dark:text-black" />
                         )
                       }
                     />
-                  </Link>
+                  </MotionLink>
                 </DropdownMenuItem>
               ))}
             </div>

apps/web/src/components/formatter/template-type.tsx

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
 
-import { Globe, Lock } from 'lucide-react';
+import { Globe2, Lock } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
 import type { TemplateType as TemplateTypePrisma } from '@documenso/prisma/client';
@@ -22,7 +22,7 @@ const TEMPLATE_TYPES: Record<TemplateTypes, TemplateTypeIcon> = {
   },
   PUBLIC: {
     label: 'Public',
-    icon: Globe,
+    icon: Globe2,
     color: 'text-green-500 dark:text-green-300',
   },
 };

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

@@ -28,7 +28,7 @@ import {
   FormItem,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZDisable2FAForm = z.object({
@@ -107,7 +107,15 @@ export const DisableAuthenticatorAppDialog = () => {
                 render={({ field }) => (
                   <FormItem>
                     <FormControl>
-                      <Input {...field} placeholder="Token" />
+                      <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                        {Array(6)
+                          .fill(null)
+                          .map((_, i) => (
+                            <PinInputGroup key={i}>
+                              <PinInputSlot index={i} />
+                            </PinInputGroup>
+                          ))}
+                      </PinInput>
                     </FormControl>
                     <FormMessage />
                   </FormItem>

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

@@ -30,7 +30,7 @@ import {
   FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { RecoveryCodeList } from './recovery-code-list';
@@ -212,7 +212,15 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
                         <FormItem>
                           <FormLabel className="text-muted-foreground">Token</FormLabel>
                           <FormControl>
-                            <Input {...field} type="text" value={field.value ?? ''} />
+                            <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                              {Array(6)
+                                .fill(null)
+                                .map((_, i) => (
+                                  <PinInputGroup key={i}>
+                                    <PinInputSlot index={i} />
+                                  </PinInputGroup>
+                                ))}
+                            </PinInput>
                           </FormControl>
                           <FormMessage />
                         </FormItem>

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

@@ -30,7 +30,7 @@ import {
   FormItem,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
 
 import { RecoveryCodeList } from './recovery-code-list';
 
@@ -115,7 +115,15 @@ export const ViewRecoveryCodesDialog = () => {
                   render={({ field }) => (
                     <FormItem>
                       <FormControl>
-                        <Input {...field} placeholder="Token" />
+                        <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                          {Array(6)
+                            .fill(null)
+                            .map((_, i) => (
+                              <PinInputGroup key={i}>
+                                <PinInputSlot index={i} />
+                              </PinInputGroup>
+                            ))}
+                        </PinInput>
                       </FormControl>
                       <FormMessage />
                     </FormItem>

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

@@ -10,6 +10,7 @@ import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/br
 import { KeyRoundIcon } from 'lucide-react';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
+import { FaIdCardClip } from 'react-icons/fa6';
 import { FcGoogle } from 'react-icons/fc';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
@@ -38,6 +39,7 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ERROR_MESSAGES: Partial<Record<keyof typeof ErrorCode, string>> = {
@@ -68,9 +70,15 @@ export type SignInFormProps = {
   className?: string;
   initialEmail?: string;
   isGoogleSSOEnabled?: boolean;
+  isOIDCSSOEnabled?: boolean;
 };
 
-export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignInFormProps) => {
+export const SignInForm = ({
+  className,
+  initialEmail,
+  isGoogleSSOEnabled,
+  isOIDCSSOEnabled,
+}: SignInFormProps) => {
   const { toast } = useToast();
   const { getFlag } = useFeatureFlags();
 
@@ -256,6 +264,19 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
     }
   };
 
+  const onSignInWithOIDCClick = async () => {
+    try {
+      await signIn('oidc', { callbackUrl: LOGIN_REDIRECT_PATH });
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        description:
+          'We encountered an unknown error while attempting to sign you In. Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
   return (
     <Form {...form}>
       <form
@@ -316,7 +337,7 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
             {isSubmitting ? 'Signing in...' : 'Sign In'}
           </Button>
 
-          {(isGoogleSSOEnabled || isPasskeyEnabled) && (
+          {(isGoogleSSOEnabled || isPasskeyEnabled || isOIDCSSOEnabled) && (
             <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>
@@ -338,6 +359,20 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
             </Button>
           )}
 
+          {isOIDCSSOEnabled && (
+            <Button
+              type="button"
+              size="lg"
+              variant="outline"
+              className="bg-background text-muted-foreground border"
+              disabled={isSubmitting}
+              onClick={onSignInWithOIDCClick}
+            >
+              <FaIdCardClip className="mr-2 h-5 w-5" />
+              OIDC
+            </Button>
+          )}
+
           {isPasskeyEnabled && (
             <Button
               type="button"
@@ -372,9 +407,17 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
                   name="totpCode"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Authentication Token</FormLabel>
+                      <FormLabel>Token</FormLabel>
                       <FormControl>
-                        <Input type="text" {...field} />
+                        <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                          {Array(6)
+                            .fill(null)
+                            .map((_, i) => (
+                              <PinInputGroup key={i}>
+                                <PinInputSlot index={i} />
+                              </PinInputGroup>
+                            ))}
+                        </PinInput>
                       </FormControl>
                       <FormMessage />
                     </FormItem>

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

@@ -52,9 +52,15 @@ export type SignUpFormProps = {
   className?: string;
   initialEmail?: string;
   isGoogleSSOEnabled?: boolean;
+  isOIDCSSOEnabled?: boolean;
 };
 
-export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignUpFormProps) => {
+export const SignUpForm = ({
+  className,
+  initialEmail,
+  isGoogleSSOEnabled,
+  isOIDCSSOEnabled,
+}: SignUpFormProps) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
   const router = useRouter();
@@ -121,6 +127,19 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
     }
   };
 
+  const onSignUpWithOIDCClick = async () => {
+    try {
+      await signIn('oidc', { callbackUrl: SIGN_UP_REDIRECT_PATH });
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        description:
+          'We encountered an unknown error while attempting to sign you Up. Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
   return (
     <Form {...form}>
       <form
@@ -221,6 +240,28 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
             </Button>
           </>
         )}
+
+        {isOIDCSSOEnabled && (
+          <>
+            <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</span>
+              <div className="bg-border h-px flex-1" />
+            </div>
+
+            <Button
+              type="button"
+              size="lg"
+              variant={'outline'}
+              className="bg-background text-muted-foreground border"
+              disabled={isSubmitting}
+              onClick={onSignUpWithOIDCClick}
+            >
+              <FcGoogle className="mr-2 h-5 w-5" />
+              Sign Up with OIDC
+            </Button>
+          </>
+        )}
       </form>
     </Form>
   );

apps/web/src/components/forms/v2/signup.tsx

@@ -10,6 +10,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
+import { FaIdCardClip } from 'react-icons/fa6';
 import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
 
@@ -73,12 +74,14 @@ export type SignUpFormV2Props = {
   className?: string;
   initialEmail?: string;
   isGoogleSSOEnabled?: boolean;
+  isOIDCSSOEnabled?: boolean;
 };
 
 export const SignUpFormV2 = ({
   className,
   initialEmail,
   isGoogleSSOEnabled,
+  isOIDCSSOEnabled,
 }: SignUpFormV2Props) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
@@ -179,6 +182,19 @@ export const SignUpFormV2 = ({
     }
   };
 
+  const onSignUpWithOIDCClick = async () => {
+    try {
+      await signIn('oidc', { callbackUrl: SIGN_UP_REDIRECT_PATH });
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        description:
+          'We encountered an unknown error while attempting to sign you Up. Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
   return (
     <div className={cn('flex justify-center gap-x-12', className)}>
       <div className="border-border relative hidden flex-1 overflow-hidden rounded-xl border xl:flex">
@@ -255,7 +271,7 @@ export const SignUpFormV2 = ({
               <fieldset
                 className={cn(
                   'flex h-[550px] w-full flex-col gap-y-4',
-                  isGoogleSSOEnabled && 'h-[650px]',
+                  (isGoogleSSOEnabled || isOIDCSSOEnabled) && 'h-[650px]',
                 )}
                 disabled={isSubmitting}
               >
@@ -323,14 +339,18 @@ export const SignUpFormV2 = ({
                   )}
                 />
 
-                {isGoogleSSOEnabled && (
+                {(isGoogleSSOEnabled || isOIDCSSOEnabled) && (
                   <>
                     <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</span>
                       <div className="bg-border h-px flex-1" />
                     </div>
+                  </>
+                )}
 
+                {isGoogleSSOEnabled && (
+                  <>
                     <Button
                       type="button"
                       size="lg"
@@ -345,6 +365,22 @@ export const SignUpFormV2 = ({
                   </>
                 )}
 
+                {isOIDCSSOEnabled && (
+                  <>
+                    <Button
+                      type="button"
+                      size="lg"
+                      variant={'outline'}
+                      className="bg-background text-muted-foreground border"
+                      disabled={isSubmitting}
+                      onClick={onSignUpWithOIDCClick}
+                    >
+                      <FaIdCardClip className="mr-2 h-5 w-5" />
+                      Sign Up with OIDC
+                    </Button>
+                  </>
+                )}
+
                 <p className="text-muted-foreground mt-4 text-sm">
                   Already have an account?{' '}
                   <Link href="/signin" className="text-documenso-700 duration-200 hover:opacity-70">

docker/README.md

@@ -41,7 +41,7 @@ volumes:
 1. Run the following command to start the containers:
 
 ```
-docker-compose --env-file ./.env -d up
+docker-compose --env-file ./.env up -d
 ```
 
 This will start the PostgreSQL database and the Documenso application containers.

docker/production/compose.yml

@@ -58,7 +58,7 @@ services:
       - NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT=${NEXT_PUBLIC_DOCUMENT_SIZE_UPLOAD_LIMIT}
       - NEXT_PUBLIC_POSTHOG_KEY=${NEXT_PUBLIC_POSTHOG_KEY}
       - NEXT_PUBLIC_DISABLE_SIGNUP=${NEXT_PUBLIC_DISABLE_SIGNUP}
-      - NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH=${NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH?:-/opt/documenso/cert.p12}
+      - NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH=${NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH:-/opt/documenso/cert.p12}
     ports:
       - ${PORT:-3000}:${PORT:-3000}
     volumes:

package.json

@@ -19,6 +19,7 @@
     "prisma:generate": "npm run with:env -- npm run prisma:generate -w @documenso/prisma",
     "prisma:migrate-dev": "npm run with:env -- npm run prisma:migrate-dev -w @documenso/prisma",
     "prisma:migrate-deploy": "npm run with:env -- npm run prisma:migrate-deploy -w @documenso/prisma",
+    "prisma:migrate-reset": "npm run with:env -- npm run prisma:migrate-reset -w @documenso/prisma",
     "prisma:seed": "npm run with:env -- npm run prisma:seed -w @documenso/prisma",
     "prisma:studio": "npm run with:env -- npm run prisma:studio -w @documenso/prisma",
     "with:env": "dotenv -e .env -e .env.local --",
@@ -60,4 +61,4 @@
       "next": "14.0.3"
     }
   }
-}
+}

packages/api/v1/implementation.ts

@@ -1,6 +1,7 @@
 import { createNextRoute } from '@ts-rest/next';
 
 import { getServerLimits } from '@documenso/ee/server-only/limits/server';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
 import { upsertDocumentMeta } from '@documenso/lib/server-only/document-meta/upsert-document-meta';
@@ -76,7 +77,10 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
         status: 200,
         body: {
           ...document,
-          recipients,
+          recipients: recipients.map((recipient) => ({
+            ...recipient,
+            signingUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`,
+          })),
         },
       };
     } catch (err) {
@@ -258,6 +262,8 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
             email: recipient.email,
             token: recipient.token,
             role: recipient.role,
+
+            signingUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`,
           })),
         },
       };
@@ -349,6 +355,8 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
           email: recipient.email,
           token: recipient.token,
           role: recipient.role,
+
+          signingUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`,
         })),
       },
     };
@@ -428,6 +436,8 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
           email: recipient.email,
           token: recipient.token,
           role: recipient.role,
+
+          signingUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`,
         })),
       },
     };
@@ -435,6 +445,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
 
   sendDocument: authenticatedMiddleware(async (args, user, team) => {
     const { id } = args.params;
+    const { sendEmail = true } = args.body ?? {};
 
     const document = await getDocumentById({ id: Number(id), userId: user.id, teamId: team?.id });
 
@@ -490,10 +501,11 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
       //     });
       //   }
 
-      await sendDocument({
+      const { Recipient: recipients, ...sentDocument } = await sendDocument({
         documentId: Number(id),
         userId: user.id,
         teamId: team?.id,
+        sendEmail,
         requestMetadata: extractNextApiRequestMetadata(args.req),
       });
 
@@ -501,6 +513,11 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
         status: 200,
         body: {
           message: 'Document sent for signing successfully',
+          ...sentDocument,
+          recipients: recipients.map((recipient) => ({
+            ...recipient,
+            signingUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`,
+          })),
         },
       };
     } catch (err) {
@@ -585,6 +602,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
         body: {
           ...newRecipient,
           documentId: Number(documentId),
+          signingUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${newRecipient.token}`,
         },
       };
     } catch (err) {
@@ -650,6 +668,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
       body: {
         ...updatedRecipient,
         documentId: Number(documentId),
+        signingUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${updatedRecipient.token}`,
       },
     };
   }),
@@ -703,6 +722,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
       body: {
         ...deletedRecipient,
         documentId: Number(documentId),
+        signingUrl: '',
       },
     };
   }),

packages/api/v1/schema.ts

@@ -45,7 +45,11 @@ export type TSuccessfulGetDocumentResponseSchema = z.infer<
 
 export type TSuccessfulDocumentResponseSchema = z.infer<typeof ZSuccessfulDocumentResponseSchema>;
 
-export const ZSendDocumentForSigningMutationSchema = null;
+export const ZSendDocumentForSigningMutationSchema = z
+  .object({
+    sendEmail: z.boolean().optional().default(true),
+  })
+  .or(z.literal('').transform(() => ({ sendEmail: true })));
 
 export type TSendDocumentForSigningMutationSchema = typeof ZSendDocumentForSigningMutationSchema;
 
@@ -89,8 +93,12 @@ export const ZCreateDocumentMutationResponseSchema = z.object({
   recipients: z.array(
     z.object({
       recipientId: z.number(),
+      name: z.string(),
+      email: z.string().email().min(1),
       token: z.string(),
       role: z.nativeEnum(RecipientRole),
+
+      signingUrl: z.string(),
     }),
   ),
 });
@@ -134,6 +142,8 @@ export const ZCreateDocumentFromTemplateMutationResponseSchema = z.object({
       email: z.string().email().min(1),
       token: z.string(),
       role: z.nativeEnum(RecipientRole).optional().default(RecipientRole.SIGNER),
+
+      signingUrl: z.string(),
     }),
   ),
 });
@@ -187,6 +197,8 @@ export const ZGenerateDocumentFromTemplateMutationResponseSchema = z.object({
       email: z.string().email().min(1),
       token: z.string(),
       role: z.nativeEnum(RecipientRole),
+
+      signingUrl: z.string(),
     }),
   ),
 });
@@ -229,6 +241,8 @@ export const ZSuccessfulRecipientResponseSchema = z.object({
   readStatus: z.nativeEnum(ReadStatus),
   signingStatus: z.nativeEnum(SigningStatus),
   sendStatus: z.nativeEnum(SendStatus),
+
+  signingUrl: z.string(),
 });
 
 export type TSuccessfulRecipientResponseSchema = z.infer<typeof ZSuccessfulRecipientResponseSchema>;
@@ -279,9 +293,11 @@ export const ZSuccessfulResponseSchema = z.object({
 
 export type TSuccessfulResponseSchema = z.infer<typeof ZSuccessfulResponseSchema>;
 
-export const ZSuccessfulSigningResponseSchema = z.object({
-  message: z.string(),
-});
+export const ZSuccessfulSigningResponseSchema = z
+  .object({
+    message: z.string(),
+  })
+  .and(ZSuccessfulGetDocumentResponseSchema);
 
 export type TSuccessfulSigningResponseSchema = z.infer<typeof ZSuccessfulSigningResponseSchema>;
 

packages/app-tests/e2e/document-flow/stepper-component.spec.ts

@@ -1,10 +1,14 @@
 import { expect, test } from '@playwright/test';
+import { DateTime } from 'luxon';
 import path from 'node:path';
 
 import { getRecipientByEmail } from '@documenso/lib/server-only/recipient/get-recipient-by-email';
 import { prisma } from '@documenso/prisma';
-import { DocumentStatus } from '@documenso/prisma/client';
-import { seedBlankDocument } from '@documenso/prisma/seed/documents';
+import { DocumentStatus, FieldType, RecipientRole } from '@documenso/prisma/client';
+import {
+  seedBlankDocument,
+  seedPendingDocumentWithFullFields,
+} from '@documenso/prisma/seed/documents';
 import { seedUser, unseedUser } from '@documenso/prisma/seed/users';
 
 import { apiSignin } from '../fixtures/authentication';
@@ -192,6 +196,102 @@ test('[DOCUMENT_FLOW]: should be able to create a document with multiple recipie
   await unseedUser(user.id);
 });
 
+test('[DOCUMENT_FLOW]: should be able to create a document with multiple recipients with different roles', async ({
+  page,
+}) => {
+  const user = await seedUser();
+  const document = await seedBlankDocument(user);
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/documents/${document.id}/edit`,
+  });
+
+  // Set title
+  await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+  await page.getByLabel('Title').fill('Test Title');
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add signers
+  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
+
+  // Add 2 signers.
+  await page.getByPlaceholder('Email').fill('user1@example.com');
+  await page.getByPlaceholder('Name').fill('User 1');
+  await page.getByRole('button', { name: 'Add Signer' }).click();
+
+  await page.getByRole('textbox', { name: 'Email', exact: true }).fill('user2@example.com');
+  await page.getByRole('textbox', { name: 'Name', exact: true }).nth(1).fill('User 2');
+  await page.locator('button[role="combobox"]').nth(1).click();
+  await page.getByLabel('Receives copy').click();
+  await page.getByRole('button', { name: 'Add Signer' }).click();
+
+  await page.getByRole('textbox', { name: 'Email', exact: true }).nth(1).fill('user3@example.com');
+  await page.getByRole('textbox', { name: 'Name', exact: true }).nth(2).fill('User 3');
+  await page.locator('button[role="combobox"]').nth(2).click();
+  await page.getByLabel('Needs to approve').click();
+  await page.getByRole('button', { name: 'Add Signer' }).click();
+
+  await page.getByRole('textbox', { name: 'Email', exact: true }).nth(2).fill('user4@example.com');
+  await page.getByRole('textbox', { name: 'Name', exact: true }).nth(3).fill('User 4');
+  await page.locator('button[role="combobox"]').nth(3).click();
+  await page.getByLabel('Needs to view').click();
+
+  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 3 (user3@example.com)').click();
+
+  await page.getByRole('button', { name: 'User 3 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: 'Test Title' })).toBeVisible();
+
+  await unseedUser(user.id);
+});
+
 test('[DOCUMENT_FLOW]: should be able to create, send and sign a document', async ({ page }) => {
   const user = await seedUser();
   const document = await seedBlankDocument(user);
@@ -234,6 +334,7 @@ test('[DOCUMENT_FLOW]: should be able to create, send and sign a document', asyn
   await page.getByRole('link', { name: documentTitle }).click();
   await page.waitForURL(/\/documents\/\d+/);
 
+  // Start signing process
   const url = page.url().split('/');
   const documentId = url[url.length - 1];
 
@@ -263,6 +364,63 @@ test('[DOCUMENT_FLOW]: should be able to create, send and sign a document', asyn
   await unseedUser(user.id);
 });
 
+test('[DOCUMENT_FLOW]: should be able to approve a document', async ({ page }) => {
+  const user = await seedUser();
+
+  const { recipients } = await seedPendingDocumentWithFullFields({
+    owner: user,
+    recipients: ['user@documenso.com', 'approver@documenso.com'],
+    recipientsCreateOptions: [
+      {
+        email: 'user@documenso.com',
+        role: RecipientRole.SIGNER,
+      },
+      {
+        email: 'approver@documenso.com',
+        role: RecipientRole.APPROVER,
+      },
+    ],
+    fields: [FieldType.SIGNATURE],
+  });
+
+  for (const recipient of recipients) {
+    const { token, Field, role } = recipient;
+
+    const signUrl = `/sign/${token}`;
+
+    await page.goto(signUrl);
+    await expect(
+      page.getByRole('heading', {
+        name: role === RecipientRole.SIGNER ? 'Sign Document' : 'Approve Document',
+      }),
+    ).toBeVisible();
+
+    // Add signature.
+    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();
+    }
+
+    for (const field of Field) {
+      await page.locator(`#field-${field.id}`).getByRole('button').click();
+
+      await expect(page.locator(`#field-${field.id}`)).toHaveAttribute('data-inserted', 'true');
+    }
+
+    await page.getByRole('button', { name: 'Complete' }).click();
+    await page
+      .getByRole('button', { name: role === RecipientRole.SIGNER ? 'Sign' : 'Approve' })
+      .click();
+    await page.waitForURL(`${signUrl}/complete`);
+  }
+
+  await unseedUser(user.id);
+});
+
 test('[DOCUMENT_FLOW]: should be able to create, send with redirect url, sign a document and redirect to redirect url', async ({
   page,
 }) => {
@@ -333,3 +491,46 @@ test('[DOCUMENT_FLOW]: should be able to create, send with redirect url, sign a
 
   await unseedUser(user.id);
 });
+
+test('[DOCUMENT_FLOW]: should be able to sign a document with custom date', async ({ page }) => {
+  const user = await seedUser();
+  const customDate = DateTime.local().toFormat('yyyy-MM-dd hh:mm a');
+
+  const { document, recipients } = await seedPendingDocumentWithFullFields({
+    owner: user,
+    recipients: ['user1@example.com'],
+    fields: [FieldType.DATE],
+  });
+
+  const { token, Field } = recipients[0];
+  const [recipientField] = Field;
+
+  await page.goto(`/sign/${token}`);
+  await page.waitForURL(`/sign/${token}`);
+
+  await page.locator(`#field-${recipientField.id}`).getByRole('button').click();
+
+  await page.getByRole('button', { name: 'Complete' }).click();
+  await expect(page.getByRole('dialog').getByText('Complete Signing').first()).toBeVisible();
+  await page.getByRole('button', { name: 'Sign' }).click();
+
+  await page.waitForURL(`/sign/${token}/complete`);
+  await expect(page.getByText('Document Signed')).toBeVisible();
+
+  const field = await prisma.field.findFirst({
+    where: {
+      Recipient: {
+        email: 'user1@example.com',
+      },
+      documentId: Number(document.id),
+    },
+  });
+
+  expect(field?.customText).toBe(customDate);
+
+  // Check if document has been signed
+  const { status: completedStatus } = await getDocumentByToken(token);
+  expect(completedStatus).toBe(DocumentStatus.COMPLETED);
+
+  await unseedUser(user.id);
+});

packages/app-tests/e2e/fixtures/documents.ts

@@ -13,5 +13,5 @@ export const checkDocumentTabCount = async (page: Page, tabName: string, count:
     return;
   }
 
-  await expect(page.getByRole('main')).toContainText(`Showing ${count}`);
+  await expect(page.getByTestId('data-table-count')).toContainText(`Showing ${count}`);
 };

packages/app-tests/e2e/templates/direct-templates.spec.ts

@@ -0,0 +1,339 @@
+import { expect, test } from '@playwright/test';
+import { customAlphabet } from 'nanoid';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import {
+  DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+  DIRECT_TEMPLATE_RECIPIENT_NAME,
+} from '@documenso/lib/constants/template';
+import { createDocumentAuthOptions } from '@documenso/lib/utils/document-auth';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import { seedTeam, unseedTeam } from '@documenso/prisma/seed/teams';
+import { seedDirectTemplate, seedTemplate } from '@documenso/prisma/seed/templates';
+import { seedTestEmail, seedUser, unseedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../fixtures/authentication';
+import { checkDocumentTabCount } from '../fixtures/documents';
+
+const nanoid = customAlphabet('1234567890abcdef', 10);
+
+test.describe.configure({ mode: 'parallel' });
+
+test('[DIRECT_TEMPLATES]: create direct link for template', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+
+  // Should only be visible to the owner in personal templates.
+  const personalTemplate = await seedTemplate({
+    title: 'Personal template',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  const teamTemplate = await seedTemplate({
+    title: 'Team template 1',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  await apiSignin({
+    page,
+    email: owner.email,
+    redirectPath: '/templates',
+  });
+
+  const urls = [
+    `${WEBAPP_BASE_URL}/t/${team.url}/templates/${teamTemplate.id}`,
+    `${WEBAPP_BASE_URL}/templates/${personalTemplate.id}`,
+  ];
+
+  // Run test for personal and team templates.
+  for (const url of urls) {
+    // Owner should see list of templates with no direct link badge.
+    await page.goto(url);
+    await expect(page.getByRole('button', { name: 'direct link' })).toHaveCount(1);
+
+    // Create direct link.
+    await page.getByRole('button', { name: 'Create Direct Link' }).click();
+    await page.getByRole('button', { name: 'Enable direct link signing' }).click();
+    await page.getByRole('button', { name: 'Create one automatically' }).click();
+    await expect(page.getByRole('heading', { name: 'Direct Link Signing' })).toBeVisible();
+    await page.getByTestId('btn-dialog-close').click();
+
+    // Expect badge to appear.
+    await expect(page.getByRole('button', { name: 'direct link' })).toHaveCount(2);
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[DIRECT_TEMPLATES]: toggle direct template link', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+
+  // Should only be visible to the owner in personal templates.
+  const personalDirectTemplate = await seedDirectTemplate({
+    title: 'Personal direct template link',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  const teamDirectTemplate = await seedDirectTemplate({
+    title: 'Team direct template link 1',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  await apiSignin({
+    page,
+    email: owner.email,
+  });
+
+  // Run test for personal and team templates.
+  for (const template of [personalDirectTemplate, teamDirectTemplate]) {
+    // Check that the direct template link is accessible.
+    await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+    await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+    // Navigate to template settings and disable access.
+    await page.goto(`${WEBAPP_BASE_URL}${formatTemplatesPath(template.team?.url)}`);
+    await page.getByRole('cell', { name: 'Use Template' }).getByRole('button').nth(1).click();
+    await page.getByRole('menuitem', { name: 'Direct link' }).click();
+    await page.getByRole('switch').click();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await expect(page.getByText('Direct link signing has been').first()).toBeVisible();
+    await page.getByLabel('Direct Link Signing', { exact: true }).press('Escape');
+
+    // Check that the direct template link is no longer accessible.
+    await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+    await expect(page.getByText('Template not found')).toBeVisible();
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[DIRECT_TEMPLATES]: delete direct template link', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+
+  // Should only be visible to the owner in personal templates.
+  const personalDirectTemplate = await seedDirectTemplate({
+    title: 'Personal direct template link',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  const teamDirectTemplate = await seedDirectTemplate({
+    title: 'Team direct template link 1',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  await apiSignin({
+    page,
+    email: owner.email,
+  });
+
+  // Run test for personal and team templates.
+  for (const template of [personalDirectTemplate, teamDirectTemplate]) {
+    // Check that the direct template link is accessible.
+    await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+    await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+    // Navigate to template settings and delete the access.
+    await page.goto(`${WEBAPP_BASE_URL}${formatTemplatesPath(template.team?.url)}`);
+    await page.getByRole('cell', { name: 'Use Template' }).getByRole('button').nth(1).click();
+    await page.getByRole('menuitem', { name: 'Direct link' }).click();
+    await page.getByRole('button', { name: 'Remove' }).click();
+    await page.getByRole('button', { name: 'Confirm' }).click();
+    await expect(page.getByText('Direct template link deleted').first()).toBeVisible();
+
+    // Check that the direct template link is no longer accessible.
+    await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+    await expect(page.getByText('Template not found')).toBeVisible();
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[DIRECT_TEMPLATES]: direct template link auth access', async ({ page }) => {
+  const user = await seedUser();
+
+  const directTemplateWithAuth = await seedDirectTemplate({
+    title: 'Personal direct template link',
+    userId: user.id,
+    createTemplateOptions: {
+      authOptions: createDocumentAuthOptions({
+        globalAccessAuth: 'ACCOUNT',
+        globalActionAuth: null,
+      }),
+    },
+  });
+
+  const directTemplatePath = formatDirectTemplatePath(
+    directTemplateWithAuth.directLink?.token || '',
+  );
+
+  await page.goto(directTemplatePath);
+
+  await expect(page.getByText('Authentication required')).toBeVisible();
+
+  await apiSignin({
+    page,
+    email: user.email,
+  });
+
+  await page.goto(directTemplatePath);
+
+  await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+  await expect(page.getByLabel('Email')).toBeDisabled();
+
+  await unseedUser(user.id);
+});
+
+test('[DIRECT_TEMPLATES]: use direct template link with 1 recipient', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+
+  // Should only be visible to the owner in personal templates.
+  const personalDirectTemplate = await seedDirectTemplate({
+    title: 'Personal direct template link',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  const teamDirectTemplate = await seedDirectTemplate({
+    title: 'Team direct template link 1',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  // Run test for personal and team templates.
+  for (const template of [personalDirectTemplate, teamDirectTemplate]) {
+    // Check that the direct template link is accessible.
+    await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+    await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+    await page.getByPlaceholder('recipient@documenso.com').fill(seedTestEmail());
+
+    await page.getByRole('button', { name: 'Continue' }).click();
+    await page.getByRole('button', { name: 'Complete' }).click();
+    await page.getByRole('button', { name: 'Sign' }).click();
+    await page.waitForURL(/\/sign/);
+    await expect(page.getByRole('heading', { name: 'Document Signed' })).toBeVisible();
+  }
+
+  await apiSignin({
+    page,
+    email: owner.email,
+  });
+
+  // Check that the owner has the documents.
+  for (const template of [personalDirectTemplate, teamDirectTemplate]) {
+    await page.goto(`${WEBAPP_BASE_URL}${formatDocumentsPath(template.team?.url)}`);
+
+    // Check that the document is in the 'All' tab.
+    await checkDocumentTabCount(page, 'Completed', 1);
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[DIRECT_TEMPLATES]: use direct template link with 2 recipients', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+
+  const secondRecipient = await seedUser();
+
+  const createTemplateOptions = {
+    Recipient: {
+      createMany: {
+        data: [
+          {
+            email: DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+            name: DIRECT_TEMPLATE_RECIPIENT_NAME,
+            token: nanoid(),
+          },
+          {
+            email: secondRecipient.email,
+            token: nanoid(),
+          },
+        ],
+      },
+    },
+  };
+
+  // Should only be visible to the owner in personal templates.
+  const personalDirectTemplate = await seedDirectTemplate({
+    title: 'Personal direct template link',
+    userId: owner.id,
+    createTemplateOptions,
+  });
+
+  // Should be visible to team members.
+  const teamDirectTemplate = await seedDirectTemplate({
+    title: 'Team direct template link 1',
+    userId: owner.id,
+    teamId: team.id,
+    createTemplateOptions,
+  });
+
+  // Run test for personal and team templates.
+  for (const template of [personalDirectTemplate, teamDirectTemplate]) {
+    // Check that the direct template link is accessible.
+    await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+    await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+    await page.getByPlaceholder('recipient@documenso.com').fill(seedTestEmail());
+
+    await page.getByRole('button', { name: 'Continue' }).click();
+    await page.getByRole('button', { name: 'Complete' }).click();
+    await page.getByRole('button', { name: 'Sign' }).click();
+    await page.waitForURL(/\/sign/);
+    await expect(page.getByText('Waiting for others to sign')).toBeVisible();
+  }
+
+  await apiSignin({
+    page,
+    email: owner.email,
+  });
+
+  // Check that the owner has the documents.
+  for (const template of [personalDirectTemplate, teamDirectTemplate]) {
+    await page.goto(`${WEBAPP_BASE_URL}${formatDocumentsPath(template.team?.url)}`);
+
+    // Check that the document is in the 'All' tab.
+    await checkDocumentTabCount(page, 'All', 1);
+    await checkDocumentTabCount(page, 'Pending', 1);
+  }
+
+  // Check that the second recipient has the 2 pending documents.
+  await apiSignin({
+    page,
+    email: secondRecipient.email,
+  });
+
+  await page.goto('/documents');
+
+  await checkDocumentTabCount(page, 'All', 2);
+  await checkDocumentTabCount(page, 'Inbox', 2);
+
+  await unseedTeam(team.url);
+  await unseedUser(secondRecipient.id);
+});

packages/ee/server-only/limits/constants.ts

@@ -3,14 +3,17 @@ import type { TLimitsSchema } from './schema';
 export const FREE_PLAN_LIMITS: TLimitsSchema = {
   documents: 5,
   recipients: 10,
+  directTemplates: 3,
 };
 
 export const TEAM_PLAN_LIMITS: TLimitsSchema = {
   documents: Infinity,
   recipients: Infinity,
+  directTemplates: Infinity,
 };
 
 export const SELFHOSTED_PLAN_LIMITS: TLimitsSchema = {
   documents: Infinity,
   recipients: Infinity,
+  directTemplates: Infinity,
 };

packages/ee/server-only/limits/schema.ts

@@ -10,6 +10,10 @@ export const ZLimitsSchema = z.object({
     .preprocess((v) => (v === null ? Infinity : Number(v)), z.number())
     .optional()
     .default(0),
+  directTemplates: z
+    .preprocess((v) => (v === null ? Infinity : Number(v)), z.number())
+    .optional()
+    .default(0),
 });
 
 export type TLimitsSchema = z.infer<typeof ZLimitsSchema>;

packages/ee/server-only/limits/server.ts

@@ -2,11 +2,12 @@ import { DateTime } from 'luxon';
 
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { prisma } from '@documenso/prisma';
-import { SubscriptionStatus } from '@documenso/prisma/client';
+import { DocumentSource, SubscriptionStatus } from '@documenso/prisma/client';
 
 import { getDocumentRelatedPrices } from '../stripe/get-document-related-prices.ts';
 import { FREE_PLAN_LIMITS, SELFHOSTED_PLAN_LIMITS, TEAM_PLAN_LIMITS } from './constants';
 import { ERROR_CODES } from './errors';
+import type { TLimitsResponseSchema } from './schema';
 import { ZLimitsSchema } from './schema';
 
 export type GetServerLimitsOptions = {
@@ -14,7 +15,10 @@ export type GetServerLimitsOptions = {
   teamId?: number | null;
 };
 
-export const getServerLimits = async ({ email, teamId }: GetServerLimitsOptions) => {
+export const getServerLimits = async ({
+  email,
+  teamId,
+}: GetServerLimitsOptions): Promise<TLimitsResponseSchema> => {
   if (!IS_BILLING_ENABLED()) {
     return {
       quota: SELFHOSTED_PLAN_LIMITS,
@@ -74,19 +78,37 @@ const handleUserLimits = async ({ email }: HandleUserLimitsOptions) => {
         remaining = structuredClone(quota);
       }
     }
+
+    // Assume all active subscriptions provide unlimited direct templates.
+    remaining.directTemplates = Infinity;
   }
 
-  const documents = await prisma.document.count({
-    where: {
-      userId: user.id,
-      teamId: null,
-      createdAt: {
-        gte: DateTime.utc().startOf('month').toJSDate(),
+  const [documents, directTemplates] = await Promise.all([
+    prisma.document.count({
+      where: {
+        userId: user.id,
+        teamId: null,
+        createdAt: {
+          gte: DateTime.utc().startOf('month').toJSDate(),
+        },
+        source: {
+          not: DocumentSource.TEMPLATE_DIRECT_LINK,
+        },
       },
-    },
-  });
+    }),
+    prisma.template.count({
+      where: {
+        userId: user.id,
+        teamId: null,
+        directLink: {
+          isNot: null,
+        },
+      },
+    }),
+  ]);
 
   remaining.documents = Math.max(remaining.documents - documents, 0);
+  remaining.directTemplates = Math.max(remaining.directTemplates - directTemplates, 0);
 
   return {
     quota,
@@ -127,10 +149,12 @@ const handleTeamLimits = async ({ email, teamId }: HandleTeamLimitsOptions) => {
       quota: {
         documents: 0,
         recipients: 0,
+        directTemplates: 0,
       },
       remaining: {
         documents: 0,
         recipients: 0,
+        directTemplates: 0,
       },
     };
   }

packages/ee/server-only/stripe/webhook/on-early-adopters-checkout.ts

@@ -8,6 +8,7 @@ import { alphaid, nanoid } from '@documenso/lib/universal/id';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { prisma } from '@documenso/prisma';
 import {
+  DocumentSource,
   DocumentStatus,
   FieldType,
   ReadStatus,
@@ -86,6 +87,7 @@ export const onEarlyAdoptersCheckout = async ({ session }: OnEarlyAdoptersChecko
         status: DocumentStatus.COMPLETED,
         userId: newUser.id,
         documentDataId,
+        source: DocumentSource.DOCUMENT,
       },
     });
 

packages/email/templates/document-created-from-direct-template.tsx

@@ -0,0 +1,99 @@
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import config from '@documenso/tailwind-config';
+
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Html,
+  Img,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '../components';
+import TemplateDocumentImage from '../template-components/template-document-image';
+import { TemplateFooter } from '../template-components/template-footer';
+import { RecipientRole } from '.prisma/client';
+
+export type DocumentCompletedEmailTemplateProps = {
+  recipientName?: string;
+  recipientRole?: RecipientRole;
+  documentLink?: string;
+  documentName?: string;
+  assetBaseUrl?: string;
+};
+
+export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
+  recipientName = 'John Doe',
+  recipientRole = RecipientRole.SIGNER,
+  documentLink = 'http://localhost:3000',
+  documentName = 'Open Source Pledge.pdf',
+  assetBaseUrl = 'http://localhost:3002',
+}: DocumentCompletedEmailTemplateProps) => {
+  const action = RECIPIENT_ROLES_DESCRIPTION[recipientRole].actioned.toLowerCase();
+
+  const previewText = `Document created from direct template`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto font-sans">
+          <Section className="bg-white">
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+              <Section className="p-2">
+                <Img
+                  src={getAssetUrl('/static/logo.png')}
+                  alt="Documenso Logo"
+                  className="mb-4 h-6"
+                />
+
+                <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+
+                <Section>
+                  <Text className="text-primary mb-0 text-center text-lg font-semibold">
+                    {recipientName} {action} a document by using one of your direct links
+                  </Text>
+
+                  <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-sm text-slate-600">
+                    {documentName}
+                  </div>
+
+                  <Section className="my-6 text-center">
+                    <Button
+                      className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+                      href={documentLink}
+                    >
+                      View document
+                    </Button>
+                  </Section>
+                </Section>
+              </Section>
+            </Container>
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default DocumentCreatedFromDirectTemplateEmailTemplate;

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

@@ -18,7 +18,7 @@ export const downloadPDF = async ({ documentData, fileName }: DownloadPDFProps)
   const baseTitle = (fileName ?? 'document').replace(/\.pdf$/, '');
 
   downloadFile({
-    filename: `${baseTitle}.pdf`,
+    filename: `${baseTitle}_signed.pdf`,
     data: blob,
   });
 };

packages/lib/constants/auth.ts

@@ -5,12 +5,19 @@ export const SALT_ROUNDS = 12;
 export const IDENTITY_PROVIDER_NAME: { [key in IdentityProvider]: string } = {
   [IdentityProvider.DOCUMENSO]: 'Documenso',
   [IdentityProvider.GOOGLE]: 'Google',
+  [IdentityProvider.OIDC]: 'OIDC',
 };
 
 export const IS_GOOGLE_SSO_ENABLED = Boolean(
   process.env.NEXT_PRIVATE_GOOGLE_CLIENT_ID && process.env.NEXT_PRIVATE_GOOGLE_CLIENT_SECRET,
 );
 
+export const IS_OIDC_SSO_ENABLED = Boolean(
+  process.env.NEXT_PRIVATE_OIDC_WELL_KNOWN &&
+    process.env.NEXT_PRIVATE_OIDC_CLIENT_ID &&
+    process.env.NEXT_PRIVATE_OIDC_CLIENT_SECRET,
+);
+
 export const USER_SECURITY_AUDIT_LOG_MAP: { [key in UserSecurityAuditLogType]: string } = {
   [UserSecurityAuditLogType.ACCOUNT_SSO_LINK]: 'Linked account to SSO',
   [UserSecurityAuditLogType.ACCOUNT_PROFILE_UPDATE]: 'Profile updated',

packages/lib/constants/pdf.ts

@@ -1,6 +1,6 @@
 import { APP_BASE_URL } from './app';
 
-export const DEFAULT_STANDARD_FONT_SIZE = 15;
+export const DEFAULT_STANDARD_FONT_SIZE = 12;
 export const DEFAULT_HANDWRITING_FONT_SIZE = 50;
 
 export const MIN_STANDARD_FONT_SIZE = 8;

packages/lib/constants/template.ts

@@ -1,2 +1,28 @@
 export const TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX = /recipient\.\d+@documenso\.com/i;
 export const TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX = /Recipient \d+/i;
+
+export const DIRECT_TEMPLATE_DOCUMENTATION = [
+  {
+    title: 'Enable Direct Link Signing',
+    description:
+      'Once enabled, you can select any active recipient to be a direct link signing recipient, or create a new one. This recipient type cannot be edited or deleted.',
+  },
+  {
+    title: 'Configure Direct Recipient',
+    description:
+      'Update the role and add fields as required for the direct recipient. The individual who uses the direct link will sign the document as the direct recipient.',
+  },
+  {
+    title: 'Share the Link',
+    description:
+      'Once your template is set up, share the link anywhere you want. The person who opens the link will be able to enter their information in the direct link recipient field and complete any other fields assigned to them.',
+  },
+  {
+    title: 'Document Creation',
+    description:
+      'After submission, a document will be automatically generated and added to your documents page. You will also receive a notification via email.',
+  },
+];
+
+export const DIRECT_TEMPLATE_RECIPIENT_EMAIL = 'direct.link@documenso.com';
+export const DIRECT_TEMPLATE_RECIPIENT_NAME = 'Direct link recipient';

packages/lib/errors/app-error.ts

@@ -12,6 +12,7 @@ export enum AppErrorCode {
   'EXPIRED_CODE' = 'ExpiredCode',
   'INVALID_BODY' = 'InvalidBody',
   'INVALID_REQUEST' = 'InvalidRequest',
+  'LIMIT_EXCEEDED' = 'LimitExceeded',
   'NOT_FOUND' = 'NotFound',
   'NOT_SETUP' = 'NotSetup',
   'UNAUTHORIZED' = 'Unauthorized',

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

@@ -136,6 +136,30 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
         };
       },
     }),
+    {
+      id: 'oidc',
+      name: 'OIDC',
+      type: 'oauth',
+
+      wellKnown: process.env.NEXT_PRIVATE_OIDC_WELL_KNOWN,
+      clientId: process.env.NEXT_PRIVATE_OIDC_CLIENT_ID,
+      clientSecret: process.env.NEXT_PRIVATE_OIDC_CLIENT_SECRET,
+
+      authorization: { params: { scope: 'openid email profile' } },
+      checks: ['pkce', 'state'],
+
+      idToken: true,
+      allowDangerousEmailAccountLinking: true,
+
+      profile(profile) {
+        return {
+          id: profile.sub,
+          email: profile.email || profile.preferred_username,
+          name: profile.name || `${profile.given_name} ${profile.family_name}`.trim(),
+          emailVerified: profile.email_verified ? new Date().toISOString() : null,
+        };
+      },
+    },
     CredentialsProvider({
       id: 'webauthn',
       name: 'Keypass',

packages/lib/package.json

@@ -16,6 +16,7 @@
     "clean": "rimraf node_modules"
   },
   "dependencies": {
+    "@auth/kysely-adapter": "^0.6.0",
     "@aws-sdk/client-s3": "^3.410.0",
     "@aws-sdk/cloudfront-signer": "^3.410.0",
     "@aws-sdk/s3-request-presigner": "^3.410.0",
@@ -27,18 +28,20 @@
     "@next-auth/prisma-adapter": "1.0.7",
     "@noble/ciphers": "0.4.0",
     "@noble/hashes": "1.3.2",
+    "@node-rs/bcrypt": "^1.10.0",
     "@pdf-lib/fontkit": "^1.1.1",
     "@scure/base": "^1.1.3",
     "@sindresorhus/slugify": "^2.2.1",
     "@upstash/redis": "^1.20.6",
     "@vvo/tzdb": "^6.117.0",
-    "@node-rs/bcrypt": "^1.10.0",
+    "kysely": "^0.26.3",
     "luxon": "^3.4.0",
     "nanoid": "^4.0.2",
     "next": "14.0.3",
     "next-auth": "4.24.5",
     "oslo": "^0.17.0",
     "pdf-lib": "^1.17.1",
+    "pg": "^8.11.3",
     "playwright": "1.43.0",
     "react": "18.2.0",
     "remeda": "^1.27.1",
@@ -48,6 +51,7 @@
   },
   "devDependencies": {
     "@types/luxon": "^3.3.1",
+    "@types/pg": "^8.11.4",
     "@playwright/browser-chromium": "1.43.0"
   }
-}
+}

packages/lib/server-only/document/create-document.ts

@@ -5,7 +5,7 @@ import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-log
 import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
-import { WebhookTriggerEvents } from '@documenso/prisma/client';
+import { DocumentSource, WebhookTriggerEvents } from '@documenso/prisma/client';
 
 import { triggerWebhook } from '../webhooks/trigger/trigger-webhook';
 
@@ -54,6 +54,7 @@ export const createDocument = async ({
         userId,
         teamId,
         formValues,
+        source: DocumentSource.DOCUMENT,
       },
     });
 
@@ -65,6 +66,9 @@ export const createDocument = async ({
         requestMetadata,
         data: {
           title,
+          source: {
+            type: DocumentSource.DOCUMENT,
+          },
         },
       }),
     });

packages/lib/server-only/document/duplicate-document-by-id.ts

@@ -1,5 +1,5 @@
 import { prisma } from '@documenso/prisma';
-import type { Prisma } from '@documenso/prisma/client';
+import { DocumentSource, type Prisma } from '@documenso/prisma/client';
 
 import { getDocumentWhereInput } from './get-document-by-id';
 
@@ -64,6 +64,7 @@ export const duplicateDocumentById = async ({
           ...document.documentMeta,
         },
       },
+      source: DocumentSource.DOCUMENT,
     },
   };
 

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

@@ -99,7 +99,7 @@ export const getDocumentAndSenderByToken = async ({
   if (requireAccessAuth) {
     documentAccessValid = await isRecipientAuthorized({
       type: 'ACCESS',
-      document: result,
+      documentAuthOptions: result.authOptions,
       recipient,
       userId,
       authOptions: accessAuth,
@@ -159,7 +159,7 @@ export const getDocumentAndRecipientByToken = async ({
   if (requireAccessAuth) {
     documentAccessValid = await isRecipientAuthorized({
       type: 'ACCESS',
-      document: result,
+      documentAuthOptions: result.authOptions,
       recipient,
       userId,
       authOptions: accessAuth,

packages/lib/server-only/document/is-recipient-authorized.ts

@@ -14,8 +14,8 @@ import { extractDocumentAuthMethods } from '../../utils/document-auth';
 
 type IsRecipientAuthorizedOptions = {
   type: 'ACCESS' | 'ACTION';
-  document: Document;
-  recipient: Recipient;
+  documentAuthOptions: Document['authOptions'];
+  recipient: Pick<Recipient, 'authOptions' | 'email'>;
 
   /**
    * The ID of the user who initiated the request.
@@ -50,13 +50,13 @@ const getUserByEmail = async (email: string) => {
  */
 export const isRecipientAuthorized = async ({
   type,
-  document,
+  documentAuthOptions,
   recipient,
   userId,
   authOptions,
 }: IsRecipientAuthorizedOptions): Promise<boolean> => {
   const { derivedRecipientAccessAuth, derivedRecipientActionAuth } = extractDocumentAuthMethods({
-    documentAuth: document.authOptions,
+    documentAuth: documentAuthOptions,
     recipientAuth: recipient.authOptions,
   });
 

packages/lib/server-only/document/seal-document.ts

@@ -17,6 +17,7 @@ import { getFile } from '../../universal/upload/get-file';
 import { putPdfFile } from '../../universal/upload/put-file';
 import { getCertificatePdf } from '../htmltopdf/get-certificate-pdf';
 import { flattenAnnotations } from '../pdf/flatten-annotations';
+import { flattenForm } from '../pdf/flatten-form';
 import { insertFieldInPDF } from '../pdf/insert-field-in-pdf';
 import { normalizeSignatureAppearances } from '../pdf/normalize-signature-appearances';
 import { triggerWebhook } from '../webhooks/trigger/trigger-webhook';
@@ -101,7 +102,7 @@ export const sealDocument = async ({
 
   // Normalize and flatten layers that could cause issues with the signature
   normalizeSignatureAppearances(doc);
-  doc.getForm().flatten();
+  flattenForm(doc);
   flattenAnnotations(doc);
 
   if (certificate) {

packages/lib/server-only/document/send-document.tsx

@@ -12,7 +12,13 @@ import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
 import { prisma } from '@documenso/prisma';
-import { DocumentStatus, RecipientRole, SendStatus } from '@documenso/prisma/client';
+import {
+  DocumentSource,
+  DocumentStatus,
+  RecipientRole,
+  SendStatus,
+  SigningStatus,
+} from '@documenso/prisma/client';
 import { WebhookTriggerEvents } from '@documenso/prisma/client';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
@@ -28,6 +34,7 @@ export type SendDocumentOptions = {
   documentId: number;
   userId: number;
   teamId?: number;
+  sendEmail?: boolean;
   requestMetadata?: RequestMetadata;
 };
 
@@ -35,6 +42,7 @@ export const sendDocument = async ({
   documentId,
   userId,
   teamId,
+  sendEmail = true,
   requestMetadata,
 }: SendDocumentOptions) => {
   const user = await prisma.user.findFirstOrThrow({
@@ -90,6 +98,8 @@ export const sendDocument = async ({
 
   const { documentData } = document;
 
+  const isDirectTemplate = document.source === DocumentSource.TEMPLATE_DIRECT_LINK;
+
   if (!documentData.data) {
     throw new Error('Document data not found');
   }
@@ -120,101 +130,106 @@ export const sendDocument = async ({
     Object.assign(document, result);
   }
 
-  await Promise.all(
-    document.Recipient.map(async (recipient) => {
-      if (recipient.sendStatus === SendStatus.SENT || recipient.role === RecipientRole.CC) {
-        return;
-      }
+  if (sendEmail) {
+    await Promise.all(
+      document.Recipient.map(async (recipient) => {
+        if (recipient.sendStatus === SendStatus.SENT || recipient.role === RecipientRole.CC) {
+          return;
+        }
 
-      const recipientEmailType = RECIPIENT_ROLE_TO_EMAIL_TYPE[recipient.role];
+        const recipientEmailType = RECIPIENT_ROLE_TO_EMAIL_TYPE[recipient.role];
 
-      const { email, name } = recipient;
-      const selfSigner = email === user.email;
+        const { email, name } = recipient;
+        const selfSigner = email === user.email;
+        const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[recipient.role];
+        const recipientActionVerb = actionVerb.toLowerCase();
 
-      const selfSignerCustomEmail = `You have initiated the document ${`"${document.title}"`} that requires you to ${RECIPIENT_ROLES_DESCRIPTION[
-        recipient.role
-      ].actionVerb.toLowerCase()} it.`;
+        let emailMessage = customEmail?.message || '';
+        let emailSubject = `Please ${recipientActionVerb} this document`;
 
-      const customEmailTemplate = {
-        'signer.name': name,
-        'signer.email': email,
-        'document.name': document.title,
-      };
+        if (selfSigner) {
+          emailMessage = `You have initiated the document ${`"${document.title}"`} that requires you to ${recipientActionVerb} it.`;
+          emailSubject = `Please ${recipientActionVerb} your document`;
+        }
 
-      const assetBaseUrl = NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000';
-      const signDocumentLink = `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`;
+        if (isDirectTemplate) {
+          emailMessage = `A document was created by your direct template that requires you to ${recipientActionVerb} it.`;
+          emailSubject = `Please ${recipientActionVerb} this document created by your direct template`;
+        }
 
-      const template = createElement(DocumentInviteEmailTemplate, {
-        documentName: document.title,
-        inviterName: user.name || undefined,
-        inviterEmail: user.email,
-        assetBaseUrl,
-        signDocumentLink,
-        customBody: renderCustomEmailTemplate(
-          selfSigner && !customEmail?.message ? selfSignerCustomEmail : customEmail?.message || '',
-          customEmailTemplate,
-        ),
-        role: recipient.role,
-        selfSigner,
-      });
+        const customEmailTemplate = {
+          'signer.name': name,
+          'signer.email': email,
+          'document.name': document.title,
+        };
 
-      const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[recipient.role];
+        const assetBaseUrl = NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000';
+        const signDocumentLink = `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`;
 
-      const emailSubject = selfSigner
-        ? `Please ${actionVerb.toLowerCase()} your document`
-        : `Please ${actionVerb.toLowerCase()} this document`;
+        const template = createElement(DocumentInviteEmailTemplate, {
+          documentName: document.title,
+          inviterName: user.name || undefined,
+          inviterEmail: user.email,
+          assetBaseUrl,
+          signDocumentLink,
+          customBody: renderCustomEmailTemplate(emailMessage, customEmailTemplate),
+          role: recipient.role,
+          selfSigner,
+        });
 
-      await prisma.$transaction(
-        async (tx) => {
-          await mailer.sendMail({
-            to: {
-              address: email,
-              name,
-            },
-            from: {
-              name: FROM_NAME,
-              address: FROM_ADDRESS,
-            },
-            subject: customEmail?.subject
-              ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
-              : emailSubject,
-            html: render(template),
-            text: render(template, { plainText: true }),
-          });
-
-          await tx.recipient.update({
-            where: {
-              id: recipient.id,
-            },
-            data: {
-              sendStatus: SendStatus.SENT,
-            },
-          });
-
-          await tx.documentAuditLog.create({
-            data: createDocumentAuditLogData({
-              type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT,
-              documentId: document.id,
-              user,
-              requestMetadata,
-              data: {
-                emailType: recipientEmailType,
-                recipientEmail: recipient.email,
-                recipientName: recipient.name,
-                recipientRole: recipient.role,
-                recipientId: recipient.id,
-                isResending: false,
+        await prisma.$transaction(
+          async (tx) => {
+            await mailer.sendMail({
+              to: {
+                address: email,
+                name,
               },
-            }),
-          });
-        },
-        { timeout: 30_000 },
-      );
-    }),
-  );
+              from: {
+                name: FROM_NAME,
+                address: FROM_ADDRESS,
+              },
+              subject: customEmail?.subject
+                ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
+                : emailSubject,
+              html: render(template),
+              text: render(template, { plainText: true }),
+            });
+
+            await tx.recipient.update({
+              where: {
+                id: recipient.id,
+              },
+              data: {
+                sendStatus: SendStatus.SENT,
+              },
+            });
+
+            await tx.documentAuditLog.create({
+              data: createDocumentAuditLogData({
+                type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT,
+                documentId: document.id,
+                user,
+                requestMetadata,
+                data: {
+                  emailType: recipientEmailType,
+                  recipientEmail: recipient.email,
+                  recipientName: recipient.name,
+                  recipientRole: recipient.role,
+                  recipientId: recipient.id,
+                  isResending: false,
+                },
+              }),
+            });
+          },
+          { timeout: 30_000 },
+        );
+      }),
+    );
+  }
 
   const allRecipientsHaveNoActionToTake = document.Recipient.every(
-    (recipient) => recipient.role === RecipientRole.CC,
+    (recipient) =>
+      recipient.role === RecipientRole.CC || recipient.signingStatus === SigningStatus.SIGNED,
   );
 
   if (allRecipientsHaveNoActionToTake) {

packages/lib/server-only/document/validate-field-auth.ts

@@ -0,0 +1,52 @@
+import type { Document, Field, Recipient } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+
+import { AppError, AppErrorCode } from '../../errors/app-error';
+import type { TRecipientActionAuth } from '../../types/document-auth';
+import { extractDocumentAuthMethods } from '../../utils/document-auth';
+import { isRecipientAuthorized } from './is-recipient-authorized';
+
+export type ValidateFieldAuthOptions = {
+  documentAuthOptions: Document['authOptions'];
+  recipient: Pick<Recipient, 'authOptions' | 'email'>;
+  field: Field;
+  userId?: number;
+  authOptions?: TRecipientActionAuth;
+};
+
+/**
+ * Throws an error if the reauth for a field is invalid.
+ *
+ * Returns the derived recipient action authentication if valid.
+ */
+export const validateFieldAuth = async ({
+  documentAuthOptions,
+  recipient,
+  field,
+  userId,
+  authOptions,
+}: ValidateFieldAuthOptions) => {
+  const { derivedRecipientActionAuth } = extractDocumentAuthMethods({
+    documentAuth: documentAuthOptions,
+    recipientAuth: recipient.authOptions,
+  });
+
+  // Override all non-signature fields to not require any auth.
+  if (field.type !== FieldType.SIGNATURE) {
+    return null;
+  }
+
+  const isValid = await isRecipientAuthorized({
+    type: 'ACTION',
+    documentAuthOptions,
+    recipient,
+    userId,
+    authOptions,
+  });
+
+  if (!isValid) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, 'Invalid authentication values');
+  }
+
+  return derivedRecipientActionAuth;
+};

packages/lib/server-only/field/sign-field-with-token.ts

@@ -8,13 +8,11 @@ import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/clie
 
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '../../constants/date-formats';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '../../constants/time-zones';
-import { AppError, AppErrorCode } from '../../errors/app-error';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
 import type { TRecipientActionAuth } from '../../types/document-auth';
 import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
-import { extractDocumentAuthMethods } from '../../utils/document-auth';
-import { isRecipientAuthorized } from '../document/is-recipient-authorized';
+import { validateFieldAuth } from '../document/validate-field-auth';
 
 export type SignFieldWithTokenOptions = {
   token: string;
@@ -26,6 +24,16 @@ export type SignFieldWithTokenOptions = {
   requestMetadata?: RequestMetadata;
 };
 
+/**
+ * Please read.
+ *
+ * Content within this function has been duplicated in the
+ * createDocumentFromDirectTemplate file.
+ *
+ * Any update to this should be reflected in the other file if required.
+ *
+ * Todo: Extract common logic.
+ */
 export const signFieldWithToken = async ({
   token,
   fieldId,
@@ -79,33 +87,14 @@ export const signFieldWithToken = async ({
     throw new Error(`Field ${fieldId} has no recipientId`);
   }
 
-  let { derivedRecipientActionAuth } = extractDocumentAuthMethods({
-    documentAuth: document.authOptions,
-    recipientAuth: recipient.authOptions,
+  const derivedRecipientActionAuth = await validateFieldAuth({
+    documentAuthOptions: document.authOptions,
+    recipient,
+    field,
+    userId,
+    authOptions,
   });
 
-  // Override all non-signature fields to not require any auth.
-  if (field.type !== FieldType.SIGNATURE) {
-    derivedRecipientActionAuth = null;
-  }
-
-  let isValid = true;
-
-  // Only require auth on signature fields for now.
-  if (field.type === FieldType.SIGNATURE) {
-    isValid = await isRecipientAuthorized({
-      type: 'ACTION',
-      document: document,
-      recipient: recipient,
-      userId,
-      authOptions,
-    });
-  }
-
-  if (!isValid) {
-    throw new AppError(AppErrorCode.UNAUTHORIZED, 'Invalid authentication values');
-  }
-
   const documentMeta = await prisma.documentMeta.findFirst({
     where: {
       documentId: document.id,
@@ -142,10 +131,6 @@ export const signFieldWithToken = async ({
     });
 
     if (isSignatureField) {
-      if (!field.recipientId) {
-        throw new Error('Field has no recipientId');
-      }
-
       const signature = await tx.signature.upsert({
         where: {
           fieldId: field.id,

packages/lib/server-only/pdf/flatten-form.ts

@@ -0,0 +1,112 @@
+import type { PDFField, PDFWidgetAnnotation } from 'pdf-lib';
+import { PDFCheckBox, PDFRadioGroup, PDFRef } from 'pdf-lib';
+import {
+  PDFDict,
+  type PDFDocument,
+  PDFName,
+  drawObject,
+  popGraphicsState,
+  pushGraphicsState,
+  rotateInPlace,
+  translate,
+} from 'pdf-lib';
+
+export const flattenForm = (document: PDFDocument) => {
+  const form = document.getForm();
+
+  form.updateFieldAppearances();
+
+  for (const field of form.getFields()) {
+    for (const widget of field.acroField.getWidgets()) {
+      flattenWidget(document, field, widget);
+    }
+
+    try {
+      form.removeField(field);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+};
+
+const getPageForWidget = (document: PDFDocument, widget: PDFWidgetAnnotation) => {
+  const pageRef = widget.P();
+
+  let page = document.getPages().find((page) => page.ref === pageRef);
+
+  if (!page) {
+    const widgetRef = document.context.getObjectRef(widget.dict);
+
+    if (!widgetRef) {
+      return null;
+    }
+
+    page = document.findPageForAnnotationRef(widgetRef);
+
+    if (!page) {
+      return null;
+    }
+  }
+
+  return page;
+};
+
+const getAppearanceRefForWidget = (field: PDFField, widget: PDFWidgetAnnotation) => {
+  try {
+    const normalAppearance = widget.getNormalAppearance();
+    let normalAppearanceRef: PDFRef | null = null;
+
+    if (normalAppearance instanceof PDFRef) {
+      normalAppearanceRef = normalAppearance;
+    }
+
+    if (
+      normalAppearance instanceof PDFDict &&
+      (field instanceof PDFCheckBox || field instanceof PDFRadioGroup)
+    ) {
+      const value = field.acroField.getValue();
+      const ref = normalAppearance.get(value) ?? normalAppearance.get(PDFName.of('Off'));
+
+      if (ref instanceof PDFRef) {
+        normalAppearanceRef = ref;
+      }
+    }
+
+    return normalAppearanceRef;
+  } catch (error) {
+    console.error(error);
+
+    return null;
+  }
+};
+
+const flattenWidget = (document: PDFDocument, field: PDFField, widget: PDFWidgetAnnotation) => {
+  try {
+    const page = getPageForWidget(document, widget);
+
+    if (!page) {
+      return;
+    }
+
+    const appearanceRef = getAppearanceRefForWidget(field, widget);
+
+    if (!appearanceRef) {
+      return;
+    }
+
+    const xObjectKey = page.node.newXObject('FlatWidget', appearanceRef);
+
+    const rectangle = widget.getRectangle();
+    const operators = [
+      pushGraphicsState(),
+      translate(rectangle.x, rectangle.y),
+      ...rotateInPlace({ ...rectangle, rotation: 0 }),
+      drawObject(xObjectKey),
+      popGraphicsState(),
+    ].filter((op) => !!op);
+
+    page.pushOperators(...operators);
+  } catch (error) {
+    console.error(error);
+  }
+};

packages/lib/server-only/pdf/insert-field-in-pdf.ts

@@ -1,6 +1,6 @@
 // https://github.com/Hopding/pdf-lib/issues/20#issuecomment-412852821
 import fontkit from '@pdf-lib/fontkit';
-import { PDFDocument, StandardFonts } from 'pdf-lib';
+import { PDFDocument } from 'pdf-lib';
 
 import {
   DEFAULT_HANDWRITING_FONT_SIZE,
@@ -17,6 +17,10 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
     res.arrayBuffer(),
   );
 
+  const fontNoto = await fetch(process.env.FONT_NOTO_SANS_URI).then(async (res) =>
+    res.arrayBuffer(),
+  );
+
   const isSignatureField = isSignatureFieldType(field.type);
 
   pdf.registerFontkit(fontkit);
@@ -41,7 +45,7 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
   const fieldX = pageWidth * (Number(field.positionX) / 100);
   const fieldY = pageHeight * (Number(field.positionY) / 100);
 
-  const font = await pdf.embedFont(isSignatureField ? fontCaveat : StandardFonts.Helvetica);
+  const font = await pdf.embedFont(isSignatureField ? fontCaveat : fontNoto);
 
   if (field.type === FieldType.SIGNATURE || field.type === FieldType.FREE_SIGNATURE) {
     await pdf.embedFont(fontCaveat);

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

@@ -3,6 +3,10 @@ import { prisma } from '@documenso/prisma';
 import type { Recipient } from '@documenso/prisma/client';
 import { RecipientRole } from '@documenso/prisma/client';
 
+import {
+  DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+  DIRECT_TEMPLATE_RECIPIENT_NAME,
+} from '../../constants/template';
 import { AppError, AppErrorCode } from '../../errors/app-error';
 import {
   type TRecipientActionAuthTypes,
@@ -48,6 +52,9 @@ export const setRecipientsForTemplate = async ({
         },
       ],
     },
+    include: {
+      directLink: true,
+    },
   });
 
   if (!template) {
@@ -71,10 +78,21 @@ export const setRecipientsForTemplate = async ({
     }
   }
 
-  const normalizedRecipients = recipients.map((recipient) => ({
-    ...recipient,
-    email: recipient.email.toLowerCase(),
-  }));
+  const normalizedRecipients = recipients.map((recipient) => {
+    // Force replace any changes to the name or email of the direct recipient.
+    if (template.directLink && recipient.id === template.directLink.directTemplateRecipientId) {
+      return {
+        ...recipient,
+        email: DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+        name: DIRECT_TEMPLATE_RECIPIENT_NAME,
+      };
+    }
+
+    return {
+      ...recipient,
+      email: recipient.email.toLowerCase(),
+    };
+  });
 
   const existingRecipients = await prisma.recipient.findMany({
     where: {
@@ -90,6 +108,27 @@ export const setRecipientsForTemplate = async ({
       ),
   );
 
+  if (template.directLink !== null) {
+    const updatedDirectRecipient = recipients.find(
+      (recipient) => recipient.id === template.directLink?.directTemplateRecipientId,
+    );
+
+    const deletedDirectRecipient = removedRecipients.find(
+      (recipient) => recipient.id === template.directLink?.directTemplateRecipientId,
+    );
+
+    if (updatedDirectRecipient?.role === RecipientRole.CC) {
+      throw new AppError(AppErrorCode.INVALID_BODY, 'Cannot set direct recipient as CC');
+    }
+
+    if (deletedDirectRecipient) {
+      throw new AppError(
+        AppErrorCode.INVALID_BODY,
+        'Cannot delete direct recipient while direct template exists',
+      );
+    }
+  }
+
   const linkedRecipients = normalizedRecipients.map((recipient) => {
     const existing = existingRecipients.find(
       (existingRecipient) =>

packages/lib/server-only/template/create-document-from-direct-template.ts

@@ -0,0 +1,527 @@
+import { createElement } from 'react';
+
+import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { DocumentCreatedFromDirectTemplateEmailTemplate } from '@documenso/email/templates/document-created-from-direct-template';
+import { nanoid } from '@documenso/lib/universal/id';
+import { prisma } from '@documenso/prisma';
+import type { Field, Signature } from '@documenso/prisma/client';
+import {
+  DocumentSource,
+  DocumentStatus,
+  FieldType,
+  RecipientRole,
+  SendStatus,
+  SigningStatus,
+} from '@documenso/prisma/client';
+import type { TSignFieldWithTokenMutationSchema } from '@documenso/trpc/server/field-router/schema';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '../../constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '../../constants/time-zones';
+import { AppError, AppErrorCode } from '../../errors/app-error';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import type { TRecipientActionAuthTypes } from '../../types/document-auth';
+import { DocumentAccessAuth, ZRecipientAuthOptionsSchema } from '../../types/document-auth';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import type { CreateDocumentAuditLogDataResponse } from '../../utils/document-audit-logs';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
+import {
+  createDocumentAuthOptions,
+  createRecipientAuthOptions,
+  extractDocumentAuthMethods,
+} from '../../utils/document-auth';
+import { formatDocumentsPath } from '../../utils/teams';
+import { sendDocument } from '../document/send-document';
+import { validateFieldAuth } from '../document/validate-field-auth';
+
+export type CreateDocumentFromDirectTemplateOptions = {
+  directRecipientEmail: string;
+  directTemplateToken: string;
+  signedFieldValues: TSignFieldWithTokenMutationSchema[];
+  templateUpdatedAt: Date;
+  requestMetadata: RequestMetadata;
+  user?: {
+    id: number;
+    name?: string;
+    email: string;
+  };
+};
+
+type CreatedDirectRecipientField = {
+  field: Field & { Signature?: Signature | null };
+  derivedRecipientActionAuth: TRecipientActionAuthTypes | null;
+};
+
+export const createDocumentFromDirectTemplate = async ({
+  directRecipientEmail,
+  directTemplateToken,
+  signedFieldValues,
+  templateUpdatedAt,
+  requestMetadata,
+  user,
+}: CreateDocumentFromDirectTemplateOptions) => {
+  const template = await prisma.template.findFirst({
+    where: {
+      directLink: {
+        token: directTemplateToken,
+      },
+    },
+    include: {
+      Recipient: {
+        include: {
+          Field: true,
+        },
+      },
+      directLink: true,
+      templateDocumentData: true,
+      templateMeta: true,
+      User: true,
+    },
+  });
+
+  if (!template?.directLink?.enabled) {
+    throw new AppError(AppErrorCode.INVALID_REQUEST, 'Invalid or missing template');
+  }
+
+  const { Recipient: recipients, directLink, User: templateOwner } = template;
+
+  const directTemplateRecipient = recipients.find(
+    (recipient) => recipient.id === directLink.directTemplateRecipientId,
+  );
+
+  if (!directTemplateRecipient || directTemplateRecipient.role === RecipientRole.CC) {
+    throw new AppError(AppErrorCode.INVALID_REQUEST, 'Invalid or missing direct recipient');
+  }
+
+  if (template.updatedAt.getTime() !== templateUpdatedAt.getTime()) {
+    throw new AppError(AppErrorCode.INVALID_REQUEST, 'Template no longer matches');
+  }
+
+  if (user && user.email !== directRecipientEmail) {
+    throw new AppError(AppErrorCode.INVALID_REQUEST, 'Email must match if you are logged in');
+  }
+
+  const { derivedRecipientAccessAuth, documentAuthOption: templateAuthOptions } =
+    extractDocumentAuthMethods({
+      documentAuth: template.authOptions,
+    });
+
+  const directRecipientName = user?.name;
+
+  // Ensure typesafety when we add more options.
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
+    .with(DocumentAccessAuth.ACCOUNT, () => user && user?.email === directRecipientEmail)
+    .with(null, () => true)
+    .exhaustive();
+
+  if (!isAccessAuthValid) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, 'You must be logged in');
+  }
+
+  const directTemplateRecipientAuthOptions = ZRecipientAuthOptionsSchema.parse(
+    directTemplateRecipient.authOptions,
+  );
+
+  const nonDirectTemplateRecipients = template.Recipient.filter(
+    (recipient) => recipient.id !== directTemplateRecipient.id,
+  );
+
+  const metaTimezone = template.templateMeta?.timezone || DEFAULT_DOCUMENT_TIME_ZONE;
+  const metaDateFormat = template.templateMeta?.dateFormat || DEFAULT_DOCUMENT_DATE_FORMAT;
+
+  // Associate, validate and map to a query every direct template recipient field with the provided fields.
+  const createDirectRecipientFieldArgs = await Promise.all(
+    directTemplateRecipient.Field.map(async (templateField) => {
+      const signedFieldValue = signedFieldValues.find(
+        (value) => value.fieldId === templateField.id,
+      );
+
+      if (!signedFieldValue) {
+        throw new AppError(AppErrorCode.INVALID_BODY, 'Invalid, missing or changed fields');
+      }
+
+      if (templateField.type === FieldType.NAME && directRecipientName === undefined) {
+        directRecipientName === signedFieldValue.value;
+      }
+
+      const derivedRecipientActionAuth = await validateFieldAuth({
+        documentAuthOptions: template.authOptions,
+        recipient: {
+          authOptions: directTemplateRecipient.authOptions,
+          email: directRecipientEmail,
+        },
+        field: templateField,
+        userId: user?.id,
+        authOptions: signedFieldValue.authOptions,
+      });
+
+      const { value, isBase64 } = signedFieldValue;
+
+      const isSignatureField =
+        templateField.type === FieldType.SIGNATURE ||
+        templateField.type === FieldType.FREE_SIGNATURE;
+
+      let customText = !isSignatureField ? value : '';
+
+      const signatureImageAsBase64 = isSignatureField && isBase64 ? value : undefined;
+      const typedSignature = isSignatureField && !isBase64 ? value : undefined;
+
+      if (templateField.type === FieldType.DATE) {
+        customText = DateTime.now().setZone(metaTimezone).toFormat(metaDateFormat);
+      }
+
+      if (isSignatureField && !signatureImageAsBase64 && !typedSignature) {
+        throw new Error('Signature field must have a signature');
+      }
+
+      return {
+        templateField,
+        customText,
+        derivedRecipientActionAuth,
+        signature: isSignatureField
+          ? {
+              signatureImageAsBase64,
+              typedSignature,
+            }
+          : null,
+      };
+    }),
+  );
+
+  const directTemplateNonSignatureFields = createDirectRecipientFieldArgs.filter(
+    ({ signature }) => signature === null,
+  );
+
+  const directTemplateSignatureFields = createDirectRecipientFieldArgs.filter(
+    ({ signature }) => signature !== null,
+  );
+
+  const initialRequestTime = new Date();
+
+  const { documentId, directRecipientToken } = await prisma.$transaction(async (tx) => {
+    const documentData = await tx.documentData.create({
+      data: {
+        type: template.templateDocumentData.type,
+        data: template.templateDocumentData.data,
+        initialData: template.templateDocumentData.initialData,
+      },
+    });
+
+    // Create the document and non direct template recipients.
+    const document = await tx.document.create({
+      data: {
+        source: DocumentSource.TEMPLATE_DIRECT_LINK,
+        templateId: template.id,
+        userId: template.userId,
+        teamId: template.teamId,
+        title: template.title,
+        createdAt: initialRequestTime,
+        status: DocumentStatus.PENDING,
+        documentDataId: documentData.id,
+        authOptions: createDocumentAuthOptions({
+          globalAccessAuth: templateAuthOptions.globalAccessAuth,
+          globalActionAuth: templateAuthOptions.globalActionAuth,
+        }),
+        Recipient: {
+          createMany: {
+            data: nonDirectTemplateRecipients.map((recipient) => {
+              const authOptions = ZRecipientAuthOptionsSchema.parse(recipient?.authOptions);
+
+              return {
+                email: recipient.email,
+                name: recipient.name,
+                role: recipient.role,
+                authOptions: createRecipientAuthOptions({
+                  accessAuth: authOptions.accessAuth,
+                  actionAuth: authOptions.actionAuth,
+                }),
+                sendStatus:
+                  recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
+                signingStatus:
+                  recipient.role === RecipientRole.CC
+                    ? SigningStatus.SIGNED
+                    : SigningStatus.NOT_SIGNED,
+                token: nanoid(),
+              };
+            }),
+          },
+        },
+      },
+      include: {
+        Recipient: true,
+        team: {
+          select: {
+            url: true,
+          },
+        },
+      },
+    });
+
+    let nonDirectRecipientFieldsToCreate: Omit<Field, 'id' | 'secondaryId' | 'templateId'>[] = [];
+
+    Object.values(nonDirectTemplateRecipients).forEach((templateRecipient) => {
+      const recipient = document.Recipient.find(
+        (recipient) => recipient.email === templateRecipient.email,
+      );
+
+      if (!recipient) {
+        throw new Error('Recipient not found.');
+      }
+
+      nonDirectRecipientFieldsToCreate = nonDirectRecipientFieldsToCreate.concat(
+        templateRecipient.Field.map((field) => ({
+          documentId: document.id,
+          recipientId: recipient.id,
+          type: field.type,
+          page: field.page,
+          positionX: field.positionX,
+          positionY: field.positionY,
+          width: field.width,
+          height: field.height,
+          customText: '',
+          inserted: false,
+        })),
+      );
+    });
+
+    await tx.field.createMany({
+      data: nonDirectRecipientFieldsToCreate,
+    });
+
+    // Create the direct recipient and their non signature fields.
+    const createdDirectRecipient = await tx.recipient.create({
+      data: {
+        documentId: document.id,
+        email: directRecipientEmail,
+        name: directRecipientName,
+        authOptions: createRecipientAuthOptions({
+          accessAuth: directTemplateRecipientAuthOptions.accessAuth,
+          actionAuth: directTemplateRecipientAuthOptions.actionAuth,
+        }),
+        role: directTemplateRecipient.role,
+        token: nanoid(),
+        signingStatus: SigningStatus.SIGNED,
+        sendStatus: SendStatus.SENT,
+        signedAt: initialRequestTime,
+        Field: {
+          createMany: {
+            data: directTemplateNonSignatureFields.map(({ templateField, customText }) => ({
+              documentId: document.id,
+              type: templateField.type,
+              page: templateField.page,
+              positionX: templateField.positionX,
+              positionY: templateField.positionY,
+              width: templateField.width,
+              height: templateField.height,
+              customText,
+              inserted: true,
+            })),
+          },
+        },
+      },
+      include: {
+        Field: true,
+      },
+    });
+
+    // Create any direct recipient signature fields.
+    // Note: It's done like this because we can't nest things in createMany.
+    const createdDirectRecipientSignatureFields: CreatedDirectRecipientField[] = await Promise.all(
+      directTemplateSignatureFields.map(
+        async ({ templateField, signature, derivedRecipientActionAuth }) => {
+          if (!signature) {
+            throw new Error('Not possible.');
+          }
+
+          const field = await tx.field.create({
+            data: {
+              documentId: document.id,
+              recipientId: createdDirectRecipient.id,
+              type: templateField.type,
+              page: templateField.page,
+              positionX: templateField.positionX,
+              positionY: templateField.positionY,
+              width: templateField.width,
+              height: templateField.height,
+              customText: '',
+              inserted: true,
+              Signature: {
+                create: {
+                  recipientId: createdDirectRecipient.id,
+                  signatureImageAsBase64: signature.signatureImageAsBase64,
+                  typedSignature: signature.typedSignature,
+                },
+              },
+            },
+            include: {
+              Signature: true,
+            },
+          });
+
+          return {
+            field,
+            derivedRecipientActionAuth,
+          };
+        },
+      ),
+    );
+
+    const createdDirectRecipientFields: CreatedDirectRecipientField[] = [
+      ...createdDirectRecipient.Field.map((field) => ({
+        field,
+        derivedRecipientActionAuth: null,
+      })),
+      ...createdDirectRecipientSignatureFields,
+    ];
+
+    /**
+     * Create the following audit logs.
+     * - DOCUMENT_CREATED
+     * - DOCUMENT_FIELD_INSERTED
+     * - DOCUMENT_RECIPIENT_COMPLETED
+     */
+    const auditLogsToCreate: CreateDocumentAuditLogDataResponse[] = [
+      createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED,
+        documentId: document.id,
+        user: {
+          id: user?.id,
+          name: user?.name,
+          email: directRecipientEmail,
+        },
+        requestMetadata,
+        data: {
+          title: document.title,
+          source: {
+            type: DocumentSource.TEMPLATE_DIRECT_LINK,
+            templateId: template.id,
+            directRecipientEmail,
+          },
+        },
+      }),
+      createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED,
+        documentId: document.id,
+        user: {
+          id: user?.id,
+          name: user?.name,
+          email: directRecipientEmail,
+        },
+        requestMetadata,
+        data: {
+          recipientEmail: createdDirectRecipient.email,
+          recipientId: createdDirectRecipient.id,
+          recipientName: createdDirectRecipient.name,
+          recipientRole: createdDirectRecipient.role,
+          accessAuth: derivedRecipientAccessAuth || undefined,
+        },
+      }),
+      ...createdDirectRecipientFields.map(({ field, derivedRecipientActionAuth }) =>
+        createDocumentAuditLogData({
+          type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED,
+          documentId: document.id,
+          user: {
+            id: user?.id,
+            name: user?.name,
+            email: directRecipientEmail,
+          },
+          requestMetadata,
+          data: {
+            recipientEmail: createdDirectRecipient.email,
+            recipientId: createdDirectRecipient.id,
+            recipientName: createdDirectRecipient.name,
+            recipientRole: createdDirectRecipient.role,
+            fieldId: field.secondaryId,
+            field: match(field.type)
+              .with(FieldType.SIGNATURE, FieldType.FREE_SIGNATURE, (type) => ({
+                type,
+                data:
+                  field.Signature?.signatureImageAsBase64 || field.Signature?.typedSignature || '',
+              }))
+              .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, FieldType.TEXT, (type) => ({
+                type,
+                data: field.customText,
+              }))
+              .exhaustive(),
+            fieldSecurity: derivedRecipientActionAuth
+              ? {
+                  type: derivedRecipientActionAuth,
+                }
+              : undefined,
+          },
+        }),
+      ),
+      createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED,
+        documentId: document.id,
+        user: {
+          id: user?.id,
+          name: user?.name,
+          email: directRecipientEmail,
+        },
+        requestMetadata,
+        data: {
+          recipientEmail: createdDirectRecipient.email,
+          recipientId: createdDirectRecipient.id,
+          recipientName: createdDirectRecipient.name,
+          recipientRole: createdDirectRecipient.role,
+        },
+      }),
+    ];
+
+    await tx.documentAuditLog.createMany({
+      data: auditLogsToCreate,
+    });
+
+    // Send email to template owner.
+    const emailTemplate = createElement(DocumentCreatedFromDirectTemplateEmailTemplate, {
+      recipientName: directRecipientEmail,
+      recipientRole: directTemplateRecipient.role,
+      documentLink: `${formatDocumentsPath(document.team?.url)}/${document.id}`,
+      documentName: document.title,
+      assetBaseUrl: NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000',
+    });
+
+    await mailer.sendMail({
+      to: [
+        {
+          name: templateOwner.name || '',
+          address: templateOwner.email,
+        },
+      ],
+      from: {
+        name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
+        address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
+      },
+      subject: 'Document created from direct template',
+      html: render(emailTemplate),
+      text: render(emailTemplate, { plainText: true }),
+    });
+
+    return {
+      documentId: document.id,
+      directRecipientToken: createdDirectRecipient.token,
+    };
+  });
+
+  try {
+    // This handles sending emails and sealing the document if required.
+    await sendDocument({
+      documentId,
+      userId: template.userId,
+      teamId: template.teamId || undefined,
+      requestMetadata,
+    });
+  } catch (err) {
+    console.error('[CREATE_DOCUMENT_FROM_DIRECT_TEMPLATE]:', err);
+
+    // Don't launch an error since the document has already been created.
+    // Log and reseal as required until we configure middleware.
+  }
+
+  return directRecipientToken;
+};

packages/lib/server-only/template/create-document-from-template-legacy.ts

@@ -1,6 +1,6 @@
 import { nanoid } from '@documenso/lib/universal/id';
 import { prisma } from '@documenso/prisma';
-import type { RecipientRole } from '@documenso/prisma/client';
+import { DocumentSource, type RecipientRole } from '@documenso/prisma/client';
 
 export type CreateDocumentFromTemplateLegacyOptions = {
   templateId: number;
@@ -62,6 +62,8 @@ export const createDocumentFromTemplateLegacy = async ({
 
   const document = await prisma.document.create({
     data: {
+      source: DocumentSource.TEMPLATE,
+      templateId: template.id,
       userId,
       teamId: template.teamId,
       title: template.title,

packages/lib/server-only/template/create-document-from-template.ts

@@ -1,7 +1,14 @@
 import { nanoid } from '@documenso/lib/universal/id';
 import { prisma } from '@documenso/prisma';
 import type { Field } from '@documenso/prisma/client';
-import { type Recipient, WebhookTriggerEvents } from '@documenso/prisma/client';
+import {
+  DocumentSource,
+  type Recipient,
+  RecipientRole,
+  SendStatus,
+  SigningStatus,
+  WebhookTriggerEvents,
+} from '@documenso/prisma/client';
 
 import { AppError, AppErrorCode } from '../../errors/app-error';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
@@ -139,6 +146,8 @@ export const createDocumentFromTemplate = async ({
   return await prisma.$transaction(async (tx) => {
     const document = await tx.document.create({
       data: {
+        source: DocumentSource.TEMPLATE,
+        templateId: template.id,
         userId,
         teamId: template.teamId,
         title: override?.title || template.title,
@@ -170,6 +179,12 @@ export const createDocumentFromTemplate = async ({
                   accessAuth: authOptions.accessAuth,
                   actionAuth: authOptions.actionAuth,
                 }),
+                sendStatus:
+                  recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
+                signingStatus:
+                  recipient.role === RecipientRole.CC
+                    ? SigningStatus.SIGNED
+                    : SigningStatus.NOT_SIGNED,
                 token: nanoid(),
               };
             }),
@@ -223,6 +238,10 @@ export const createDocumentFromTemplate = async ({
         requestMetadata,
         data: {
           title: document.title,
+          source: {
+            type: DocumentSource.TEMPLATE,
+            templateId: template.id,
+          },
         },
       }),
     });

packages/lib/server-only/template/create-template-direct-link.ts

@@ -0,0 +1,107 @@
+'use server';
+
+import { nanoid } from 'nanoid';
+
+import { prisma } from '@documenso/prisma';
+import type { Recipient, TemplateDirectLink } from '@documenso/prisma/client';
+
+import {
+  DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+  DIRECT_TEMPLATE_RECIPIENT_NAME,
+} from '../../constants/template';
+import { AppError, AppErrorCode } from '../../errors/app-error';
+
+export type CreateTemplateDirectLinkOptions = {
+  templateId: number;
+  userId: number;
+  directRecipientId?: number;
+};
+
+export const createTemplateDirectLink = async ({
+  templateId,
+  userId,
+  directRecipientId,
+}: CreateTemplateDirectLinkOptions): Promise<TemplateDirectLink> => {
+  const template = await prisma.template.findFirst({
+    where: {
+      id: templateId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
+    },
+    include: {
+      Recipient: true,
+      directLink: true,
+    },
+  });
+
+  if (!template) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Template not found');
+  }
+
+  if (template.directLink) {
+    throw new AppError(AppErrorCode.ALREADY_EXISTS, 'Direct template already exists');
+  }
+
+  if (
+    directRecipientId &&
+    !template.Recipient.find((recipient) => recipient.id === directRecipientId)
+  ) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Recipient not found');
+  }
+
+  if (
+    !directRecipientId &&
+    template.Recipient.find(
+      (recipient) => recipient.email.toLowerCase() === DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+    )
+  ) {
+    throw new AppError(AppErrorCode.INVALID_BODY, 'Cannot generate placeholder direct recipient');
+  }
+
+  return await prisma.$transaction(async (tx) => {
+    let recipient: Recipient | undefined;
+
+    if (directRecipientId) {
+      recipient = await tx.recipient.update({
+        where: {
+          templateId,
+          id: directRecipientId,
+        },
+        data: {
+          name: DIRECT_TEMPLATE_RECIPIENT_NAME,
+          email: DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+        },
+      });
+    } else {
+      recipient = await tx.recipient.create({
+        data: {
+          templateId,
+          name: DIRECT_TEMPLATE_RECIPIENT_NAME,
+          email: DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+          token: nanoid(),
+        },
+      });
+    }
+
+    return await tx.templateDirectLink.create({
+      data: {
+        templateId,
+        enabled: true,
+        token: nanoid(),
+        directTemplateRecipientId: recipient.id,
+      },
+    });
+  });
+};

packages/lib/server-only/template/delete-template-direct-link.ts

@@ -0,0 +1,68 @@
+'use server';
+
+import { generateAvaliableRecipientPlaceholder } from '@documenso/lib/utils/templates';
+import { prisma } from '@documenso/prisma';
+
+import { AppError, AppErrorCode } from '../../errors/app-error';
+
+export type DeleteTemplateDirectLinkOptions = {
+  templateId: number;
+  userId: number;
+};
+
+export const deleteTemplateDirectLink = async ({
+  templateId,
+  userId,
+}: DeleteTemplateDirectLinkOptions): Promise<void> => {
+  const template = await prisma.template.findFirst({
+    where: {
+      id: templateId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
+    },
+    include: {
+      directLink: true,
+      Recipient: true,
+    },
+  });
+
+  if (!template) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Template not found');
+  }
+
+  const { directLink } = template;
+
+  if (!directLink) {
+    return;
+  }
+
+  await prisma.$transaction(async (tx) => {
+    await tx.recipient.update({
+      where: {
+        templateId: template.id,
+        id: directLink.directTemplateRecipientId,
+      },
+      data: {
+        ...generateAvaliableRecipientPlaceholder(template.Recipient),
+      },
+    });
+
+    await tx.templateDirectLink.delete({
+      where: {
+        templateId,
+      },
+    });
+  });
+};

packages/lib/server-only/template/find-templates.ts

@@ -8,6 +8,9 @@ export type FindTemplatesOptions = {
   perPage: number;
 };
 
+export type FindTemplatesResponse = Awaited<ReturnType<typeof findTemplates>>;
+export type FindTemplateRow = FindTemplatesResponse['templates'][number];
+
 export const findTemplates = async ({
   userId,
   teamId,
@@ -45,6 +48,12 @@ export const findTemplates = async ({
         },
         Field: true,
         Recipient: true,
+        directLink: {
+          select: {
+            token: true,
+            enabled: true,
+          },
+        },
       },
       skip: Math.max(page - 1, 0) * perPage,
       orderBy: {

packages/lib/server-only/template/get-template-by-direct-link-token.ts

@@ -0,0 +1,33 @@
+import { prisma } from '@documenso/prisma';
+
+export interface GetTemplateByDirectLinkTokenOptions {
+  token: string;
+}
+
+export const getTemplateByDirectLinkToken = async ({
+  token,
+}: GetTemplateByDirectLinkTokenOptions) => {
+  const template = await prisma.template.findFirstOrThrow({
+    where: {
+      directLink: {
+        token,
+        enabled: true,
+      },
+    },
+    include: {
+      directLink: true,
+      Recipient: {
+        include: {
+          Field: true,
+        },
+      },
+      templateDocumentData: true,
+      templateMeta: true,
+    },
+  });
+
+  return {
+    ...template,
+    Field: template.Recipient.map((recipient) => recipient.Field).flat(),
+  };
+};

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

@@ -29,6 +29,7 @@ export const getTemplateWithDetailsById = async ({
       ],
     },
     include: {
+      directLink: true,
       templateDocumentData: true,
       templateMeta: true,
       Recipient: true,

packages/lib/server-only/template/toggle-template-direct-link.ts

@@ -0,0 +1,61 @@
+'use server';
+
+import { prisma } from '@documenso/prisma';
+
+import { AppError, AppErrorCode } from '../../errors/app-error';
+
+export type ToggleTemplateDirectLinkOptions = {
+  templateId: number;
+  userId: number;
+  enabled: boolean;
+};
+
+export const toggleTemplateDirectLink = async ({
+  templateId,
+  userId,
+  enabled,
+}: ToggleTemplateDirectLinkOptions) => {
+  const template = await prisma.template.findFirst({
+    where: {
+      id: templateId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
+    },
+    include: {
+      Recipient: true,
+      directLink: true,
+    },
+  });
+
+  if (!template) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Template not found');
+  }
+
+  const { directLink } = template;
+
+  if (!directLink) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Direct template link not found');
+  }
+
+  return await prisma.templateDirectLink.update({
+    where: {
+      id: directLink.id,
+    },
+    data: {
+      templateId: template.id,
+      enabled,
+    },
+  });
+};

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

@@ -1,31 +1,27 @@
 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;
-}>;
+import { kyselyPrisma, sql } from '@documenso/prisma';
+import { DocumentStatus } from '@documenso/prisma/client';
 
 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
-  `;
+  const qb = kyselyPrisma.$kysely
+    .selectFrom('Document')
+    .select(({ fn }) => [
+      fn<Date>('DATE_TRUNC', [sql.lit('MONTH'), 'Document.updatedAt']).as('month'),
+      fn.count('id').as('count'),
+      fn
+        .sum(fn.count('id'))
+        // Feels like a bug in the Kysely extension but I just can not do this orderBy in a type-safe manner
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
+        .over((ob) => ob.orderBy(fn('DATE_TRUNC', [sql.lit('MONTH'), 'Document.updatedAt']) as any))
+        .as('cume_count'),
+    ])
+    .where(() => sql`"Document"."status" = ${DocumentStatus.COMPLETED}::"DocumentStatus"`)
+    .groupBy('month')
+    .orderBy('month', 'desc')
+    .limit(12);
+
+  const result = await qb.execute();
 
   return result.map((row) => ({
     month: DateTime.fromJSDate(row.month).toFormat('yyyy-MM'),
@@ -33,3 +29,7 @@ export const getCompletedDocumentsMonthly = async () => {
     cume_count: Number(row.cume_count),
   }));
 };
+
+export type GetCompletedDocumentsMonthlyResult = Awaited<
+  ReturnType<typeof getCompletedDocumentsMonthly>
+>;

packages/lib/server-only/user/get-user-monthly-growth.ts

@@ -1,30 +1,25 @@
 import { DateTime } from 'luxon';
 
-import { prisma } from '@documenso/prisma';
-
-export type GetUserMonthlyGrowthResult = Array<{
-  month: string;
-  count: number;
-  cume_count: number;
-}>;
-
-type GetUserMonthlyGrowthQueryResult = Array<{
-  month: Date;
-  count: bigint;
-  cume_count: bigint;
-}>;
+import { kyselyPrisma, sql } from '@documenso/prisma';
 
 export const getUserMonthlyGrowth = async () => {
-  const result = await prisma.$queryRaw<GetUserMonthlyGrowthQueryResult>`
-    SELECT
-      DATE_TRUNC('month', "createdAt") AS "month",
-      COUNT("id") as "count",
-      SUM(COUNT("id")) OVER (ORDER BY DATE_TRUNC('month', "createdAt")) as "cume_count"
-    FROM "User"
-    GROUP BY "month"
-    ORDER BY "month" DESC
-    LIMIT 12
-  `;
+  const qb = kyselyPrisma.$kysely
+    .selectFrom('User')
+    .select(({ fn }) => [
+      fn<Date>('DATE_TRUNC', [sql.lit('MONTH'), 'User.createdAt']).as('month'),
+      fn.count('id').as('count'),
+      fn
+        .sum(fn.count('id'))
+        // Feels like a bug in the Kysely extension but I just can not do this orderBy in a type-safe manner
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
+        .over((ob) => ob.orderBy(fn('DATE_TRUNC', [sql.lit('MONTH'), 'User.createdAt']) as any))
+        .as('cume_count'),
+    ])
+    .groupBy('month')
+    .orderBy('month', 'desc')
+    .limit(12);
+
+  const result = await qb.execute();
 
   return result.map((row) => ({
     month: DateTime.fromJSDate(row.month).toFormat('yyyy-MM'),
@@ -32,3 +27,5 @@ export const getUserMonthlyGrowth = async () => {
     cume_count: Number(row.cume_count),
   }));
 };
+
+export type GetUserMonthlyGrowthResult = Awaited<ReturnType<typeof getUserMonthlyGrowth>>;

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

@@ -6,7 +6,7 @@
 /////////////////////////////////////////////////////////////////////////////////////////////
 import { z } from 'zod';
 
-import { FieldType } from '@documenso/prisma/client';
+import { DocumentSource, FieldType } from '@documenso/prisma/client';
 
 import { ZRecipientActionAuthTypesSchema } from './document-auth';
 
@@ -192,6 +192,22 @@ export const ZDocumentAuditLogEventDocumentCreatedSchema = z.object({
   type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED),
   data: z.object({
     title: z.string(),
+    source: z
+      .union([
+        z.object({
+          type: z.literal(DocumentSource.DOCUMENT),
+        }),
+        z.object({
+          type: z.literal(DocumentSource.TEMPLATE),
+          templateId: z.number(),
+        }),
+        z.object({
+          type: z.literal(DocumentSource.TEMPLATE_DIRECT_LINK),
+          templateId: z.number(),
+          directRecipientEmail: z.string().email(),
+        }),
+      ])
+      .optional(),
   }),
 });
 

packages/lib/utils/templates.ts

@@ -0,0 +1,44 @@
+import type { Recipient } from '@documenso/prisma/client';
+
+import { WEBAPP_BASE_URL } from '../constants/app';
+
+export const formatDirectTemplatePath = (token: string) => {
+  return `${WEBAPP_BASE_URL}/d/${token}`;
+};
+
+/**
+ * Generate a placeholder recipient using an index number.
+ *
+ * May collide with existing recipients.
+ *
+ * Note:
+ * - Update TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX if this is ever changed.
+ * - Update TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX if this is ever changed.
+ *
+ */
+export const generateRecipientPlaceholder = (index: number) => {
+  return {
+    name: `Recipient ${index}`,
+    email: `recipient.${index}@documenso.com`,
+  };
+};
+
+/**
+ * Generates a placeholder that does not collide with any existing recipients.
+ *
+ * @param currentRecipients The current recipients that exist for a template.
+ */
+export const generateAvaliableRecipientPlaceholder = (currentRecipients: Recipient[]) => {
+  const recipientEmails = currentRecipients.map((recipient) => recipient.email);
+  let recipientPlaceholder = generateRecipientPlaceholder(0);
+
+  for (let i = 1; i <= currentRecipients.length + 1; i++) {
+    recipientPlaceholder = generateRecipientPlaceholder(i);
+
+    if (!recipientEmails.includes(recipientPlaceholder.email)) {
+      return recipientPlaceholder;
+    }
+  }
+
+  return recipientPlaceholder;
+};

packages/prisma/.gitignore

@@ -0,0 +1 @@
+generated/

packages/prisma/index.ts

@@ -1,21 +1,33 @@
 import { PrismaClient } from '@prisma/client';
+import { Kysely, PostgresAdapter, PostgresIntrospector, PostgresQueryCompiler } from 'kysely';
+import kyselyExtension from 'prisma-extension-kysely';
 
+import type { DB } from './generated/types';
 import { getDatabaseUrl } from './helper';
+import { remember } from './utils/remember';
 
-declare global {
-  // We need `var` to declare a global variable in TypeScript
-  // eslint-disable-next-line no-var
-  var prisma: PrismaClient | undefined;
-}
+export const prisma = remember(
+  'prisma',
+  () =>
+    new PrismaClient({
+      datasourceUrl: getDatabaseUrl(),
+    }),
+);
 
-if (!globalThis.prisma) {
-  globalThis.prisma = new PrismaClient({ datasourceUrl: getDatabaseUrl() });
-}
+export const kyselyPrisma = remember('kyselyPrisma', () =>
+  prisma.$extends(
+    kyselyExtension({
+      kysely: (driver) =>
+        new Kysely<DB>({
+          dialect: {
+            createAdapter: () => new PostgresAdapter(),
+            createDriver: () => driver,
+            createIntrospector: (db) => new PostgresIntrospector(db),
+            createQueryCompiler: () => new PostgresQueryCompiler(),
+          },
+        }),
+    }),
+  ),
+);
 
-export const prisma =
-  globalThis.prisma ||
-  new PrismaClient({
-    datasourceUrl: getDatabaseUrl(),
-  });
-
-export const getPrismaClient = () => prisma;
+export { sql } from 'kysely';