{"componentChunkName":"component---src-pages-author-author-yaml-id-js","path":"/author/ekekenta-odionyenfe-clinton/","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"id":"ca9972ae-0f5e-5b91-83bf-58788695a388","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","frontmatter":{"title":"How to Implement JWT Authentication for CRUD APIs in Deno","author":{"id":"Ekekenta Odionyenfe Clinton","github":"icode247","avatar":null},"date":"July 28, 2022","updated_date":null,"tags":["JWT","Deno","Authentication"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/58556/jwt-authentication-with-deno.webp","srcSet":"/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/61e93/jwt-authentication-with-deno.webp 200w,\n/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/1f5c5/jwt-authentication-with-deno.webp 400w,\n/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/58556/jwt-authentication-with-deno.webp 800w,\n/static/ecb7a333dd6ee8ea03a2f5cc6c9633c2/99238/jwt-authentication-with-deno.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Ekekenta Odionyenfe Clinton","slug":"/engineering/guest-post/how-to-implement-jwt-authentication-in-deno/"}}},{"node":{"id":"2a0e31c4-9333-5865-826d-7c7ee2516434","html":"

Introduction

\n

It is an indisputable reality that authentication is critical in any application or system if you want to secure user data and enable secure access to information. Authentication is the procedure of establishing or demonstrating that something is true, legitimate, or valid.

\n

Prerequisites

\n

This tutorial is a hands-on demonstration. To follow along, ensure you have the following in place:

\n\n

What is NestJS?

\n

Nest (NestJS) is a Node.js server-side application framework for building scalable, efficient applications.

\n

It is written in TypeScript and built on Express, a very minimalistic framework that is great on its own but lacks structure. It combines programming paradigms such as object-oriented programming, functional programming, and functional reactive programming.

\n

It is a framework to use if you want a lot of structure on your backend. Its syntax and structure are very similar to AngularJS, a front-end framework. And it uses TypeScript, services, and dependency injection in the same way that AngularJS does.

\n

It employs modules and controllers, and you can build controllers for a file using the command-line interface.

\n

NestJS modules allow you to group related controllers and service providers into a single code file. Simply put, a NestJS module is a TypeScript file with the @Module annotation (). This decorator informs the NestJS framework about which controllers, service providers, and other associated resources will be instantiated and used by the app code later.

\n

What is Session-based Authentication?

\n

Session-based authentication is a method of user authentication in which the server creates a session after a successful log-in, with the session ID stored in a cookie or local storage in your browser.

\n

Upon subsequent requests, your cookie is validated against the session ID stored on the server. If there is a match, the request is considered valid and processed.

\n

When using this authentication method, it is critical to keep the following security best practices in mind:

\n\n

Why Session-based Authentication?

\n

Session-based authentication is more secure than most authentication methods because it is simple, secure, and has a limited storage size. It is also thought to be the best option for websites in the same root domain.

\n

Project Setup

\n

Start your project setup by installing Nest CLI globally. You don’t need to do this if you already have NestJS CLI installed.

\n

The Nest CLI is a command-line interface tool for setting up, developing, and maintaining Nest applications.

\n
npm i -g @nestjs/cli
\n

Now, let’s set up your project by running the following command:

\n
nest new session-based-auth
\n

The above command creates a Nest application with some boilerplates, then prompts you to choose your preferred package manager to install the required modules to run your application. For demonstration, this tutorial uses npm. Hit the enter key to continue with npm.

\n

\"Choose

\n

If everything went well, you should see an output like the one on the screenshot below on your terminal.

\n

\"Screenshot

\n

Once the installation is complete, move into your project directory, and run the application with the command below:

\n
npm run start:dev
\n

The above command runs the application and watches for changes. Your project src folder structure should look as follows.

\n
└───src\n│   └───app.controller.ts\n│   └───app.modules.ts\n│   └───app.service.ts\n│   └───main.ts
\n

Install Dependencies

\n

Now that your application is set up, let's install the dependencies needed.

\n
npm install --save @nestjs/passport passport passport-local
\n

The above command installs Passport.js, a popular nest.js authentication library.

\n

Also, install the types for the strategy with the command below:

\n

It contains type definitions for passport-local.

\n
npm install --save-dev @types/passport-local
\n

Set Up MongoDB Database in NestJS

\n

To set up and connect your database, install the Mongoose package and the NestJS wrapper with the following command:

\n
npm install --save @nestjs/mongoose mongoose
\n

The Mongoose NestJS wrapper helps you use Mongoose in the NestJS application and gives approved TypeScript support.

\n

Now, head over to your app.module.ts, and import the mongoose module from @nestjs/mongoose. Then call the forRoot() method, a method provided by the Mongoose module, and pass in your database URL string.

\n

Setting up your database connection in app.module.ts helps your application connect to the database immediately as the server starts — after running your application since it’s the first module to be loaded.

\n

app.module.ts

\n
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { AppController } from "./app.controller"\nimport { AppService } from "./app.service"\n\n@Module({\n  imports: [\n    MongooseModule.forRoot(\n      "mongodb+srv://<username>:<password>@cluster0.kngtf.mongodb.net/session-auth?retryWrites=true&w=majority"\n    ),\n  ],\n  controllers: [AppController],\n  providers: [AppService],\n})\nexport class AppModule {}
\n

Create Users Module

\n

For separation concerns, to make your code clean and well organized, create a module specifically for users using the NestJS CLI by running the following command:

\n
nest g module users
\n

The above command creates a users folder with users.module.ts and updates app.module.ts

\n

Also, create users.service.ts and users.controller.ts files with the following commands:

\n
nest g service users\nnest g controller users
\n

Note that you can create your folders and files manually without using the nest CLI, but using the CLI automatically updates the necessary folders and makes your life easier.

\n

Create User Schema

\n

The next step is to create your UserSchema, but first, add a users.model.ts file, where you will create UserSchema

\n

This should be the shape of our application src folder now.

\n
└───src\n│   └───users\n│   │   └───users.controller.ts\n│   │   └───users.model.ts\n│   │   └───users.module.ts\n│   │   └───users.service.ts\n│   └───app.controller.ts\n│   └───app.module.ts\n│   └───app.service.ts\n│   └───main.ts
\n

To create UserSchema, import everything as mongoose from the mongoose package in users.model.ts. Then call the new mongoose schema, a blueprint of the user Model, and pass in a JavaScript object where you will define the user object and data.

\n

users.model.ts

\n
import * as mongoose from "mongoose"\nexport const UserSchema = new mongoose.Schema(\n  {\n    username: {\n      type: String,\n      required: true,\n      unique: true,\n    },\n    password: {\n      type: String,\n      required: true,\n    },\n  },\n  { timestamps: true }\n)\n\nexport interface User extends mongoose.Document {\n  _id: string;\n  username: string;\n  password: string;\n}
\n

Also, create an interface for your Model that extends mongoose, a document that helps you populate your MongoDB collections.

\n

Head over to your users.module.ts and import MongooseModule in the imports array. Then call the forFeature() method provided by MongooseModule, and pass in an array of object that takes in name and schema.

\n

This will enable you to share the file anywhere with the help of dependency injection.

\n

users.module.ts

\n
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { UsersController } from "./users.controller"\nimport { UserSchema } from "./users.model"\nimport { UsersService } from "./users.service"\n@Module({\n  imports: [MongooseModule.forFeature([{ name: "user", schema: UserSchema }])],\n  controllers: [UsersController],\n  providers: [UsersService],\n})\nexport class UsersModule {}
\n

In users.module.ts, export the UsersService to enable you to access it in another module.

\n

users.module.ts

\n
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { UsersController } from "./users.controller"\nimport { UserSchema } from "./users.model"\nimport { UsersService } from "./users.service"\n@Module({\n  imports: [MongooseModule.forFeature([{ name: "user", schema: UserSchema }])],\n  controllers: [UsersController],\n  providers: [UsersService],\n  exports: [UsersService],\n})\nexport class UsersModule {}
\n

It's usually a good idea to encapsulate the business logic in a separate class. Such a class is known as a service. The job of this class is to process the controller's requests and perform the business logic.

\n

In users.service.ts file, import Model from mongoose, User from users.model.ts, and InjectModel from @nestjs/mongoose. Then add a method to the UsersService class that takes a username and password, and call the method insertUser().

\n

users.service.ts

\n
import { Injectable } from '@nestjs/common';\nimport { InjectModel } from '@nestjs/mongoose';\nimport { Model } from 'mongoose';\nimport { User } from './users.model';\n@Injectable()\nexport class UsersService {\n  constructor(@InjectModel('user') private readonly userModel: Model<User>) {}\n  async insertUser(userName: string, password: string) {\n    const username = userName.toLowerCase();\n    const newUser = new this.userModel({\n      username,\n      password,\n    });\n    await newUser.save();\n    return newUser;\n  }\n}
\n

Now that the UsersService class is ready, you need to inject it into your controller. But first, let's talk about storing the users' passwords securely.

\n

The most critical aspect of the registration procedure is the users’ passwords, which must not be saved in plain text. It is the responsibility of the user to create a strong password, but it is your obligation as a developer to keep their passwords secure. If a database breach occurs, the users' passwords would be exposed. And what happens if it’s stored in plain text? I believe you know the answer. To address this, hash the passwords using bcrypt.

\n

So, install bcrypt and @types/bcrypt with the following command:

\n
npm install @types/bcrypt bcrypt
\n

With that out of the way, set up your controller. First, import your UsersService class and everything from bcrypt. Then add a constructor and a method that allows you to add a user; it will handle incoming post requests, call it addUser, with a function body where you'll hash the password.

\n

users.controller.ts

\n
import { Body, Controller, Post } from '@nestjs/common';\nimport { UsersService } from './users.service';\nimport * as bcrypt from 'bcrypt';\n@Controller('users')\nexport class UsersController {\n  constructor(private readonly usersService: UsersService) {}\n  //post / signup\n  @Post('/signup')\n  async addUser(\n    @Body('password') userPassword: string,\n    @Body('username') userName: string,\n  ) {\n    const saltOrRounds = 10;\n    const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n    const result = await this.usersService.insertUser(\n      userName,\n      hashedPassword,\n    );\n    return {\n      msg: 'User successfully registered',\n      userId: result.id,\n      userName: result.username\n    };\n  }\n}
\n

The registration happens in the app.module.ts file, which is achieved by adding the UsersModule to the @Module() decorator's imports' array in app.module.ts.

\n

app.module.ts

\n
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { AppController } from "./app.controller"\nimport { AppService } from "./app.service"\nimport { UsersModule } from "./users/users.module"\n\n@Module({\n  imports: [\n    MongooseModule.forRoot(\n      "mongodb+srv://<username>:<password>@cluster0.kngtf.mongodb.net/session-auth?retryWrites=true&w=majority"\n    ),\n    UsersModule,\n  ],\n  controllers: [AppController],\n  providers: [AppService],\n})\nexport class AppModule {}
\n

Congratulations! You are done with the registration. You can now register a user with a username and password.

\n

Now, with registration out of the way, add a getUser function to your UsersService with the findOne method to find a user by username.

\n

users.service.ts

\n
import { Injectable } from '@nestjs/common';\nimport { InjectModel } from '@nestjs/mongoose';\nimport { Model } from 'mongoose';\nimport { User } from './users.model';\n@Injectable()\nexport class UsersService {\n  constructor(@InjectModel('user') private readonly userModel: Model<User>) {}\n  async insertUser(userName: string, password: string) {\n    const username = userName.toLowerCase();\n    const newUser = new this.userModel({\n      username,\n      password,\n    });\n    await newUser.save();\n    return newUser;\n  }\n  async getUser(userName: string) {\n    const username = userName.toLowerCase();\n    const user = await this.userModel.findOne({ username });\n    return user;\n  }\n}
\n

Create Authentication Module

\n

Just as for users, create an auth module and service specifically for all the authentications/verifications. To do that, run the following commands:

\n
nest g module auth\nnest g service auth
\n

The above will create an auth folder, auth.module.ts, and auth.service.ts, and update the auth.module.ts and app.module.ts files.

\n

At this point, the shape of your application src folder should look as follows.

\n
└───src\n│   └───auth\n│   │   └───auth.module.ts\n│   │   └───auth.service.ts\n│   └───users\n│   │   └───users.controller.ts\n│   │   └───users.model.ts\n│   │   └───users.module.ts\n│   │   └───users.service.ts\n│   └───app.controller.ts\n│   └───app.module.ts\n│   └───app.service.ts\n│   └───main.ts
\n

The above generate command will update your app.module.ts, and it will look like the code snippet below:

\n

app.module.ts

\n
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { AppController } from "./app.controller"\nimport { AppService } from "./app.service"\nimport { UsersModule } from "./users/users.module"\nimport { AuthModule } from './auth/auth.module';\n\n\n@Module({\n  imports: [UsersModule, AuthModule, MongooseModule.forRoot(\n    //database url string\n    'mongodb://localhost:27017/myapp'\n    )],\n  controllers: [AppController],\n  providers: [AppService],\n})\nexport class AppModule {}
\n

Authenticate Users

\n

Go to your auth.module.ts file and add UsersModule in the imports array to enable access to the UsersService exported from the users.module.ts file.

\n

auth.module.ts

\n
import { Module } from "@nestjs/common"\nimport { UsersModule } from "src/users/users.module"\nimport { AuthService } from "./auth.service"\n\n@Module({\n  imports: [UsersModule],\n  providers: [AuthService],\n})\nexport class AuthModule {}
\n

In your auth.service.ts file, call the constructor so you can inject the UsersService, and add a method for validation that will take a username and password.

\n

To add some basic validations, check if the user exists in the database, and compare the given password with the one in your database to ensure it matches. If it exists, return the user in the request.user object — else, return null.

\n

auth.service.ts

\n
    import { Injectable, NotAcceptableException } from '@nestjs/common';\n    import { UsersService } from 'src/users/users.service';\n    import * as bcrypt from 'bcrypt';\n\n    @Injectable()\n    export class AuthService {\n      constructor(private readonly usersService: UsersService) {}\n      async validateUser(username: string, password: string): Promise<any> {\n        const user = await this.usersService.getUser(username);\n        const passwordValid = await bcrypt.compare(password, user.password)\n        if (!user) {\n            throw new NotAcceptableException('could not find the user');\n          }\n        if (user && passwordValid) {\n          return {\n            userId: user.id,\n            userName: user.username\n          };\n        }\n        return null;\n      }\n    }
\n

Going further, create a new file and name it local.strategy.ts. This file will represent the strategy from Passport.js, which you installed earlier, that is the local strategy. And within it, pass in the strategy, which is the Strategy from passport-local.

\n

Create a constructor and inject the AuthService, call the super() method; ensure to call the super() method.

\n

local.strategy.ts

\n
    import { Injectable, UnauthorizedException } from '@nestjs/common';\n    import { PassportStrategy } from '@nestjs/passport';\n    import { Strategy } from 'passport-local';\n    import { AuthService } from './auth.service';\n    @Injectable()\n    export class LocalStrategy extends PassportStrategy(Strategy) {\n      constructor(private readonly authService: AuthService) {\n        super();\n      }\n      async validate(username: string, password: string): Promise<any> {\n        const userName = username.toLowerCase();\n        const user = await this.authService.validateUser(userName, password);\n        if (!user) {\n          throw new UnauthorizedException();\n        }\n        return user;\n      }\n    }
\n

Go back to your auth.module.ts file. Then add PassportModule to imports and LocalStrategy to providers.

\n

auth.module.ts

\n
import { Module } from "@nestjs/common"\nimport { PassportModule } from "@nestjs/passport"\nimport { UsersModule } from "src/users/users.module"\nimport { AuthService } from "./auth.service"\nimport { LocalStrategy } from "./local.strategy"\n\n@Module({\n  imports: [UsersModule, PassportModule],\n  providers: [AuthService, LocalStrategy],\n})\nexport class AuthModule {}
\n

Now, add the login route to your users.controller.ts:

\n

users.controller.ts

\n
    import {\n      Body,\n      Controller,\n      Post,\n      Request,\n    } from '@nestjs/common';\n    import * as bcrypt from 'bcrypt';\n    import { UsersService } from './users.service';\n    @Controller('users')\n    export class UsersController {\n      constructor(private readonly usersService: UsersService) {}\n      //post / signup\n      @Post('/signup')\n      async addUser(\n        @Body('password') userPassword: string,\n        @Body('username') userName: string,\n      ) {\n        const saltOrRounds = 10;\n        const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n        const result = await this.usersService.insertUser(\n          userName,\n          hashedPassword,\n        );\n        return {\n          msg: 'User successfully registered',\n          userId: result.id,\n          userName: result.username\n        };\n      }\n      //Post / Login\n      @Post('/login')\n      login(@Request() req): any {\n        return {User: req.user,\n                msg: 'User logged in'};\n      }\n    }
\n

Now that you have all these put in place, you still cannot log in a user because there is nothing to trigger the login route. Here, use Guards to achieve that.

\n

Create a file and name it local.auth.guard.ts, then a class LocalAuthGuard that extends AuthGuard from NestJS/passport, where you will provide the name of the strategy and pass in the name of your strategy, local.

\n

local.auth.guard.ts.

\n
import { Injectable } from "@nestjs/common"\nimport { AuthGuard } from "@nestjs/passport"\n@Injectable()\nexport class LocalAuthGuard extends AuthGuard("local") {}
\n

Add the UseGuard decorator to your login route in the users.controller.ts file, and pass in the LocalAuthGuard.

\n

users.controller.ts

\n
    import {\n      Body,\n      Controller,\n      Post,\n      UseGuards,\n      Request,\n    } from '@nestjs/common';\n    import * as bcrypt from 'bcrypt';\n    import { LocalAuthGuard } from 'src/auth/local.auth.guard';\n    import { UsersService } from './users.service';\n    @Controller('users')\n    export class UsersController {\n      constructor(private readonly usersService: UsersService) {}\n      //post / signup\n      @Post('/signup')\n      async addUser(\n        @Body('password') userPassword: string,\n        @Body('username') userName: string,\n      ) {\n        const saltOrRounds = 10;\n        const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n        const result = await this.usersService.insertUser(\n          userName,\n          hashedPassword,\n        );\n        return {\n          msg: 'User successfully registered',\n          userId: result.id,\n          userName: result.username\n        };\n      }\n      //Post / Login\n      @UseGuards(LocalAuthGuard)\n      @Post('/login')\n      login(@Request() req): any {\n        return {User: req.user,\n                msg: 'User logged in'};\n      }\n    }
\n

Finally, you can log in a user with a registered username and password.

\n

Protect Authentication Routes

\n

You have successfully set up user authentication. Now, protect your routes from unauthorized access by limiting access to just authenticated users. Go to your users.controller.ts file, and add another route — name it ‘protected’ and make it return the req.user object.

\n

users.controller.ts

\n
    import {\n      Body,\n      Controller,\n      Get,\n      Post,\n      UseGuards,\n      Request,\n    } from '@nestjs/common';\n    import * as bcrypt from 'bcrypt';\n    import { LocalAuthGuard } from 'src/auth/local.auth.guard';\n    import { UsersService } from './users.service';\n    @Controller('users')\n    export class UsersController {\n      constructor(private readonly usersService: UsersService) {}\n      //signup\n      @Post('/signup')\n      async addUser(\n        @Body('password') userPassword: string,\n        @Body('username') userName: string,\n      ) {\n        const saltOrRounds = 10;\n        const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n        const result = await this.usersService.insertUser(\n          userName,\n          hashedPassword,\n        );\n        return {\n          msg: 'User successfully registered',\n          userId: result.id,\n          userName: result.username\n        };\n      }\n      //Post / Login\n      @UseGuards(LocalAuthGuard)\n      @Post('/login')\n      login(@Request() req): any {\n        return {User: req.user,\n                msg: 'User logged in'};\n      }\n    // Get / protected\n      @Get('/protected')\n      getHello(@Request() req): string {\n        return req.user;\n      }\n    }
\n

The protected route in the above code will return an empty object instead of returning the user’s details when a logged-in user makes a request to it because it already lost the login.

\n

To get that sorted, this is where the session-based authentication comes in.

\n

In session-based authentication, when a user logs in, the user is saved in a session so that any subsequent request by the user after login will grab the details from the session and grant the user easy access. The session expires when the user logs out.

\n

To start session-based auth, install express-session and the NestJS types using the following command:

\n
npm install express-session @types/express-session
\n

When the installation is completed, go to your main.ts file, the root of your application, and do the configurations there.

\n

Import everything from passport and express-session, then add passport initialize and passport session.

\n

It is preferable to keep your secret key in your environment variables.

\n

main.ts

\n
import { NestFactory } from "@nestjs/core"\nimport { AppModule } from "./app.module"\nimport * as session from "express-session"\nimport * as passport from "passport"\nasync function bootstrap() {\n  const app = await NestFactory.create(AppModule)\n  app.use(\n    session({\n      secret: "keyboard",\n      resave: false,\n      saveUninitialized: false,\n    })\n  )\n  app.use(passport.initialize())\n  app.use(passport.session())\n\n  await app.listen(3000)\n}\nbootstrap()
\n

Add a new file, authenticated.guard.ts, in your auth folder. And create a new Guard that checks if there is a session for the user making the request — name it authenticatedGuard.

\n

authenticated.guard.ts

\n
import { CanActivate, ExecutionContext, Injectable } from "@nestjs/common"\n\n@Injectable()\nexport class AuthenticatedGuard implements CanActivate {\n  async canActivate(context: ExecutionContext) {\n    const request = context.switchToHttp().getRequest()\n    return request.isAuthenticated()\n  }\n}
\n

In the above code, the request is gotten from the context and checked if authenticated. isAuthenticated() comes from passport.js automatically; it says. \"hey! does a session exist for this user? If so, keep going.\"

\n

To trigger the login, in your users.controller.ts file:

\n\n

users.controller.ts

\n
    import {\n      Body,\n      Controller,\n      Get,\n      Post,\n      UseGuards,\n      Request,\n    } from '@nestjs/common';\n    import * as bcrypt from 'bcrypt';\n    import { AuthenticatedGuard } from 'src/auth/authenticated.guard';\n    import { LocalAuthGuard } from 'src/auth/local.auth.guard';\n    import { UsersService } from './users.service';\n    @Controller('users')\n    export class UsersController {\n      constructor(private readonly usersService: UsersService) {}\n      //signup\n      @Post('/signup')\n      async addUser(\n        @Body('password') userPassword: string,\n        @Body('username') userName: string,\n      ) {\n        const saltOrRounds = 10;\n        const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n        const result = await this.usersService.insertUser(\n          userName,\n          hashedPassword,\n        );\n        return {\n          msg: 'User successfully registered',\n          userId: result.id,\n          userName: result.username\n        };\n      }\n      //Post / Login\n      @UseGuards(LocalAuthGuard)\n      @Post('/login')\n      login(@Request() req): any {\n        return {User: req.user,\n                msg: 'User logged in'};\n      }\n      //Get / protected\n      @UseGuards(AuthenticatedGuard)\n      @Get('/protected')\n      getHello(@Request() req): string {\n        return req.user;\n      }\n    }
\n

At this point, it still fails because you've only configured express-session but didn't implement it.

\n

When a user logs in, you need to save the user in a session so that the user can access other routes with the session.

\n

One thing to keep in mind is that by default, the express-session library stores the session in the web server's memory.

\n

Before it goes into the session, you need to serialize the user. As it comes out of the session, deserialize the user.

\n

So, create a new file in the auth folder for serializer and deserializer, name it session.serializer.ts.

\n

At this point, the shape of our application src folder should look like this.

\n
    └───src\n    │   └───auth\n    │   │   └───auth.module.ts\n    │   │   └───auth.service.ts\n    │   │   └───authenticated.guard.ts\n    │   │   └───local.auth.guard.ts\n    │   │   └───local.strategy.ts\n    │   │   └───session.serializer.ts\n    │   └───users\n    │   │   └───users.controller.ts\n    │   │   └───users.model.ts\n    │   │   └───users.module.ts\n    │   │   └───users.service.ts\n    │   └───app.controller.ts\n    │   └───app.module.ts\n    │   └───app.service.ts\n    │   └───main.ts
\n

session.serializer.ts

\n
import { Injectable } from "@nestjs/common"\nimport { PassportSerializer } from "@nestjs/passport"\n\n@Injectable()\nexport class SessionSerializer extends PassportSerializer {\n  serializeUser(user: any, done: (err: Error, user: any) => void): any {\n    done(null, user)\n  }\n  deserializeUser(\n    payload: any,\n    done: (err: Error, payload: string) => void\n  ): any {\n    done(null, payload)\n  }\n}
\n

Go back to your auth.module.ts file, provide the SessionSerializer, and add the register method to the PassportModule.

\n

auth.module.ts

\n
import { Module } from "@nestjs/common"\nimport { PassportModule } from "@nestjs/passport"\nimport { UsersModule } from "src/users/users.module"\nimport { AuthService } from "./auth.service"\nimport { LocalStrategy } from "./local.strategy"\nimport { SessionSerializer } from "./session.serializer"\n\n@Module({\n  imports: [UsersModule, PassportModule.register({ session: true })],\n  providers: [AuthService, LocalStrategy, SessionSerializer],\n})\nexport class AuthModule {}
\n

Add some codes within the LocalAuthGuard in the local.auth.guard.ts file.

\n

Call the login method in super and pass in the request to trigger the actual login by creating a session. If you want to use sessions, you must remember to trigger the super.login().

\n

local.auth.guard.ts

\n
    import { ExecutionContext, Injectable } from '@nestjs/common';\n    import { AuthGuard } from '@nestjs/passport';\n    @Injectable()\n    export class LocalAuthGuard extends AuthGuard('local') {\n      async canActivate(context: ExecutionContext) {\n        const result = (await super.canActivate(context)) as boolean;\n        const request = context.switchToHttp().getRequest();\n        await super.logIn(request);\n        return result;\n      }\n    }
\n

If you log in now, you will see the session ID stored in a cookie, which is just a key to the session store, and the cookie gets saved in the browser. The cookie is automatically attached to the rest of the request.

\n

Now that the session is working, you can access the protected route; it will return the expected user’s details.

\n

Logout Users

\n

As mentioned earlier, once a user logs out, you destroy all sessions.

\n

To log out a user, go to the users.controller.ts file, add a logout route, and call the req.session.session() method. You can return a message notifying that the user’s session has ended.

\n
    import {\n      Body,\n      Controller,\n      Get,\n      Post,\n      UseGuards,\n      Request,\n    } from '@nestjs/common';\n    import * as bcrypt from 'bcrypt';\n    import { AuthenticatedGuard } from 'src/auth/authenticated.guard';\n    import { LocalAuthGuard } from 'src/auth/local.auth.guard';\n    import { UsersService } from './users.service';\n    @Controller('users')\n    export class UsersController {\n      constructor(private readonly usersService: UsersService) {}\n      //signup\n      @Post('/signup')\n      async addUser(\n        @Body('password') userPassword: string,\n        @Body('username') userName: string,\n      ) {\n        const saltOrRounds = 10;\n        const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n        const result = await this.usersService.insertUser(\n          userName,\n          hashedPassword,\n        );\n        return {\n          msg: 'User successfully registered',\n          userId: result.id,\n          userName: result.username\n        };\n      }\n      //Post / Login\n      @UseGuards(LocalAuthGuard)\n      @Post('/login')\n      login(@Request() req): any {\n        return {User: req.user,\n                msg: 'User logged in'};\n      }\n       //Get / protected\n      @UseGuards(AuthenticatedGuard)\n      @Get('/protected')\n      getHello(@Request() req): string {\n        return req.user;\n      }\n       //Get / logout\n      @Get('/logout')\n        logout(@Request() req): any {\n          req.session.destroy();\n          return { msg: 'The user session has ended' }\n        }\n    }
\n

So, once you log out, it returns a message notifying you that the user session has ended. The code for this tutorial is hosted here on my Github repository.

\n

Test Your Application

\n

You have successfully implemented user signup, authentication, and protected the route to enable authorized access only.

\n

It’s time to test the application. If everything is in order, your server should be running. Else, restart your server with the following command:

\n
npm run start:dev
\n

Head over to your Postman. And let’s finally test our application.

\n

Sign Up As a User

\n

\"Sign

\n

Log In As a User

\n

\"Log

\n\n

\"Logged-in

\n

Request the Protected Route

\n

\"Request

\n

User Logout

\n

\"User

\n

Alternatively, Implement User Authentication with LoginRadius

\n

LoginRadius provides a variety of registration and authentication services to assist you in better connecting with your consumers.

\n

On any web or mobile application, LoginRadius is the developer-friendly Identity Platform that delivers a complete set of APIs for authentication, identity verification, single sign-on, user management, and account protection capabilities like multi-factor authentication.

\n

To implement LoginRadius in your NestJS application, follow this tutorial: NestJS User Authentication with LoginRadius API.

\n

Conclusion

\n

Congratulations! In this tutorial, you've learned how to implement session-based authentication in a NestJS application with the MongoDB database. You've created and authenticated a user and protected your routes from unauthorized access.

\n

You can access the sample code used in this tutorial on GitHub.

\n
\n

Note: Session storage is saved by default in 'MemoryStore,' which is not intended for production use. So, while no external datastore is required for development, once in production, a data store such as Redis or another is suggested for stability and performance. You can learn more about session storage here.

\n
\n","frontmatter":{"title":"NestJS: How to Implement Session-Based User Authentication","author":{"id":"Ekekenta Odionyenfe Clinton","github":"icode247","avatar":null},"date":"April 26, 2022","updated_date":null,"tags":["Authentication","NestJS","MongoDB","Node.js"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c08a732623e225933ce7293ad4d43437/58556/session-based-authentication-in-nestjs.webp","srcSet":"/static/c08a732623e225933ce7293ad4d43437/61e93/session-based-authentication-in-nestjs.webp 200w,\n/static/c08a732623e225933ce7293ad4d43437/1f5c5/session-based-authentication-in-nestjs.webp 400w,\n/static/c08a732623e225933ce7293ad4d43437/58556/session-based-authentication-in-nestjs.webp 800w,\n/static/c08a732623e225933ce7293ad4d43437/99238/session-based-authentication-in-nestjs.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Ekekenta Odionyenfe Clinton","slug":"/engineering/guest-post/session-authentication-with-nestjs-and-mongodb/"}}},{"node":{"id":"ba8fc20d-167b-5750-a2fa-bde80d3b3b0f","html":"

Authentication and authorization are critical in every software application to secure user data and allow access to trusted users. In some cases, implementing authentication and authorization is not an easy process.

\n

However, LoopBack 4 offers an authentication package @loopback/authentication that helps secure your application's API endpoints. It provides custom authentication strategies and a @authenticate decorator that requires minimal boilerplate code.

\n

What is LoopBack?

\n

According to the LoopBack 4 documentation:

\n
\n

LoopBack is a flexible, open source Node.js and TypeScript framework built on Express. It helps you quickly develop APIs and microservices built on backend systems such as databases and SOAP or REST services.

\n
\n

Loopback provides several features that allow you to build your application with less boilerplate code.

\n

What is JSON Web Token (JWT)?

\n

JSON Web Token (JWT) is an open standard defined by Internet Engineering Task Force (IETF) in RFC 7519.

\n

It is a standard used for securely transferring claims between two parties over the internet. It uses JSON Web Signature (JWS) for the secure transfer of claims and eliminates the possibility of tampering. Accordingly, JWTs can be signed with either a secret (HMAC technique) or a public/private key pair (RSA or ECDSA).

\n

In simple words, it is used for authentication and secure information sharing. A JWT token is made up of three components that are separated by three dots:

\n\n
\n

You can learn more about JWT and its best practices here.

\n
\n

Prerequisites

\n

This tutorial is a hands-on demonstration. To follow along, be sure you have the following in place:

\n\n

Install LoopBack CLI

\n

To start building your LoopBack REST API, first install LoopBack CLI, which provides the quickest method to create a LoopBack 4 project that follows best practices.

\n

Use the command below to install the Loopback CLI globally:

\n
npm i -g @loopback/cli
\n

You can grab a cup of coffee while you wait for the installation to complete. Then open your command line, create an AuthWithLooback folder, and change the directory to the AuthWithLooback folder with commands below:

\n
mkdir AuthWithLooback\ncd AuthWithLooback
\n

Scaffold Your LoopBack Project

\n

So, you've installed Loopback CLI and created a project directory. Let's run the following command to create a LoopBack project:

\n
lb4 app
\n

Select the options as in the following screenshot to complete the prompts.

\n

\"Creating

\n

After completing the prompts, LoopBack will configure the TypeScript compiler and install all the required dependencies. Change directory to the auth-with-loopback folder.

\n
cd auth-with-loopback
\n

Create a Model

\n

You've successfully created your Loopback application. Now, let’s create a Model to store the news details with the command below:

\n
lb4 model
\n

Select the options as in the following screenshot to complete the prompts.

\n

\"Creating

\n

After the date_created property definition, press the enter key to exit the prompt.

\n

Loopback will create a NewsModel file in the src/models — the folder where NewsModel will be defined.

\n

Next, you need to create a data source to connect to your preferred database. For demonstration, this tutorial connects to a MongoDB database.

\n

Run the following command in your terminal to create a data source:

\n
  lb4 datasource
\n

Select the options as in the following screenshot to complete the prompts.

\n

\"Creating

\n

After completing the prompts, LoopBack will create the News file in the src/datasource folder.

\n

Then, create a Repository for CRUD operations of your NewModel with the command below:

\n
lb4 repository
\n

After completing the prompts, LoopBack will create the NewsModelRepository file in the src/repository folder.

\n

Select NewsDatasource as the data source, NewsModel as the model for generating the repository, and DefaultCrudRepository as the base repository class.

\n

Your selection for the prompts shall look like the screenshot below.

\n

\"Creating

\n

After completing the prompts, LoopBack will create the NewsModelRepository file in the src/repository folder.

\n

Lastly, create a controller for the NewsModel you created with the command below:

\n
  lb4 controller
\n

Your selection for the prompts should look like the screenshot below.

\n

\"Creating

\n

After completing the prompts, LoopBack will create the NewsController file in the src/controller folder. So far, your project structure, omitting the node_modules folder, should look as follows.

\n

📦auth-with-loopback
\n┣ 📂public
\n┃ ┗ 📜index.html
\n┣ 📂src
\n┃ ┣ 📂tests
\n┃ ┃ ┣ 📂acceptance
\n┃ ┃ ┃ ┣ 📜home-page.acceptance.ts
\n┃ ┃ ┃ ┣ 📜ping.controller.acceptance.ts
\n┃ ┃ ┃ ┗ 📜test-helper.ts
\n┃ ┃ ┗ 📜README.md
\n┃ ┣ 📂controllers
\n┃ ┃ ┣ 📜README.md
\n┃ ┃ ┣ 📜index.ts
\n┃ ┃ ┣ 📜news-controller.controller.ts
\n┃ ┃ ┗ 📜ping.controller.ts
\n┃ ┣ 📂datasources
\n┃ ┃ ┣ 📜README.md
\n┃ ┃ ┣ 📜index.ts
\n┃ ┃ ┗ 📜news.datasource.ts
\n┃ ┣ 📂models
\n┃ ┃ ┣ 📜README.md
\n┃ ┃ ┣ 📜index.ts
\n┃ ┃ ┗ 📜news-model.model.ts
\n┃ ┣ 📂repositories
\n┃ ┃ ┣ 📜README.md
\n┃ ┃ ┣ 📜index.ts
\n┃ ┃ ┗ 📜news-model.repository.ts
\n┃ ┣ 📜application.ts
\n┃ ┣ 📜index.ts
\n┃ ┣ 📜migrate.ts
\n┃ ┣ 📜openapi-spec.ts
\n┃ ┗ 📜sequence.ts
\n┣ 📜.dockerignore
\n┣ 📜.eslintignore
\n┣ 📜.eslintrc.js
\n┣ 📜.gitignore
\n┣ 📜.mocharc.json
\n┣ 📜.prettierignore
\n┣ 📜.prettierrc
\n┣ 📜.yo-rc.json
\n┣ 📜DEVELOPING.md
\n┣ 📜Dockerfile
\n┣ 📜README.md
\n┣ 📜package-lock.json
\n┣ 📜package.json
\n┗ 📜tsconfig.json

\n

Add Custom Data

\n

Now that you have the Model setup, run the server, and add some custom data to the News collection in MongoDB.

\n
    #start the server\n    npm run start
\n

The above command will start the TypeScript compiler, which will build the project and check for possible errors. If everything goes well with the code, you should see the output on the terminal, as follows:

\n

\"Starting

\n

Next, open your favorite browser and navigate to http://localhost:3000. You should see an output as follows:

\n

\"LoopBack

\n

Now, click on the explorer link, where you can make requests to your LoopBack application. On the explorer page, locate the post endpoint and add some custom data to the news collection by clicking the try it out button with the data below on the request body.

\n
{\n  "title": "Upgrade to Loopback V4",\n  "body": "The developers of Loopback urges the V3 users to upgrade to V4 as soon as possible",\n  "date_created": "2021-12-14T00:57:43.197Z"\n}
\n

Then, click the execute button to run the query.

\n

\"Executing

\n

You can add as many records as you like to experiment with the endpoints. The important thing to note here is that the endpoints are not protected. Anyone may create, read, update, and delete records.

\n

In a moment, this tutorial explains how to secure the endpoints so that only logged-in users can access them.

\n

To begin, install LoopBack authentication and authentication-jwt, as follows:

\n
  npm i --save @loopback/authentication @loopback/authentication-jwt
\n

Setup Authentication Components

\n

To protect the application, you'll implement user authentication and authorization, which implies that only logged-in users will be able to access your APIs. You'll create two endpoints in the User controller:

\n\n

Create Your Signup Endpoint

\n

You’ll start with the signup controller to enable users to create an account. Create an empty controller with the command below:

\n
    lb4 controller
\n

Your selection for the prompts should be as follows:

\n

\"Creating

\n

Then, open the src/controllers/user.controller.ts file, and import the required modules with the following code snippet:

\n
    import { authenticate, TokenService } from '@loopback/authentication';\n    import {\n      Credentials,\n      MyUserService,\n      TokenServiceBindings,\n      User,\n      UserRepository,\n      UserServiceBindings,\n    } from '@loopback/authentication-jwt';\n    import { inject } from '@loopback/core';\n    import { model, property, repository } from '@loopback/repository';\n    import {\n      get,\n      getModelSchemaRef,\n      post,\n      requestBody,\n      SchemaObject,\n    } from '@loopback/rest';\n    import { SecurityBindings, securityId, UserProfile } from '@loopback/security';\n    import { genSalt, hash } from 'bcryptjs';\n    import _ from 'lodash';\n    ........
\n

Next, set up your user credential objects, and verify the user credentials using the UserService, injecting MyUserService into the authentication-jwt extension.

\n
    @model()\n    export class CreateUser extends User {\n      @property({\n        type: 'string',\n        required: true,\n      })\n      password: string;\n    }\n\n    const UserSchema: SchemaObject = {\n      type: 'object',\n      required: ['email', 'password'],\n      properties: {\n        email: {\n          type: 'string',\n          format: 'email',\n        },\n        password: {\n          type: 'string',\n          minLength: 6,\n        },\n      },\n    };\n\n    export const RequestBody = {\n      description: 'The input of login function',\n      required: true,\n      content: {\n        'application/json': { schema: UserSchema },\n      },\n    };\n\n    export class UserController {\n      constructor(\n        @inject(TokenServiceBindings.TOKEN_SERVICE)\n        public jwtService: TokenService,\n        @inject(UserServiceBindings.USER_SERVICE)\n        public userService: MyUserService,\n        @inject(SecurityBindings.USER, { optional: true })\n        public user: UserProfile,\n        @repository(UserRepository) protected userRepository: UserRepository,\n      ) { }\n    ..........
\n

Finally, you'll build your signup endpoint, which will listen to POST requests. Here, you shall save the hashed version of the user's password in the database to keep it safe.

\n
     @post('/signup', {\n      responses: {\n        '200': {\n          description: 'User',\n          content: {\n            'application/json': {\n              schema: {\n                'x-ts-type': User,\n              },\n            },\n          },\n        },\n      },\n    })\n    async signUp(\n      @requestBody({\n        content: {\n          'application/json': {\n            schema: getModelSchemaRef(CreateUser, {\n              title: 'NewUser',\n            }),\n          },\n        },\n      })\n      newUserRequest: CreateUser,\n    ): Promise<User> {\n      const password = await hash(newUserRequest.password, await genSalt());\n      const savedUser = await this.userRepository.create(\n        _.omit(newUserRequest, 'password'),\n      );\n\n      await this.userRepository.userCredentials(savedUser.id).create({ password });\n\n      return savedUser;\n    }\n    .........
\n

Create Your Login Controller

\n

Now that you've set up the signup endpoint, create the login endpoint so that registered users may log in to the API.

\n

Using the code snippet below, set up the login route in the src/controllers/user.controller.ts file. In the event of a successful log-in, a token is sent to the user.

\n
      @post('/signin', {\n      responses: {\n        '200': {\n          description: 'Token',\n          content: {\n            'application/json': {\n              schema: {\n                type: 'object',\n                properties: {\n                  token: {\n                    type: 'string',\n                  },\n                },\n              },\n            },\n          },\n        },\n      },\n    })\n    async signIn(\n      @requestBody(RequestBody) credentials: Credentials,\n    ): Promise<{ token: string }> {\n      const user = await this.userService.verifyCredentials(credentials);\n      const userProfile = this.userService.convertToUserProfile(user);\n      const token = await this.jwtService.generateToken(userProfile);\n      return { token };\n    }
\n

Perhaps, you can show the currently logged-in user by adding a /whoami endpoint.

\n

In the src/controllers/user.controller.ts file, get the details of the currently logged-in user using the code snippet below. Users should access this endpoint only when they are logged in.

\n
      @authenticate('jwt')\n      @get('/whoami', {\n        responses: {\n          '200': {\n            description: 'Return current user',\n            content: {\n              'application/json': {\n                schema: {\n                  type: 'string',\n                },\n              },\n            },\n          },\n        },\n      })\n      async whoAmI(\n        @inject(SecurityBindings.USER)\n        loggedInUserProfile: UserProfile,\n      ): Promise<string> {\n        return loggedInUserProfile[securityId];\n      }
\n

Now, open src/application.ts and bind the authentication components to your application class. First, import Loopback AuthenticationComponent, JWTAuthenticationComponent, and NewsDataSource from your datasources using the following code snippet:

\n
//...\nimport { AuthenticationComponent } from "@loopback/authentication"\nimport {\n  JWTAuthenticationComponent,\n  UserServiceBindings,\n} from "@loopback/authentication-jwt"\nimport { NewsDataSource } from "./datasources"\n//...
\n

Then, mount the jwt authentication system and bind your NewsDataSource to the UserService data source.

\n
//...\n// ------ ADD SNIPPET INSIDE THE CONTRUCTOR BLOCK ---------\nthis.component(AuthenticationComponent)\nthis.component(JWTAuthenticationComponent)\nthis.dataSource(NewsDataSource, UserServiceBindings.DATASOURCE_NAME)\n//...
\n

Finally, add the authenticate action in the Sequence. Also, modify the error when authentication fails to return status code 401 (Unauthorized). Open the src/sequence.ts file and add the code snippet below:

\n
    import { FindRoute, InvokeMethod, MiddlewareSequence, ParseParams, Reject, RequestContext, Send, SequenceActions, SequenceHandler } from '@loopback/rest';\n    import {\n        AuthenticateFn,\n        AuthenticationBindings,\n        AUTHENTICATION_STRATEGY_NOT_FOUND,\n        USER_PROFILE_NOT_FOUND,\n    } from '@loopback/authentication';\n    import { inject } from "@loopback/core"\n    export class MySequence implements SequenceHandler {\n        constructor(\n            @inject(SequenceActions.FIND_ROUTE) protected findRoute: FindRoute,\n            @inject(SequenceActions.PARSE_PARAMS)\n            protected parseParams: ParseParams,\n            @inject(SequenceActions.INVOKE_METHOD) protected invoke: InvokeMethod,\n            @inject(SequenceActions.SEND) protected send: Send,\n            @inject(SequenceActions.REJECT) protected reject: Reject,\n            @inject(AuthenticationBindings.AUTH_ACTION)\n            protected authenticateRequest: AuthenticateFn,\n        ) { }\n        async handle(context: RequestContext) {\n            try {\n                const { request, response } = context;\n                const route = this.findRoute(request);\n                //call authentication action\n                await this.authenticateRequest(request);\n                // Authentication successful, proceed to invoke controller\n                const args = await this.parseParams(request, route);\n                const result = await this.invoke(route, args);\n                this.send(response, result);\n            } catch (error) {\n                if (\n                    error.code === AUTHENTICATION_STRATEGY_NOT_FOUND ||\n                    error.code === USER_PROFILE_NOT_FOUND\n                ) {\n                    Object.assign(error, { statusCode: 401/* Unauthorized */ });\n                }\n                this.reject(context, error);\n                return;\n            }\n        }\n    }
\n

Protect News Endpoints

\n

So far, you've implemented user authentication for your API. Now, protect your News endpoints so that only authenticated users can access those routes.

\n

Open the src/controllers/news.controller.ts file, and import authenticate from jwt authentication.

\n
import { authenticate } from "@loopback/authentication"
\n

Then on each of the endpoints in your news controller, add @authenticate('jwt') before the NewsController class, which will protect all the routes in NewsController.

\n
    //...\n    @authenticate('jwt')\n    //...
\n

Perhaps, you may not want to protect all the routes, simply add the @authenticate('jwt') method before the route you wish to protect. You can protect the POST route as follows:

\n
    @authenticate('jwt')\n    @post('/news-models')\n      @response(200, {\n        description: 'NewsModel model instance',\n        content: { 'application/json': { schema: getModelSchemaRef(NewsModel) } },\n      })\n      async create(\n        @requestBody({\n          content: {\n            'application/json': {\n              schema: getModelSchemaRef(NewsModel, {\n                title: 'NewNewsModel',\n                exclude: ['id'],\n              }),\n            },\n          },\n        })\n        newsModel: Omit<NewsModel, 'id'>,\n      ): Promise<NewsModel> {\n        return this.newsModelRepository.create(newsModel);\n      }
\n

Test Your Application

\n

You've implemented user authentication in your REST API and secured the routes against unauthorized users. Let's put your application to the test. Press CTRL-C to exit the server and restart it with the following command:

\n
    npm start
\n

If you open the explorer page, you should see the UserController endpoints.

\n

\"User

\n

If you try to execute any query on NewsController, you get a 404 (Unauthorized) error. So, sign up by clicking the /signup endpoint — and log in from the /users/login endpoint. On successful login, copy the token, scroll to the top, click on the Authorize button, and paste the token.

\n

\"Authorizing

\n

Now you can execute queries on the NewController endpoints.

\n

User Authentication with Loginradius

\n

LoginRadius is a customer identity and access management (CIAM) platform for developers.

\n

What does this mean for developers like you?

\n

LoginRadius simplifies the process of user authentication, authorization, and management across web and mobile apps and APIs. It helps developers quickly implement this functionality so that developers, like you, can focus more on building core features that are essential to their apps.

\n

Loginradius includes a plethora of enticing CIAM features such as passwordless authentication and social SSO (Twitter, Facebook, etc., based single sign-on).

\n

Implementing user authentication with LoginRadius is a simple procedure. First, sign up for a Developer Pro trial or simply sign up for a forever free account here.

\n

And you can explore what LoginRadius can do by using it for a Node.js application. You can learn more by going through LoginRadius Node.js developer documentation

\n

Conclusion

\n

This tutorial taught you how to create user authentication in a LoopBack REST API by creating a small news database application.

\n

You can use the steps outlined in this tutorial to create any type of LoopBack REST API that requires user authentication and authorization.

\n

I hope you enjoyed this tutorial! Feel free to contact me on Twitter.

\n","frontmatter":{"title":"How to Secure Your LoopBack REST API with JWT Authentication","author":{"id":"Ekekenta Odionyenfe Clinton","github":"icode247","avatar":null},"date":"February 04, 2022","updated_date":null,"tags":["Authentication","LoopBack","JWT","Node.js"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4a5b6d544acaf9e9a42893f7df9dd057/58556/secure-loopback-rest-api-with-jwt.webp","srcSet":"/static/4a5b6d544acaf9e9a42893f7df9dd057/61e93/secure-loopback-rest-api-with-jwt.webp 200w,\n/static/4a5b6d544acaf9e9a42893f7df9dd057/1f5c5/secure-loopback-rest-api-with-jwt.webp 400w,\n/static/4a5b6d544acaf9e9a42893f7df9dd057/58556/secure-loopback-rest-api-with-jwt.webp 800w,\n/static/4a5b6d544acaf9e9a42893f7df9dd057/99238/secure-loopback-rest-api-with-jwt.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Ekekenta Odionyenfe Clinton","slug":"/engineering/guest-post/loopback-rest-api-authentication/"}}}]},"authorYaml":{"id":"Ekekenta Odionyenfe Clinton","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.","github":"icode247","stackoverflow":null,"linkedin":"ekekenta-odionyenfe-c-97569b191","medium":"zionekekenta","twitter":"EkekentaZion","avatar":null}},"pageContext":{"id":"Ekekenta Odionyenfe Clinton","__params":{"id":"ekekenta-odionyenfe-clinton"}}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}