POST http://localhost:3000/api/auth/signup 500 (Internal Server Error)

[yoonhyochang]

Select Topic Area

Bug

Body

I'm getting no value in the cookie, please help me I'm sure the value is stored in next-bnb\data\users.json when I sign up, but // xiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {...}, request: XMLHttpRequest, ...} and I can't figure out what the problem is.

import { NextApiRequest, NextApiResponse } from "next";
import Data from "../../../lib/data";
import bcrypt from "bcryptjs";
import { StoredUserType } from "../../../types/user";
import jwt from "jsonwebtoken";

export default async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === "POST") {
    const { email, firstname, lastname, password, birthday } = req.body;

    if (!email || !firstname || !lastname || !password || !birthday) {
      res.statusCode = 400;
      return res.send("필수 데이터가 없습니다.");
    }

    const userExist = Data.user.exist({ email });
    if (userExist) {
      res.statusCode = 409;
      return res.send("이미 가입된 이메일 입니다.");
    }

    const hashedPassword = bcrypt.hashSync(password, 8);
    const users = Data.user.getList();
    let userId;
    if (users.length === 0) {
      userId = 1;
    } else {
      userId = users[users.length - 1].id + 1;
    }
    const newUser: StoredUserType = {
      id: userId,
      email,
      firstname,
      lastname,
      password: hashedPassword,
      birthday,
      profileImage: "/static/image/user/default_user_profile_image.jpg"
    };

    Data.user.write([...users, newUser]);

    const token = jwt.sign(String(newUser.id), process.env.JWT_SECRET!);
    res.setHeader(
      "Set-Cookie",
      `access_token=${token}; path=/; expires=${new Date(
        Date.now() + 60 * 60 * 24 * 1000 * 3 // 3일
      )}; httponly`
    );

    return res.end();
  } else {
    res.statusCode = 405;
    return res.end();
  }
};```



```import { readFileSync, writeFileSync } from "fs";
import { StoredUserType } from "../../types/user";

const getList = () => {
  const usersBuffer = readFileSync("data/users.json");
  const usersString = usersBuffer.toString();

  if (!usersString) {
    return [];
  }
  const users: StoredUserType[] = JSON.parse(usersString);
  return users;
};
const exist = ({ email }: { email: string }) => {
  const users = getList();
  return users.some((user) => user.email === email);
};

const write = async (users: StoredUserType[]) => {
  writeFileSync("data/users.json", JSON.stringify(users));
};

export default { getList, exist, write [};```

https://github.com/yoonhyochang/nextbnbcloncoding

[moayad-star]

[ghostinhershell]

Hi @yoonhyochang,

We’ve clarified our stance on using generative AI tools like ChatGPT within our Community via this announcement. Please review the guidelines to ensure your post meets them as failure to adhere to those rules can result in action taken by our moderator team.  You can read our updated Code of Conduct and the announcement for more details. Thank you for helping us maintain an authentic and beneficial space for everyone.

[Vishnumorey2]

`const port = 4000;

// importing libraries

const express = require("express");

// starting express server

const app = express();

const mongoose = require("mongoose");

const jwt = require("jsonwebtoken");

const multer = require("multer");

const path = require("path");

// CORS is a mechanism that allows web applications running at one domain
// to request resources from a server at a different domain.

const cors = require("cors");

//parsing the incoming json into express

app.use(express.json());

/* app.use(cors()); adds the CORS middleware to the Express application,
allowing your server to handle cross-origin requests.
This means your server will be able to respond to requests from different domains,
which is particularly useful for APIs that need to be accessed by web applications hosted on different domains.*/

app.use(cors());

//Database connection width mongodb

mongoose.connect("mongodb+srv://moreyvishnu19:moreyvishnu123@cluster0.vzdarjh.mongodb.net/e-commerce");

//API creation

app.get('/',(req,res) => {
res.send("express app is running");
});

const storage = multer.diskStorage({
//creating a destination directory
destination:function(req,file,cb){
return cb(null,'./upload/images');
},
filename:function(req,file,cb){
return cb(null,${file.fieldname}_${Date.now()}_${path.extname(file.originalname)})
}
});

// creating storage as object and storing above method in it
const upload = multer({storage:storage});

// if client(frontend) makes any request we req,res third parameter of post method

app.use('/images',express.static('/upload/images'));

/Static middleware in Express.js is used to serve static files such as HTML files, images, CSS files, and JavaScript files.
These files are typically served directly to the client's browser without any processing by the server./

app.post('/upload',upload.single('product'),(req,res)=>{

/* our image gets into this '/upload' using post method and 
   gets into storage then it will be having uniq filename which
   can be accessed by req and when user sends req  we r going to send response
*/

res.json({
success:1,
image_url:http://localhost:${port}/images/${req.file.filename}
})

})

// creating schema using mongoose

const Product = mongoose.model("Product",{
id:{
type:Number,
required:true,
},
name:{
type:String,
required:true,
},
category:{
type:String,
required:true,
},
images:{
type:String,
required:true,
},
old_prices:{
type:Number,
required:true,
},
new_prices:{
type:Number,
required:true,
},
date:{
type:Date,
default:Date.now,
},
available:{
type:Boolean,
default:true,
},
})
//creating api to send data

app.post('/addproduct',async (req,res)=>{
// now you are accessing the data in database.
try {
const products = await Product.find({});
let id;
if(products.length > 0){
let last_product_array = products.slice(-1);
let last_product = last_product_array[0];
id = last_product.id+1;
}else{
id = 1;
}

 // you just passed the data in database using this api.
const product = new Product({
    id:id,
    name:req.body.name,
    category:req.body.category,
    images:req.body.images,
    old_prices:req.body.old_prices,
    new_prices:req.body.new_prices,
})
console.log(product);
await product.save();
console.log("saved");
res.json({success:true, name:req.body.name, });

} catch (error) {
console.error('Error:', error);
res.status(500).json({ success: false, error: 'Server error' });
}

});

//creating api to delete data

app.post('/removeproduct',async (req,res) => {
try {
const product = await Product.findOneAndDelete({ id: req.body.id });

    if (!product) {
        return res.status(404).json({
            success: false,
            message: 'Product not found',
        });
    }

    console.log("removed");
    res.json({
        success: true,
        name: product.name,
    });
} catch (error) {
    console.error("Error removing product:", error);
    console.error('Stack Trace:', error.stack);
    res.status(500).json({
        success: false,
        message: 'Internal server error',
    });
}

})

//creating api for all products

app.get('/allproducts',async (req,res)=> {
const Products = await Product.find({});
console.log("fetched");
res.send(Products);
})

app.listen(4000,(error)=>{
if(!error){
console.log("server running on port"+port);
} else {
console.log("error"+error);
}
});
import React from 'react'
import './AddProduct.css'
import upload_image from '../../assets/upload_image.jpg'
import { useState } from 'react'

const AddProduct = () => {

const [image,setimage] = useState(false);

const [productdetails,setproductdetails] = useState({
    name:'',
    image:'',
    category:'women',
    new_prices:'',
    old_prices:''
})

/*
This creates a shallow copy of the current productdetails state.
 The spread operator (...) ensures that the existing properties 
 in the state are not overwritten when we update a specific property.*/ 

// event handler that takes value from input
const changehandler = (e)=>{
setproductdetails({...productdetails,[e.target.name]:e.target.value})
}

/* [e.target.name] is used to dynamically access a property in the state object.
 The name attribute of the input field that triggered the event is used as the key
  to identify which property in the state should be updated.

*/

const imagehandler = (e)=>{
    setimage(e.target.files[0]);
}

/*The Add_product function is an asynchronous function
designed to upload a product's image to a server using the Fetch API.
It uses the FormData object to handle the form data, particularly the image file */

const Add_product = async() => {

    console.log(productdetails);
    let responsedata;
    let product = productdetails;
    // we are using FormData to use fetchapi

    /*FormData is a built-in JavaScript object that provides
    a way to construct key/value pairs representing 
    form fields and their values, which can then
    be sent using the fetch API or other network  requests. */ 
    
        let formdata = new FormData();
     //formdata.append takes key value as input key = 'product' value=image
     formdata.append('product',image);
      // we are sending request to the http://localhost:4000/upload' 
      //through post method and sending formData
      //and we are requesting response to be in json format by making headers application/json 
      
     

        const response = await fetch('http://localhost:4000/upload',{
            method:'POST',
            headers:{
                Accept:'application/json'
            },
            body:formdata,
         }).then((resp)=>resp.json()).then((data)=>{responsedata=data});

        
    

         if(responsedata.success){
            product.image = responsedata.image_url;
            console.log(product);

            await fetch('http://localhost:4000/addproduct',{
                method: 'POST',
                headers:{
                    Accept:'application/json',
                    'Content-Type':'application/json'
                },
                body:JSON.stringify(product),
            }).then((resp)=>resp.json()).then((data)=>{
                data.success?alert('product added'):alert("not added")
                console.log(data)
            })
         }
    }

return (

Product title

Price

Offer Price

<div className="addproduct-itemfield">
    <select   value={productdetails.category} onChange={changehandler} name="category" className='addproduct-selector'>
        <option value="women">Women</option>
        <option value="men">Men</option>
        <option value="kids">Kids</option>
    </select>
</div>
<div className="addproduct-itemfield">
    <label htmlFor="file-input">
        <img src={image?URL.createObjectURL(image):upload_image} alt="" className='addproduct-thumbnail'/>
    </label>
    <input onChange={imagehandler} type="file" name='image' id='file-input' hidden/>
</div>
<button onClick={()=> {Add_product()}} className='addproduct-btn' >Add</button>

) }

export default AddProduct`

[ghostinhershell]

Hi @yoonhyochang, thanks so much for posting to our community. Can you please provide more information on where you're running into this error, and any steps needed to reproduce?

[Vishnumorey2]

this is my jsx code

` if(responsedata.success){
product.image = responsedata.image_url;
console.log(product);

            await fetch('http://localhost:4000/addproduct',{
                method: 'POST',
                headers:{
                    Accept:'application/json',
                    'Content-Type':'application/json'
                },
                body:JSON.stringify(product),
            }).then((resp)=>resp.json()).then((data)=>{
                data.success?alert('product added'):alert("not added")
                console.log(data)
            })
         }`

this is my server side code

  `const product = new Product({
    id:id,
    name:req.body.name,
    category:req.body.category,
    images:req.body.images,
    old_prices:req.body.old_prices,
    new_prices:req.body.new_prices,
})
console.log(product);
await product.save();
console.log("saved");
res.json({success:true, name:req.body.name, });

} catch (error) {
console.error('Error:', error);
res.status(500).json({ success: false, error: 'Server error' });
}

});`

this the error

POST http://localhost:4000/addproduct 500 (Internal Server Error)