I am building a small application in NextJS 14 , wherein I am using react-hook-form to simplify the form submission and input handling. I am facing an issue for the last 3-4 days and have tried different ways to find the bug , but I am unable to find one. So the problem is something like this :
Following is the frontend code for the sign-up form at "/sign-up":
"use client";
import { ApiResponse } from "@/types/ApiResponse";
import { zodResolver } from "@hookform/resolvers/zod";
import Link from "next/link";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { useDebounceCallback } from "usehooks-ts";
import * as z from "zod";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { useToast } from "@/components/ui/use-toast";
import axios, { AxiosError } from "axios";
import { Loader2 } from "lucide-react";
import { useRouter } from "next/navigation";
import { SignUpSchema } from "@/schemas/signUpSchema";
export default function SignUpForm() {
const [username, setUsername] = useState("");
const [usernameMessage, setUsernameMessage] = useState("");
const [isCheckingUsername, setIsCheckingUsername] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const debouncedUsername = useDebounceCallback(setUsername, 300);
const router = useRouter();
const { toast } = useToast();
const form = useForm<z.infer<typeof SignUpSchema>>({
resolver: zodResolver(SignUpSchema),
defaultValues: {
username: "",
email: "",
password: "",
},
});
useEffect(() => {
const checkUsernameUnique = async () => {
if (username !== "") {
setIsCheckingUsername(true);
setUsernameMessage("");
try {
const response = await axios.get<ApiResponse>(
`/api/check-username-unique?username=${username}`
);
setUsernameMessage(response.data.message);
} catch (error) {
const axiosError = error as AxiosError<ApiResponse>;
setUsernameMessage(
axiosError.response?.data.message ?? "Error checking username"
);
} finally {
setIsCheckingUsername(false);
}
}
};
checkUsernameUnique();
}, [username]);
async function onSubmit(data: z.infer<typeof SignUpSchema>) {
setIsSubmitting(true);
try {
const response = await axios.post("/api/signup", data);
toast({
title: "Success",
description: response.data.message,
});
router.replace(`/verify/${username}`);
setIsSubmitting(false);
} catch (error) {
console.error("Error during sign-up:", error);
const axiosError = error as AxiosError<ApiResponse>;
let errorMessage = axiosError.response?.data.message;
("There was a problem with your sign-up. Please try again.");
toast({
title: "Sign Up Failed",
description: errorMessage,
variant: "destructive",
});
setIsSubmitting(false);
}
}
return (
<div className="flex justify-center items-center min-h-screen bg-gray-800">
<div className="w-full max-w-md p-8 space-y-8 bg-white rounded-lg shadow-md">
<div className="text-center">
<h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl mb-6">
Join True Feedback
</h1>
<p className="mb-4">Sign up to start your anonymous adventure</p>
</div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
name="username"
control={form.control}
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input
{...field}
onChange={(e) => {
field.onChange(e);
debouncedUsername(e.target.value);
}}
/>
</FormControl>
{isCheckingUsername && <Loader2 className="animate-spin" />}
{!isCheckingUsername && usernameMessage && (
<p
className={`text-sm ${
usernameMessage === "Username is unique"
? "text-green-500"
: "text-red-500"
}`}
>
{usernameMessage}
</p>
)}
<FormMessage />
</FormItem>
)}
/>
<FormField
name="email"
control={form.control}
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input {...field} name="email" />
</FormControl>
<p className="text-muted text-black text-sm">
We will send you a verification code
</p>
<FormMessage />
</FormItem>
)}
/>
<FormField
name="password"
control={form.control}
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input type="password" {...field} name="password" />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">
{isSubmitting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Please wait
</>
) : (
"Sign Up"
)}
</Button>
</form>
</Form>
<div className="text-center mt-4">
<p>
Already a member?{" "}
<Link href="/sign-in" className="text-blue-600 hover:text-blue-800">
Sign in
</Link>
</p>
</div>
</div>
</div>
);
}
And here is my route.ts for /api/(auth)/signup :
import { sendVerification } from "@/helpers/sendVerification";
import ConnectToDB from "@/lib/dbConnect";
import UserModel from "@/models/User";
import bcrypt from "bcryptjs";
export async function POST(request: Request) {
if (request.method !== "POST") {
return Response.json(
{
success: false,
message: `This route only accepts POST request method, received ${request.method} instead`,
},
{
status: 405,
}
);
}
await ConnectToDB();
try {
const { email, username, password } = await request.json();
const existingVerifiedUsernameUser = await UserModel.findOne({
username,
isVerified: true,
});
if (existingVerifiedUsernameUser) {
return Response.json(
{
success: false,
message: "username is already verified",
},
{ status: 400 }
);
}
const existingUserByEmail = await UserModel.findOne({ email });
let verifyCode = Math.floor(100000 + Math.random() * 900000).toString();
if (existingUserByEmail) {
if (existingUserByEmail.isVerified) {
return Response.json(
{
success: false,
message: "User already exists with this email",
},
{ status: 400 }
);
} else {
const hashedPassword = await bcrypt.hash(password, 10);
existingUserByEmail.password = hashedPassword;
existingUserByEmail.verifyCode = verifyCode;
existingUserByEmail.verifyCodeExpiry = new Date(Date.now() + 3600000);
await existingUserByEmail.save();
}
} else {
const hashedPassword = await bcrypt.hash(password, 10);
const expiryDate = new Date();
expiryDate.setHours(expiryDate.getHours() + 1);
const newUser = new UserModel({
username,
email,
password: hashedPassword,
verifyCode,
verifyCodeExpiry: expiryDate,
isVerified: false,
isAcceptingMessages: true,
messages: [],
});
await newUser.save();
}
const emailResponse = await sendVerification(email, username, verifyCode);
if (!emailResponse.success) {
return Response.json(
{
success: false,
message: emailResponse.message,
},
{ status: 500 }
);
}
return Response.json(
{
success: true,
message: "User registered successfully. Please verify your account.",
},
{ status: 201 }
);
} catch (error) {
console.error("Error registering user:", error);
return Response.json(
{
success: false,
message: "Error registering user",
},
{ status: 500 }
);
}
}
Here is my Signup schema :
import { z } from "zod";
export const usernameValidation = z
.string()
.min(2, "Username must be atleast 2 characters long")
.max(20, "Username must be atmost 20 characters long")
.regex(
/^[a-zA-Z0-9_]*$/,
"Username can only contain letters, numbers, and underscores"
);
export const SignUpSchema = z.object({
username: usernameValidation,
email: z.string().email("Please use a valid email address"),
password: z.string().min(6, "Password must be atleast 6 characters long"),
confirmPassword: z.string(),
});
The problem is, the form is not responding to the onSubmit, I have tried console logging inside the onSubmit, but the function is not getting called.
Please help me find the solution to it.
You have to make your confirmPassword ( in your schema ) an optional field as below:
export const SignUpSchema = z.object({
username: usernameValidation,
email: z.string().email("Please use a valid email address"),
password: z.string().min(6, "Password must be atleast 6 characters long"),
confirmPassword: z.string().optional(),
});
You can check the error that occurred while submitting by placing a log as below:
// ...
<form
onSubmit={form.handleSubmit(onSubmit, (error) => {
console.log(error, "error");
})}
className="space-y-6"
// ....
Here you can learn more