Advanced JWT Interceptor to Handle Concurrent 401 Requests in Angular

Photo by Maksym Tymchyk 🇺🇦 on Unsplash

Problem of parallel requests with 401 return codes

Once an access token is invalid, all requests using this token will result in a 401 Unauthorized response. At the same time: when there is a mass of parallel requests, problems such as the following may occur:

• Server wave running: Because every request that returns 401 may start a new hanger token refresh request.
• Token Clashing: With a token refresh, the application can end up using different tokens from different parts.
• Inconsistency: Requests sent out during a token refresh process may still use the old token and so produce further 401 responses.

Goal: Create a mechanism that initiates the refresh token request only once and also makes all other requests wait until they receive the new refresh token before retrying the request.

Solution Through RxJS and Angular HttpInterceptor

Approach Chosen

• Only one request for a token to be renewed: Using RxJS maintain in a single place the request responsible for renewing an active token.
• Request Queue: Enqueue all requests — which return the “401” HTTP status…