2 files changed, 12 insertions, 4 deletions
diff --git a/apps/web/components/signin/ForgotPasswordForm.tsx b/apps/web/components/signin/ForgotPasswordForm.tsx
index 29d55f2b..6349c300 100644
--- a/apps/web/components/signin/ForgotPasswordForm.tsx
+++ b/apps/web/components/signin/ForgotPasswordForm.tsx
@@ -20,8 +20,9 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
 import { TRPCClientError } from "@trpc/client";
 import { AlertCircle, CheckCircle } from "lucide-react";
 import { useForm } from "react-hook-form";
@@ -32,6 +33,7 @@ const forgotPasswordSchema = z.object({
 });
 
 export default function ForgotPasswordForm() {
+  const api = useTRPC();
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const router = useRouter();
@@ -40,7 +42,9 @@ export default function ForgotPasswordForm() {
     resolver: zodResolver(forgotPasswordSchema),
   });
 
-  const forgotPasswordMutation = api.users.forgotPassword.useMutation();
+  const forgotPasswordMutation = useMutation(
+    api.users.forgotPassword.mutationOptions(),
+  );
 
   const onSubmit = async (values: z.infer<typeof forgotPasswordSchema>) => {
     try {
diff --git a/apps/web/components/signin/ResetPasswordForm.tsx b/apps/web/components/signin/ResetPasswordForm.tsx
index d4d8a285..b6e5f5ae 100644
--- a/apps/web/components/signin/ResetPasswordForm.tsx
+++ b/apps/web/components/signin/ResetPasswordForm.tsx
@@ -20,8 +20,9 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { api } from "@/lib/trpc";
+import { useTRPC } from "@/lib/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
 import { TRPCClientError } from "@trpc/client";
 import { AlertCircle, CheckCircle } from "lucide-react";
 import { useForm } from "react-hook-form";
@@ -44,6 +45,7 @@ interface ResetPasswordFormProps {
 }
 
 export default function ResetPasswordForm({ token }: ResetPasswordFormProps) {
+  const api = useTRPC();
   const [isSuccess, setIsSuccess] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const router = useRouter();
@@ -52,7 +54,9 @@ export default function ResetPasswordForm({ token }: ResetPasswordFormProps) {
     resolver: zodResolver(resetPasswordSchema),
   });
 
-  const resetPasswordMutation = api.users.resetPassword.useMutation();
+  const resetPasswordMutation = useMutation(
+    api.users.resetPassword.mutationOptions(),
+  );
 
   const onSubmit = async (values: z.infer<typeof resetPasswordSchema>) => {
     try {