Security in front-end applications differ based on requirements and as an engineer, your task is to meet those requirements while keeping a remarkable experience for your users. Using the Bearer Token authentication mechanism you would notice some differences in the approach when designing some applications. Financial apps require constant authentication and re-authentication to protect access to your money, but for less serious apps like educational apps and apps for media consumption it’s going to be a bad experience for your users to be reauthenticating themselves anytime they come back to your app. Before you proceed with this article there are certain things you should be aware of:

1. This article only covers the Bearer Token method of authentication in building applications.
2. This article assumes you have adequate knowledge of authentication using the Bearer Token method.
3. This article assumes you have proper knowledge of Axios (Promise based HTTP client for the browser and node.js).
4. This article assumes you are using Axios for your HTTP client as using other clients may differ.
5. This article does not cover the back-end aspect of a refresh-token functionality. It assumes the API’s are ready for the refresh-token and is supposed to guide you on how to go about implementing the front-end aspect.

---

THE PROBLEM

The defacto way for building applications is to authenticate your users then when the backend invalidates their token you throw them back at a log-in page which works but it may break the flow of usage for the application. Imagine you scrolling through your Instagram and you were to leave it for say a day and the moment you revisit it, it slams you back at a log-in page. It is not rocket science to discover when such an experience becomes a bottleneck and a suitable solution to this is to implement a refresh-token functionality for your application whereas when the token has expired quickly request for a new one. In order to fully implement this solution we need to come up with answers to the following questions:

1. How would a refresh token work?
2. What data do we need to implement a refresh-token solution?
3. Where/how would we store/read our refresh-token related data?
4. How do we effectively implement the refresh token functionality with axios?
5. How do we effectively implement the refresh token functionality with our router?

#vuejs #front-end-development #react #frontend #javascript