Login Error Messages : Node Guide

Login Error Messages

Displaying the Error Messages

The src/controllers/logincontrollers.ts already has code for sending error messages to the view via the render() method.

SNIPPET: src/controllers/logincontrollers.ts
 

  async function loginUser(req: Request, res: Response): Promise<void> {
  try {
    const { email, password } = req.body;

    // Find the user by email
    const user = await User.findOne({ email });
    if (!user) {
      res.render("login", {
        title: "Login",
        error: "Invalid email or password",
      });
      return;
    }

    // Compare the provided password with the stored hashed password
    const isPasswordValid = await bcrypt.compare(password, user.password);
    if (!isPasswordValid) {
      res.render("login", {
        title: "Login",
        error: "Invalid email or password",
      });
      return;
    }

    res.redirect("/cms");
  } catch (error) {
    console.error("Error logging in user:", error);
    res.render("login", {
      title: "Login",
      error: "Failed to login user",
    });
  }
}

These error messages can be displayed by adding the following to the view before the opening <form> tag:

SNIPPTE: src/views/login.ejs
 

  <% if (locals.error) { %>
  <p class="error"><%= error %></p>
  <% } %>

The above uses conditional logic to display the error send as a varible to the view. In Express locals is an object that allows local variable to be pass to the view. The EJS generates a HTML paragraph of class error. Here error is just a convenient class name in the CSS to style the content.

Do the same for the register view to similarly see the error messages send to via the render().

We now have suitable error messages but our CMS is still not secure. User's can navigate to localhost:3000/cms without a prompt to login. To add this funcationality, we need to first take a look at the concepts of Cookies and Sessions.

Next: Cookies