feat: email verification for registration (#599)

apps/web/src/app/(dashboard)/documents/upload-document.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
@@ -22,6 +23,7 @@ export type UploadDocumentProps = {
 
 export const UploadDocument = ({ className }: UploadDocumentProps) => {
   const router = useRouter();
+  const { data: session } = useSession();
 
   const { toast } = useToast();
 
@@ -79,7 +81,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
     <div className={cn('relative', className)}>
       <DocumentDropzone
         className="min-h-[40vh]"
-        disabled={remaining.documents === 0}
+        disabled={remaining.documents === 0 || !session?.user.emailVerified}
         onDrop={onFileDrop}
       />
 

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

@@ -9,6 +9,7 @@ import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 import { Header } from '~/components/(dashboard)/layout/header';
+import { VerifyEmailBanner } from '~/components/(dashboard)/layout/verify-email-banner';
 import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
 import { NextAuthProvider } from '~/providers/next-auth';
 
@@ -30,6 +31,7 @@ export default async function AuthenticatedDashboardLayout({
   return (
     <NextAuthProvider session={session}>
       <LimitsProvider>
+        {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
         <Header user={user} />
 
         <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>

apps/web/src/app/(unauthenticated)/verify-email/[token]/page.tsx

@@ -0,0 +1,97 @@
+import Link from 'next/link';
+
+import { AlertTriangle, CheckCircle2, XCircle, XOctagon } from 'lucide-react';
+
+import { verifyEmail } from '@documenso/lib/server-only/user/verify-email';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type PageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function VerifyEmailPage({ params: { token } }: PageProps) {
+  if (!token) {
+    return (
+      <div className="w-full">
+        <div className="mb-4 text-red-300">
+          <XOctagon />
+        </div>
+
+        <h2 className="text-4xl font-semibold">No token provided</h2>
+        <p className="text-muted-foreground mt-2 text-base">
+          It seems that there is no token provided. Please check your email and try again.
+        </p>
+      </div>
+    );
+  }
+
+  const verified = await verifyEmail({ token });
+
+  if (verified === null) {
+    return (
+      <div className="flex w-full items-start">
+        <div className="mr-4 mt-1 hidden md:block">
+          <AlertTriangle className="h-10 w-10 text-yellow-500" strokeWidth={2} />
+        </div>
+
+        <div>
+          <h2 className="text-2xl font-bold md:text-4xl">Something went wrong</h2>
+
+          <p className="text-muted-foreground mt-4">
+            We were unable to verify your email. If your email is not verified already, please try
+            again.
+          </p>
+
+          <Button className="mt-4" asChild>
+            <Link href="/">Go back home</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!verified) {
+    return (
+      <div className="flex w-full items-start">
+        <div className="mr-4 mt-1 hidden md:block">
+          <XCircle className="text-destructive h-10 w-10" strokeWidth={2} />
+        </div>
+
+        <div>
+          <h2 className="text-2xl font-bold md:text-4xl">Your token has expired!</h2>
+
+          <p className="text-muted-foreground mt-4">
+            It seems that the provided token has expired. We've just sent you another token, please
+            check your email and try again.
+          </p>
+
+          <Button className="mt-4" asChild>
+            <Link href="/">Go back home</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-full items-start">
+      <div className="mr-4 mt-1 hidden md:block">
+        <CheckCircle2 className="h-10 w-10 text-green-500" strokeWidth={2} />
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold md:text-4xl">Email Confirmed!</h2>
+
+        <p className="text-muted-foreground mt-4">
+          Your email has been successfully confirmed! You can now use all features of Documenso.
+        </p>
+
+        <Button className="mt-4" asChild>
+          <Link href="/">Go back home</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(unauthenticated)/verify-email/page.tsx

@@ -0,0 +1,28 @@
+import Link from 'next/link';
+
+import { XCircle } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function EmailVerificationWithoutTokenPage() {
+  return (
+    <div className="flex w-full items-start">
+      <div className="mr-4 mt-1 hidden md:block">
+        <XCircle className="text-destructive h-10 w-10" strokeWidth={2} />
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold md:text-4xl">Uh oh! Looks like you're missing a token</h2>
+
+        <p className="text-muted-foreground mt-4">
+          It seems that there is no token provided, if you are trying to verify your email please
+          follow the link in your email.
+        </p>
+
+        <Button className="mt-4" asChild>
+          <Link href="/">Go back home</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/(dashboard)/layout/verify-email-banner.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { AlertTriangle } from 'lucide-react';
+
+import { ONE_SECOND } from '@documenso/lib/constants/time';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type VerifyEmailBannerProps = {
+  email: string;
+};
+
+const RESEND_CONFIRMATION_EMAIL_TIMEOUT = 20 * ONE_SECOND;
+
+export const VerifyEmailBanner = ({ email }: VerifyEmailBannerProps) => {
+  const { toast } = useToast();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
+
+  const { mutateAsync: sendConfirmationEmail, isLoading } =
+    trpc.profile.sendConfirmationEmail.useMutation();
+
+  const onResendConfirmationEmail = async () => {
+    try {
+      setIsButtonDisabled(true);
+
+      await sendConfirmationEmail({ email: email });
+
+      toast({
+        title: 'Success',
+        description: 'Verification email sent successfully.',
+      });
+
+      setIsOpen(false);
+      setTimeout(() => setIsButtonDisabled(false), RESEND_CONFIRMATION_EMAIL_TIMEOUT);
+    } catch (err) {
+      setIsButtonDisabled(false);
+
+      toast({
+        title: 'Error',
+        description: 'Something went wrong while sending the confirmation email.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    // Check localStorage to see if we've recently automatically displayed the dialog
+    // if it was within the past 24 hours, don't show it again
+    // otherwise, show it again and update the localStorage timestamp
+    const emailVerificationDialogLastShown = localStorage.getItem(
+      'emailVerificationDialogLastShown',
+    );
+
+    if (emailVerificationDialogLastShown) {
+      const lastShownTimestamp = parseInt(emailVerificationDialogLastShown);
+
+      if (Date.now() - lastShownTimestamp < 24 * 60 * 60 * 1000) {
+        return;
+      }
+    }
+
+    setIsOpen(true);
+
+    localStorage.setItem('emailVerificationDialogLastShown', Date.now().toString());
+  }, []);
+
+  return (
+    <>
+      <div className="bg-yellow-200 dark:bg-yellow-400">
+        <div className="mx-auto flex max-w-screen-xl items-center justify-center gap-x-4 px-4 py-2 text-sm font-medium text-yellow-900">
+          <div className="flex items-center">
+            <AlertTriangle className="mr-2.5 h-5 w-5" />
+            Verify your email address to unlock all features.
+          </div>
+
+          <div>
+            <Button
+              variant="ghost"
+              className="h-auto px-2.5 py-1.5 text-yellow-900 hover:bg-yellow-100 hover:text-yellow-900 dark:hover:bg-yellow-500"
+              disabled={isButtonDisabled}
+              onClick={() => setIsOpen(true)}
+              size="sm"
+            >
+              {isButtonDisabled ? 'Verification Email Sent' : 'Verify Now'}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent>
+          <DialogTitle>Verify your email address</DialogTitle>
+
+          <DialogDescription>
+            We've sent a confirmation email to <strong>{email}</strong>. Please check your inbox and
+            click the link in the email to verify your account.
+          </DialogDescription>
+
+          <div>
+            <Button
+              disabled={isButtonDisabled}
+              loading={isLoading}
+              onClick={onResendConfirmationEmail}
+            >
+              {isLoading ? 'Sending...' : 'Resend Confirmation Email'}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

package.json

@@ -47,7 +47,7 @@
     "packages/*"
   ],
   "dependencies": {
-    "react-hotkeys-hook": "^4.4.1",
-    "recharts": "^2.7.2"
+    "recharts": "^2.7.2",
+    "react-hotkeys-hook": "^4.4.1"
   }
 }

packages/email/package.json

@@ -17,11 +17,11 @@
     "worker:test": "tsup worker/index.ts --format esm"
   },
   "dependencies": {
-    "@documenso/nodemailer-resend": "1.0.0",
-    "@react-email/components": "^0.0.7",
+    "@documenso/nodemailer-resend": "2.0.0",
+    "@react-email/components": "^0.0.11",
     "nodemailer": "^6.9.3",
-    "react-email": "^1.9.4",
-    "resend": "^1.1.0"
+    "react-email": "^1.9.5",
+    "resend": "^2.0.0"
   },
   "devDependencies": {
     "@documenso/tailwind-config": "*",

packages/email/template-components/template-confirmation-email.tsx

@@ -0,0 +1,52 @@
+import { Button, Section, Tailwind, Text } from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+import { TemplateDocumentImage } from './template-document-image';
+
+export type TemplateConfirmationEmailProps = {
+  confirmationLink: string;
+  assetBaseUrl: string;
+};
+
+export const TemplateConfirmationEmail = ({
+  confirmationLink,
+  assetBaseUrl,
+}: TemplateConfirmationEmailProps) => {
+  return (
+    <Tailwind
+      config={{
+        theme: {
+          extend: {
+            colors: config.theme.extend.colors,
+          },
+        },
+      }}
+    >
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+
+      <Section className="flex-row items-center justify-center">
+        <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
+          Welcome to Documenso!
+        </Text>
+
+        <Text className="my-1 text-center text-base text-slate-400">
+          Before you get started, please confirm your email address by clicking the button below:
+        </Text>
+
+        <Section className="mb-6 mt-8 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={confirmationLink}
+          >
+            Confirm email
+          </Button>
+          <Text className="mt-8 text-center text-sm italic text-slate-400">
+            You can also copy and paste this link into your browser: {confirmationLink} (link
+            expires in 1 hour)
+          </Text>
+        </Section>
+      </Section>
+    </Tailwind>
+  );
+};

packages/email/templates/confirm-email.tsx

@@ -0,0 +1,69 @@
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Img,
+  Preview,
+  Section,
+  Tailwind,
+} from '@react-email/components';
+
+import config from '@documenso/tailwind-config';
+
+import {
+  TemplateConfirmationEmail,
+  TemplateConfirmationEmailProps,
+} from '../template-components/template-confirmation-email';
+import { TemplateFooter } from '../template-components/template-footer';
+
+export const ConfirmEmailTemplate = ({
+  confirmationLink,
+  assetBaseUrl,
+}: TemplateConfirmationEmailProps) => {
+  const previewText = `Please confirm your email address`;
+
+  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 bg-white font-sans">
+          <Section>
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
+              <Section>
+                <Img
+                  src={getAssetUrl('/static/logo.png')}
+                  alt="Documenso Logo"
+                  className="mb-4 h-6"
+                />
+
+                <TemplateConfirmationEmail
+                  confirmationLink={confirmationLink}
+                  assetBaseUrl={assetBaseUrl}
+                />
+              </Section>
+            </Container>
+            <div className="mx-auto mt-12 max-w-xl" />
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter isDocument={false} />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};

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

@@ -88,6 +88,7 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
         merged.id = retrieved.id;
         merged.name = retrieved.name;
         merged.email = retrieved.email;
+        merged.emailVerified = retrieved.emailVerified;
       }
 
       if (
@@ -112,6 +113,7 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
         name: merged.name,
         email: merged.email,
         lastSignedIn: merged.lastSignedIn,
+        emailVerified: merged.emailVerified,
       };
     },
 
@@ -123,6 +125,8 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
             id: Number(token.id),
             name: token.name,
             email: token.email,
+            emailVerified:
+              typeof token.emailVerified === 'string' ? new Date(token.emailVerified) : null,
           },
         } satisfies Session;
       }

packages/lib/server-only/auth/send-confirmation-email.ts

@@ -0,0 +1,56 @@
+import { createElement } from 'react';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { ConfirmEmailTemplate } from '@documenso/email/templates/confirm-email';
+import { prisma } from '@documenso/prisma';
+
+export interface SendConfirmationEmailProps {
+  userId: number;
+}
+
+export const sendConfirmationEmail = async ({ userId }: SendConfirmationEmailProps) => {
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    include: {
+      VerificationToken: {
+        orderBy: {
+          createdAt: 'desc',
+        },
+        take: 1,
+      },
+    },
+  });
+
+  const [verificationToken] = user.VerificationToken;
+
+  if (!verificationToken?.token) {
+    throw new Error('Verification token not found for the user');
+  }
+
+  const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+  const confirmationLink = `${assetBaseUrl}/verify-email/${verificationToken.token}`;
+  const senderName = process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso';
+  const senderAdress = process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com';
+
+  const confirmationTemplate = createElement(ConfirmEmailTemplate, {
+    assetBaseUrl,
+    confirmationLink,
+  });
+
+  return mailer.sendMail({
+    to: {
+      address: user.email,
+      name: user.name || '',
+    },
+    from: {
+      name: senderName,
+      address: senderAdress,
+    },
+    subject: 'Please confirm your email',
+    html: render(confirmationTemplate),
+    text: render(confirmationTemplate, { plainText: true }),
+  });
+};

packages/lib/server-only/user/generate-confirmation-token.ts

@@ -0,0 +1,41 @@
+import crypto from 'crypto';
+
+import { prisma } from '@documenso/prisma';
+
+import { ONE_HOUR } from '../../constants/time';
+import { sendConfirmationEmail } from '../auth/send-confirmation-email';
+
+const IDENTIFIER = 'confirmation-email';
+
+export const generateConfirmationToken = async ({ email }: { email: string }) => {
+  const token = crypto.randomBytes(20).toString('hex');
+
+  const user = await prisma.user.findFirst({
+    where: {
+      email: email,
+    },
+  });
+
+  if (!user) {
+    throw new Error('User not found');
+  }
+
+  const createdToken = await prisma.verificationToken.create({
+    data: {
+      identifier: IDENTIFIER,
+      token: token,
+      expires: new Date(Date.now() + ONE_HOUR),
+      user: {
+        connect: {
+          id: user.id,
+        },
+      },
+    },
+  });
+
+  if (!createdToken) {
+    throw new Error(`Failed to create the verification token`);
+  }
+
+  return sendConfirmationEmail({ userId: user.id });
+};

packages/lib/server-only/user/send-confirmation-token.ts

@@ -0,0 +1,41 @@
+import crypto from 'crypto';
+
+import { prisma } from '@documenso/prisma';
+
+import { ONE_HOUR } from '../../constants/time';
+import { sendConfirmationEmail } from '../auth/send-confirmation-email';
+
+const IDENTIFIER = 'confirmation-email';
+
+export const sendConfirmationToken = async ({ email }: { email: string }) => {
+  const token = crypto.randomBytes(20).toString('hex');
+
+  const user = await prisma.user.findFirst({
+    where: {
+      email: email,
+    },
+  });
+
+  if (!user) {
+    throw new Error('User not found');
+  }
+
+  const createdToken = await prisma.verificationToken.create({
+    data: {
+      identifier: IDENTIFIER,
+      token: token,
+      expires: new Date(Date.now() + ONE_HOUR),
+      user: {
+        connect: {
+          id: user.id,
+        },
+      },
+    },
+  });
+
+  if (!createdToken) {
+    throw new Error(`Failed to create the verification token`);
+  }
+
+  return sendConfirmationEmail({ userId: user.id });
+};

packages/lib/server-only/user/verify-email.ts

@@ -0,0 +1,70 @@
+import { DateTime } from 'luxon';
+
+import { prisma } from '@documenso/prisma';
+
+import { sendConfirmationToken } from './send-confirmation-token';
+
+export type VerifyEmailProps = {
+  token: string;
+};
+
+export const verifyEmail = async ({ token }: VerifyEmailProps) => {
+  const verificationToken = await prisma.verificationToken.findFirst({
+    include: {
+      user: true,
+    },
+    where: {
+      token,
+    },
+  });
+
+  if (!verificationToken) {
+    return null;
+  }
+
+  // check if the token is valid or expired
+  const valid = verificationToken.expires > new Date();
+
+  if (!valid) {
+    const mostRecentToken = await prisma.verificationToken.findFirst({
+      where: {
+        userId: verificationToken.userId,
+      },
+      orderBy: {
+        createdAt: 'desc',
+      },
+    });
+
+    // If there isn't a recent token or it's older than 1 hour, send a new token
+    if (
+      !mostRecentToken ||
+      DateTime.now().minus({ hours: 1 }).toJSDate() > mostRecentToken.createdAt
+    ) {
+      await sendConfirmationToken({ email: verificationToken.user.email });
+    }
+
+    return valid;
+  }
+
+  const [updatedUser, deletedToken] = await prisma.$transaction([
+    prisma.user.update({
+      where: {
+        id: verificationToken.userId,
+      },
+      data: {
+        emailVerified: new Date(),
+      },
+    }),
+    prisma.verificationToken.deleteMany({
+      where: {
+        userId: verificationToken.userId,
+      },
+    }),
+  ]);
+
+  if (!updatedUser || !deletedToken) {
+    throw new Error('Something went wrong while verifying your email. Please try again.');
+  }
+
+  return !!updatedUser && !!deletedToken;
+};

packages/prisma/migrations/20231025074705_add_email_confirmation_registration/migration.sql

@@ -0,0 +1,17 @@
+-- CreateTable
+CREATE TABLE "VerificationToken" (
+    "id" SERIAL NOT NULL,
+    "identifier" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expires" TIMESTAMP(3) NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "userId" INTEGER NOT NULL,
+
+    CONSTRAINT "VerificationToken_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_token_key" ON "VerificationToken"("token");
+
+-- AddForeignKey
+ALTER TABLE "VerificationToken" ADD CONSTRAINT "VerificationToken_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

packages/prisma/migrations/20231031072857_verify_existing_users/migration.sql

@@ -0,0 +1,3 @@
+UPDATE "User"
+SET "emailVerified" = CURRENT_TIMESTAMP
+WHERE "emailVerified" IS NULL;

packages/prisma/schema.prisma

@@ -36,7 +36,8 @@ model User {
   Document           Document[]
   Subscription       Subscription?
   PasswordResetToken PasswordResetToken[]
-
+  VerificationToken  VerificationToken[]
+  
   @@index([email])
 }
 
@@ -49,6 +50,16 @@ model PasswordResetToken {
   User      User     @relation(fields: [userId], references: [id])
 }
 
+model VerificationToken {
+  id         Int      @id @default(autoincrement())
+  identifier String
+  token      String   @unique
+  expires    DateTime
+  createdAt  DateTime @default(now())
+  userId     Int
+  user       User     @relation(fields: [userId], references: [id])
+}
+
 enum SubscriptionStatus {
   ACTIVE
   PAST_DUE

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

@@ -1,6 +1,7 @@
 import { TRPCError } from '@trpc/server';
 
 import { createUser } from '@documenso/lib/server-only/user/create-user';
+import { sendConfirmationToken } from '@documenso/lib/server-only/user/send-confirmation-token';
 
 import { procedure, router } from '../trpc';
 import { ZSignUpMutationSchema } from './schema';
@@ -10,7 +11,11 @@ export const authRouter = router({
     try {
       const { name, email, password, signature } = input;
 
-      return await createUser({ name, email, password, signature });
+      const user = await createUser({ name, email, password, signature });
+
+      await sendConfirmationToken({ email: user.email });
+
+      return user;
     } catch (err) {
       let message =
         'We were unable to create your account. Please review the information you provided and try again.';

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

@@ -3,11 +3,13 @@ import { TRPCError } from '@trpc/server';
 import { forgotPassword } from '@documenso/lib/server-only/user/forgot-password';
 import { getUserById } from '@documenso/lib/server-only/user/get-user-by-id';
 import { resetPassword } from '@documenso/lib/server-only/user/reset-password';
+import { sendConfirmationToken } from '@documenso/lib/server-only/user/send-confirmation-token';
 import { updatePassword } from '@documenso/lib/server-only/user/update-password';
 import { updateProfile } from '@documenso/lib/server-only/user/update-profile';
 
 import { adminProcedure, authenticatedProcedure, procedure, router } from '../trpc';
 import {
+  ZConfirmEmailMutationSchema,
   ZForgotPasswordFormSchema,
   ZResetPasswordFormSchema,
   ZRetrieveUserByIdQuerySchema,
@@ -110,4 +112,25 @@ export const profileRouter = router({
       });
     }
   }),
+
+  sendConfirmationEmail: procedure
+    .input(ZConfirmEmailMutationSchema)
+    .mutation(async ({ input }) => {
+      try {
+        const { email } = input;
+
+        return sendConfirmationToken({ email });
+      } catch (err) {
+        let message = 'We were unable to send a confirmation email. Please try again.';
+
+        if (err instanceof Error) {
+          message = err.message;
+        }
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message,
+        });
+      }
+    }),
 });

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

@@ -23,8 +23,13 @@ export const ZResetPasswordFormSchema = z.object({
   token: z.string().min(1),
 });
 
+export const ZConfirmEmailMutationSchema = z.object({
+  email: z.string().email().min(1),
+});
+
 export type TRetrieveUserByIdQuerySchema = z.infer<typeof ZRetrieveUserByIdQuerySchema>;
 export type TUpdateProfileMutationSchema = z.infer<typeof ZUpdateProfileMutationSchema>;
 export type TUpdatePasswordMutationSchema = z.infer<typeof ZUpdatePasswordMutationSchema>;
 export type TForgotPasswordFormSchema = z.infer<typeof ZForgotPasswordFormSchema>;
 export type TResetPasswordFormSchema = z.infer<typeof ZResetPasswordFormSchema>;
+export type TConfirmEmailMutationSchema = z.infer<typeof ZConfirmEmailMutationSchema>;