feat: add reset password functionality

src/config/env/index.ts

@@ -14,6 +14,7 @@ const envSchema = z.object({
   CLOUDINARY_CLOUD_NAME: z.string(),
   CLOUDINARY_KEY: z.string(),
   CLOUDINARY_SECRET: z.string(),
+  RESET_PASSWORD_TOKEN_SECRET: z.string(),
   CONFIRMATION_TOKEN_SECRET: z.string(),
   SESSION_SECRET: z.string(),
   SESSION_TOKEN_NAME: z.string(),
@@ -87,6 +88,17 @@ export const CLOUDINARY_SECRET = parsed.data.CLOUDINARY_SECRET;
  */
 export const CONFIRMATION_TOKEN_SECRET = parsed.data.CONFIRMATION_TOKEN_SECRET;
 
+/**
+ * Secret key for signing reset password tokens.
+ *
+ * @example
+ *   'abcdefghijklmnopqrstuvwxyz123456';
+ *
+ * @see README.md for instructions on generating a secret key.
+ */
+
+export const RESET_PASSWORD_TOKEN_SECRET = parsed.data.RESET_PASSWORD_TOKEN_SECRET;
+
 /**
  * Secret key for signing session cookies.
  *

src/config/jwt/index.ts

@@ -1,7 +1,7 @@
 import { BasicUserInfoSchema } from '@/config/auth/types';
-import jwt from 'jsonwebtoken';
+import jwt, { JsonWebTokenError } from 'jsonwebtoken';
 import { z } from 'zod';
-import { CONFIRMATION_TOKEN_SECRET } from '../env';
+import { CONFIRMATION_TOKEN_SECRET, RESET_PASSWORD_TOKEN_SECRET } from '../env';
 import ServerError from '../util/ServerError';
 
 export const generateConfirmationToken = (user: z.infer<typeof BasicUserInfoSchema>) => {
@@ -30,3 +30,29 @@ export const verifyConfirmationToken = async (token: string) => {
     throw new ServerError('Something went wrong', 500);
   }
 };
+
+export const generateResetPasswordToken = (user: z.infer<typeof BasicUserInfoSchema>) => {
+  return jwt.sign(user, RESET_PASSWORD_TOKEN_SECRET, { expiresIn: '5m' });
+};
+export const verifyResetPasswordToken = async (token: string) => {
+  try {
+    const decoded = jwt.verify(token, RESET_PASSWORD_TOKEN_SECRET);
+
+    const parsed = BasicUserInfoSchema.safeParse(decoded);
+
+    if (!parsed.success) {
+      throw new Error('Invalid token');
+    }
+
+    return parsed.data;
+  } catch (error) {
+    if (error instanceof JsonWebTokenError) {
+      throw new ServerError(
+        'Your reset password token is invalid. Please generate a new one.',
+        401,
+      );
+    }
+
+    throw new ServerError('Something went wrong', 500);
+  }
+};

src/emails/ForgotEmail.tsx

@@ -0,0 +1,39 @@
+import { Container, Heading, Text, Button, Section } from '@react-email/components';
+import { Tailwind } from '@react-email/tailwind';
+
+import { FC } from 'react';
+
+interface ForgotEmailProps {
+  name?: string;
+  url?: string;
+}
+
+const ForgotEmail: FC<ForgotEmailProps> = ({ name, url }) => {
+  return (
+    <Tailwind>
+      <Container className="mx-auto">
+        <Section className="p-4 flex flex-col justify-center items-center">
+          <Heading className="text-2xl font-bold">Forgot Password</Heading>
+          <Text className="my-4">Hi {name},</Text>
+          <Text className="my-4">
+            We received a request to reset your password. To proceed, please click the
+            button below:
+          </Text>
+          <Button
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+          >
+            Reset Password
+          </Button>
+          <Text className="my-4">
+            If you did not request a password reset, please ignore this email.
+          </Text>
+        </Section>
+      </Container>
+    </Tailwind>
+  );
+};
+
+export default ForgotEmail;

src/pages/api/users/forgot-password.ts

@@ -0,0 +1,75 @@
+import { generateResetPasswordToken } from '@/config/jwt';
+import NextConnectOptions from '@/config/nextConnect/NextConnectOptions';
+import sendEmail from '@/config/sparkpost/sendEmail';
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { createRouter } from 'next-connect';
+import { z } from 'zod';
+import DBClient from '@/prisma/DBClient';
+import { render } from '@react-email/render';
+import ForgotEmail from '@/emails/ForgotEmail';
+import { ReactElement } from 'react';
+
+import { User } from '@prisma/client';
+import { BASE_URL } from '@/config/env';
+import validateRequest from '@/config/nextConnect/middleware/validateRequest';
+
+interface ResetPasswordRequest extends NextApiRequest {
+  body: { email: string };
+}
+
+const sendResetPasswordEmail = async (user: User) => {
+  const token = generateResetPasswordToken({ id: user.id, username: user.username });
+
+  const url = `${BASE_URL}/users/reset-password?token=${token}`;
+
+  const component = ForgotEmail({ name: user.username, url })! as ReactElement<
+    unknown,
+    string
+  >;
+
+  const html = render(component);
+  const text = render(component, { plainText: true });
+
+  await sendEmail({
+    address: user.email,
+    subject: 'Reset Password',
+    html,
+    text,
+  });
+};
+
+const forgetPassword = async (
+  req: ResetPasswordRequest,
+  res: NextApiResponse<z.infer<typeof APIResponseValidationSchema>>,
+) => {
+  const { email } = req.body;
+
+  const user = await DBClient.instance.user.findUnique({
+    where: { email },
+  });
+
+  if (user) {
+    await sendResetPasswordEmail(user);
+  }
+
+  res.status(200).json({
+    statusCode: 200,
+    success: true,
+    message:
+      'If an account with that email exists, we have sent you an email to reset your password.',
+  });
+};
+
+const router = createRouter<
+  ResetPasswordRequest,
+  NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
+>();
+
+router.post(
+  validateRequest({ bodySchema: z.object({ email: z.string().email() }) }),
+  forgetPassword,
+);
+
+const handler = router.handler(NextConnectOptions);
+export default handler;

src/pages/api/users/register.ts

@@ -11,7 +11,6 @@ import findUserByEmail from '@/services/User/findUserByEmail';
 import validateRequest from '@/config/nextConnect/middleware/validateRequest';
 import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
 
-import { NODE_ENV } from '@/config/env';
 import sendConfirmationEmail from '@/services/User/sendConfirmationEmail';
 
 interface RegisterUserRequest extends NextApiRequest {
@@ -45,9 +44,7 @@ const registerUser = async (req: RegisterUserRequest, res: NextApiResponse) => {
     username: user.username,
   });
 
-  if (NODE_ENV === 'production') {
-    await sendConfirmationEmail(user);
-  }
+  await sendConfirmationEmail(user);
 
   res.status(201).json({
     success: true,

src/pages/login/index.tsx

@@ -40,7 +40,7 @@ const LoginPage: NextPage = () => {
                 Don't have an account?
               </Link>
               <Link
-                href="/reset-password"
+                href="/users/forgot-password"
                 className="text-primary-500 link-hover link italic"
               >
                 Forgot password?

src/pages/users/forgot-password.tsx

@@ -0,0 +1,88 @@
+import Button from '@/components/ui/forms/Button';
+import FormError from '@/components/ui/forms/FormError';
+import FormInfo from '@/components/ui/forms/FormInfo';
+import FormLabel from '@/components/ui/forms/FormLabel';
+import FormSegment from '@/components/ui/forms/FormSegment';
+import FormTextInput from '@/components/ui/forms/FormTextInput';
+import { BaseCreateUserSchema } from '@/services/User/schema/CreateUserValidationSchemas';
+import createErrorToast from '@/util/createErrorToast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { NextPage } from 'next';
+
+import { SubmitHandler, useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
+import { useRouter } from 'next/router';
+import sendForgotPasswordRequest from '@/requests/User/sendForgotPasswordRequest';
+import { FaUserCircle } from 'react-icons/fa';
+
+interface ForgotPasswordPageProps {}
+
+const ForgotPasswordPage: NextPage<ForgotPasswordPageProps> = () => {
+  const { register, handleSubmit, formState, reset } = useForm({
+    resolver: zodResolver(BaseCreateUserSchema.pick({ email: true })),
+    defaultValues: { email: '' },
+  });
+
+  const router = useRouter();
+  const { errors } = formState;
+
+  const onSubmit: SubmitHandler<{ email: string }> = async (data) => {
+    try {
+      const loadingToast = toast.loading('Sending reset link...');
+      await sendForgotPasswordRequest(data.email);
+      reset();
+      toast.dismiss(loadingToast);
+      toast.success('Password reset link sent!');
+
+      router.push('/');
+    } catch (error) {
+      createErrorToast(error);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center h-full">
+      <div className="xl:w-6/12 w-10/12 mt-64 text-center flex flex-col space-y-3">
+        <div className="space-y-1">
+          <div className="flex flex-col items-center justify-center my-2">
+            <FaUserCircle className="text-3xl" />
+            <h1 className="text-3xl font-bold">Forgot Your Password?</h1>
+          </div>
+          <p className="xl:text-lg">
+            Enter your email address below, and we will send you a link to reset your
+            password.
+          </p>
+        </div>
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="form-control space-y-3"
+          noValidate
+        >
+          <div>
+            <FormInfo>
+              <FormLabel htmlFor="email">Email</FormLabel>
+              <FormError>{errors.email?.message}</FormError>
+            </FormInfo>
+            <FormSegment>
+              <FormTextInput
+                id="email"
+                type="email"
+                formValidationSchema={register('email')}
+                disabled={formState.isSubmitting}
+                error={!!errors.email}
+                placeholder="Email"
+              />
+            </FormSegment>
+          </div>
+          <div>
+            <Button type="submit" isSubmitting={formState.isSubmitting}>
+              Send Reset Link
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPasswordPage;

src/pages/users/reset-password.tsx

@@ -0,0 +1,43 @@
+import { setLoginSession } from '@/config/auth/session';
+import { verifyResetPasswordToken } from '@/config/jwt';
+import ServerError from '@/config/util/ServerError';
+import findUserById from '@/services/User/findUserById';
+
+import { GetServerSideProps, NextApiResponse, NextPage } from 'next';
+
+const TokenExpiredPage: NextPage = () => {
+  return (
+    <div className="flex h-full items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold">Token Expired</h1>
+        <p className="text-lg">
+          Your link to reset your password has expired or is invalid.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default TokenExpiredPage;
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  try {
+    const token = context.query.token as string | undefined;
+    if (!token) {
+      throw new ServerError('Token not provided', 400);
+    }
+
+    const { id } = await verifyResetPasswordToken(token as string);
+
+    const user = await findUserById(id);
+    if (!user) {
+      throw new ServerError('User not found', 404);
+    }
+
+    await setLoginSession(context.res as NextApiResponse, user);
+
+    return { redirect: { destination: '/account', permanent: false } };
+  } catch (error) {
+    return { props: {} };
+  }
+};

src/prisma/seed/clean/index.ts

@@ -1,7 +0,0 @@
-import logger from '../../../config/pino/logger';
-import cleanDatabase from './cleanDatabase';
-
-cleanDatabase().then(() => {
-  logger.info('Database cleaned');
-  process.exit(0);
-});

src/prisma/seed/clear/clearDatabase.ts

@@ -1,6 +1,6 @@
 import DBClient from '../../DBClient';
 
-const cleanDatabase = async () => {
+const clearDatabase = async () => {
   const prisma = DBClient.instance;
 
   /**
@@ -27,4 +27,4 @@ const cleanDatabase = async () => {
   await prisma.$disconnect();
 };
 
-export default cleanDatabase;
+export default clearDatabase;

src/prisma/seed/clear/index.ts

@@ -0,0 +1,7 @@
+import logger from '../../../config/pino/logger';
+import clearDatabase from './clearDatabase';
+
+clearDatabase().then(() => {
+  logger.info('Database cleared');
+  process.exit(0);
+});

src/prisma/seed/index.ts

@@ -1,7 +1,7 @@
 import { performance } from 'perf_hooks';
 import { exit } from 'process';
 
-import cleanDatabase from './clean/cleanDatabase';
+import clearDatabase from './clear/clearDatabase';
 
 import createNewBeerImages from './create/createNewBeerImages';
 import createNewBeerPostComments from './create/createNewBeerPostComments';
@@ -26,7 +26,7 @@ import createNewUserFollows from './create/createNewUserFollows';
     const start = performance.now();
 
     logger.info('Clearing database.');
-    await cleanDatabase();
+    await clearDatabase();
     logger.info('Database cleared successfully, preparing to seed.');
 
     await createAdminUser();

src/requests/User/sendForgotPasswordRequest.tsx

@@ -0,0 +1,24 @@
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+
+const sendForgotPasswordRequest = async (email: string) => {
+  const response = await fetch('/api/users/forgot-password', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email }),
+  });
+
+  if (!response.ok) {
+    throw new Error("Something went wrong and we couldn't send the reset link.");
+  }
+
+  const json = await response.json();
+  const parsed = APIResponseValidationSchema.safeParse(json);
+
+  if (!parsed.success) {
+    throw new Error(parsed.error.message);
+  }
+
+  return parsed.data;
+};
+
+export default sendForgotPasswordRequest;