How to implement reset password on a rest api with jsonwebtoken in a express app

renzhamin included in category backend

2023-05-24 2023-05-24 942 words 5 minutes

/password-reset-with-jwt/images/featuredImage.webp

Contents

Implement reset password in a rest-api with stateless jsonwebtoken approach

1 Overview

Add password reset functionality on top of a rest-api that has authentication and authorization implemented. If you want to know the basics of how jsonwebtoken is used for authorization, you can read here
Prisma ORM is used with SQLite. So you don’t have to setup any database in your system
This approach is stateless and requires the least amount of db calls, therefore prioritizing performance
The code is available on github

1.1 Flow

sequenceDiagram
participant c as Client
participant s as Server
c ->> s: body = { email }
Note over c,s: GET /pass-reset
s -> s : find user and generate token
s -> s : send reset link in email
c ->> s: body = { password }
Note over c,s : POST /pass-reset/:userId/:token
s -> s : verify token and update password

2 Token Generation

utils/genToken.ts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// helper function to generate token
export const genToken = (
    user: any,
    secret: string,
    expiresIn: string,
    tokenId?: string
) => {
    const { id, username, email } = user
    const jwtid = tokenId || randomUUID()
    const token = jwt.sign({ jwtid, id, username, email }, secret, {
        algorithm: "HS256",
        expiresIn,
    })

    return token
}

Generate a token with a 2 minute expiration time (lesser the better)
Use an environment variable as secret, this should be large and random

1
2
3
export const genPassResetToken = (user) => {
    return genToken(user, process.env.PASS_RESET_TOKEN_SECRET!, "2m")
}

2.1 Why keep the validity duration small ?

As we are using stateless jwt, we can not invalidate the token. To prevent a user from using the same reset link again and again, we must set the expiration time to a lower value

2.2 Why not just use regular accessToken ?

A regular access token provides access to protected resources which we don’t want at all. The user only provides a email address, they may or may not be a legitimate user. Thats why we can’t just hand over an accessToken on a password reset request

3 Sending Email

There are multiple ways to send email from a server.

Here is a sample code to setup a gmail account to send an email using nodemailer.

utils/sendEmail.ts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export const sendEmail = async (receiverEmail, subject, body) => {
    const transporter = nodemailer.createTransport({
        service: "gmail",
        auth: {
            // your gmail address
            user: process.env.serviceEmail,
            // app password for the gmail
            pass: process.env.serviceEmailPassword,
        },
    })

    const mailOptions = {
        from: process.env.serviceEmail,
        to: receiverEmail,
        subject: subject,
        html: body,
    }

    transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
            console.log("Failed to send email to", receiverEmail)
        } else {
            /* console.log("Email sent: " + info.response) */
        }
    })
}

3.1 How to enable app password in google account

Go to google account page
Navigate to security and enable 2-step verification
Search “App Passwords” in the search bar and click on the matched result
Chose app as “Mail” and device as “Other” and put anything there (such as “linux”)
Click on “GENERATE” button and save the password as serviceEmailPassword in .env file. (NOTE: you only get one chance to save the password)

3.2 Sending the reset link

controllers/passReset.ts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Route: GET /api/pass-reset; expecting email in request body
export const getPassResetLink = async (req, res) => {
    try {
        if (!req.body.email) {
            return res.status(400).json({ msg: "No email provided" })
        }
        const user = await findUserByEmail(req.body.email)
        if (!user || !user.email) return res.json({ msg: "Email not found" })
        const token = genPassResetToken(user)
        const requrl = req.protocol + "://" + req.get("host") + req.originalUrl
        // the url from which the request came from, in local environment it is,
        // http://localhost:5000/api/pass-reset

        // if the frontend is in different domain declare PASS_RESET_URL in .env file
        const url = process.env.PASS_RESET_URL || requrl
        const resetLink = `<a target='_blank' href='${url}/${user.id}/${token}'>Password Reset Link</a>`
        sendEmail(req.body.email, "Reset Password", resetLink)
        res.json({ msg: "Password Reset Link sent to email" })
    } catch (error) {
        res.status(500).json({ msg: "Failed to send email" })
    }
}

4 Resetting password

4.1 Password Reset Form

The frontend should have a route “PASS_RESET_URL/:userId/:token” that takes an email in the body which sends a POST request to /api/pass-reset/:userId/:token on submit
Here, I have created the most basic html form to keep this article backend focused

utils/passReset.ts:

1
2
3
4
5
6
7
8
9
// Route : GET /api/pass-reset/:userId/:token
export const getPassResetPage = (req, res) => {
    const { userId, token } = req.params

    res.send(`<form action="/api/pass-reset/${userId}/${token}" method="POST">
             <input type="password" name="password" value="" placeholder="Enter your new password..." /> 
             <input type="submit" value="Reset Password" />
             </form>`)
}

4.2 Updating password

Route : router.post("/api/pass-reset/:userId/:token", verifyPasswordResetToken, passReset)

verifyPasswordResetToken middleware verifies the token with the secret PASS_RESET_TOKEN_SECRET