Refreshing Tokens With Axios Interceptors

Timestamps:
00:00 - Intro
00:53 - What are Interceptors
2:42 - Resources
3:30 - Code Recap
10:00 - Create Axios Instance
16:05 - Using Axios Instance
18:05 - Adding Interceptor
22:34 - Checking Token Expiration
26:50 - Getting New Token
30:45- Custom useAxios() Hook

[matthewdillingham]

It's pretty neat seeing this done. I actually used this configuration on a project a few months ago. Was very surprised back then that I didn't see people validating it first.

[supersecretninjame]

i think the reason that people check in in the response rather than pre-request is that it is a more general approach that works on a wider range of back-end applications where you are not 100% sure of how the back-end is set up and how it validates the tokens. For example if there is something other than time that makes the token invalid, you renew the token as a standard procedure upon request fail regardless of why that is. However, if you have full control over the back-end and know all possible outcomes (aka you know that you need to check the exp time) I think intercepting before the request makes more much more sense.

[zayminmaw]

Finally.... good explanation and with an example. Nothing can't get better than this. Thanks for the amazing content.

[tech]

Nice explanation man. Your side tangents really helped us understand the entire context.

[stammeringprogrammer]

That's my boy, I started following u since last year. You're awesome

[gregruiz]

This is very high quality content Dennis... thank you for your time and effort put into this production.

[teodorfredriksson]

Rarerly comment but this was absolutely amazingly explained. Well done and thank you for relieving me from my headache :p Loved the hook integration.

[kleidilamka]

Great tutorial. Thank you for the quality content!

[juhandvan]

Next time I hope you will guide how to handle possible errors using axios.
Many thanks !!!

[thebetoxpro]

Amazingg!!! Thanks for this, i have been trying to learn how to manage the auth flow and now i know how. Thank u soo muchh. Saludos desde Mexico

[joaoarthurbandeira]

Hey Dennis! Excellent tutorial, as always!

Can you also show us how to do registration and also how a logged in authenticated user can do post requests to create/update notes?

Cheers, bro!

[andersonsimeon]

This is legit the best video I found on this topic. Also, we use the same vscode theme.. lol

[keyxuwr]

I wish I could give likes. This is exactly what I needed

[tobidegnon]

The only reason I see for the first option is that it's probably less request expensive in the case of an app with a huge amount of network requests, with your method you do a check on each request, but with the first option you only receive a bad request now and then when the token is expired

[gowthamtharan]

I think for this use case the custom redux middleware will help when multiple requests are sent at the same time

[zamanEhsani]

Dennis, It was very nice. I have to jump back and refresh my brain on this.
A question; What is the best way, or what is the best place to store and save access tokens and refresh on the client ? localstorage, or session or cookies ?

[Ganapamanoj]

We can separate the interceptor creation code from the useAxios hook definition to avoid creating a new axios instance whenever we call useAxios() from components.

[sarbottamchatterjee]

Forgive me if I am wrong, but shouldnot we check the expiry of the refresh token too before requesting a new access and refresh token? Just in case the user hasn't logged in for more than 90 days, so we simply logout the user.

[aj]

the api should really be in the dependency array of the useeffect, but that would then cause an infinite re-render loop

[Salmanfaris-pgjw]

as access token expires we will create a new one using the middleware right? but if access token expires how we are going to use the refresh token as we will not have the authorization