Building a front-end Bot — Part 1: JSON Web Token Authentication

Here starts the first article of a series dedicated to how to build a front-end chatbot using APIs provided by OpenPaaS collaborative platform and Vue.js.

The first article is about Authentication with JSON Web Token (JWT) and Vue: What technology to use on the front-end side, how to integrate it, customize it, etc. If you have any questions about what is JWT and why do we use it for authentication, take a look at https://jwt.io/.

Note that even if you do not know what is OpenPaaS and do not want to rely on it, you will find here good VueJS examples and related code which will hopefully be helpful to you when using JWT in other contexts.

The first step for your app is to allow users to authenticate. In general, there is at least one old authentication method available; one “complex” based on OAuth and if you are lucky: a JWT-based one.
One solution is to do everything yourself on the frontend to authenticate your users: Getting the token, storing it, adding HTTP interceptors for your favorite HTTP module to use the token at the right place at the right moment, redirect user somewhere when token has expired, or you can use vue-auth, a Vue library which can do almost everything for you with little to no effort.

Add the vue-auth library. We will use axios as HTTP client, so we also need to install it alongside the vue-axios library

npm install vue-auth axios vue-axios --save

Once installed, let’s import it and customize how to get the token:

Here are the important points:

  1. We set axios.defaults.baseUrl . This will be used by vue-auth to know who to call.
  2. We tell vue-auth that it can fetch the user profile from api/user with method GET: This is our user profile endpoint in OpenPaaS, so adapt it to your platform if needed.
  3. We give the vue-auth plugin the auth option with require('./auth/openpaas-jwt') value.

This last point is the most important. vue-auth provides several auth plugins which allows to get and set the JWT token from/to ‘standard’ places (in fact there is no standard). If, for some reason, you would like to grab the token somewhere else in the HTTP response than in a HTTP header, you will have to implement your own authmodule. This is what we did in the auth/openpaas-jwt.jsfile:

The request function will be called on each HTTP request and (OMG) the response function on each HTTP response.
The important part here is that in the response, we say that we only deal with HTTP calls on endpoint which ends with jwt/generate and that in this case, we return the HTTP response data which is the JWT token itself. This is how vue-auth knows where to get the token and this is where the token can be generated in OpenPaaS.

Now that the plumbing is done, we need a form to authenticate user. I personally like using Vuetify as a UI framework, so the gist here is ‘vuetified’:

  1. As a Vue plugin, vue-auth is available as this.$auth (line 37)
  2. Once the form is submitted, vue-auth will call api/jwt/generateendpoint (as we did previously)
  3. Once authenticated, the user is redirected to the Home page which is defined in our vue router.

Below is a video of what authentication with JWT look like when successfully implemented. The Web application is deployed on github-pages, and I am able to authenticate myself against our corporate OpenPaaS instance:

All the 🐙 🤖 code is available at https://github.com/chamerling/octopus. In the next article, we will see how to create the Vue bot and talk with OpenPaaS.