feat: create confirm user page, option to resend email if link expires

src/config/jwt/index.ts

@@ -2,22 +2,31 @@ import { BasicUserInfoSchema } from '@/config/auth/types';
 import jwt from 'jsonwebtoken';
 import { z } from 'zod';
 import { CONFIRMATION_TOKEN_SECRET } from '../env';
+import ServerError from '../util/ServerError';
 
-type User = z.infer<typeof BasicUserInfoSchema>;
-
-export const generateConfirmationToken = (user: User) => {
-  const token = jwt.sign(user, CONFIRMATION_TOKEN_SECRET, { expiresIn: '30m' });
-  return token;
+export const generateConfirmationToken = (user: z.infer<typeof BasicUserInfoSchema>) => {
+  return jwt.sign(user, CONFIRMATION_TOKEN_SECRET, { expiresIn: '3m' });
 };
 
-export const verifyConfirmationToken = (token: string) => {
-  const decoded = jwt.verify(token, CONFIRMATION_TOKEN_SECRET);
+export const verifyConfirmationToken = async (token: string) => {
+  try {
+    const decoded = jwt.verify(token, CONFIRMATION_TOKEN_SECRET);
 
-  const parsed = BasicUserInfoSchema.safeParse(decoded);
+    const parsed = BasicUserInfoSchema.safeParse(decoded);
 
-  if (!parsed.success) {
-    throw new Error('Invalid token');
+    if (!parsed.success) {
+      throw new Error('Invalid token');
+    }
+
+    return parsed.data;
+  } catch (error) {
+    if (error instanceof Error && error.message === 'jwt expired') {
+      throw new ServerError(
+        'Your confirmation token is expired. Please generate a new one.',
+        401,
+      );
+    }
+
+    throw new ServerError('Something went wrong', 500);
   }
-
-  return parsed.data;
 };

src/hooks/auth/useUser.ts

@@ -39,7 +39,6 @@ const useUser = () => {
 
     const parsedPayload = GetUserSchema.safeParse(parsed.data.payload);
 
-    console.log(parsedPayload)
     if (!parsedPayload.success) {
       throw new Error(parsedPayload.error.message);
     }
@@ -47,7 +46,6 @@ const useUser = () => {
     return parsedPayload.data;
   });
 
-
   return { user, isLoading, error: error as unknown, mutate };
 };
 

src/pages/api/users/confirm.ts

@@ -21,16 +21,16 @@ const confirmUser = async (req: ConfirmUserRequest, res: NextApiResponse) => {
   const { token } = req.query;
 
   const user = req.user!;
-  const { id } = verifyConfirmationToken(token);
+  const { id } = await verifyConfirmationToken(token);
+
+  if (user.accountIsVerified) {
+    throw new ServerError('Your account is already verified.', 400);
+  }
 
   if (user.id !== id) {
     throw new ServerError('Could not confirm user.', 401);
   }
 
-  if (user.accountIsVerified) {
-    throw new ServerError('User is already verified.', 400);
-  }
-
   await updateUserToBeConfirmedById(id);
 
   res.status(200).json({

src/pages/api/users/resend-confirmation.ts

@@ -0,0 +1,32 @@
+import NextConnectOptions from '@/config/nextConnect/NextConnectOptions';
+import { UserExtendedNextApiRequest } from '@/config/auth/types';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { NextApiResponse } from 'next';
+import getCurrentUser from '@/config/nextConnect/middleware/getCurrentUser';
+import { createRouter } from 'next-connect';
+import { z } from 'zod';
+import sendConfirmationEmail from '@/services/User/sendConfirmationEmail';
+
+const resendConfirmation = async (
+  req: UserExtendedNextApiRequest,
+  res: NextApiResponse,
+) => {
+  const user = req.user!;
+
+  await sendConfirmationEmail(user);
+  res.status(200).json({
+    message: `Resent the confirmation email for ${user.username}.`,
+    statusCode: 200,
+    success: true,
+  });
+};
+
+const router = createRouter<
+  UserExtendedNextApiRequest,
+  NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
+>();
+
+router.post(getCurrentUser, resendConfirmation);
+
+const handler = router.handler(NextConnectOptions);
+export default handler;

src/pages/users/[id].tsx

@@ -1,6 +1,5 @@
-import { FC } from "react"
+import { FC } from 'react';
 
-const UserInfoPage: FC = () => null
+const UserInfoPage: FC = () => null;
 
-
-export default UserInfoPage
+export default UserInfoPage;

src/pages/users/confirm.tsx

@@ -0,0 +1,125 @@
+import UserContext from '@/contexts/UserContext';
+import createErrorToast from '@/util/createErrorToast';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { FC, useContext, useState } from 'react';
+import { toast } from 'react-hot-toast';
+import useSWR from 'swr';
+
+const useSendConfirmUserRequest = () => {
+  const router = useRouter();
+  const token = router.query.token as string | undefined;
+
+  const { data, error } = useSWR(`/api/users/confirm?token=${token}`, async (url) => {
+    if (!token) {
+      throw new Error('Token must be provided.');
+    }
+
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+    const json = await response.json();
+
+    const parsed = APIResponseValidationSchema.safeParse(json);
+
+    if (!parsed.success) {
+      throw new Error('API response validation failed.');
+    }
+    return parsed.data;
+  });
+
+  return { data, error: error as unknown };
+};
+
+const ConfirmUserPage: FC = () => {
+  const router = useRouter();
+  const { error, data } = useSendConfirmUserRequest();
+  const { user } = useContext(UserContext);
+
+  const needsToLogin =
+    error instanceof Error && error.message === 'Unauthorized' && !user;
+  const tokenExpired = error instanceof Error && error.message === 'Unauthorized' && user;
+  const [confirmationResent, setConfirmationResent] = useState(false);
+
+  if (user?.accountIsVerified) {
+    router.push('/users/current');
+    return null;
+  }
+
+  if (data) {
+    router.push('/users/current');
+    return null;
+  }
+
+  if (needsToLogin) {
+    return (
+      <>
+        <Head>
+          <title>Confirm User | The Biergarten App</title>
+        </Head>
+        <div className="flex h-full flex-col items-center justify-center">
+          <p className="text-center text-xl font-bold">
+            Please login to confirm your account.
+          </p>
+        </div>
+      </>
+    );
+  }
+  if (tokenExpired) {
+    const onClick = async () => {
+      const loadingToast = toast.loading('Resending your confirmation email.');
+      try {
+        const response = await fetch('/api/users/resend-confirmation', {
+          method: 'POST',
+        });
+        if (!response.ok) {
+          throw new Error('Something went wrong.');
+        }
+
+        toast.remove(loadingToast);
+        toast.success('Sent a new confirmation email.');
+
+        setConfirmationResent(true);
+      } catch (err) {
+        createErrorToast(err);
+      }
+    };
+
+    return (
+      <>
+        <Head>
+          <title>Confirm User | The Biergarten App</title>
+        </Head>
+        <div className="flex h-full flex-col items-center justify-center space-y-4">
+          {!confirmationResent ? (
+            <>
+              <p className="text-center text-2xl font-bold">
+                Your confirmation token is expired.
+              </p>
+              <button
+                className="btn-outline btn-sm btn normal-case"
+                onClick={onClick}
+                type="button"
+              >
+                Click here to request a new token.
+              </button>
+            </>
+          ) : (
+            <>
+              <p className="text-center text-2xl font-bold">
+                Resent your confirmation link.
+              </p>
+              <p className="font-xl text-center">Please check your email.</p>
+            </>
+          )}
+        </div>
+      </>
+    );
+  }
+
+  return null;
+};
+
+export default ConfirmUserPage;

src/pages/users/current.tsx

@@ -5,6 +5,7 @@ import UserContext from '@/contexts/UserContext';
 import { GetServerSideProps, NextPage } from 'next';
 import { useContext } from 'react';
 import useMediaQuery from '@/hooks/utilities/useMediaQuery';
+import Head from 'next/head';
 
 const ProtectedPage: NextPage = () => {
   const { user, isLoading } = useContext(UserContext);
@@ -17,22 +18,27 @@ const ProtectedPage: NextPage = () => {
 
   const isDesktop = useMediaQuery('(min-width: 768px)');
   return (
-    <div className="flex h-full flex-col items-center justify-center space-y-3 bg-primary text-center">
-      {isLoading && <Spinner size={isDesktop ? 'xl' : 'md'} />}
-      {user && !isLoading && (
-        <>
-          <h1 className="text-2xl font-bold lg:text-7xl">
-            Good {isMorning && 'morning'}
-            {isAfternoon && 'afternoon'}
-            {isEvening && 'evening'}
-            {`, ${user?.firstName}!`}
-          </h1>
-          <h2 className="text-xl font-bold lg:text-4xl">
-            Welcome to the Biergarten App!
-          </h2>
-        </>
-      )}
-    </div>
+    <>
+      <Head>
+        <title>Hello, {user?.firstName}! | The Biergarten App</title>
+      </Head>
+      <div className="flex h-full flex-col items-center justify-center space-y-3 bg-primary text-center">
+        {isLoading && <Spinner size={isDesktop ? 'xl' : 'md'} />}
+        {user && !isLoading && (
+          <>
+            <h1 className="text-2xl font-bold lg:text-7xl">
+              Good {isMorning && 'morning'}
+              {isAfternoon && 'afternoon'}
+              {isEvening && 'evening'}
+              {`, ${user?.firstName}!`}
+            </h1>
+            <h2 className="text-xl font-bold lg:text-4xl">
+              Welcome to the Biergarten App!
+            </h2>
+          </>
+        )}
+      </div>
+    </>
   );
 };
 

src/services/User/findUserById.ts

@@ -15,7 +15,7 @@ const findUserById = async (id: string) => {
         dateOfBirth: true,
         createdAt: true,
         accountIsVerified: true,
-        updatedAt: true
+        updatedAt: true,
       },
     });
 

src/services/User/sendConfirmationEmail.ts

@@ -14,7 +14,7 @@ const sendConfirmationEmail = async ({ id, username, email }: UserSchema) => {
 
   const subject = 'Confirm your email';
   const name = username;
-  const url = `${BASE_URL}/api/users/confirm?token=${confirmationToken}`;
+  const url = `${BASE_URL}/users/confirm?token=${confirmationToken}`;
   const address = email;
 
   const html = render(Welcome({ name, url, subject })!);