i created a signup page and i aslo connected to the mongodb database also , when i try to click that signUp button , it throw me error called (signup failed Request failed with status code 500) in console but in terminal it shows the error callled this ( error TypeError: Cannot read properties of undefined (reading 'headers') at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:265:61) at process.processTicksAndRejections (node:internal/process/task_queues:95:5))
this is page,ts of signup page
"use client"
import React, { useEffect} from "react";
import Link from "next/link";
import axios from "axios"
import { useRouter } from "next/navigation";
const SignUpPage = () => {
const router= useRouter();
const [user, setUser]=React.useState({
username:"",
email:"",
password:"",
})
const [buttonDisabaled, setButtonDisabaled]=React.useState(false)
const [loading, setLoading]= React.useState(false)
const onSignUp= async()=>{
try {
setLoading(true);
const response= await axios.post("/api/users/signup", user);
console.log("signup Successfully", response.data);
router.push("/login");
} catch (error:any) {
console.log("signup failed", error.message)
}finally{
setLoading(false)
}
}
useEffect(()=>{
if(user.username.length > 0 &&
user.email.length > 0 &&
user.password.length > 0
){
setButtonDisabaled(false)
}else{
setButtonDisabaled(true)
}
},[user])
return (
<div>
<section className="gradient-form h-full bg-neutral-200 dark:bg-neutral-700">
<div className="container h-full p-10">
<div className="g-7 flex h-full flex-wrap items-center justify-center text-neutral-800 dark:text-neutral-200">
<div className="w-full">
<div className="block rounded-lg bg-white shadow-lg dark:bg-neutral-800">
<div className="g-0 lg:flex lg:flex-wrap">
{/* Left column container*/}
<div className="px-4 md:px-0 lg:w-6/12">
<div className="md:mx-6 md:p-12">
{/*Logo*/}
<div className="text-center">
<img
className="mx-auto w-48"
src="https://tecdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/lotus.webp"
alt="logo"
/>
<h4 className="mb-12 mt-1 pb-1 text-xl font-semibold">
we are developers Team
</h4>
</div>
<p className="mb-4">Sign Up</p>
{/*Username input*/}
<div className="relative mb-4" data-te-input-wrapper-init>
<h4 className="mb-12 mt-1 pb-1 text-xl font-semibold">
{loading?"processing" :""}
</h4>
<label htmlFor="usermane"> Username</label>
<input
id="username"
type="text"
className="peer block min-h-[auto] w-full rounded border-0 bg-white px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none text-black [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
placeholder="Username"
value={user.username}
onChange={(e)=>setUser({...user, username:e.target.value})}
/>
</div>
{/*email input*/}
<div className="relative mb-4" data-te-input-wrapper-init>
<label htmlFor="email">Email</label>
<input
id="email"
type="email"
className="peer block min-h-[auto] w-full rounded border-0 bg-white px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none text-black [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
placeholder="email"
value={user.email}
onChange={(e)=>setUser({...user, email:e.target.value})}
/>
</div>
{/*password input */}
<div className="relative mb-4" data-te-input-wrapper-init>
<label htmlFor="email">Email</label>
<input
id="password"
type="password"
className="peer block min-h-[auto] w-full rounded border-0 bg-white px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none text-black [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
placeholder="Password"
value={user.password}
onChange={(e)=>setUser({...user, password:e.target.value})}
/>
</div>
{/*Submit button*/}
<div className="mb-12 pb-1 pt-1 text-center">
<button
onClick={onSignUp}
className="mb-3 inline-block w-full rounded px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_rgba(0,0,0,0.2)] transition duration-150 ease-in-out hover:shadow-[0_8px_9px_-4px_rgba(0,0,0,0.1),0_4px_18px_0_rgba(0,0,0,0.2)] focus:shadow-[0_8px_9px_-4px_rgba(0,0,0,0.1),0_4px_18px_0_rgba(0,0,0,0.2)] focus:outline-none focus:ring-0 active:shadow-[0_8px_9px_-4px_rgba(0,0,0,0.1),0_4px_18px_0_rgba(0,0,0,0.2)]"
data-te-ripple-init
data-te-ripple-color="light"
style={{
background:
"linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593)",
}}
>
{buttonDisabaled ?"No SignUp" :"Sign Up"}
</button>
<Link href="/login">
<span
className="mb-3 inline-block w-full rounded px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_rgba(0,0,0,0.2)] transition duration-150 ease-in-out hover:shadow-[0_8px_9px_-4px_rgba(0,0,0,0.1),0_4px_18px_0_rgba(0,0,0,0.2)] focus:shadow-[0_8px_9px_-4px_rgba(0,0,0,0.1),0_4px_18px_0_rgba(0,0,0,0.2)] focus:outline-none focus:ring-0 active:shadow-[0_8px_9px_-4px_rgba(0,0,0,0.1),0_4px_18px_0_rgba(0,0,0,0.2)]"
data-te-ripple-init
data-te-ripple-color="light"
style={{
background:
"linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593)",
}}
>
Visit to Login
</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
);
};
export default SignUpPage;
this is the route.ts page of signup
import { connect } from "@/dbConfig/dbConfig"
import User from "@/models/userModels"
import { NextRequest, NextResponse } from "next/server"
import bcryptjs from "bcryptjs"
connect()
export async function POST(request:NextRequest){
try {
const reqBody= await request.json();
const {username, email, password}=reqBody;
console.log(reqBody);
//check is user Already exist or not
const user = await User.findOne({email});
if(user){
return NextResponse.json({error:"user Already Exists"})
}
//hashed password
const saltRounds= 10;
const salt=await bcryptjs.genSalt(saltRounds);
const hashedPassword= await bcryptjs.hash(password,salt);
const newUser= new User({
username,
email,
password:hashedPassword
});
const savedUser= await newUser.save();
console.log(savedUser)
} catch (error:any) {
console.error("Error during signup:", error);
return NextResponse.json({ error: error.message }, { status: 500 });
}
}
