Register method response issue

[Developer-Nijat]

1. RegisterPage Change handleFormSubmit method

async function handleFormSubmit(ev) {
    ev.preventDefault();
    setCreatingUser(true);
    setError(false);
    setUserCreated(false);

    let response;

    await fetch("/api/register", {
      method: "POST",
      body: JSON.stringify({ email, password }),
      headers: { "Content-Type": "application/json" },
    })
      .then((res) => res.json())
      .then((res) => {
        console.log("Response: ", res);
        response = res;
      })
      .catch((err) => {
        console.error("Error: ", err);
        response = err;
      });

    if (response._id) {
      setUserCreated(true);
    } else {
      setError(true);
    }
    setCreatingUser(false);
  }

2. api/register/route.js Update POST method

   export async function POST(req) {
   const body = await req.json();
   mongoose.connect(process.env.MONGO_URL);
   const pass = body.password;
   
   if (!pass?.length || pass.length < 5) {
   return Response.json(
     {
       message: "Password must be at least 5 characters",
       status: 400,
       ok: false
     },
     {
       status: 400,
     }
   );
   }
   
   const notHashedPassword = pass;
   const salt = bcrypt.genSaltSync(10);
   body.password = bcrypt.hashSync(notHashedPassword, salt);
   
   const createdUser = await User.create(body);
   return Response.json(createdUser);
   }

[dannymorson]

1. RegisterPage Change handleFormSubmit method

async function handleFormSubmit(ev) {
    ev.preventDefault();
    setCreatingUser(true);
    setError(false);
    setUserCreated(false);

    let response;

    await fetch("/api/register", {
      method: "POST",
      body: JSON.stringify({ email, password }),
      headers: { "Content-Type": "application/json" },
    })
      .then((res) => res.json())
      .then((res) => {
        console.log("Response: ", res);
        response = res;
      })
      .catch((err) => {
        console.error("Error: ", err);
        response = err;
      });

    if (response._id) {
      setUserCreated(true);
    } else {
      setError(true);
    }
    setCreatingUser(false);
  }

2. api/register/route.js Update POST method

export async function POST(req) {
const body = await req.json();
mongoose.connect(process.env.MONGO_URL);
const pass = body.password;

if (!pass?.length || pass.length < 5) {
  return Response.json(
    {
      message: "Password must be at least 5 characters",
      status: 400,
      ok: false
    },
    {
      status: 400,
    }
  );
}

const notHashedPassword = pass;
const salt = bcrypt.genSaltSync(10);
body.password = bcrypt.hashSync(notHashedPassword, salt);

const createdUser = await User.create(body);
return Response.json(createdUser);
}

To resolve the issue in the registration method, the handleFormSubmit function in the RegisterPage component has been updated to handle API responses more effectively. The function now correctly processes the server's response, checking whether the user was successfully created or if an error occurred, such as an invalid password. The API's POST method has also been improved to ensure that passwords meet the minimum length requirement before hashing and storing them in the database. This approach can be adapted for any user registration flow, just as you would manage customer orders at rocomamasmenu.