DEV Community: renzhamin

How to build and deploy an AI Chatbot like ChatGPT without a credit card

renzhamin — Tue, 18 Jul 2023 18:21:52 +0000

Overview

We will start from this template provided by vercel which is built with NextJs 13 App Directory with server actions enabled and Vercel AI SDK for streaming chat UI.
Configure all necessary services step by step.
All the services has a free plan with no payment method requirement.
Implement configurable rate limiting to prevent abuse on your deployment.
We will use the vercel platform, but familiarity with vercel is not a prerequisite.
The code is available on github

Configuring services
- Model Provider
- Auth
- Database
- Upstash
Rate Limiting
- Per Account
- Per IP
Deployment
- Set up a new project on vercel
- Configure Github OAuth App
Switch LLM

Configuring services

Model Provider

We will use hugging face for our model.

Why use hugging face instead of OpenAI ? Simply because it has a free plan and you don't need to attach any payment method.

Create an account on hugging face.
Go to account settings and create a token.
Save the token as HUGGINGFACE_API_KEY in the .env file.

Auth

We will use github oauth for authentication via NextAuth.

Register a new oauth app on github from here
Give a name for the app and fill the rest like this:
Note that, this is for local development, for deployment register a new app and replace all instance of http://localhost:3000 with the url of that deployment.
Generate a new client secret.
Copy Client ID as AUTH_GITHUB_ID and Client secret as AUTH_GITHUB_SECRET in the .env file.
Go to this link to generate a secure random string and save it as AUTH_SERCRET in the .env file. This is needed for NextAuth to work in production.

Database

For storing chats we will use vercel's KV database.

Sign up or login in vercel.
If you signed up with email, connect your github account from settings.
Go to storage and Create a KV datbase. Note that you can only have one KV database on free plan.
Select the database you created and click on .env.local tab. Copy the contents to your .env file.

Upstash

We will use upstash for rate limiting. if you don't need rate limiting, you can skip this step.

Go to upstash console.
Click on Create Database, chose your preferred region and enable the Eviction option.
In Details, go to REST API section and click on the .env tab.
Copy the values and paste it into your .env file.

Rate Limiting

Per Account

app/api/chat/route.ts:

const ratelimit = new Ratelimit({
  redis: redis,
  limiter: Ratelimit.slidingWindow(15, '1 d')
})

export async function POST(req: NextRequest) {
    const { userId } = auth()

    const { success, reset } = await ratelimit.limit(userId!)
    if (!success) {
        return new Response(
            `Your rate limit has been exceeded. You can chat again from ${new Date(
                reset
            ).toLocaleString()} GMT`
        )
    }
    .
    .
    .
}

This is the portion of code responsible for rate limiting. You can chose the values to suit your own needs. Here, I have set it to 15 requests per day. You can use 'm' for minutes, 's' for seconds. You can also modify the message shown when rate limit exceeded. The reset variable returns a unix timestamp in miliseconds of when the rate limit will be reset for this user which is converted to a string such as 7/18/2023, 6:00:00 AM

Per IP

You can rate limit per IP address as well. Instead of using userId, pass ip as the parameter to ratelimit.limit.

export async function POST(req: NextRequest) {
    const ip = req.ip ?? "127.0.0.1"
    const { success, reset } = await ratelimit.limit(ip)
    .
    .
    .
}

req.ip is undefined on localhost, thats why we are placing 127.0.0.1 as the fallback value.

If you don't want rate limiting, remove the imports of redis and RateLimit at the top of the file and delete all lines references those.

Deployment

Before proceeding further, make sure that you have populated the values of all necessary environment variables in the .env file. If you want to run localy, clone the repo and install packages with pnpm install. Then run the dev server with pnpm dev

Set up a new project on vercel

Fork the repo.
Create a new project on vercel.
Import the forked repo.
Set Environment Variables according to your .env file. Note that you dont need to copy the key value pairs one by one, just copy the whole file, put the cursor in the Name field and Ctrl-v.
Click on deploy

But we are not done yet. We hit deploy so that a new project is created. Vercel assigns unique domains to deployments. You need use a fixed domain for github oauth to work.

Configure Github OAuth App

Go to vercel dashboard. and select your project.
Click on the Settings tab and go to the Domains section.
Set the domain to your preference and copy the full url.
Register a new github oath app from here.
Set Homapage URL as the domain you copied earlier.
Set Authorization callback URL as your-domain-url/api/auth/callback.
Now go to project Settings on vercel and then go to Environment Variables section.
Edit AUTH_GITHUB_ID and AUTH_GITHUB_SECRET and replace it with the value from the new github oauth app as before.
Ideally, you should use different AUTH_SERCRET in local and production environment for better security. Get a random string from here and edit AUTH_SERCRET.

Switch LLM

You can easily switch models by changing the model parameter in Hf.textGenerationStream() on /api/chat/rout.ts. Hugging face provides access to a lot of models. You can use a model without any major code modification if that model supports streaming and has a small size. You have to modify buildOpenAssistantPrompt prompt method to format the prompts according to the model's specification. The model we are using takes user prompt as <|prompter|>${prompt}<|endoftext|> and the previous replies of the model is expected in this format <|assistant|>${content}<|endoftext|>. This format will vary depending on the model.

You can use LLM providers other than hugging face such as Anthropic, Langchain adn OpenAI as well. Follow this doc to change the route handler(/api/chat/route.ts) and refer to the section of your chosen LLM provider. You can test and compare the models in Vercel AI Playground

Find me on
💻 Github
🔘 LinkedIn
⭕ Twitter

Reset/Forgot password on a rest api with jsonwebtoken (jwt) in express

renzhamin — Sat, 27 May 2023 20:02:00 +0000

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

Flow

Token Generation
- Why keep the validity duration small ?
- Why not just use regular accessToken ?
Sending Email
- How to enable app password in google account
- Sending the reset link
Resetting password
- Password Reset Form
- Updating password

Token Generation

utils/genToken.ts:

// 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

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

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 link again and again, we must set the expiration time to a lower value

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

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:

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) */
        }
    })
}

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
Click on "GENERATE" button and save the password as serviceEmailPassword in .env file. (NOTE: you only get one chance to save the password)

Sending the reset link

controllers/passReset.ts:

// 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" })
    }
}

Resetting password

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:

// 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>`)
}

Updating password

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

verifyPasswordResetToken middleware verifies the token with the secret PASS_RESET_TOKEN_SECRET

utils/passReset.ts:

export const passReset = async (req, res) => {
    try {
        const { password } = req.body
        if (!password) return res.send("Password not provided")
        updatePassword(req.params.userId, password)
        res.json({ msg: "Password Reset Successfull" })
    } catch (error) {
        res.status(404).send("Failed to reset password")
    }
}

IMPORTANT: Hash the password before saving it in the database
Ensure that you use the same hash function for password hashing in every cases such as user creation, change password, reset password

db/users.ts:

export const updatePassword = async (userId: string, newPassword: string) => {
    newPassword = await hashString(newPassword)
    return db.user.update({
        where: { id: userId },
        data: { password: newPassword },
    })
}

Find me on
💻 Github
🔘 LinkedIn
⭕ Twitter

How to sort complex objects with custom criteria in Python

renzhamin — Sat, 27 May 2023 16:22:30 +0000

In most cases, sorting is a simple task but there are occasions when the data is a bit complicated and python provides elegant way to handle those scenarios. So we will look at a complex scenario in this article

Object structure

With class definition

class Laptop:
    def __init__(self, cpu, ram, ssd) -> None:
    self.cpu = cpu
    self.ram = ram
    self.ssd = ssd

A = Laptop("Ryzen 7", 8,  256)
B = Laptop("Ryzen 5", 8,  512)
C = Laptop("Ryzen 7", 16, 128)
D = Laptop("Ryzen 5", 16, 128)

arr = [A,B,C,D]

As list items

A = [ "Ryzen 7", 8, 256 ]
B = [ "Ryzen 5", 8, 512 ]
C = [ "Ryzen 7", 16, 128 ]
D = [ "Ryzen 5", 16, 128 ]

arr = [A,B,C,D]

Sort using key parameter
Operator overloading
Comparator function
The smarter way to solve this problem
Conclusion

Sort using key parameter

Lets say, our priority is in this order, cpu > ram > ssd

# As class objects
arr.sort(key=lambda x:(x.cpu,x.ram, x.ssd), reverse=True)

# As list items
arr.sort(key=lambda x:(x[0], x[1], x[2]), reverse=True)

The result is,

Ryzen 7, 16, 128
Ryzen 7, 8, 256
Ryzen 5, 16, 128
Ryzen 5, 8, 512

For simpler cases, when you have only one criteria, you don't need to use tuples

arr.sort(key=lambda x:x.cpu, reverse=True)

Operator overloading

Lets make the scenario more complex by introducing Intel,

E = Laptop("Intel i7", 16, 512)

arr = [A,B,C,D,E]

If we don't change anything the result will be,

Ryzen 7, 16, 128
Ryzen 7, 8, 256
Ryzen 5, 16, 128
Ryzen 5, 8, 512
Intel i7, 16, 512

Which may not be what we want, we were getting results as expected before because we assumed that Ryzen 7 > Ryzen 5 which is carried out by the "<" operator of string
For the sake of demonstration lets define the precedence in this way,
Ryzen 7 > Intel i7 > Ryzen5

Here is one way to achieve this result using operator overloading

class Laptop:
    def __init__(self, cpu, ram, ssd) -> None:
        self.cpu = cpu
        self.ram = ram
        self.ssd = ssd

    def __lt__(a, b):
        brand_a, model_a = a.cpu.split(" ")
        brand_b, model_b = b.cpu.split(" ")

        if brand_a == brand_b:
            if model_a != model_b:
                return model_a < model_b
        else:
            if brand_a == "Intel":
                return b.cpu == "Ryzen 7"
            elif brand_b == "Intel":
                return a.cpu == "Ryzen 5"

        if a.ram != b.ram:
            return a.ram < b.ram

        return a.ssd < b.ssd

In this function, returning 0 means a is smaller, if 1 is returned then b is smaller

When the "<" operator is defined, you can sort by simply calling

arr.sort(reverse=True)

Comparator function

from functools import cmp_to_key

def comparator(a, b):
    return a.ram - b.ram

arr.sort(key=cmp_to_key(comparator), reverse=True)

You can write logic of similar complexity by using comparator function

But in this method, returning -1 or any negative number means a is smaller, if positive number is returned than b is smaller. If 0 is returned then they have the same priority and no swapping will be done

The benefit of using comparator function is that you don't overload the class operators and you have the option to use multiple comparators for different use cases.
If you have already overloaded the "<" operator but a scenario arises where your criteria is a bit different then comparator function is what you may need

The smarter way to solve this problem

Use a dictionary to define the priority of the cpu models,

mp = {
    "Ryzen 5"  : 0,
    "Intel i7" : 1,
    "Ryzen 7"  : 2
}

Then the logic becomes simpler,

def __lt__(a, b):
    if a.cpu != b.cpu:
        return mp[a.cpu] < mp[b.cpu]

    if a.ram != b.ram:
        return a.ram < b.ram

    return a.ssd < b.ssd

To use comparator function, just replace the less than ("<") operators with minus("-") operator

You may have already guessed that you can make it even simpler without using operator overloading

arr.sort(key=lambda x:(mp[x.cpu], x.ram, x.ssd),reverse=True)

This will be the result,

Ryzen 7, 16, 128
Ryzen 7, 8, 256
Intel i7, 16, 512
Ryzen 5, 16, 128
Ryzen 5, 8, 512

Conclusion

All three ways may have their places but if you can perform the task by using lambda in key parameter than you should stick to that

Find me on
💻 Github
🔘 LinkedIn
⭕ Twitter

Setup MongoDB replica set locally in docker or with Atlas for Prisma ORM

renzhamin — Fri, 21 Apr 2023 10:56:03 +0000

Overview

Prisma requires MongoDB instance to run as a replica set which is non-trivial to setup locally, although quite easy with Atlas. But if your internet connection is not very good, setting up a local instance becomes mandatory for development

Why am I writing this article? Because there is just too many ways that you can do it wrong. I found the right way the hard way. If you want a quick solution then you can check my answer on stackoverflow. Here I'm going to provide detailed steps with explanation

Image source

What is a replica set

A replica set in MongoDB is a group of mongodb processes that handles the same data to provide redundancy

Redundancy increases high availability. In a replica set if one node fails another node can take over to maintain the operations

There is one primary node and other secondary nodes.Here is a diagram that summarizes the interaction between primary and secondary nodes

If you want to learn more, you can read about it here

Setup Local Instance with Docker

Prisma has published a docker image that creates a single instance replica without additional configuration

Go to tags and find the latest version available, at this moment it is 5.0.3
Pull the docker image with



docker pull prismagraphql/mongo-single-replica:5.0.3

Run the image with this command



docker run --name mongo \
      -p 27017:27017 \
      -e MONGO_INITDB_ROOT_USERNAME="monty" \
      -e MONGO_INITDB_ROOT_PASSWORD="pass" \
      -d prismagraphql/mongo-single-replica:5.0.3

Now you have to setup the connection URL, in this case it should resemble this,



DATABASE_URL="mongodb://monty:pass@localhost:27017/db_name?authSource=admin&directConnection=true"

Replace db_name with the name of your database, if it doesn't exist it will be created automatically

Notice that the ROOT_USERNAME and authSource is not the same, you can change the ROOT_USERNAME to whatever you like but the authSouce has to admin, as this is the database which contains user credentials

Finally to test the connection. Run this command inside your project root directory. This will sync your schema to the database



npx prisma db push

Setup in MongoDB Atlas

Create a free account here
Create new project
Click on "Build a Database" button
Choose the free M0 cluster and provide a name for it.
You will prompted to create a user NOTE: You should use an auto generated password for security and note it down somewhere
Your IP will be automatically added to the access list, click "Finsh and Close" and go to the database.
To get the connection url, click "Connect" button and choose "Drivers"
Finally copy the connection url and replace <password> with your auto generated password
IMPORTANT : You have to add a database name after the host name. In my case the url looks like this ```conf

DATABASE_URL="mongodb+srv://monty:pass@cluster0.nqtl0pv.mongodb.net/db_name?retryWrites=true&w=majority"


Test the connection and sync schema
```bash


npx prisma db push

Out of pure love for you guys, I have shut down the cluster I have created so that you don't waste any time trying to get a malware in my database 😎.

Find me on
💻 Github
🔘 LinkedIn
⭕ Twitter

How to authenticate and protect REST API routes with JWT and refresh tokens

renzhamin — Wed, 19 Apr 2023 20:17:59 +0000

Overview

After reading this article, you will able to

Authenticate users with their username/email and password
Understand the uses of access token and refresh token
Protect api endpoints from unauthorized clients by validating access token
Allow multi-logins with ability to log out all sessions
Use this as a template to kickstart your next rest api with signup,signin and protected routes

The code is available on github

I suggest to read the full article first and then start coding

The source code structure is as follows

.
├── controllers
│   ├── auth
│   │   ├── login.ts
│   │   ├── logout.ts
│   │   ├── refreshAccessToken.ts
│   │   └── register.js
│   └── users.ts
├── db # functions to make calls to the database
│   ├── connect.ts
│   ├── tokens.ts
│   └── users.ts
├── index.ts
├── middlewares
│   ├── validateRegistrationData.ts
│   └── verifyTokens.ts
├── routes
│   ├── auth.ts
│   ├── index.ts
│   └── users.ts
└── utils
    ├── genToken.ts
    ├── hashString.ts
    └── verifyToken.ts

Table of Contents

Database Schema
Overview of auth routes
Registration
Log In
Refresh Access Token
Access protected resource
Log Out
- Log out current session
- Log out from All devices
Testing the api
- Register
- Login
- Accessing protected endpoint
- Refresh Access Token

Database Schema

This project uses prisma ORM which will give you typescript support with excellent auto completion experience
The database is using sqlite so you don't have to setup any database in your system
You can use any other SQL databases if you have them setup, in that case everything will be the same except the connection url and provider variable in prisma/schema.prisma
If you want to use MongoDB, you can read a short guide here on how to set it up for prisma

prisma/schema.prisma:

model User {
    id            String         @id @default(uuid())
    email         String         @unique
    username      String         @unique
    password      String
    refreshTokens RefreshToken[]
}

model RefreshToken {
    id          String   @id
    hashedToken String
    user        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
    userId      String
    createdAt   DateTime @default(now())
}

User and RefreshToken has one to many relationship
One user can have multiple refreshToken so that logins from multiple devices can be persisted
Run npx prisma generate to generate prisma client code. Then run npx prisma migrate dev to create necessary tables according to the schema
Tip : You can use npx prisma studio to interect with the database in a Web GUI

Overview of auth routes

routes/auth.ts:

const router = express.Router();

router.post("/auth/login", login);
router.post("/auth/register", validateRegistrationData, register);
router.get("/auth/refresh", verifyRefreshToken, refreshAccessToken);
router.delete("/auth/logout", logout);
router.delete("/auth/logout_all", logout_all);

export { router as authRouter };

All routes are prefixed with "/api"

Registration

Route : router.post("/auth/register", validateRegistrationData, register)

The request body should contain username, email and password
We will create a middleware to validate the registration data

middlewares/validateRegistrationData.ts:

export const validateRegistrationData = async (req, res, next) => {
  const { email, username, password } = req.body;

  if (!password) return res.status(400).json({ error: "No password provided" });

  if (!username) return res.status(400).json({ error: "No username provided" });

  if (!email) return res.status(400).json({ error: "No email provided" });

  let user = await findUserByUsernameOrEmail(username, email);
  if (user) {
    let error = "Email already exits";
    if (user.email !== email) error = "Username already exits";
    return res.json({ error });
  }

  req.user = {
    email,
    username,
    password,
  };

  next();
};

If an account with the same username or email already exists then return
Else attach the user object to req and go to the next function

controllers/auth/register.ts:

export const register = async (req, res) => {
  const user = await createUser(req.user);
  if (!user) return res.json({ error: "Registration Failed" });

  const data = {
    username: user.username,
    email: user.email,
  };

  res.json({ data });
};

Hash the password before storing to the database

const createUser = async (user: any) => {
  user.password = await hashString(user.password);

  return db.user.create({
    data: user,
  });
};

Log In

Route : router.post("/auth/login", login)

The request body should contain { username, password }
Here username field can contain email also, providing the option to log in with both username and email
Return an error if user doesn't exist or password is incorrect
Create accessToken and refreshToken
Send the refreshToken to be saved as a httpOnly cookie with 30 days validity
Send the accessToken

controllers/auth/login.ts:

export const login = async (req, res) => {
  try {
    if (!req.body.username)
      return res.status(400).json({ error: "No Username provided" });
    if (!req.body.password)
      return res.status(400).json({ error: "No Password provided" });

    const { username, password } = req.body;

    // User can log in with username or email
    const user = await findUserByUsernameOrEmail(username, username);

    if (!user) return res.status(404).json({ error: "User Not Found" });

    const match = await bcrypt.compare(password, user.password);

    if (!match) return res.status(401).json({ error: "Wrong Password" });

    const accessToken = genAccessToken(user);
    const tokenId = randomUUID();
    const refreshToken = genRefreshToken(user, tokenId);

    res.cookie("refreshToken", refreshToken, {
      httpOnly: true,
      maxAge: 24 * 60 * 60 * 30 * 1000, // 30 days
    });

    // add the token to the database
    addRefreshToken(tokenId, user.id, refreshToken);

    return res.json({ accessToken });
  } catch (error) {
    return res.status(500).json({ error: "Internal Error" });
  }
};

refreshToken is sensitive data, hence you shouldn't store it in plain text
You could either hash it or encrypt it

const addRefreshToken = async (
  id: string,
  userId: number,
  refreshToken: string
) => {
  const hashedToken = await hashString(refreshToken);
  return db.refreshToken.create({
    data: {
      id,
      userId,
      hashedToken,
    },
  });
};

Refresh Access Token

Route : router.get("/auth/refresh", verifyRefreshToken, refreshAccessToken)

If the token is expired or tampered with then the verification will fail
If the verification passes but the token doesn't exist in the db, then you can suspect that someone is trying to use an old token that might be stolen so you return Unauthorized
Otherwise, delete the refreshToken that was in the cookie of the request, create new token, save it to the database and send set it as a httpOnly cookie, this practice is called refresh token rotation
Send the accessToken

export const refreshAccessToken = async (req, res) => {
  const user = req.user;
  const newTokenId = randomUUID();
  const newRefreshToken = genRefreshToken(user, newTokenId);

  res.cookie("refreshToken", newRefreshToken, {
    httpOnly: true,
    maxAge: 24 * 60 * 60 * 1000 * 30,
  });

  // refresh token rotation
  deleteRefreshTokenById(user.jwtid);
  addRefreshToken(newTokenId, user.id, newRefreshToken);
  //

  const accessToken = genAccessToken(user);
  return res.json({ accessToken });
};

Access protected resource

As an example, /users can be used as a protected endpoint

Route : router.use("/users", verifyAccessToken, listUsers)

middlewares/verifyAccessToken.ts:

export const verifyAccessToken = (req, res, next) => {
  const authHeader = req.headers["authorization"];
  const token = authHeader && authHeader.split(" ")[1];
  if (token == null) return res.sendStatus(401);
  const user = tokenVerifier.validateAccessToken(token);
  if (user.tokenError)
    return res.status(401).json({
      error: "Invalid Access token",
      tokenError: user.tokenError,
    });

  req.user = user;
  return next();
};

The client has to send the token in the authorization header following the format Bearer $token
If the token is not valid, the error will be returned (such as TokenExpiredError or JsonWebTokenError if the token is modified)
Otherwise the server will query the database and send the list of users to the client

Log Out

Route : router.delete("/auth/logout", logout)

Log out current session

export const logout = async (req, res) => {
  const refreshToken = req.cookies.refreshToken;
  if (!refreshToken) return res.status(401).json({ error: "No Refresh Token" });

  // does not check if it exists in the db
  const user = tokenVerifier.verifyRefreshToken(refreshToken);

  if (user.tokenError)
    return res.status(401).json({
      error: "Invalid Refresh token",
      tokenError: user.tokenError,
    });

  res.clearCookie("refreshToken");
  deleteRefreshTokenById(user.jwtid);
  return res.sendStatus(200);
};

Log out from All devices

Route : router.delete("/auth/logout", logout_all)

export const logout_all = async (req, res) => {
  const refreshToken = req.cookies.refreshToken;
  if (!refreshToken) return res.status(401).json({ error: "No Refresh Token" });

  res.clearCookie("refreshToken");

  // does not check if it exists in the db
  const user = tokenVerifier.verifyRefreshToken(refreshToken);

  if (user.tokenError)
    return res.status(401).json({
      error: "Invalid Refresh token",
      tokenError: user.tokenError,
    });

  // delete all tokens associated with this user
  deleteAllRefreshTokens(user.id);
  return res.sendStatus(200);
};

Notice 2 things,

There's no check to see if the token exists in db
Access token verification is skipped

Lets consider a scenario where the client's cookie is hijacked, so attacker has the refreshToken

Now he is going to use that refreshToken to get new accessToken
Which will invalidate the refreshToken of the client from which it was hijacked
That client may be the legitimate user
And now that client can't get any new accessToken
So if accesToken verification or the check to see if token exists was in db was present then that client wouldn't be able to logout

Testing the api

You can use curl to perform all the requests
All the commands listed below is written on tests/api-test-curl.sh

If you use Insomnia, which is an awesome open source api testing tool, you can import all the requests from tests/api-test-insomnia.json

Register

curl --request POST \
  --url http://localhost:5000/api/auth/register \
  --header 'Content-Type: application/json' \
  --data '{
    "username" : "gr523",
    "email" : "gr523@gmail.com",
    "password" : "Pass82G9"
}'

Login

curl --request POST \
  --url http://localhost:5000/api/auth/login \
  --header 'Content-Type: application/json' \
  --cookie-jar "cookie.txt" \
  --data '{
    "username" : "gr523",
    "password" : "Pass82G9"
}'

Output: {"accessToken":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjNjY2Q2ZjNhLWQxMzItNDQzZi05NWM0LTRmMDJjYmU3ZDRlMSIsInVzZXJuYW1lIjoiZ3I1MjMiLCJlbWFpbCI6ImdyNTIzQGdtYWlsLmNvbSIsImlhdCI6MTY4MTkyOTYyNywiZXhwIjoxNjgxOTI5OTI3fQ.qbfKNvMk2W9JojB7O9CAtshOKoPQ1n2whLWrP4lzEJo"}

The cookie will be saved in cookie.txt
Copy the value of accessToken to your clipboard

Accessing protected endpoint

Paste the accessToken after Bearer

curl --request GET \
  --url http://localhost:5000/api/api/users \
  --header 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjNjY2Q2ZjNhLWQxMzItNDQzZi05NWM0LTRmMDJjYmU3ZDRlMSIsInVzZXJuYW1lIjoiZ3I1MjMiLCJlbWFpbCI6ImdyNTIzQGdtYWlsLmNvbSIsImlhdCI6MTY4MTkyOTYyNywiZXhwIjoxNjgxOTI5OTI3fQ.qbfKNvMk2W9JojB7O9CAtshOKoPQ1n2whLWrP4lzEJo'

Output: {"users":[{"id":"3ccd6f3a-d132-443f-95c4-4f02cbe7d4e1","username":"gr523","email":"gr523@gmail.com"}]}

Modify the value of the accessToken

curl --request GET \
  --url http://localhost:5000/api/api/users \
  --header 'Authorization: Bearer xxxxxxxxxxxxxxxxNiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjNjY2Q2ZjNhLWQxMzItNDQzZi05NWM0LTRmMDJjYmU3ZDRlMSIsInVzZXJuYW1lIjoiZ3I1MjMiLCJlbWFpbCI6ImdyNTIzQGdtYWlsLmNvbSIsImlhdCI6MTY4MTkyOTYyNywiZXhwIjoxNjgxOTI5OTI3fQ.qbfKNvMk2W9JojB7O9CAtshOKoPQ1n2whLWrP4lzEJo'

Output {"error":"Invalid Access token","tokenError":"JsonWebTokenError"}

The validity duration of the accessToken is set to 5 minutes, after that you can't use that token to access protected resources

The response will be {"error":"Invalid Access token","tokenError":"TokenExpiredError"}

You can change the validity duration in utils/genToken.ts

Refresh Access Token

Use the value of refreshToken from cookie.txt

curl --request GET \
  --url http://localhost:5000/api/auth/refresh \
  --cookie refreshToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqd3RpZCI6IjQwY2VkYmRjLWM2NmQtNGJlYy1hNjc4LTg0MWJkZDhlMTBkMyIsImlkIjoiM2NjZDZmM2EtZDEzMi00NDNmLTk1YzQtNGYwMmNiZTdkNGUxIiwidXNlcm5hbWUiOiJncjUyMyIsImVtYWlsIjoiZ3I1MjNAZ21haWwuY29tIiwiaWF0IjoxNjgxOTI4MzgwLCJleHAiOjE2ODQ1MjAzODB9.WDk-YbqxX7_yCr8ATbDxbCV-W6EUNzxZPchPaHnuZAI

Or in linux you can use sed,

curl --request GET \
  --url http://localhost:5000/api/auth/refresh \
  --cookie refreshToken="$(sed -En '/refreshToken/s/.*refreshToken\s*(.*)/\1/p' cookie.txt)"

If you request refresh with an old value of refreshToken, the respone will be {"error":"Invalid Refresh Token","tokenError":"OldToken"}

If you have read up to this point, you are ready to jump into your next rest api project. Would appreciate any feedback. For the sake of completeness, I have written another guide to implement password reset using jwt. Do you like this style of long form tutorial ? Any suggestions to what could be changed to make it better ?

Find me on
💻 Github
🔘 LinkedIn
⭕ Twitter