Array of Numbers can be seen in the logs of both frontend and backend yet it is not saved in the database

Question

I am trying to replicate google's Backup Codes system by generating 4 random 8 digit numbers.

for(let i = 0; i < 4; i++) {
      let backendCode = Math.floor(Math.random() * (99999999 - 10000000 + 1) + 10000000);
      backendCodes.push(backendCode);
    }

Using a Backend Service to post to the backend.

constructor(private http: HttpClient) { }

  signUpUser(email: string, password: string, backendCodes: number[]) {
    const url = "http://localhost:3000/signup/api"
    const body = { email, password, backendCodes };
    console.log(body); // Add this line to log the request body
    const headers = new HttpHeaders({
      'Content-Type': 'application/json'
    });

    this.http.post(url, body, { headers }).subscribe({
      next: value => console.log(value),
      error: error => console.log(error),
      complete: () => console.log("Complete")
    });
  }

Then saving it in the database (MongoDB).

app.post("/signup/api", async (req, res) => {
  const { email, password, backupCodes } = req.body;
  console.log(req.body); 
  try {
    const newUser = new User({
      email: email,
      password: password,
      backupCodes: backupCodes,
    });

    await newUser.save();
    console.log("Successful");
    res.status(200).json({ message: "User signed up successfully" });
  } catch (err) {
    console.log("Error: ", err);
    res.status(500).json({ error: "Internal Server Error" });
  }
});

What was I expecting

I was expecting everything to be saved, but saw that the backupCodes was empty. As shown here

What I've tried

I tried logging the output before posting to the backend and before saving the data to the database

Frontend

signUpUser(email: string, password: string, backendCodes: number[]) {
    const url = "http://localhost:3000/signup/api"
    const body = { email, password, backendCodes };

    console.log(body); // Test before post

    const headers = new HttpHeaders({
      'Content-Type': 'application/json'
    });

    this.http.post(url, body, { headers }).subscribe({
      next: value => console.log(value),
      error: error => console.log(error),
      complete: () => console.log("Complete")
    });
  }

Backend

app.post("/signup/api", async (req, res) => {
  const { email, password, backupCodes } = req.body;

  console.log(req.body); // Test before saving to Database

  try {
    const newUser = new User({
      email: email,
      password: password,
      backupCodes: backupCodes,
    });

    await newUser.save();
    console.log("Successful");
    res.status(200).json({ message: "User signed up successfully" });
  } catch (err) {
    console.log("Error: ", err);
    res.status(500).json({ error: "Internal Server Error" });
  }
});

Here is the screenshots of the result:-

Frontend Console Log and Backend Console Log

Here is my Schema, if this is the issue:

const userSchema = new mongoose.Schema({
  email: String,
  password: String,
  backupCodes: [Number],
});

Answer 1

The array property is named backupCodes in your schema but your console logs show the property name is backendCodes.