feat: restrict app access for unverified users

apps/web/src/app/(unauthenticated)/unverified-account/page.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useSearchParams } from 'next/navigation';
+
+import { Mails } 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 { useToast } from '@documenso/ui/primitives/use-toast';
+
+const RESEND_CONFIRMATION_EMAIL_TIMEOUT = 20 * ONE_SECOND;
+
+export default function UnverifiedAccount() {
+  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
+  const searchParams = useSearchParams();
+  const { toast } = useToast();
+
+  const token = searchParams?.get('t') ?? '';
+
+  const { data: { email } = {} } = trpc.profile.getUserFromVerificationToken.useQuery({ token });
+
+  const { mutateAsync: sendConfirmationEmail } = trpc.profile.sendConfirmationEmail.useMutation();
+
+  const onResendConfirmationEmail = async () => {
+    if (!email) {
+      toast({
+        title: 'Unable to send confirmation email',
+        description: 'Something went wrong while sending the confirmation email. Please try again.',
+        variant: 'destructive',
+      });
+
+      return;
+    }
+
+    try {
+      setIsButtonDisabled(true);
+
+      await sendConfirmationEmail({ email: email });
+
+      toast({
+        title: 'Success',
+        description: 'Verification email sent successfully.',
+        duration: 5000,
+      });
+
+      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',
+      });
+    }
+  };
+
+  return (
+    <div className="flex w-full items-start">
+      <div className="mr-4 mt-1 hidden md:block">
+        <Mails className="text-primary h-10 w-10" strokeWidth={2} />
+      </div>
+      <div className="">
+        <h2 className="text-2xl font-bold md:text-4xl">Confirm email</h2>
+
+        <p className="text-muted-foreground mt-4">
+          To gain full access to your account and unlock all its features, please confirm your email
+          address by clicking on the link sent to your email address.
+        </p>
+
+        <Button className="mt-4" disabled={isButtonDisabled} onClick={onResendConfirmationEmail}>
+          Resend email
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -2,6 +2,8 @@
 
 import { useState } from 'react';
 
+import { useRouter } from 'next/navigation';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
@@ -9,6 +11,7 @@ import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
 
 import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
+import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@documenso/ui/primitives/dialog';
@@ -31,6 +34,8 @@ const ERROR_MESSAGES: Partial<Record<keyof typeof ErrorCode, string>> = {
     'This account appears to be using a social login method, please sign in using that method',
   [ErrorCode.INCORRECT_TWO_FACTOR_CODE]: 'The two-factor authentication code provided is incorrect',
   [ErrorCode.INCORRECT_TWO_FACTOR_BACKUP_CODE]: 'The backup code provided is incorrect',
+  [ErrorCode.UNVERIFIED_EMAIL]:
+    'This account has not been verified. Please verify your account before signing in.',
 };
 
 const TwoFactorEnabledErrorCode = ErrorCode.TWO_FACTOR_MISSING_CREDENTIALS;
@@ -54,6 +59,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
   const { toast } = useToast();
   const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
     useState(false);
+  const router = useRouter();
 
   const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<
     'totp' | 'backup'
@@ -69,6 +75,8 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     resolver: zodResolver(ZSignInFormSchema),
   });
 
+  const { mutateAsync: getUser } = trpc.profile.getUserByEmail.useMutation();
+
   const isSubmitting = form.formState.isSubmitting;
 
   const onCloseTwoFactorAuthenticationDialog = () => {
@@ -122,6 +130,15 @@ export const SignInForm = ({ className }: SignInFormProps) => {
 
         const errorMessage = ERROR_MESSAGES[result.error];
 
+        if (result.error === ErrorCode.UNVERIFIED_EMAIL) {
+          const user = await getUser({ email });
+          const token = user?.VerificationToken[user.VerificationToken.length - 1].token;
+
+          router.push(`/unverified-account?t=${token}`);
+
+          return;
+        }
+
         toast({
           variant: 'destructive',
           title: 'Unable to sign in',

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

@@ -1,7 +1,8 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
+
 import { zodResolver } from '@hookform/resolvers/zod';
-import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -42,6 +43,7 @@ export type SignUpFormProps = {
 export const SignUpForm = ({ className }: SignUpFormProps) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
+  const router = useRouter();
 
   const form = useForm<TSignUpFormSchema>({
     values: {
@@ -61,10 +63,12 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
     try {
       await signup({ name, email, password, signature });
 
-      await signIn('credentials', {
-        email,
-        password,
-        callbackUrl: '/',
+      router.push('/signin');
+
+      toast({
+        title: 'Registration Successful',
+        description: 'You have successfully registered. Please sign in to continue.',
+        duration: 5000,
       });
 
       analytics.capture('App: User Sign Up', {