DEV Community: Yash Jaiswal

Password Reset Feature: SMTP Debugging

Yash Jaiswal — Wed, 02 Oct 2024 06:22:37 +0000

The Bug

I spun up the backend and frontend for the app, tested all the components, navigating through the app. I left the password reset feature for the last. When I entered my email address to send the OTP, I received the following error as an alert in the web browser:

write tcp 192.168.48.210:43244->103.103.197.223:587: write: broken pipe

The bug could be reproduced every time I tried sending an OTP.

Debugging

With the help of ChatGPT and some research, I understood the following:

The server of my app is trying to write to a tcp connection. The server is trying to write (email) from the port 43244 on my machine (private IP address 192.168.48.210), to the SMTP server of ZohoMail (IP address 103.103.197.223, port no. 587). The write failed (write:broken pipe), because it was trying to write to TCP connection that has been already closed.

I discovered that the SMTP server will close any TCP connections if it is idling for too long.

What I was doing before-

The function SMTPConnect() from config/smtpConnection.go performs dialing up and authentication all on a tcp connection to the SMTP server. I called this function while initializing the server app.

What happened is, when I was using the SMTPClient after initialization, the app was trying to write to the TCP connection which was created when the app started. This TCP connection timed out as it was sitting idle when there was nothing to send over it, hence giving me the error.

What I needed to do-

Instead of calling the SMTPConnect() function right at the start when the app is initialized, I need to open a TCP connection each time before sending an email, and close it right after, so as to avoid it timing out.

Here are the steps I took to do this:

Remove the call to SMTPConnect() function from the init() function in main.go. Now the init() function is:

func init() {
    godotenv.Load()

    config.DBConnect()
    config.RedisConnect()
}

Call the SMTPConnect() function at the start of the SendOTP function, so that the SMTP connection is initialized each time an email has to be sent
Once the email is done being written, close the SMTP connection by calling close() on the SMTPClient

Here's the final code for the SendOTP function after making the changes:

func SendOTP(otp string, recipient string) error {
    // connecting here because connection tends to time out
    config.SMTPConnect()

    sender := os.Getenv("SMTP_EMAIL")
    client := config.SMTPClient

    // setting the sender
    err := client.Mail(sender)
    if err != nil {
        return err
    }

    // set recipient
    err = client.Rcpt(recipient)
    if err != nil {
        return err
    }

    // start writing email
    writeCloser, err := client.Data()
    if err != nil {
        return err
    }

    // contents of the email
    msg := fmt.Sprintf(emailTemplate, recipient, otp)

    // write the email
    _, err = writeCloser.Write([]byte(msg))
    if err != nil {
        return err
    }

    // close and send email
    err = writeCloser.Close()
    if err != nil {
        return err
    }

    // close smtp connection
    err = client.Close()
    if err != nil {
        return err
    }

    return nil
}

Now, the bug has been fixed and the emails are being sent as they should be.

The feature is now completed. Thank you for reading.

The app is deployed on Render, here
The source code is in the GitHub Repository

Password Reset Feature: Frontend

Yash Jaiswal — Wed, 02 Oct 2024 03:24:26 +0000

Frontend

The frontend part is very easy compared to the backend part. All I need to do is create a modal, and use it to send data twice.

Firstly send email to send OTP to
Then send the OTP and the new password to change it

To create the modal, I copied some code, the classNames for the encapsulation of a modal, from the MessageModal component in my earlier project Chat-Nat.

Planning

I'll add a "Forgot Password?" button on the login page, and set the onClick handler to open the modal

I need to use a boolean state to denote whether the OTP has been sent to the user's email before asking for it. I'm naming the state isOTPSent

If !isOTPSent -> just ask for the email address, send api req, then if successful setOTPSent(true)
If isOTPSent -> now also ask for the OTP and the new password, then if successful, close the modal

Here are a few components and hooks that I'm reusing from the existing frontend of this project:

Box -> It neatly wrapped my login and register pages into a card, centered on the page, reusing here with title "Password Reset"
AuthForm -> Just a form but I coded it to disable the submit button and set button text to "Loading..." when we are waiting on a response from the server
FormInput -> Input field with a label of its own, with value setter and onChange handler, optionally with an isRequired boolean
useAxios -> Custom hook to handle the responses from the server which needs a token refresh. apiReq function for the normal request sending, some custom error handling to display an alert() and refresh token, refreshReq function to refresh the auth token and try the initial request again.

Here's the entire code for the modal:

// src/components/PasswordResetModal.tsx
import React, { useState } from "react"
import AuthForm from "./AuthForm";
import FormInput from "./FormInput";
import Box from "./Box";
import { useAxios } from "../hooks/useAxios";

interface FormData {
    email: string,
    new_password: string,
    otp: string,
}

interface Props {
    isVisible: boolean,
    onClose: () => void,
}

const PasswordResetModal: React.FC<Props> = ({ isVisible, onClose }) => {
    const [formData, setFormData] = useState<FormData>({
        email: "",
        new_password: "",
        otp: ""
    });
    const [isLoading, setLoading] = useState<boolean>(false);
    const [isOTPSent, setOTPSent] = useState<boolean>(false);
    const { apiReq } = useAxios();

    const handleClose = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        if ((e.target as HTMLElement).id === "wrapper") {
            onClose();

            // could have setOTPSent(false), but avoiding it in case user misclicks outside
        }
    };

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setFormData({
            ...formData,
            [name]: value,
        });
    };

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setLoading(true);

        if (!isOTPSent) { // first request for sending otp,
            const response = await apiReq<unknown, FormData>("post", "/api/reset-password", formData)

            if (response) {
                alert("OTP has been sent to your email");
                setOTPSent(true);
            }
        } else { // then using otp to change password
            const response = await apiReq<unknown, FormData>("put", "/api/reset-password", formData)

            if (response) {
                alert("Password has been successfully reset\nPlease log in again");

                // clear the form
                setFormData({
                    email: "",
                    otp: "",
                    new_password: "",
                })

                // close modal
                onClose();
            }
        }

        setLoading(false);
    };

    if (!isVisible) return null;

    return (
        <div
            id="wrapper"
            className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center"
            onClick={handleClose}>
            <Box title="Password Reset">
                <AuthForm
                    submitHandler={handleSubmit}
                    isLoading={isLoading}
                    buttonText={isOTPSent ? "Change Password" : "Send OTP"}>
                    <FormInput
                        id="email"
                        label="Your email"
                        type="email"
                        value={formData.email}
                        changeHandler={handleChange}
                        isRequired />

                    {isOTPSent && (<>
                        <FormInput
                            id="otp"
                            label="OTP"
                            type="text"
                            value={formData.otp}
                            changeHandler={handleChange}
                            isRequired />
                        <FormInput
                            id="new_password"
                            label="New Password"
                            type="password"
                            value={formData.new_password}
                            changeHandler={handleChange}
                            isRequired />
                    </>)}
                </AuthForm>
            </Box>
        </div>
    )
}

export default PasswordResetModal

And here's how the conditional rendering of the modal is handled in the Login form

// src/pages/auth/Login.tsx
import PasswordResetModal from "../../components/PasswordResetModal";

const Login: React.FC = () => {
    const [showModal, setShowModal] = useState<boolean>(false);

    return (
        <Section>
            <Box title="Login">
                <div className="grid grid-flow-col">
                    {/* link to the register page here */}
                    <button 
                    type="button"
                    onClick={() => setShowModal(true)}
                    className="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center me-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800">
                        Forgot Password?
                    </button>

                    <PasswordResetModal isVisible={showModal} onClose={() => setShowModal(false)} />
                </div>
            </Box>
        </Section>
    )

We're done! Or so I thought.

While running the app in my development environment, I discovered a bug where the emails wouldn't go through if the backend has been running since a long time.

We'll fix this bug in the next post

Password Reset Feature: Using OTP to Reset Password

Yash Jaiswal — Tue, 01 Oct 2024 09:10:33 +0000

Backend

2. Resetting Password

Moving onto the next API.

PUT on /api/reset-password, req -> otp, email, new password, res -> nocontent

// controllers/passwordReset.go
func ResetPassword(c *fiber.Ctx) error {
    type Input struct {
        OTP         string `json:"otp"`
        Email       string `json:"email"`
        NewPassword string `json:"new_password"`
    }

    var input Input

    err := c.BodyParser(&input)
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "error": "invalid data",
        })
    }

    // no input field should be empty
    if input.OTP == "" || input.Email == "" || input.NewPassword == "" {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "error": "invalid data",
        })
    }

    // TODO: check redis for otp and update password

    return c.SendStatus(fiber.StatusNoContent)
}

Adding route for it

// routes/routes.go
api.Put("/reset-password", controllers.ResetPassword)

Now I need two functions:

VerifyOTP -> input = otp, email; output = error (if any)
UpdatePassword -> input = email, password; output = error (if any)

// utils/passwordReset.go
func VerifyOTP(otp string, email string, c context.Context) (error, bool) {
    key := otpKeyPrefix + email

    // get the value for the key
    value, err := config.RedisClient.Get(c, key).Result()
    if err != nil {
        // the following states that the key was not found
        if err == redis.Nil {
            return errors.New("otp expired / incorrect email"), false
        }

        // for other errors
        return err, true
    }

    // compare received otp's hash with value in redis
    err = bcrypt.CompareHashAndPassword([]byte(value), []byte(otp))
    if err != nil {
        return errors.New("incorrect otp"), false
    }

    // delete redis key to prevent abuse of otp
    err = config.RedisClient.Del(c, key).Err()
    if err != nil {
        return err, true
    }

    return nil, false
}

func UpdatePassword(email string, password string, c context.Context) error {
    users := config.DB.Collection("users")

    // hash the password
    hashedPassword, _ := bcrypt.GenerateFromPassword([]byte(password), 10)

    // update the password
    update := bson.M{
        "$set": bson.M{
            "password": hashedPassword,
        },
    }
    _, err := users.UpdateByID(c, email, update)
    if err != nil {
        return err
    }

    return nil
}

Now I need to put them both together in the controller. I'm using the bool from VerifyOTP function to denote whether the error is an internal error or is it because of the input.

// controllers/passwordReset.go
func ResetPassword(c *fiber.Ctx) error {
    type Input struct {
        OTP         string `json:"otp"`
        Email       string `json:"email"`
        NewPassword string `json:"new_password"`
    }

    var input Input

    err := c.BodyParser(&input)
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "error": "invalid data",
        })
    }

    // no input field should be empty
    if input.OTP == "" || input.Email == "" || input.NewPassword == "" {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "error": "invalid data",
        })
    }

    // check redis for otp
    err, isInternalErr := utils.VerifyOTP(input.OTP, input.Email, c.Context())
    if err != nil {
        var code int
        if isInternalErr {
            code = fiber.StatusInternalServerError
        } else {
            code = fiber.StatusUnauthorized
        }

        return c.Status(code).JSON(fiber.Map{
            "error": err.Error(),
        })
    }

    err = utils.UpdatePassword(input.Email, input.NewPassword, c.Context())
    if err != nil {
        return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
            "error": err.Error(),
        })
    }

    return c.SendStatus(fiber.StatusNoContent)
}

The API is now built, and the testing can be done using the following cURL command

curl --location --request PUT 'localhost:3000/api/reset-password' \
--header 'Content-Type: application/json' \
--data-raw '{
    "email": "yashjaiswal.cse@gmail.com",
    "new_password": "tester123",
    "otp": "DM4RDNF07B"
}'

In the next part, I'll start with the frontend

Password Reset Feature: Sending Email in Golang

Yash Jaiswal — Mon, 30 Sep 2024 21:06:55 +0000

I'm implementing a feature to reset password for the user in my app Task-inator 3000 as I write this post. Just logging my thought process and the steps taken

Planning

I'm thinking of a flow like this:

User clicks on the 'Forgot Password?' button
Display a modal to user asking for email
Check if email exists, and send an 10 character long OTP to email
Modal now asks for OTP and new password
Password is hashed and updated for the user

Separation of Concerns

Frontend

Create a modal to enter email
The same modal then takes in OTP and new password

Backend

Create API for sending email
Create API for resetting password

I'll be starting with the backend

Backend

As stated above, we need two APIs

1. Sending Email

The API needs to take in only the email from the user, and return no content when successful. Hence, creating the controller as follows:

// controllers/passwordReset.go
func SendPasswordResetEmail(c *fiber.Ctx) error {
    type Input struct {
        Email string `json:"email"`
    }

    var input Input

    err := c.BodyParser(&input)
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "error": "invalid data",
        })
    }

    // TODO: send email with otp to user

    return c.SendStatus(fiber.StatusNoContent)
}

Now adding a route for it:

// routes/routes.go

// password reset
api.Post("/reset-password", controllers.SendPasswordResetEmail)

I'll be using net/smtp from the standard library of Golang.

Upon reading the documentation, I think it would be best to create an SMTPClient upon initialization of the project. Hence, I would create a file smtpConnection.go in the /config directory.

Before that, I'll add the following environment variables to either my .env or to the production server.

SMTP_HOST="smtp.zoho.in"
SMTP_PORT="587"
SMTP_EMAIL="<myemail>"
SMTP_PASSWORD="<mypassword>"

I'm using zohomail, hence their smtp host and port (for TLS) as stated here.

// config/smtpConnection.go
package config

import (
    "crypto/tls"
    "fmt"
    "net/smtp"
    "os"
)

var SMTPClient *smtp.Client

func SMTPConnect() {
    host := os.Getenv("SMTP_HOST")
    port := os.Getenv("SMTP_PORT")
    email := os.Getenv("SMTP_EMAIL")
    password := os.Getenv("SMTP_PASSWORD")

    smtpAuth := smtp.PlainAuth("", email, password, host)

    // connect to smtp server
    client, err := smtp.Dial(host + ":" + port)
    if err != nil {
        panic(err)
    }

    SMTPClient = client
    client = nil

    // initiate TLS handshake
    if ok, _ := SMTPClient.Extension("STARTTLS"); ok {
        config := &tls.Config{ServerName: host}
        if err = SMTPClient.StartTLS(config); err != nil {
            panic(err)
        }
    }

    // authenticate
    err = SMTPClient.Auth(smtpAuth)
    if err != nil {
        panic(err)
    }

    fmt.Println("SMTP Connected")
}

For abstraction, I'll create a passwordReset.go file in /utils. This file would have the following functions for now:

GenerateOTP: To generate a unique alphanumeric 10 digit OTP to send in the email
AddOTPtoRedis: To add OTP to Redis in a key value format where

key -> password-reset:<email>
value -> hashed otp
expiry -> 10 mins

I'm storing the hash of the OTP instead of the OTP itself for security reasons

SendOTP: To send the generated OTP to user's email

While writing code I see that we need 5 constants here:

Prefix for redis key for OTP
Expiry time for OTP
Character set for OTP generation
Template for the email
Length of OTP

I'll immediately add them to /utils/constants.go

// utils/constants.go
package utils

import "time"

const (
    authTokenExp       = time.Minute * 10
    refreshTokenExp    = time.Hour * 24 * 30 // 1 month
    blacklistKeyPrefix = "blacklisted:"
    otpKeyPrefix       = "password-reset:"
    otpExp             = time.Minute * 10
    otpCharSet         = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"
    emailTemplate      = "To: %s\r\n" +
        "Subject: Task-inator 3000 Password Reset\r\n" +
        "\r\n" +
        "Your OTP for password reset is %s\r\n"

    // public because needed for testing
    OTPLength = 10
)

(Note that we'll be importing from crypto/rand, and not math/rand, as it will provide true randomness)

// utils/passwordReset.go
package utils

import (
    "context"
    "crypto/rand"
    "fmt"
    "math/big"
    "os"
    "task-inator3000/config"

    "golang.org/x/crypto/bcrypt"
)

func GenerateOTP() string {
    result := make([]byte, OTPLength)
    charsetLength := big.NewInt(int64(len(otpCharSet)))

    for i := range result {
        // generate a secure random number in the range of the charset length
        num, _ := rand.Int(rand.Reader, charsetLength)
        result[i] = otpCharSet[num.Int64()]
    }

    return string(result)
}

func AddOTPtoRedis(otp string, email string, c context.Context) error {
    key := otpKeyPrefix + email

    // hashing the OTP
    data, _ := bcrypt.GenerateFromPassword([]byte(otp), 10)

    // storing otp with expiry
    err := config.RedisClient.Set(c, key, data, otpExp).Err()
    if err != nil {
        return err
    }

    return nil
}

func SendOTP(otp string, recipient string) error {
    sender := os.Getenv("SMTP_EMAIL")
    client := config.SMTPClient

    // setting the sender
    err := client.Mail(sender)
    if err != nil {
        return err
    }

    // set recipient
    err = client.Rcpt(recipient)
    if err != nil {
        return err
    }

    // start writing email
    writeCloser, err := client.Data()
    if err != nil {
        return err
    }

    // contents of the email
    msg := fmt.Sprintf(emailTemplate, recipient, otp)

    // write the email
    _, err = writeCloser.Write([]byte(msg))
    if err != nil {
        return err
    }

    // close writecloser and send email
    err = writeCloser.Close()
    if err != nil {
        return err
    }

    return nil
}

The function GenerateOTP() is testable without mocks (unit testing), hence wrote a simple test for it

package utils_test

import (
    "task-inator3000/utils"
    "testing"
)

func TestGenerateOTP(t *testing.T) {
    result := utils.GenerateOTP()

    if len(result) != utils.OTPLength {
        t.Errorf("Length of OTP was not %v. OTP: %v", utils.OTPLength, result)
    }
}

Now we need to put it all together inside the controller. Before all of that we need to make sure the email address provided exists in the database.

The complete code for the controller is as follows:

func SendPasswordResetEmail(c *fiber.Ctx) error {
    type Input struct {
        Email string `json:"email"`
    }

    var input Input

    err := c.BodyParser(&input)
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "error": "invalid data",
        })
    }

    // check if user with email exists
    users := config.DB.Collection("users")
    filter := bson.M{"_id": input.Email}
    err = users.FindOne(c.Context(), filter).Err()
    if err != nil {
        if err == mongo.ErrNoDocuments {
            return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
                "error": "user with given email not found",
            })
        }

        return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
            "error": "error while finding in the database:\n" + err.Error(),
        })
    }

    // generate otp and add it to redis
    otp := utils.GenerateOTP()
    err = utils.AddOTPtoRedis(otp, input.Email, c.Context())
    if err != nil {
        return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
            "error": err.Error(),
        })
    }

    // send the otp to user through email
    err = utils.SendOTP(otp, input.Email)
    if err != nil {
        return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
            "error": err.Error(),
        })
    }

    return c.SendStatus(fiber.StatusNoContent)
}

We can test the API by sending a POST request to the correct URL. A cURL example would be:

curl --location 'localhost:3000/api/reset-password' \
--header 'Content-Type: application/json' \
--data-raw '{
    "email": "yashjaiswal.cse@gmail.com"
}'

We'll create the next API - for Resetting The Password - in the next part of the series