Building a front-end Bot — Part 1: JSON Web Token Authentication
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.
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:
- We set
axios.defaults.baseUrl. This will be used by vue-auth to know who to call.
- We tell vue-auth that it can fetch the user profile from
api/userwith method GET: This is our user profile endpoint in OpenPaaS, so adapt it to your platform if needed.
- We give the vue-auth plugin the
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
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’:
- As a Vue plugin, vue-auth is available as
- Once the form is submitted, vue-auth will call
api/jwt/generateendpoint (as we did previously)
- Once authenticated, the user is redirected to the
Homepage 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.