{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/guest-post/how-to-implement-jwt-authentication-in-deno/","result":{"data":{"markdownRemark":{"id":"ca9972ae-0f5e-5b91-83bf-58788695a388","excerpt":"Introduction It is essential to protect your APIs for a secure experience, and JSON Web Token (JWT) authentication allows you to protect your APIs so that an…","html":"

Introduction

\n

It is essential to protect your APIs for a secure experience, and JSON Web Token (JWT) authentication allows you to protect your APIs so that an unauthorized person will not have access.

\n

Prerequisites

\n

This is a hands-on tutorial to follow. To get the most out of it, ensure you have:

\n\n

What is Deno?

\n

Deno is developed in Rust. It is a modern runtime environment for JavaScript/TypeScript and a WebAssembly that uses the Google V8 engine. It is simple and safe. It implements web platform standards and provides web platform capabilities.

\n

Deno’s features are intended to enhance Node.js’s capabilities. It’s secure by default, with no access to files, networks, or the environment except explicitly enabled. And it supports both JavaScript and TypeScript out of the box.

\n

Why Use Deno?

\n

Deno is a well-thought-out modular system. Apart from its simplicity and high security, there are so many other reasons to use Deno:

\n\n

What is JSON Web Token?

\n

JSON Web Token, popularly called JWT, is an open standard that offers a concise and self-contained method for securely transferring data between parties as a JSON object. It holds information in an easy-to-access format for developers and computers; the token's compact size makes it simple to send through URL, POST parameter, or HTTP header. It allows two parties — a client and a server — to share information securely. A secret or public/private key pair is used to digitally sign the information in a JWT.

\n

Authentication is the primary use of JWT. It is assigned to a user after they sign in to an application, and with the assigned JWT, a user can request other routes.

\n

Install Deno

\n

Without too many shenanigans, let's start by installing Deno!

\n

Deno installation in Windows isn't as smooth sailing as on Mac or Linux. Unlike in Node.js, where you run a command on your terminal, Deno in Windows can be installed using PowerShell, Scoop (a command-line installer), or Chocolatey (a package manager). Click here for the guide on how to install Deno.

\n

To install Deno with PowerShell, open your PowerShell and run the following command:

\n
iwr https://deno.land/x/install/install.ps1 -useb | iex
\n

Relax while Deno is being installed. When completed, exit PowerShell and close and reopen a terminal. The new PATH is activated by closing and reopening the terminal. Now that you have installed Deno, let's check the version of Deno.

\n

To check the version of your installed Deno, run: deno -V

\n

Project Setup

\n

With installation out of the way, let us set up your project. Create a folder DenoAPI_JWT_Auth; you can call it any name you choose. Create an app.ts file and a folder src in your folder.

\n

Inside your src folder, create the following folders: controllers, database, middlewares, routes, schema, and utils.

\n

Your project directory should look as follows:

\n

DenoAPI_JWT_Auth

\n

│\n└─src
\n│ └───controllers
\n│ │\n│ └───database
\n│ │\n│ └───middlewares
\n│ │\n│ └───routes
\n│ │\n│ └───schema
\n│ │\n│ └───utils
\n└─app.ts

\n

Create Oak Server

\n

Next is to create your Oak server. Oak is a Deno middleware system that provides a router middleware for HTTP servers.

\n

Go to app.ts, import Application from the Deno Oak URL, create an instance of the application, define your port, and call a middleware, as follows.

\n

app.ts

\n
import { Application } from "https://deno.land/x/oak/mod.ts";\n\nconst app = new Application();\nconst PORT = 8080;\n\n   app.use((ctx, next) => {\n       ctx.response.body = 'Welcome';\n        next();\n       });\n\nconsole.log(`Application is listening on port: ${PORT}`);\n\nawait app.listen({port:PORT});
\n

Let's quickly run your server: to run the server, use deno run --allow-net app.ts

\n

Deno will always request permission to use your network. --allow-net gives Deno permission to all network calls.

\n

You should see Application is listening on port: 8080

\n

Now, in your routes folder, create a file called allRoutes.ts, and set up your router by importing Router from the oak URL, then create an instance of the router and export the default router.

\n

routes.allRoutes.ts

\n
import { Router } from "https://deno.land/x/oak/mod.ts";\n\nconst router = new Router();\n\nexport default router;
\n

Moving on, you need to modify app.ts. So, go to app.ts and import the router. Let the app use router.routes() and router.allowedMethods() methods, then remove the middleware, so it doesn't overshadow the imported routes. The allowedMethods() tells Deno to include all routes by your router.

\n

app.ts

\n
import { Application } from "https://deno.land/x/oak/mod.ts";\nimport router from "./src/routes/allRoutes.ts";\n\nconst app = new Application();\nconst PORT = 8080;\n\napp.use(router.routes());\napp.use(router.allowedMethods());\n\nconsole.log(`Application is listening on port: ${PORT}`);\n\nawait app.listen({port:PORT});
\n

You can rerun your app with the same command: deno run --allow-net app.ts

\n

Create User Data

\n

Now, you need to create user data. But before that, let's connect your application to the MongoDB database.

\n\n

database.connectDB.ts

\n
import { MongoClient } from "https://deno.land/x/mongo@v0.30.0/mod.ts";\n\n  // Connecting to a Mongo Database\n  const client = new MongoClient();\n  \n  const dbString = "DB_String"\n\n  await client.connect(dbString)\n  \n console.log("Database connected!");\n \n const db = client.database("deno_auth");\n\n export default db;\n
\n

With that out of the way, let's create an interface for your database.

\n

In your schema folder, create a file user.ts, import objectId from deno MongoDB URL, then define and export your schema.

\n

schema.user.ts

\n
import {ObjectId} from "https://deno.land/x/mongo@v0.30.0/mod.ts";\n\nexport interface UserSchema {\n    _id: ObjectId;\n    username: string;\n    password: string;\n  }
\n

Let's play with some logic: go to your controllers folder, and create a file called users.ts. In the file, import your database and UserSchema.

\n

It's not a good practice to store your password in plain text for security reasons. To has your password, let's import bcrypt from the deno bcrypt URL.

\n

So, create a function called signup that takes username and password. Take the user details from the request body, hash the password, and save them to your database.

\n

controllers.users.ts

\n
import db from "../database/connectBD.ts";\nimport * as bcrypt from "https://deno.land/x/bcrypt/mod.ts";\nimport { UserSchema } from "../schema/user.ts";\n\nconst Users = db.collection<UserSchema>("users");\n\nexport const signup = async({request, response}:{request:any;response:any}) => {\n    const {username, password} = await request.body().value;\n    const salt = await bcrypt.genSalt(8);\n    const hashedPassword = await bcrypt.hash(password, salt);\n\n    const _id = await Users.insertOne({\n        username,\n        password:hashedPassword\n      });\n      response.status =201;\n      response.body = {message: "User created", userId:_id, user:username}\n      \n};
\n

Now, head over to allRoutes.ts in your routes folder, import the signup function from the controller, and create a POST route for signup, as follows.

\n

routes.allRoutes.ts

\n
import { Router } from "https://deno.land/x/oak/mod.ts";\nimport {signup} from "../controllers/users.ts";\n\nconst router = new Router();\n\n//User routes\nrouter.post("/api/signup", signup)\n\nexport default router;
\n

Create Authenticate User route

\n

Next, create an authentication route that authenticates your user route. The latest version of Deno does not allow a string as a secret key but accepts a cryptokey generated from a Web Crypto API with the generatekey() method of the SubtleCrypto interface.

\n

So, head over to your utils folder, create a file called apiKey.ts, and in the file, generate your key and export it, as follows.

\n

utils.apiKey.ts

\n
export const key = await crypto.subtle.generateKey(\n    { name: "HMAC", hash: "SHA-512" },\n    true,\n    ["sign", "verify"],\n  );
\n

Now that you have successfully created your key, you can create a user authentication route so that every user that logs in will get authenticated.

\n

Head over to user.ts in your controller, import the API key, create a signin function, and write some validation logic to validate that the user exists in your database. If validation is successful, you create a token to authenticate the user.

\n

Using JWT to Authenticate a User

\n

Now, let's import Deno JWT (djwt) create function from the URL to create a token. When a user logs in, take the id and username, pass the payload into the JWT create function, generate a token, and use the token to authenticate the user.

\n

controllers.users.ts

\n
import db from "../database/connectDB.ts";\nimport * as bcrypt from "https://deno.land/x/bcrypt/mod.ts";\nimport { UserSchema } from "../schema/user.ts";\nimport { create } from "https://deno.land/x/djwt@v2.4/mod.ts";\nimport { key } from "../utils/apiKey.ts";\n\nconst Users = db.collection<UserSchema>("users");\n\n    //create a user\n    export const signup = async({request, response}:{request:any;response:any}) => {\n    const {username, password} = await request.body().value;\n    const salt = await bcrypt.genSalt(8);\n    const hashedPassword = await bcrypt.hash(password, salt);\n\n    const _id = await Users.insertOne({\n        username,\n        password:hashedPassword\n      });\n      response.status =201;\n      response.body = {message: "User created", userId:_id, user:username}     \n};\n\n   //sign in a user\n    export const signin = async ({request, response}:{request:any; response:any}) => {\n\n    const body = await request.body();\n    const {username, password} = await body.value;\n\n    const user = await Users.findOne({username});\n\n    if(!user) {\n        response.body = 404;\n        response.body = {message: `user "${username}" not found`};\n        return;\n    }\n    const confirmPassword = await bcrypt.compare(password, user.password);\n    if(!confirmPassword){\n        response.body = 404;\n        response.body = {message: "Incorrect password"};\n        return;\n    }\n    \n    //authenticate a user\n    const payload = {\n        id: user._id,\n        name: username\n    };\n    const jwt =  await create({ alg: "HS512", typ: "JWT" }, { payload }, key);\n\n    if(jwt) {\n        response.status = 200;\n        response.body = {\n            userId: user._id,\n            username: user.username,\n            token: jwt,\n        }\n     } else {\n        response.status = 500;\n        response.body = {\n            message: "internal server error"\n        }\n    }\n        return;\n    }
\n

So far, you have progressed well. The next thing is to import your signin function in the routes and create a post request for it, as follows.

\n

routes.allRoutes.ts

\n
import { Router } from "https://deno.land/x/oak/mod.ts";\nimport {signup, signin} from "../controllers/users.ts";\n\nconst router = new Router();\n\n//User routes\nrouter.post("/api/signup", signup)\n      .post("/api/signin", signin);\n      \n\nexport default router;
\n

Congratulations on making it this far! You are through with the authentication route. Now, you can register a user, sign in, and authenticate the user.

\n

You need to create your todo CRUD API and protect the routes so that a random person will not be able to access your route except when authenticated.

\n

Go to your schema folder, and create a file task.ts. In the file, create your tasks interface and export it.

\n

Create Todo Route

\n

schema.task.ts

\n
export interface TaskSchema {\n    name: string;\n    isCompleted: boolean;\n  }
\n

After successfully creating the task interface, move to our controller, create a file tasks.ts, and import the database, schema, and object Id. Then write the logic for our todo CRUD API.

\n

controllers.tasks.ts

\n
import db from "../database/connectDB.ts";\nimport { TaskSchema } from "../schema/task.ts";\nimport {ObjectId} from "https://deno.land/x/mongo@v0.30.0/mod.ts";\n\nconst tasks = db.collection<TaskSchema>("tasks");\n\nexport const create = async({request, response}:{request:any;response:any}) => {\n    const {name, isCompleted} = await request.body().value;\n\n    const _id = await tasks.insertOne({\n        name,\n        isCompleted\n      });\n      response.body = {message: "Task created!!", id:_id, name:name, Completed:isCompleted}\n    };\n\n    export const getTasks = async ({response}:{response:any}) => {\n    const allTasks = await tasks.find({}).toArray();\n\n    response.status = 200;\n    response.body = {tasks:allTasks};\n  };\n\n    export const getById = async ({\n    params,\n    response\n   }:{\n    params:{taskId:string};\n    response:any;\n  }) => {\n    const taskId = params.taskId;\n    const task = await tasks.findOne({_id:new ObjectId(taskId)});\n\n    if(!task){\n        response.body = {message: `no task with Id: ${taskId}`};\n        return;\n}\n    response.status = 200;\n    response.body = {task: task}\n};\n\nexport const updateById = async ({\n    params,\n    request,\n    response\n}:{\n    params:{taskId:string};\n    request:any;\n    response:any;\n}) => {\n    const taskId = params.taskId;\n    const {name, isCompleted} = await request.body().value;\n    const task = await tasks.updateOne({_id:new ObjectId(taskId)},\n    {$set:{name:name, isCompleted:isCompleted}});\n\n    response.status = 200;\n    response.body = {message:"Updated task", task:task};\n};\n\nexport const deleteTask = async ({\n    params,\n    response,\n}:{\n    params:{taskId:string};\n    response:any;\n}) => {\n    const taskId = params.taskId;\n    const task = await tasks.deleteOne({_id:new ObjectId(taskId)});\n    response.status = 200;\n    response.body = {message:"Deleted task", task:task};\n};
\n

With that out of the way, you need to create your todo CRUD routes. So, head over to allRoutes.ts and import the CRUD functions from the task controllers, then create the routes for our todo, as follows.

\n

routes.allRoutes.ts

\n
import { Router } from "https://deno.land/x/oak/mod.ts";\nimport {signup, signin} from "../controllers/users.ts";\nimport {create, getTasks, getById, updateById, deleteTask} from "../controllers/tasks.ts";\n\nconst router = new Router();\n\n//User routes\nrouter.post("/api/signup", signup)\n      .post("/api/signin", signin);\n\n//Task routes\nrouter.post("/api/tasks", create)\n      .get("/api/tasks", getTasks)\n      .get("/api/tasks/:taskId", getById)\n      .patch("/api/tasks/:taskId", updateById)\n      .delete("/api/tasks/:taskId", deleteTask);\n\nexport default router;
\n

Protect Todo Routes

\n

You need to protect your todo routes so that an unauthorized person will not be able to access them.

\n

To protect the todo routes, go to your middlewares folder: create a file called isAuthorized.ts, import the verify function from deno JWT URL, import Context from deno, import the secret key you've created, and create the authorized function.

\n

The authorize function checks if a user has a JWT token, grant the user access if he does, and deny him access if otherwise.

\n

middlewares.isAuthorized.ts

\n
import { verify } from "https://deno.land/x/djwt@v2.4/mod.ts";\nimport { key } from "../utils/apiKey.ts";\nimport { Context } from "https://deno.land/x/oak/mod.ts";\n\nexport const authourized = async (ctx: Context, next:any) => {\n    try{   \n    const headers: Headers = ctx.request.headers;\n    const authorization = headers.get('Authorization');\n    if(!authorization) {\n        ctx.response.status = 401;\n        return;\n    }\n    const jwt = authorization.split(' ')[1];\n\n    if(!jwt) {\n        ctx.response.status = 401;\n        return;\n    }\n    const payload = await verify(jwt, key);\n\n    if(!payload){\n    throw new Error("!payload")\n    }\n     await next();\n     \n     } catch (error) {\n        ctx.response.status = 401;\n        ctx.response.body ={message: "You are not authorized to access this route"}\n        return;\n    }\n};
\n

To protect your todo routes, import the authorized middleware function from the isAuthorized.ts middleware file and pass the middleware into the todo routes to protect them from unauthorized people.

\n

routes.allRoutes.ts

\n
import { Router } from "https://deno.land/x/oak/mod.ts";\nimport {signup, signin} from "../controllers/users.ts";\nimport {create, getTasks, getById, updateById, deleteTask} from "../controllers/tasks.ts";\nimport { authourized } from "../middlewares/isAuthorized.ts";\n\nconst router = new Router();\n\n//User routes\nrouter.post("/api/signup", signup)\n      .post("/api/signin", signin);\n\n//Task routes\nrouter.post("/api/tasks", authourized, create)\n      .get("/api/tasks", authourized, getTasks)\n      .get("/api/tasks/:taskId", authourized, getById)\n      .patch("/api/tasks/:taskId", authourized, updateById)\n      .delete("/api/tasks/:taskId", authourized, deleteTask);\n\nexport default router;
\n

Awesome! Your application is ready, but wait! Don't get too excited yet, relax let's test the application :)

\n

Below is what your final project directory looks like:

\n

DenoAPI_JWT_Auth

\n

│
\n└─src
\n│ └───controllers
\n│ │ └───users.ts
\n│ │ └───tasks.ts
\n│ │\n│ └───database
\n│ │ └───connectDB.ts
\n│ │
\n│ └───middlewares
\n│ │ └───isAuthorized.ts
\n│ │
\n│ └───routes
\n│ │ └───allRoutes.ts
\n│ │\n│ └───schema
\n│ │ └───user.ts
\n│ │ └───task.ts
\n│ │\n│ └───utils
\n│ │ └───apiKey.ts
\n│ │
\n└─app.ts

\n

Test Application

\n

Now that your application is ready, you need to test the various routes to ensure they are working. To test the routes, rerun your server with deno run --allow-net app.ts.

\n

\"deno

\n

Great! The app is running on port:8080. You can now head to the postman to test your routes.

\n

Signup Route

\n

\"Sign

\n

\n

Sign-in Route

\n

\"Signin

\n

\"Signin

\n

Amazing! Now that you have signed up and authenticated a user, the returned token, which shows that the user has been authenticated, can be used to access your todo CRUD APIs.

\n

Accessing the Todo Routes

\n

First, let's try accessing your todo routes without the token...

\n

Create Task Route

\n

\"Create

\n

\"Create

\n

As you can see, when you tried to create a task, you got a message You are not authorized to access this route because a random person did it without a token.

\n

Now, let's also try accessing the delete by Id route without the token...

\n

Delete Task Route

\n

\"Delete

\n

\"Delete

\n

Your todo CRUD APIs have been protected, and the only way a user can access them is by getting authenticated. Now let's log in again and use the returned token to access the todo routes.

\n

\"Tasks\"

\n

So, you have logged a user in and put the returned Bearer's token in the authorization header. You can access our todo APIs now because, with the bearer's token, you are authorized to access the todo APIs.

\n

Create Task Route

\n

\"Create

\n

\"Create

\n

Get All Tasks Route

\n

\"Get

\n

\"Get

\n

Get Task By Id Route

\n

\"Get

\n

\"Get

\n

Feel free to test the other routes to see how things work.

\n

Conclusion

\n

In this tutorial, you've built a todo CRUD API and protected the routes from unauthorized access using JSON Web Token (JWT). You have learned how to create an Oak server in Deno, connect MongoDB, implement JWT authentication, as well as create and authenticate CRUD routes in a Deno application.

\n

The code for this tutorial is available here on Github. Feel free to clone and extend the features of the application.

\n","headings":[{"value":"Introduction","depth":2},{"value":"Prerequisites","depth":2},{"value":"What is Deno?","depth":2},{"value":"Why Use Deno?","depth":2},{"value":"What is JSON Web Token?","depth":2},{"value":"Install Deno","depth":2},{"value":"Project Setup","depth":2},{"value":"Create Oak Server","depth":2},{"value":"Create User Data","depth":2},{"value":"Create Authenticate User route","depth":2},{"value":"Using JWT to Authenticate a User","depth":2},{"value":"Create Todo Route","depth":2},{"value":"Protect Todo Routes","depth":2},{"value":"Test Application","depth":2},{"value":"Signup Route","depth":3},{"value":"Sign-in Route","depth":3},{"value":"Accessing the Todo Routes","depth":3},{"value":"Create Task Route","depth":4},{"value":"Delete Task Route","depth":4},{"value":"Create Task Route","depth":4},{"value":"Get All Tasks Route","depth":4},{"value":"Get Task By Id Route","depth":4},{"value":"Conclusion","depth":2}],"fields":{"slug":"/engineering/guest-post/how-to-implement-jwt-authentication-in-deno/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"In this hands-on tutorial, you'll learn from scratch how to implement JWT authentication for CRUD APIs in Deno.","title":"How to Implement JWT Authentication for CRUD APIs in Deno","canonical":null,"date":"July 28, 2022","updated_date":null,"tags":["JWT","Deno","Authentication"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/2ad7f/jwt-authentication-with-deno.webp","srcSet":"/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/1c9b5/jwt-authentication-with-deno.webp 200w,\n/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/f1752/jwt-authentication-with-deno.webp 400w,\n/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/2ad7f/jwt-authentication-with-deno.webp 800w,\n/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/e7405/jwt-authentication-with-deno.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Ekekenta Odionyenfe Clinton","github":"icode247","bio":"He is a full-stack web application developer, software engineer, and technical writer, currently living in Nigeria, Portharcourt. He has an HND in Computer Science from Federal Polytechnic Nekede. His primary focus and inspiration for his studies is web development. In his free time, he studies human psychology and writes technical tutorials.","avatar":null}}}},"pageContext":{"id":"ca9972ae-0f5e-5b91-83bf-58788695a388","fields__slug":"/engineering/guest-post/how-to-implement-jwt-authentication-in-deno/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}