Implementing basic JWT-based authentication with LoopBack 4 and Docker for complete noobs (2/2)

In Part 1 of this tutorial, we started a new LoopBack 4 project, then set up a new MongoDB instance running in a Docker container and created a custom database and a root user to log in to our database. Now it’s time to build the API endpoints for user sign up and login.

This article will follow closely the official LoopBack 4 tutorial about securing an app with JWT authentication: https://loopback.io/doc/en/lb4/Authentication-tutorial.html#json-web-token-approach

Before we get started… this introduction to JWT authentication from the tutorial is very clear and helpful to understand the basics of the JWT authentication process:

A brief reminder of our implementation steps (from the previous article)

Before we continue our implementation, we have to install some extra dependencies:

npm i --save loopback-connector-mongodb dotenc
npm i --save @loopback/authentication @loopback/authentication-jwt

Dotenv setup

Remember how we wrote a .sh script in Part 1 to feed MongoDB with the credentials safely kept in our .env file? You thought we are done with that, but there is still an eetsy-beetsy part we didn’t (yet) deal with: npm also needs to know about the credentials (because our mongo.datasource.ts will also rely on those credentials to connect to MongoDB).

Here’s where dotenv comes to play.

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env (description copied from their npm page)

Quite handy, dont’ you think? Now, in order to actually use dotenv, we will change the npm start script in package.json as follows:

"start": "node -r dotenv/config -r source-map-support/register .",

-r argument means require (module to preload). So we want to preload dotenv/config when we run npm start .

Step 2: Add a new MongoDB data source to our app

Create a new data source through the LoopBack 4 CLI:

lb4 datasource

Make the following choices in the interactive dialogue:

Open mongo.datasource.ts and update the data source config:

We use the url method to log into our newly created test_db. Once logged in, we can now do operations on the database, like add users and query the existing users.

Step 3: Implement the JWT authentication example in the LoopBack 4 tutorial

Application is the main class of our LoopBack 4 app (found in the root of our project, inapplication.ts). This is where we bring together our project’s controllers, components, services and bindings so that we make them available to our entire app.

In this example, we will deal with components, which are nothing more than npm packages (you can read more about them here). Any developer can actually write a component for LoopBack 4 and then use it in a project.

In our case, we have to import components from the 2 packages we just installed, @loopback/authentication and @loopback/jwt-authentication. We will also import UserServiceBindings , which are predefined options to be used to create a new data source from our MongoDB datasource.

If we inspect the UserServiceBindings type, we can see:

So, we will add the following code to application.ts

Create the User Controller

For this part, I simply copied the code from the GitHub LoopBack 4 JWT example: https://github.com/strongloop/loopback-next/blob/master/examples/todo-jwt/src/controllers/user.controller.ts

The controller comes with 3 api endpoints:

Once this is done, we are left with one final implementation step… testing our API endpoints.

Step 4: Test that the api endpoints we created work as expected.

Boot the app:

npm start

Go to http://[::1]:3000/explorer. Here we can see all the api urls available in our project:

So now, we want to test the UserController api endpoints as follows:

Testing the “happy” flow

We press on “Execute”. We get a 200 code back (hopefully!). Our user was created.

Now to test the /users/login endpoint, we just take the same credentials we used above and call the api:

When we press on “Execute”, we can see we got code 200, but also we were returned a token:

In a real-world app, every time a logged in user makes requests to other api endpoints (like for example /users/{id}/profile, we will use this token in the request payload so that the server knows this user is authenticated.

Testing the “sad” flow

Now, we will simply try to login with a user that doesn’t exist:

As expected, we get back a `401 Unauthorized` response:

So, this means our API works as expected.

Yoohoo! We did it! We implemented a very basic signup/login API in LoopBack with a MongoDB instance running in a Docker container.

Here’s the GitHub repository for the code presented in these 2 articles: https://github.com/juliageek/lb4-docker-mongo-auth-example

Now go out there and build cool stuff (I know I will continue my pet project).

Web developer, amateur runner, adventurer, geek, aspiring data explorer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store