Hi everyone! My name is David Martín and I’m from Argentina.
Let’s create a Smart Interceptor with JWT Auth and list some Programming Languages and Operatives System, using Access Token, Refresh Token, and Queue of Requests.
I created a Backend- NodeJS + MongoDB with the next endpoints:
/api/auth/signin
/api/auth/token
/api/app/programmingLang (Access Token required)
/api/app/os (Access Token required)
I’ve build a simple Angular App with a Login Page and a Home Page. By the way, I’m using Angular Material.
Here is the live demo in Stackblitz.
I’m not gonna talk about build the APP, only the Interceptor. But a quick view about Login is, when the User sing in, the app saves in the localStorage of the browser an access_token and a refresh_token. Then the APP can handle the auth in the router with canActivate and the service AuthGuard.
PLs (Programming Languages) and OSs (Operative Systems) need auth. So those requests need the Access Token. Let’s create an Interceptor and add the Access Token to every request.
I created a new folder /helper with these two files.
“Main Interceptor” gonna add the Access Token to every request.
Add the Interceptor to the AppModule, app.module.ts
What happens when the Access Token expires?
The Access Token has got a time expiration. Then, the next request gonna fails (401 error).
With the Refresh Token the App can get a new Access Token calling the endpoint /api/auth/token.
Home Page load PLs and OSs, two requests. Now, if PLs fails (401 error) we can get a new Acces Token. But…
How to handle the other request?
Error Interceptor needs a Queue. For example, imagine an App with 6 requests in one Page. The first one fails (401 error), Error Interceptor tries to get the new Access Token, but at the same time, the other 5 requests fail as well. So those 5 requests need to wait for the new token and then try again.
Services in Angular are a singleton (One instance). When the Interceptor is trying to get the new Access Token, the variable “static accessTokenError” handle the status.
Build the body with the refresh token and try to get the new tokens.
When “ErrorInterceptor.accessTokenError is true” call a method to keep waiting for the request until getting the new Access Token.
I’ve mixed Observables with vanilla JS because to me, it was better without subscribing any function, etc.
You can test this Demo with, test@test.com 1234test
After login, open DevTools, go to Application, change the access_token and refresh the page. Check the Network tab.
Here is the live demo in Stackblitz.
Thanks.
Top comments (4)
Hi David,
I have gone through the subscription process on that site, just to thank you so much for this clear and concise how-to.
I spent three days trying to find this refresh mechanism explanation on the web, however, the most famous articles are partial or outdated.
Thanks to your post, I was able to fix and understand the whole thing in less than 10 minutes.
Continue the good work, and thank you very much!
Fantastic post. Using your code examples on Stackblitz I was able to get this working with very little effort. Thank you!
thanks a lot man... working perfectly. Best guide on refresh token with angular interceptor. :)
You're welcome! The code is updated. Check my Stackblizt. Full RxJS!