Refreshing Tokens With Axios Interceptors

hey what's up everyone so i'm back with another video on authentication with django and react using json web tokens and in this video i want to use axios interceptors to update our refresh tokens so in the last video we built out a full project with django on the back end and react on the front end and we used a different method to update those refresh tokens so what we did is we went through that entire process of configuring everything where we have a login logout functionality and also refresh token functionality but the method we used in that video was to refresh our token periodically every five to 15 minutes and that's how our access token always stayed up to date now there's different ways about doing this or different ways we can go about doing this and the method that i wanted to show you this time was to use axios instead of fetch and we're going to use axios interceptors to actually update this so if you don't know what those interceptors are they're kind of like middleware where we can actually trigger a function before every request and after every request so instead of updating a token periodically what we're going to do is simply fire off a request and before that request is sent we're going to have a function that checks the lifespan of that token if there's something wrong with that token whether it's corrupted or there's maybe an expiration date that's passed on that token we're going to call a request to the back end to use our refresh token to simply update that access token and then we'll let the original request fire off so that way no request ever fails now that's one way of doing things and i've seen a lot of people use the other way where they go on the response cycle so basically a request is made so it's actually look at this picture here so this is how i've seen a lot of people do things they'll send a request if that token is expired they'll get a bad request they'll request a new token then they'll persist on that original request so there'll be a fail in the back end but the user won't really see what's going on unless they're looking through their network tab and that request will look like it just went through and everything was updated kind of in the background now i like this method i think it works and i see a lot of people use it but what i don't understand is why don't we just update the token in the front end so if you see an issue with this let me know i'm actually curious myself i figured we can simply just check the token before it's sent and update it so that way we never even have a failed network call now we're going to use axios on this video but i'm going to follow up with one other video and we're going to basically build our own interceptor around the fetch api so that way because fetch doesn't actually have these interceptors so we're going to make it customized and we can do the same thing with fetch here so let's go ahead and recap where we were at in the last video and then we'll continue so i'll close this out here and this is the axios documentation so i'd highly recommend you go through this i'm going to assume you already know django and react and if you want to go ahead and set up the entire project i would highly recommend you check out the last video but if you don't want to see that we could just go ahead and download the github repo follow the installation guide make sure you have django setup and react and just make sure you can be up to date before you get started here so this is the github repo this will be linked in the video description this is the project at this point so what we have right now is this login and log out functionality the tokens are being stored in local storage i'm going to leave that up to you wherever you want to store that that's not the point of this video and right now if we go to the back end our tokens are expiring every five minutes so we can set this in the settings.py file in our backend file here so in the django project so we can set this to maybe two minutes here i'll update it in a minute and that way we can actually see that request fail and update so this is the back end here we won't go over all the code here we have our api that's all covered in the last video you can check out the source code here so let's see in the backend folder our api is inside of this base folder so let's go to the front end here and we are using the context api to manage state here so that's how we log a user in again that token is being stored inside of local storage we have this auth context so we have the context here we create the context we create this provider we have all of our tokens which we get the token on the initial login we set our user and we also have this loading method so if we log a user in we're using fetch right here to log a user in which we'll update this in a minute then we have our logout functionality i want to make sure i'm not blocking the screen here so i'll move my face over a little bit and we also have this update token method so this is how the user was persisting before so we have this update token method it simply makes a call to this back end or the endpoint which is api forward slash token refresh and this endpoint takes in a refresh token so we would send that right here and that's how we would update it so we'll just send go ahead and update everything update local storage update our state or if that token failed we would log a user out now this update token method was called on the first load so that's how we would make sure that we always have a fresh token and we would also call this periodically every four minutes so we would call set interval and we'll just call this every four minutes but the problem with this method is that we would actually need to know what someone on the back end had set this value to so in settings.py if somebody changed this value to like 10 minutes let's say uh or maybe even a shorter time let's say they updated this to one minute now the person on the front end would have to would have to know about this and then they would have to update that periodic update inside of our context method here so we'll go back to the front end here and inside of auth context we would have to change these values so this is auth context so i'll just scroll through all the way we use the json or jwt decode method we use history to reroute our user so we have login log out update token and we have this use effect and we provide everything here and we're also waiting for loading to be set to false before we render everything out now inside of our components we have a header component it uses the auth context to render out the username we have these or this functionality to log a user out or log a user in and render the username so we'll go down to pages here so we also have a private route so this is actually how we're making sure that only logged in users can view certain pages we created a priver out which looks at the user object from alt context and if the user is logged in we make sure they can continue if they're not we'll redirect them to the login page so that's our private route now inside of pages we have a home page here and the home page simply calls get notes this is the user's notes we use the user's auth token we make a request here to this endpoint and that this is where we send that access token so this is how we have permission to get that user if something goes wrong we log a user out when everything's updated we set the notes here and we rendered this out now the login page is a simple form here there's different ways you can log a user in at this point we're not having any state here there's one method where you can actually set the password and username in the state we're not going to worry about that because that's not the purpose of the video i would recommend using that method all we're doing is getting these values in auth context from our event here so when our users log in logged in we take the e.target.username and the password value and we submit that okay so i just want to make sure you're caught up on everything inside of app.js we have our provider we wrap that around all the items that we want these that we want that data in we have our standard route using react router dom and our private route so let's go ahead and start customizing it from here so what i want to do is actually go into our auth context this is where we're going to get started so we'll go into our auth context here so that's inside of context auth context.js and the first thing i'm going to do here is actually get rid of our set interval method here so we don't need this update token method anymore so i'm just going to go ahead and comment that out let's just do that so we don't actually get rid of it that way you can look through it if you want to see the original method even though the code is available let's close that out there so i comment this out and i also want to get rid of this method here so we'll go ahead and remove all of this we'll get rid of this interval here so we'll remove that and now use effect is cleared out so inside of use effect all i want to do is check if we have an auth token once that token is ready then we'll go ahead and set loading to false and we'll let everything else proceed here so we'll just go ahead and set off tokens which is the state here inside of our auth provider we get the tokens and down here we can go ahead and just set that so we're going to go ahead and check if there's any tokens if there is just in case we're going to use jwt dot decode so jwt decode and i believe that's how i have it imported and what this is going to do is simply decode my token we talked about this in the last video it's going to take that token and it'll actually get the value so things like our username the user's id and so on so we'll use jwtd code we'll do auth tokens dot axis we'll set that value and we'll just go ahead and call set user and we'll just wrap that so we'll make sure that a user on the first load is set and everything's good to go and we'll just do set loading to false and then that's going to allow everything else just to continue so we'll save all of this and let's go ahead and make a few installs here so we'll go ahead and open up a new terminal make sure you are cd into the front-end folder depending on how you downloaded that from the github repo so we'll just do cd front end and let's just clear that and we'll just do npm install axios this is one of the reasons why i don't like axios it's not a big issue but i don't like installing something separate but it does have some cool features so that's why i really want to show this with fetch because that's my personal preference so we'll install axios and we'll also install day js here so we'll just do npm install day js and it's another alternative to moment.js so basically it allows us to take like a timestamp and this is what we're going to use to actually compare the timestamp of our token when it's decoded to the current time that we're at so it's going to take a snapshot of where we're at and the expiration date and it's going to see if we're over that so i'm going to make sure my server is still on that's already imported so i still have my back end and front-end servers on make sure those are on and let's continue from here so once those are set up what i'm going to do is actually create my own instance of axios so that way i can add those interceptors only in a single instance and i can use axios on its own if you're not familiar with what that is i highly recommend going through this documentation and looking this up so there's the axios instances so if you go to axios right here there's axios instance basically you can use axios on its own you can use something like axios.post.get and get those methods or use those those methods or you could create an axios instance in this case we create an instance and then we can add an interceptor to that specific instance for private routes or whatever we want to do so i'll just leave that documentation open for now and let's just go ahead and continue here so we'll set this up here and for this instance i'm going to add this to my utils.py file so basically my utility functions and let's see i want to call this axios instance so we'll use this instance to make those requests to the private routes instead of just using axios on its own so let's go ahead and set this up so now that we have axios imported i want to go ahead and set this or actually make those imports and then continue with this so we'll import axios from axios and i use a shortcut i talked about this in the last video it's called react code snippets i believe or rx7 code snippets i forgot the name i talk about this but basically i can type in imp and it's going to give me that shortcut so let me just pull that up because a lot of people ask me about that it's react or r x7 i believe if i can remember that or es7 code snippets that's what it was so ex7 or es7 code snippets so this is the package for this so that's all making those imports here sorry about the little side tangent so we'll also go ahead and go into auth context and i want to install or get this jwt decode method so we'll get that going and we'll also import day js so import day js and then that's coming from day gs okay so just a little prep work here and i also want to set a base url so we'll just set this value we're going to call this base url and this will just be port 8000 here so we're just going to go ahead and open up poor 8000 this is the endpoints don't worry about this error it's not broken my endpoints go into api like that and this is where we have those endpoints so i'm going to take this value and we'll just go ahead and set this as the base url here so i'm actually going to take that part out so i actually want to type in the api forward slash and whatever that route was so the first thing i want to do is get my token so this is going to be inside of that axios request on every request i want to make sure i have the latest token so i'm just going to take this value right here and i'll recap what's going on here and i'm going a little bit faster because this was all covered in the last video which will be linked up in the video description so we'll set this value of auth tokens and this will be set to local storage so the first thing is we're going to check if we have anything inside of local storage so it's going into sorry about that jumping around it keeps changing for me so we first check if we have a token if we have a token we're going to use json.parse and we're going into local storage and we're getting that token and we're just going to parse it so we're getting that token because it's a string value inside of local storage if we don't have one then auth tokens is going to be null so we just check that value now what i want to do is go ahead and just create an axios instance so we'll set const we'll call this axios instance so we'll set this value this will be set to axios dot create so we're creating our own instance here and we're just going to go ahead and pass in some data here so what i want to do here is first set the base url so we're just going to do base url we'll set that value we don't need a key value pair if we just set it directly like this and i also want to make sure that every single request has a token attached to it inside of the headers so let's go ahead and set the headers object so we'll do headers and we'll just go ahead and set authorization so we'll do authorization that's with a capital a so let's set that value we want to go ahead and make this a key value pair we'll use the backtick so template literals and in the back end i set this as bearer we did this in the last video that was actually the default so it's an access token we'll create some space here and we'll just go ahead and pass in a variable and we'll get this auth token right here and we want to get the access token so all we did was create an instance and we just set some pre-configured information here on every single request so in this case this is going to be a request to a private route so we always have a token it doesn't mean we always have to send this but this is an option so i'm going to use this for those private routes so before we add in our interceptors this is all i wanted to do i wanted to configure this i want to use it show you how to use that just in case you're newer to axios and then we'll add in those interceptors so let's go to our home page this is where we're actually using this so we'll go to the home page here and i want to make this import so we'll just go ahead and import this this is from our utils file so it's two folders back or one folder back from pages it's inside of utils and we're just gonna get the axios instance so we'll just do utils we'll go into axios instance and we'll just bring this in so that'll be the import and we just want to change this request right here so at this point we have yet notes and we're using fetch here so we're going to go ahead and comment all of this out and i'll remove it in a second we'll go ahead and set the response to a weight and we're going to use axios instance and we can pass in the method so this will be a get method and we set the base url to poor 8000 so now all i need to do is take this part of that request right here passing the quotes and we'll just do forward slash api forward slash notes so this will make that request so we just need to change that right there fix it and then we'll get our response so inside of response it's a little bit different from fetch we don't need to parse that so we can remove data and in this case with the response we actually have a value called response.data so that will give us that data right there so we'll get the response data i'm not sure what the status text looks like so we'll actually comment that out and where we'll actually console that out and make sure that it's also unauthorized or if it's different we'll fix that because we also want to log a user out if this request fails you know what actually at this point we don't need to do this so i can actually get rid of that because this is going to be inside of this request and it can all be added inside of that call right there so let's save that let's also get rid of all of this right here and let's take a look at what we have right now so at this point we're using the axios instance and we're making the api call from this right here so we're actually going to run into a little issue here and i want to show it to you before you actually run into that at this point if i refresh it it looks like the call is working and everything checks out so if i actually go to inspect element what's happening here is on the first load of our website if we go in here we have our token right here so on initialization this call right here inside of axios instance right here gets loaded right here and we have a token now if i happen to log out and manually refresh it we don't have a token right now so we actually run into this first issue and that's because access right here actually does not exist so let's throw in a question mark right there so we'll make sure it doesn't throw an error on this point so we'll save that right there if i refresh it everything looks good so we have no token but if i log in we have our token right here but this never actually gets updated right here so all token never gets updated so we try to make this call and then that call fails and if you look at the console it tells us right here and we don't see our notes so this is where i actually want to use interceptors to start with and actually make sure that this gets fixed so if we go into this website axios.http.com let's check out the interceptors right here we'll go back here and i just want to find those where are they hiding okay interceptors okay so here are the interceptors we can use a interceptor on the request so this actually lets us do something before that request processes and then the interceptor on the response so let's go ahead and actually create the interceptor on request and what i want to do here before i continue with anything is i want to refresh this token right here now this isn't going to be the way that i'm going to do this long term because i actually want to create my own react hook but i'm trying to get the point across and then we'll update it so we'll go down here after our axios instance right here so after this method and let's go ahead and actually create the interceptor so we can go into axios.interceptors.request and then we'll throw in use but in this case we want to add the interceptor only to this instance of axios we don't want to add it to the global object so let's go ahead and set this so we'll do axios instance dot interceptors dot request so that means we're adding it to the request so it's going to get called before the request is made we'll create an async function right here we'll go ahead and get the request object and we'll finish up the function here so after the request is made we want to go ahead and return the function so we'll just do return and we'll return the quest that request so let's quickly just console something out so we'll just say console.log and we'll say interceptor ran don't worry about the spelling if it's misspelled we're not gonna worry about that i guess i'll just copy and paste that so the interceptor ran so we're still gonna get a fail but at this point let's go ahead and look at this so we see that the interceptor ran if i log in we're still going to get the errors the air went away because i manually refreshed it and then got that token but at this point we see the interceptor ran before that call was made so this is where we can update it so before it finishes that request we want to update this so what i want to do is actually get this auth token variable we'll take this entire thing and again this isn't the most efficient way i don't want to check local storage on every request but let's just go ahead and update this so we'll get rid of let right here and before that request is made we want to get the tokens right here and let's go ahead and actually generate actually at this point we could just set our header so we'll go into request and we'll go into dot headers dot authorization and we'll just update it i think this way will work right here we'll just take the bear token and we'll set that so we'll just go ahead and take this value right here and let's just set it so let's just paste that in right here and i need to set the equals symbol okay so on request just in case if we don't have it we're going to go ahead and get that value in fact i can even just do if all tokens doesn't exist so if not auth tokens let's go ahead and call this okay so that's going to be the first check and we're going to see how this interceptor is going to run and how it's going to fix it so if i go ahead and log out we'll refresh it we'll make sure that we have no token right here there's no token if i log in the interceptor runs it updates that on the request and then it sends it so what i want to do now is actually check the token expiration here so at this point all we're doing is just making sure that we have a token somewhere in there but the token will expire at some point the access token and the refresh token both of those so let's go ahead and actually go into the back end and what i want to do is set this expiration to five seconds or maybe we'll just do two seconds we'll just make sure it happens quick or three seconds so we'll save that and we're gonna generate a new token that's about to fail so let's go ahead and actually check this out so we'll log out we're going to get ourselves a new token that expires really fast we'll make sure we refresh it let's go ahead and load it we'll wait one two three and let's try to refresh that so what's happening here is the access token was updated but now that we sent it that token is expired and it's failing this call so this is what we want to fix so we'll go back in here we'll close out settings.py for now and inside of axios instance i can close out the home page let's go ahead and check this out so we're going to use j or day js and jwt decode to get the token and then we're simply going to decode it we're going to get the expiration time and we're going to compare it to our current timestamp so if i actually go into one of these tokens let's get this access token we'll scroll all the way to the right here and let's just pull up jwt.io so if i decode this token this is how i can actually do it manually so that's what jwt decode will do for me if i paste that token in here inside of the encoded token it's going to decode it i have all this information about it and i have this expiration time so when you're comparing it make sure you know what this value is decode one of your tokens and see this unix timestamp so this is what we're going to compare against so we'll go back in here and we'll continue from this point on so down here let's first get our user so we'll just do const user and that's going to be set to jwt decode that's how i imported it and we're just going to throw in the token so we'll just do auth tokens dot access so we're just going to decode that access token and now we want to set a value called is expired so is expired is going to use day js here and what we're going to do is simply throw in the expiration date against today's date so we'll throw in day.js we'll do unix don't worry about the details i'll recommend looking up djs documentation they have all these different values all i'm going to do is basically run a comparison with a greater symbol too or a greater symbol that's gonna basically set this value to where if we're over the value of one that means the token is over a certain number so we're just running a calculation djs will take care of this so we're taking day.js not days and we're just going to go ahead and set unix and we're going to throw in the expiration date so we'll do user.expiration that's exp that's what it looked like in the decoded token and then we have this value called diff so this is going to give us the difference here and the difference here we want to value this or we want to check this against the current day so we're throwing in the current day against the expiration date and if this value is greater than 1 this value is going to be set to true so that means we are expired so after this we want to go ahead and check a condition we'll just do if not is expired then let's go ahead and return the original request so let's try this so i'll just console this out we'll check this make sure it's working sorry about my explanation today.js look up the documentation this is one of the ways that i found to ran this here or to run this so we'll throw this in we'll just do is expired throw in the string value and let's check this out so the token's gonna expire pretty quick so we'll log out really quick we'll log in check the console let's refresh everything we'll login is expired is false we'll wait one two three and now the token should be expired we set it to three seconds now is expired is true so is if if is expired is true then we want to continue so if it's not true if it's false we stop right here we don't run anything else we return this request if this is true if our token is expired what we want to do is make a request we'll just do a response and we're going to set this value to a weight and we're not going to use the axios instance because this would actually throw us into an infinite loop we want to use the global axios object so we're going to do await axios.post we're sending a post request and at this point if you follow the last tutorial you know our endpoint is the base url so we need to throw in the dollar symbol we'll do base url and then we're just going to go ahead and throw in forward slash api forward slash token forward slash refresh so we need to send a refresh token to this value and we'll get back a new access and a new refresh token so now we want to send in some parameters here and in here we'll just do a refresh so that's how we have to send that value and we'll just get the auth tokens and we'll just throw in refresh now there are other error handling methods that we might need to need to throw in here depending on what you have in your application but that's going to be completely dependent up to you whether you have a different style of tokens or what you want to do with that that's completely up to you at this point we're just going to handle the basic fails of a token not existing and expiring so we're getting a new token so we send that call right here we go to our port 8000 api for slash token refresh we send a refresh token so the key and then the value and what we want to do is get back this response so we'll just do local storage dot set item and we're just going to go ahead and set auth tokens so that was the value that we set originally on the website and then we're just going to go ahead and do json.stringify so it's a key value pair we need to stringify that token and at this point we're just gonna do response dot data dot let's see so i guess we could just do response.data so once this is set let's go ahead and just get these request headers again we'll take this and we're just going to go ahead and update the headers with a new token before it continues so we'll recap what happened in a second so let's go ahead and get the response dot data dot access and that's what we're going to set to the headers so just make sure that you don't get these mixed up so this one's getting it from all tokens and this one's getting it from access so let's recap this again so we check if we have a token just in case if we don't we quickly try to get it from local storage and we add it to the headers then we get the user we check if that user token is expired if that token is not expired we continue with the request and everything's fine if that token is expired however we get a new token with our refresh token we take that refresh token we send that to the back end once we get the new tokens we update it so we get a new refresh token and a new access token we update the headers with the newest token to ensure they're not expired and then we return the request so let's go ahead and refresh this and let's check this out so if i go into the console here if i refresh it it looks like after even after it expires we're still doing good here so we'll wait one two three we'll refresh that and that looks like it's working so let's actually check this out so let's open up our terminal and let's look into the back end so this is the django server and you can see where we're getting get request and post request so if i actually just open up this website and keep refreshing it we're gonna see a get request get request and then after three seconds you're gonna see that post request appear right here so that means we never update our token until it expires so we'll wait for the post request and then we'll count one two three and then you see a post request and there we go so that's all we needed to do now we do have a few issues we want to fix here so at this point we're using react here and it's going to change depending on what framework or what you're using in the front end but we're just creating our own axios instance and we kind of run into this issue so we were able to fix this with this request right here we just check if we need to update it and then we just go ahead and update that but the problem here is once this token is expired i also want to update my state everything that's inside of the context whether i'm using the context api or redux it's going to change depending on what's going on and there is actually no way to update our state from here so we want to go ahead and use our own custom react hook we're going to create one and then inside of the react hook we're going to do pretty much the same exact thing here but in that case we're actually going to be able to get the context api kind of like what we do inside of our home component so let's go back here we'll go into components let's just check the header so you see how we can use the context and then we can actually get this information well we want to be able to get that information and then actually update it so it's going to make our code a little bit cleaner at least the react way so let's go ahead and fix this so i'm actually going to leave axios instance for you i just want to make sure you can see both versions of both versions of this just in case depending on what you're trying to do and inside of utils let's create a new file here so we'll just call this use and then we'll just do axios so with react with react hooks they're just functions but the method here is to always use the keyword use that makes it a react hook if you don't use the word use that won't work so let's just set up a few things here so we're just going to make some imports so we want to take in jwt decode we also want to import axio so let's do that we'll import axios from axios we also want day js i guess i could just copy all of this and let's go ahead and actually import the auth context here too so we'll just go ahead and import from react so we'll do a destructured import from react and we'll just do use context so literally the only thing that's going to be different here is the fact that we can update the state and this is going to be hooked so we'll do use context here and let's go ahead and set our base url so i'm actually going to copy a lot of stuff here so we'll close out the context file just to not confuse things here and i really hope my face didn't cover up what i was doing earlier i'll try to rewatch the video and see i just realized that my code is getting awfully close to this area okay so we'll take the base url let's go ahead and paste that in right here let's create our hook so for our hook we'll just do const and we're going to call this use axios so it has to start with that keyword we'll create the arrow function and let's go ahead and return axios instance okay so we're going to create all this in a second and then we also want to export default so we'll do export default and we're going to export use axios okay so we have all this ready we have our hook here and let's start building this out so inside of use axios i want to get my context or the data so we'll just do const and we'll go into the context api i want to get tokens and then i want to get set user so we want to update the user once everything is updated and we'll do set auth tokens okay so this is all coming from the context api right here so we're just getting these values that are exported right here through context data that go into our providers that's what we're working with so we're getting that information and we're getting those values and we'll just do use context and we want to use the auth context so we'll do auth context and that should auto import i'm surprised it's not doing that so let's go ahead and bring that in so we'll just import auth context so we'll go into context forward slash auth context not sure why it didn't import it looks like it should have but we have used context we get these values from it once we set this up let's go ahead and actually go into axios instance let's take this value so now we'll take axios instance we'll bring that in right before the return method so we'll take axios instance and let's go ahead and actually set the headers here so how are we setting these so at this point we got the auth tokens from local storage here we can just go ahead and get that from all tokens here so we don't need to get our local storage so that's one advantage here we just got the context and we can set that value right there so we set our headers and let's go ahead and throw in our interceptors so i'm just going to paste in this entire interceptor and we're just going to customize a few things here so this is going to be after axios instance so go ahead and put that underneath it and at this point we don't need to check our auth tokens so let's go ahead and just get rid of all of that so that's going to be from our local storage so we don't need to check that then if we go down here we have our user so we're going to check if the user is expired we get the request everything looks good here local storage the only difference here is just going to be that after we set local storage we also want to update our context api so we want to use set user so let's go ahead and throw this in here so we'll do set user we'll throw in response data that's going to be our user and let's go ahead and actually that's going to be set off tokens so set off tokens i thought that looked weird and then we want to go ahead and set the user so the user is going to be jwt decode and we're going to do response dot data dot access okay so that should be it this is our custom hook let's repeat it so we imported use context we went ahead and imported we don't need that inside of use axios i don't know what that imported we imported the context itself we set the base url we created our hook our function we exported it and then we did the same exact thing except for at this point we get our state we set the value of our token from the state now and all we do different here is we remove that first check and we updated the state once this is done so now we want to go ahead and actually use this so let's go ahead and go back to the home page and now we want to use the hook instead of the axios instance so pages home pages let's go ahead and import this so i don't need axios instance anymore so we'll just import here let's actually do this let's just take use axios from right here let's just change this value because it's from the same file path we're importing use axios here and then down here we're just going to do let's see we'll set this value to let and we're just going to call this api and we're going to call the use axios method so let's just call it like that we're going to take this method and then all we need to do is change this to api not axios so api we're just calling the get method and that should be good so let's check this out let's see if it still works looks like we have a few errors let's try to refresh this and let's see set all tokens is not a function let's check this out so inside of use axios we have set auth tokens let's go into the context api and it looks like i never exported this so we have set all tokens it is a function it's a hook and we just want to bring that in right here so we'll do set all tokens add in the comma all right it's partially working we're almost there so use axios set user is also not a function okay so i'm just missing a few imports set user all right so let's take a look at this and now it's looking good so if we log out we can log back in let's log out and try doing a hard refresh log back in and there we go so the beauty of this is now the fact that we're using a hook the state is now being updated so that's it for this video uh in the next video i don't know if it's gonna be the next one but what i want to do is actually do the same thing now with the fetch api because that's actually the one i really like to use it's more native to javascript whereas axios is more of a third party package or it is a third-party package so i just want to try to create like a wrapper around the fetch api to where we create our own interceptor kind of like what axios already has built into it so wait for that video it should be coming soon i already have the prototype ready i just need to find some time to film it

Channel: Dennis Ivy

Views: 5,910

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov

Id: 16-1mTdGBoM

Length: 39min 54sec (2394 seconds)

Published: Tue Oct 19 2021