[IBM LoopBack 101] A Small ToDoList API with MongoDB — Adding Authentication

As a Distributed Systems 2020–21 Class project and a continuation to the [IBM LoopBack 101] A Small ToDoList API with MongoDB article, in this one we will add a authentication feature into the a developed API.

So to continue, as in the previously article, having the Visual Studio Code and MongoDB installed on a Windows 7 machine, we will open the project in the VSCode and on a new terminal, as Command Prompt, navigate in the terminal into the project folder (small-to-do-list-api) and execute the following code to install the @loopback/authentication-jw extension.

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

Now let’s add some new code into some files that already exist in the project folder.

[Adding JWT Component in the Application ]

In the src/application.ts file, we will bind the authentication components into the class. In the top of the content, add the following imports:

import {AuthenticationComponent} from '@loopback/authentication';
import {
JWTAuthenticationComponent,
MyUserService,
UserServiceBindings,
} from '@loopback/authentication-jwt';
...

And, add the following import right after the import path line:

...
import path from 'path';
import {TodoDataSource} from './datasources';   <-- Add This
import {MySequence} from './sequence';
...

Now, in the same file, at the end of the constructor, add the following lines:

constructor(options: ApplicationConfig = {}) {
   ...
   // Mount authentication system
   this.component(AuthenticationComponent);
   // Mount jwt component
   this.component(JWTAuthenticationComponent);
   // Bind datasource
   this.dataSource(TodoDataSource,
      serServiceBindings.DATASOURCE_NAME);
}

[ Creating a User Controller for the login ]

To create a user.controller.ts file, execute the following command and fill the asked fields. You can see the bellow picture for more details.

lb4 controller

In the new created file, src/controllers/user.controller.ts, add the following code to implement all the three end points:

[ Protecting the early created EndPoints of the TodoController]

In the src/controllers/todo.controller.ts file, at the top of the content, add the following line:

import {authenticate} from '@loopback/authentication';

Then, add the @authenticate decorator line at the class level, like:

...
@authenticate('jwt')   <-- Add This Line
export class TodoController {
   ...
}

And finally let’s start the application with the following command and in any browser go to localhost:3000/explorer.

npm start

[ Testing It ]

As showed in the previously article, [IBM LoopBack 101] A Small ToDoList API with MongoDB, we could access/use the endpoints, like making a POST /todos to create a new entry in the MongoDB database, or making a GET /todos to see the already information added in the database, etc…

But now, if we try to use any of the endpoints of the TodoController, we will get a server response like:

So, let’s signup into the API going into UserController/POST/singup of the API with some data (at the minimum, a email and password). Try it out, and in a blank request body of the POST, insert the following content and execute:

{
  "email": "testuser2@abc.com",
  "password": "testuser2"
}

Now, at the POST users/login, let’s log in using the previously information used as demonstrated in the following picture:

As we can see, a token was generated.

Copy it, and at the top of the page, click the Authorize button and paste into the value field.

Confirm the action by clicking the Authorize button.

At this point we a logged into the API as we previously have sign in into it.

Now we have access and we can use the endpoints of the TodoController to POST a new entry into the MongoDB, or GET data already put it on it.

Hope you liked this small article, best regards, Ricardo Costa (Richards).

This article was created in a context of the Distributed Systems Class 2020–21, ESTG-IPG.