Refresh Token In Angular

Bakht Munir
2 min readSep 18, 2023

--

A refresh token is a special key that enables a client for an API or service to retrieve new access tokens without requiring the user to perform a complete login. In other words, an application can exchange a valid refresh token for a new access token.

The main reason why refresh tokens exist is because most access tokens don’t live forever. An access token may expire after a specific period like a few hours or days. Hence, to avoid requesting that the client perform an activity like entering a username and password to retrieve a new access token, you can use refresh tokens to get a new access token.

Furthermore, in a situation where a malicious user gets a hold of a valid access token, they can make requests on behalf of a user and access protected data. As a result, access tokens expire after some time and become invalid. Refresh tokens, on the other hand, live longer so that your application can make use of it to retrieve a new access token. Please fine the below diagram for high level overview.

A user request to resource server but the user token is invalid, so we will hold the current request and will send another request to the authorization server for refresh token and it will returned a new token. The new token will add to the hold request and send back to the resource sever in case the authorization server return access denied we will logout the user and clear the cache. This all activity will happen in the HTTP Interceptor Angular. Below code has been writer for refresh token:

--

--

Bakht Munir

I am software engineer working on Angular, Spring Boot, Flutter, Redhat Linux, .Net, .net , Eleastic search, Microservices, Kubernetes, Azure, Camunda, Docker.