Intro

In case of need, check out to the branch called 3_jwtGenerator. This branch has already implemented the handling of register, login, and dashboard routes. You can use it as a reference.

About JWT

JSON Web Token (JWT) is a standard for securely transmitting information between parties as a JSON object. It is often used in web applications as a means of representing claims securely between two parties.

JWT structure

JWT is composed of three parts:

• Header - contains information about the type of token and the signing algorithm used
• Payload - contains the claims or information that are being transmitted. These claims can include information such as a user's ID or email address
• Signature - is used to verify the sender of the JWT If you want to learn more about JWT, visit its official website (opens in a new tab).

General idea

When a user logs into an application, a JWT is generated on the server and sent back to the client. The client then stores the token and includes it in all subsequent requests to the server. The server can then use the token to verify the identity of the user and ensure that they are authorized to access the requested resources.

JWT Generator

Password

Firstly, we need to define a password that will be used to sign the token. We will use the JWT_SECRET environment variable for that.
Paste the following code in the .env file:

# Authentication configuration
JWT_SECRET=VeryWeakSecret123-

Token generation

Now, we need to generate a token. We will use the jsonwebtoken package for that. The package is already installed.
In the same structure as the routes directory, create a new directory called utils. In this directory, create a new file called jwtGenerator.ts and paste the following code to it:

import jwt from "jsonwebtoken";
import dotenv from "dotenv";
dotenv.config();
 
function jwtGenerator(userPassword) {
  const payload = {
    user: {
      password: userPassword,
    },
  };
  return jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: "1h" });
}
 
export default jwtGenerator;

The function takes a user password as an argument and returns a token. The token is signed with the JWT_SECRET environment variable.

Apply the authentication

In the routes -> jwtAuth.ts file, import the jwtGenerator function like this:

import generateJWT from "../utils/jwtGenerator";

Then, in the register route, modify the code with the highlighted lines:

// REGISTER
router.post("/register", async (req, res) => {
    const {
        email,
        password,
        firstname,
        lastname,
        title,
        birthdate,
        phone,
        sex,
        status,
        birthnumber,
    } = req.body;
 
    try {
        const user = await pool.query(
            "SELECT * FROM useraccount WHERE email = $1",
            [email]
        );
 
        if (user.rows.length) {
            return res.status(401).json("User is already registered.");
        }
 
        const insertStatus = status ?? "patient"
        let uniqueUser = await pool.query(
            "INSERT INTO useraccount (email, password, firstname, lastname, title, birthdate, phone, sex, status, birthnumber) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10) RETURNING *",
            [
                email,
                password,
                firstname,
                lastname,
                title,
                birthdate,
                phone,
                sex,
                insertStatus,
                birthnumber,
            ]
        );
 
        const token = generateJWT(uniqueUser.rows[0].password)
        res.json({
            success: true,
            message: "Authentication successful!",
            token: token,
        });
    } catch (err) {
        console.error(err.message);
        res.status(500).send("Server error");
    }
});

In this modification, jwt token will be generated based on user`s password and it will be present in the response.

Encryption of passwords

As you might notice, currently we store passwords just as plain text. Now, we are going to implement a better solution (but keep in mind, better does not mean the best)

1. In the jwtAuth.ts file, import:

import bcrypt from "bcrypt";

2. Make the adjustments in the register route according to the highlighted lines:

    if (user.rows.length) {
        return res.status(401).json("User is already registered.");
    }
 
    const salt = await bcrypt.genSalt(10);
    const bcryptPassword = await bcrypt.hash(password, salt);
 
    const insertStatus = status ?? "patient"
    let uniqueUser = await pool.query(
        "INSERT INTO useraccount (email, password, firstname, lastname, title, birthdate, phone, sex, status, birthnumber) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10) RETURNING *",
        [
            email,
            bcryptPassword,
            firstname,
            lastname,
            title,
            birthdate,
            phone,
            sex,
            insertStatus,
            birthnumber,
        ]
    );

Decryption of passwords

When the user`s password is stored in the database as encrypted, we need to compare it with the plaintext password entered when logging in.
Replace one line of assigning value to const validPassword in the login route handling as:

const validPassword = await bcrypt.compare(password, user.rows[0].password);

Summary

In this tutorial, you learned how to implement authentication using jwt token. You also learned how to encrypt and decrypt passwords. In the next lecture, we will implement middleware to make sure that only authenticated users can access the private (protected) routes.