how can we store the response to local storage which comes from post api in NEXT.JS - mongodb

Question

Here is my post function which is posting data
const submitHandler = async (e) => {
e.preventDefault();
setLoading(true);
if (!name || !email || !phone || !gender || !password || !confirmpassword) {
toast.warning("Please Fill all the Fields", {
position: "bottom-center",
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
progress: undefined,
theme: "light",
bodyClassName: 'font-bold'
});
setTimeout(() => {
setLoading(false)
}, 2000);
return;
}
if (password !== confirmpassword) {
toast.warning("Passwords not Matched", {
position: "bottom-center",
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
progress: undefined,
theme: "light",
});
setTimeout(() => {
setLoading(false)
}, 2000);
return;
}
try {
const config = {
headers: {
"Content-type":"application/json"
}
}
const { dev } = await axios.post("/api/registerteacher", {
name,
phone,
email,
gender,
password,
confirmpassword,
pic,
},config);
toast.success("Registration Succesfull", {
position: "bottom-center",
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
progress: undefined,
theme: "dark",
});
console.log(dev)
localStorage.setItem("teacherinfo", JSON.stringify(dev));
setLoading(false);
router.replace("/teacher/selectcategory");
} catch (error) {
toast.error("Error Occured, Try Again Later", {
position: "bottom-center",
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
progress: undefined,
theme: "dark",
className:"rounded-full"
});
setLoading(true);
}
};
In the above function I am taking the data from the register page. data is name, email, phone, password and confirm password and there are some validations at the front end and if data is not validate the showing the toast by react toastify and after vaidation i am posting the data to the backend by axios and storing the response in dev variable and store the dev variable in localstorage but i am getting the dev as undefined from the backend.
Here my backend code looks like:
import generateTeacherToken from './tokens/generateTeacherToken';
require('./db/regg')
const TeacherSchema = require('./models/teacherSchema')
const handler = async(req, res) => {
if(req.method === 'POST'){
const { name, email, phone, gender, password, confirmpassword, pic} = req.body;
if (!name || !email || !phone || !gender || !password || !confirmpassword) {
throw new Error('Please Fill all fields');
}
const userExists = await TeacherSchema.findOne({ email });
if (userExists) {
res.status(400)
throw new Error('User already exists');
}
const teacher = await TeacherSchema.create({
name,
email,
phone,
gender,
password,
confirmpassword,
pic,
});
if (teacher) {
res.status(201).json({
_id : teacher._id,
name : teacher.name,
email : teacher.email,
phone : teacher.phone,
gender : teacher.gender,
pic : teacher.pic,
token : generateTeacherToken(teacher._id),
});
}else{
res.status(400);
throw new Error("Failed to create the teacher")
}
}
}
export default handler;import generateTeacherToken from './tokens/generateTeacherToken';
require('./db/regg')
const TeacherSchema = require('./models/teacherSchema')
const handler = async(req, res) => {
if(req.method === 'POST'){
const { name, email, phone, gender, password, confirmpassword, pic} = req.body;
if (!name || !email || !phone || !gender || !password || !confirmpassword) {
throw new Error('Please Fill all fields');
}
const userExists = await TeacherSchema.findOne({ email });
if (userExists) {
res.status(400)
throw new Error('User already exists');
}
const teacher = await TeacherSchema.create({
name,
email,
phone,
gender,
password,
confirmpassword,
pic,
});
if (teacher) {
res.status(201).json({
_id : teacher._id,
name : teacher.name,
email : teacher.email,
phone : teacher.phone,
gender : teacher.gender,
pic : teacher.pic,
token : generateTeacherToken(teacher._id),
});
}else{
res.status(400);
throw new Error("Failed to create the teacher")
}
}
}
export default handler;import generateTeacherToken from './tokens/generateTeacherToken';
require('./db/regg')
const TeacherSchema = require('./models/teacherSchema')
const handler = async(req, res) => {
if(req.method === 'POST'){
const { name, email, phone, gender, password, confirmpassword, pic} = req.body;
if (!name || !email || !phone || !gender || !password || !confirmpassword) {
throw new Error('Please Fill all fields');
}
const userExists = await TeacherSchema.findOne({ email });
if (userExists) {
res.status(400)
throw new Error('User already exists');
}
const teacher = await TeacherSchema.create({
name,
email,
phone,
gender,
password,
confirmpassword,
pic,
});
if (teacher) {
res.status(201).json({
_id : teacher._id,
name : teacher.name,
email : teacher.email,
phone : teacher.phone,
gender : teacher.gender,
pic : teacher.pic,
token : generateTeacherToken(teacher._id),
});
}else{
res.status(400);
throw new Error("Failed to create the teacher")
}
}
}
export default handler;import generateTeacherToken from './tokens/generateTeacherToken';
require('./db/regg')
const TeacherSchema = require('./models/teacherSchema')
const handler = async(req, res) => {
if(req.method === 'POST'){
const { name, email, phone, gender, password, confirmpassword, pic} = req.body;
if (!name || !email || !phone || !gender || !password || !confirmpassword) {
throw new Error('Please Fill all fields');
}
const userExists = await TeacherSchema.findOne({ email });
if (userExists) {
res.status(400)
throw new Error('User already exists');
}
const teacher = await TeacherSchema.create({
name,
email,
phone,
gender,
password,
confirmpassword,
pic,
});
if (teacher) {
res.status(201).json({
_id : teacher._id,
name : teacher.name,
email : teacher.email,
phone : teacher.phone,
gender : teacher.gender,
pic : teacher.pic,
token : generateTeacherToken(teacher._id),
});
}else{
res.status(400);
throw new Error("Failed to create the teacher")
}
}
}
export default handler;import generateTeacherToken from './tokens/generateTeacherToken';
require('./db/regg')
const TeacherSchema = require('./models/teacherSchema')
const handler = async(req, res) => {
if(req.method === 'POST'){
const { name, email, phone, gender, password, confirmpassword, pic} = req.body;
if (!name || !email || !phone || !gender || !password || !confirmpassword) {
throw new Error('Please Fill all fields');
}
const userExists = await TeacherSchema.findOne({ email });
if (userExists) {
res.status(400)
throw new Error('User already exists');
}
const teacher = await TeacherSchema.create({
name,
email,
phone,
gender,
password,
confirmpassword,
pic,
});
if (teacher) {
res.status(201).json({
_id : teacher._id,
name : teacher.name,
email : teacher.email,
phone : teacher.phone,
gender : teacher.gender,
pic : teacher.pic,
token : generateTeacherToken(teacher._id),
});
}else{
res.status(400);
throw new Error("Failed to create the teacher")
}
}
}
export default handler;
In backend the frontend data is storing in mongo db and send the respone too. but still the dev is undefined.
Here is my respone looks like
{
"_id": "63c8085ed8a4774dc48c68c6",
"name": "joe don",
"email": "john#gmail.com",
"phone": "6350330324",
"pic": "https://icon-library.com/images/anonymous-avatar-icon/anonymous-avatar-icon-25.jpg",
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzYzgwODVlZDhhNDc3NGRjNDhjNjhjNiIsImlhdCI6MTY3NDA1MzczMiwiZXhwIjoxNjc2NjQ1NzMyfQ.ejS4PlsmQhS4Avu8Vo6B7RmuEhlhhGI2hPRRwQRCsyE"
}
Please Help me I am Stucked in this problem
How can i store the response (dev) in localstorge to use for put request