Implementing Authentication on Vue.js using JWTtoken
In recent times, when building a modern application, users are required to verify their identity. The process by which we carry out this verification is what we call authentication, and in this tutorial, we would look at how we can carry out this task using JWTauthentication on a Vuejs app.
In this tutorial, we will be covering some authentication concepts and learn about authentication and how to use JSON JWTweb tokens to authorize a Vue app. To continue in this tutorial, you should be comfortable using vue, vuex, and express.
Overview
In our app, we have a login form. The user enters a username and password that is then posted to an endpoint. The flow of the app is the user opens the app, then the login page appears, the user submits the login form, which makes a post request to a login endpoint, then we check if the username and password check out, then we return a JWT and store the token in vuex and depending on the token we display a different page.
Setting up our Vue app
You can start a new project using the vue cli, but you have to install the CLI first by running-
after the is installed, you can create a new project by running-
You will then be prompted to select some basic setup. In your setup, select Babel, Linter, Vue Router, and Vuex!. That’s all we need.
Setup Express Server
To set up our server, we need to install , , , and
Our server.js file is simplistic in a way that we just import express, tell it what port to listen to, and return “hello world” when we hit the base URL, and then we listen on that port.
Building a login form
In our views folder, we add and files, and in the file, we build out the login form. But before that, we want to add a route to our vue router so that we can navigate to the login and welcome page. So for the file of our router folder, we import the login and welcome view, and we add login and welcome routes for the components to point to.
We can now navigate to both pages. On our welcome page, we want to check if the user is not logged in, then present the link they can click to navigate to the login page. We use a router link to achieve this.
In our login view, we scaffold our form. In the form, we are going to have two input boxes, one is the username input, and the other is a password. We then add a button with the type to submit the form. When we submit, we perform a login function in our script then set on our form to stop the page from refreshing each time we click the login button. In the script of our application, we model our input data by doing a two-way binding to the data state.
For the login method that runs when you click the button, we would like to perform an HTTP request to our express backend. We want to make a post request to our route we will create in our server. In the fetch method, the first parameter is the URL you are sending a request to. Then the second is the object you are posting containing the headers, which contain information about the request, and the body containing the form data.
In our server.js, we create a post request to the route and send back some to test it out. Now, if we click login now, we get back a 200 ok message.
Note: Make sure you set up so that you don't encounter an error message when hitting the route
Check if the username and password exist
The next step is to check if the username or password exists in a database or somewhere else. To not waste time dealing with a database, we can use a hardcoded username and password. In the post route, if somebody tries to log in with the exact login information we just hardcoded, we want to give the person a green light and log the person into the application; otherwise, we throw an error.
Using the login payload we got from submitting the form, we can now check if the username and password are the same; else, we throw an error and respond with a status of 403 and a wrong login information message.
JWT Authentication in our app
This is the interesting part of the tutorial. Now, if you provide the correct login information and it checks out, the next step is to sign a JWT web token. Let’s first install the JWT plugin.
also, make sure to import it at the top of your file
Then when the user login is successful, we want to send a JWT that is signed. So we import the JWTpackage. Then you sign in with a unique password. In a real application, we will want to have a file where we store the secret key. Then use to grab and use it when signing our user model. Imagine we have a user object which we got back from our database with a unique ID, name, and username.
It is the user object we want to sign, so when you send it to the client. We can uniquely identify them. The unique ID is also very important because when a server gets a request with a token, we want to know what uniquely identifies the request. Now when we enter the username and password in our form, we can see in the console that our JWT token is generated but is not encrypted.
You can visit jwt.io and paste in the token that was generated, and your token will be decoded and return information about your payload
Note: The token is not encrypted, and anyone who gets access to the token can hit your server with it. Tokens normally have an expiry period of between 30 - 60 minutes
Store Token in vuex
In our fetch method in the login view, we want to get back the token and the user and store it somewhere. Now we make our login method , then we set our response to equal to the fetch method that returns the user and token, and we get back the user and token from the response.
In our store, we add the user and token data in our state and set them to initially. You can use the token to see if the user is logged in or not. If the token is , then we are not logged in, but if it’s set to something, then we are probably logged in. We create a mutation in our mutation object that sets the state to the user object. We also create a mutation to assign our token.
Note: It is best practice to always call mutations from our actions, but since our mutations can easily be traced, we are calling the mutations directly
In the login view, we can import from vuex and map the and mutation. We can now call the mutations from the login method.
Now that we're logged in, our state has been mutated and updated with the information from our form. But after we login, we want to redirect to our welcome page using the method to redirect to the home page, which is also our welcome page.
// image of the welcome page here Since you are logged in, you don’t want the login button showing anymore on the welcome page. You can use a getter from our store to do this. We check if the token is null or not and return or .
then in our welcome component template, we can use now map to our Getter and use the directive to display the login button if is or
Conclusion
In this tutorial, we looked at how to authenticate a person using the JSON web token. We created a login form and used an express server for the login route in the application using Vue.js as a frontend framework.
Resources
