JWT Authentication with Vue/Nuxt

Tram Ho

Authentication in SPAs is often a hot topic, for those unsure of how to implement a full-featured authentication system – registration, login and access token refreshing via refresh tokens.

In this article, we will discuss how to implement an endpoint instead of implementing a JWT (Json web tokens) API. So we have the flexibility to write our own JWT API.

Refer to JWT Laravel at https://sal.vn/oMStwi .

Implementation

For the front end, we will use the following packages: vuex-persistedstate , js-cookie and @nuxtjs/axios . We need to allow them to store tokens and user information to be able to access both the server and the client side-by-side, so authentication can be done in both.

Install packages:

VueX State Persistence

To make authenticated API calls from the server and the browser (client), we need to make sure the tokens are accessible between the two points. Vuex-persistedstate simplifies this with js-cookie support that will persist tokens on tcookie.

After installing the packages, we need to configure vuex-persistedstate as a plugin.

plugins/local-storage.js

Next, add this plugin to nuxt.config.js:

VueX Store

We need to set up VueX store, which will store data about the user, access token and refresh token. These will include actions for calling the API to register, login, and refresh the user, as well as mutations to pass the returned data to the state.

store/auth.js

Next, we need to create a Form Components for the login and registration page. We will cover this part in detail later. Basically, our form should call authentication module actions to login or register user information.

Authenticated API Requests

In this section, we will use the built-in Interceptors feature of Axios, which allows us to change requests and responses as well as handle all returned errors. @nuxtjs /axios gives the full set: https://axios.nuxtjs.org/extend/#adding-interceptors

We will use a request interceptor to attach an access token to each request.

plugins/axios.js

This plugin is quite simple, it will capture every request and if the user is authenticated, will add an Authorization header.

Add nuxt.config.js :

Refresh Tokens

For security reasons, an access token should not last too long and should be easily revoked if necessary. When the access token expires or is invalid but the application still needs protection, the application needs to generate a new access token that the user does not need to grant access again.

To solve this problem, we can modify the interceptor plugin, adding an error handler to automatically generate a new access token in case it expires.

In case the access token expires, the API will need to notify the client that the token is invalid and needs to be refreshed. Usually we will return with a status code of 401.

At this point, the client, aware of the token’s expiration, can move on to renew the token, before retrying the same request.

Usually the Refresh Token endpoint provides a refresh_token value via a POST request, so the API will need to generate a new access token to return to the client. If the new token is expired, revoked or invalid, it may return an error code so that the client side cannot re-validate and need to logout.

We will need to modify the interceptor plugin to catch the plugins/axios.js error:

The plugin has been noted here very specifically, but basically the new interceptor checks if the error is related to an expired token and then tries to refresh the access token if it is.

Successful processing of the Promise will return a copy of the original request, leaving the calling function completely unaware that the token was refreshed before its response was received. However, if the refresh processing fails, the Interceptor will automatically logout and navigate to the home page.

Nuxt provides nuxtServerInit hook for SSR request to server. We can automatically refresh the access token when the user is logged in with the first connection to the server.

With SPA it won’t be necessary to refresh as often, so when it happens, we can offer a short-term token. To do this, add to the root store:

store/index.js

Now, when the user navigates the app through a URL or an external link, we will automatically refresh their access token if they have previously logged in.

Conclusion

In this article, we will only briefly discuss the implementation of Authentication in SPAs but provide us with the necessary concepts to be able to implement a universal client and server-side JWT authentication in Nuxt. In the following article, we will build a specific application that includes more about Authentication in SPAs.

Share the news now

Source : Viblo