Fixes from code review

apps/web/components/forgot-password.tsx

@@ -11,9 +11,7 @@ interface ForgotPasswordForm {
 }
 
 export default function ForgotPassword() {
-  const methods = useForm<ForgotPasswordForm>();
+  const { register, formState, resetField, handleSubmit } = useForm<ForgotPasswordForm>();
-  const { register, formState, resetField } = methods;
-
   const [resetSuccessful, setResetSuccessful] = useState(false);
 
   const onSubmit = async (values: ForgotPasswordForm) => {
@@ -72,37 +70,35 @@ export default function ForgotPassword() {
                 : "No worries, we'll send you reset instructions."}
             </p>
           </div>
-          {resetSuccessful ? null : (
+          {!resetSuccessful && (
-            <FormProvider {...methods}>
+            <form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
-              <form className="mt-8 space-y-6" onSubmit={methods.handleSubmit(onSubmit)}>
+              <div className="-space-y-px rounded-md shadow-sm">
-                <div className="-space-y-px rounded-md shadow-sm">
-                  <div>
-                    <label htmlFor="email-address" className="sr-only">
-                      Email
-                    </label>
-                    <input
-                      {...register("email")}
-                      id="email-address"
-                      name="email"
-                      type="email"
-                      autoComplete="email"
-                      required
-                      className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
-                      placeholder="Email"
-                    />
-                  </div>
-                </div>
-
                 <div>
-                  <Button
+                  <label htmlFor="email-address" className="sr-only">
-                    type="submit"
+                    Email
-                    disabled={formState.isSubmitting}
+                  </label>
-                    className="group relative flex w-full">
+                  <input
-                    Reset password
+                    {...register("email")}
-                  </Button>
+                    id="email-address"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
+                    required
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
+                    placeholder="Email"
+                  />
                 </div>
-              </form>
+              </div>
-            </FormProvider>
+
+              <div>
+                <Button
+                  type="submit"
+                  disabled={formState.isSubmitting}
+                  className="group relative flex w-full">
+                  Reset password
+                </Button>
+              </div>
+            </form>
           )}
           <div>
             <Link href="/login">

apps/web/components/reset-password.tsx

@@ -25,14 +25,13 @@ export default function ResetPassword() {
   const router = useRouter();
   const { token } = router.query;
 
-  const methods = useForm<ResetPasswordForm>({
-    resolver: zodResolver(schema),
-  });
   const {
     register,
     formState: { errors, isSubmitting },
     handleSubmit,
-  } = methods;
+  } = useForm<ResetPasswordForm>({
+    resolver: zodResolver(schema),
+  });
 
   const [resetSuccessful, setResetSuccessful] = useState(false);
 
@@ -79,55 +78,53 @@ export default function ResetPassword() {
               {resetSuccessful ? "Your password has been reset." : "Please chose your new password"}
             </p>
           </div>
-          {resetSuccessful ? null : (
+          {!resetSuccessful && (
-            <FormProvider {...methods}>
+            <form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
-              <form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
+              <div className="-space-y-px rounded-md shadow-sm">
-                <div className="-space-y-px rounded-md shadow-sm">
-                  <div>
-                    <label htmlFor="password" className="sr-only">
-                      Password
-                    </label>
-                    <input
-                      {...register("password", { required: "Password is required" })}
-                      id="password"
-                      name="password"
-                      type="password"
-                      autoComplete="current-password"
-                      required
-                      className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
-                      placeholder="New password"
-                    />
-                  </div>
-                  <div>
-                    <label htmlFor="confirmPassword" className="sr-only">
-                      Password
-                    </label>
-                    <input
-                      {...register("confirmPassword")}
-                      id="confirmPassword"
-                      name="confirmPassword"
-                      type="password"
-                      required
-                      className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
-                      placeholder="Confirm new password"
-                    />
-                  </div>
-                </div>
-
-                {errors && (
-                  <span className="text-xs text-red-500">{errors.confirmPassword?.message}</span>
-                )}
-
                 <div>
-                  <Button
+                  <label htmlFor="password" className="sr-only">
-                    type="submit"
+                    Password
-                    disabled={isSubmitting}
+                  </label>
-                    className="group relative flex w-full">
+                  <input
-                    Reset password
+                    {...register("password", { required: "Password is required" })}
-                  </Button>
+                    id="password"
+                    name="password"
+                    type="password"
+                    autoComplete="current-password"
+                    required
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
+                    placeholder="New password"
+                  />
                 </div>
-              </form>
+                <div>
-            </FormProvider>
+                  <label htmlFor="confirmPassword" className="sr-only">
+                    Password
+                  </label>
+                  <input
+                    {...register("confirmPassword")}
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    type="password"
+                    required
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
+                    placeholder="Confirm new password"
+                  />
+                </div>
+              </div>
+
+              {errors && (
+                <span className="text-xs text-red-500">{errors.confirmPassword?.message}</span>
+              )}
+
+              <div>
+                <Button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="group relative flex w-full">
+                  Reset password
+                </Button>
+              </div>
+            </form>
           )}
           <div>
             <Link href="/login">

apps/web/pages/api/auth/reset-password.ts

@@ -8,7 +8,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const { token, password } = req.body;
 
   if (!token) {
-    res.status(422).json({ message: "Invalid token" });
+    res.status(400).json({ message: "Invalid token" });
     return;
   }
 

apps/web/pages/forgot-password.tsx

@@ -1,3 +1,4 @@
+import { GetServerSideProps, GetServerSidePropsContext } from "next";
 import Head from "next/head";
 import { getUserFromToken } from "@documenso/lib/server";
 import ForgotPassword from "../components/forgot-password";
@@ -13,8 +14,9 @@ export default function ForgotPasswordPage() {
   );
 }
 
-export async function getServerSideProps(context: any) {
+export async function getServerSideProps({ req }: GetServerSidePropsContext) {
-  const user = await getUserFromToken(context.req, context.res);
+  const user = await getUserFromToken(req);
+
   if (user)
     return {
       redirect: {

packages/lib/server/getUserFromToken.ts

@@ -1,23 +1,17 @@
-import { NextApiRequest, NextApiResponse } from "next";
+import { GetServerSidePropsContext, NextApiRequest, NextApiResponse } from "next";
+import { NextRequest } from "next/server";
 import prisma from "@documenso/prisma";
 import { User as PrismaUser } from "@prisma/client";
 import { getToken } from "next-auth/jwt";
-import { signOut } from "next-auth/react";
 
 export async function getUserFromToken(
-  req: NextApiRequest,
+  req: GetServerSidePropsContext["req"] | NextRequest | NextApiRequest,
-  res: NextApiResponse
+  res?: NextApiResponse // TODO: Remove this optional parameter
 ): Promise<PrismaUser | null> {
   const token = await getToken({ req });
   const tokenEmail = token?.email?.toString();
 
-  if (!token) {
+  if (!token || !tokenEmail) {
-    if (res.status) res.status(401).send("No session token found for request.");
-    return null;
-  }
-
-  if (!tokenEmail) {
-    res.status(400).send("No email found in session token.");
     return null;
   }
 
@@ -26,7 +20,6 @@ export async function getUserFromToken(
   });
 
   if (!user) {
-    if (res && res.status) res.status(401).end();
     return null;
   }