Creating a User Login for the Web Application : Node Guide

Creating a User Login for the Web Application

With the registration set up we'll now look at how user's can login to the CMS.

Setting up the controller's `loginUser` method

In the src/controllers/logincontrollers.ts file, add the following code to define the loginUser 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",
    });
  }
}

In the above code, we define the loginUser method, which handles the login functionality.

We extract the email and password from the request body using req.body.
We search for the user in the database using User.findOne({ email }). If no user is found, we render the login view with an appropriate error message.
Next, we compare the provided password with the stored hashed password using bcrypt.compare(). If the passwords don't match, we render the login view with an error message indicating invalid email or password.
If the user's password is valid, we redirect the user to the CMS page.
In case any errors occur during the process, we catch them, log an error message, and render the login view sending an appropriate error message (which again we'll display later).

Exporting the `loginUser` Method

Make sure to export the loginUser method by adding the following line of code at the end of the logincontrollers.ts file:

SNIPPET: src/controllers/logincontrollers.ts
 
  export { createUser, loginUser };

Exporting the method allows us to import and use it in other parts of our application.

We have now added the loginUser method to handle user login functionality. Next we need to setup the login routes.

Adding the login Routes

In the src/routes/loginroutes.ts file, we need to define two routes:

SNIPPET: src/routes/loginroutes.ts
 

  router.get("/login", (req: Request, res: Response) => {
  res.render("login", { title: "Login" });
});

router.post("/login", loginController.loginUser);

These two routes do the following:

The GET route at /login:

This route is responsible for rendering the login view.
When a user accesses the /login URL, the callback function is executed.
Inside the callback function, we use res.render() to render the login view.
We pass an object as the second argument to res.render(), which contains the view's title as "Login".
This route is used to display the login form to the user.

The POST route at /login:

This route is used to handle the submission of the login form.
When a user submits the login form, the callback function associated with this route is executed.
Inside the callback function, we call the loginUser method from the loginController module to handle the login process.
The loginUser method verifies the user's credentials, compares the provided password with the stored hashed password, and redirects the user to the CMS page if the login is successful.
If the login fails, the loginUser method renders the login view with an appropriate error message.

By defining these routes, we can handle the rendering of the login view and the submission of the login form separately. The GET route displays the login form, and the POST route processes the form submission and handles the login functionality.

Building the Login View

Create a EJS view to allow user's to login at src/views/login.ejs.

src/views/login.ejs
 

  <%- include('partials/head'); %>
<div class="container">
  <h1>Login</h1>


  <form action="/login" method="post" class="logReg">
    <div>
      <label for="email">Username</label>
      <input type="email" name="email" id="email" />
    </div>

    <div>
      <label for="password">Password</label>
      <input type="text" name="password" id="password" />
    </div>

    <div>
      <input type="submit" value="Login" />
    </div>
  </form>
</div>
<%- include('partials/footer'); %>

We should now be able to test the login at localhost:3000/login.

Although correct login details will work we need to add error messages for when a login should be denied. At the moment if incorrect details are entered the user just get redirected to the login page.

Next: Login Error Messages