1 00:00:01,060 --> 00:00:05,440 In this video we're gonna make sure that we take the name of track in all those locations and make a 2 00:00:05,440 --> 00:00:07,300 request to our back end API. 3 00:00:07,300 --> 00:00:12,930 Now as a quick reminder in order to make a request to our API we have to have and grok running. 4 00:00:12,970 --> 00:00:17,470 So right now you should be able to go back to your terminal and see and grok running and he should see 5 00:00:17,470 --> 00:00:18,130 something it says. 6 00:00:18,130 --> 00:00:20,500 Session status online. 7 00:00:20,500 --> 00:00:24,860 If you do not have an grok running anymore or if it is expired as a quick reminder you can start it 8 00:00:24,860 --> 00:00:32,020 back up with and grok HDP three thousand where three thousand right there is the port of your express 9 00:00:32,020 --> 00:00:37,240 API so I've still got my express API running inside of a separate terminal window and it is still running 10 00:00:37,270 --> 00:00:43,800 on port three thousand got to make sure that I run and grok I'm gonna make sure that I take that forwarding 11 00:00:43,830 --> 00:00:50,250 address right there I'm going to copy it and then make sure that I have that same exact address inside 12 00:00:50,250 --> 00:00:56,460 of my API tracker dot J.S. file so rather than that base you are l I'm going to updated with the new 13 00:00:56,460 --> 00:00:59,730 address like so OK. 14 00:00:59,780 --> 00:01:06,620 Now we've got that in there we can start to actually make our request so back inside of my track contexts 15 00:01:07,220 --> 00:01:12,380 at the very top of this file I'm going to make sure that I import that tracker API which is actually 16 00:01:12,380 --> 00:01:14,010 an Acciona instance. 17 00:01:14,440 --> 00:01:23,860 So I'll get tracker API from dot dot slash API tracker like so. 18 00:01:23,960 --> 00:01:24,230 All right. 19 00:01:24,240 --> 00:01:26,920 Now just one very small thing to remember here. 20 00:01:26,940 --> 00:01:33,810 One very small thing remember we set up our back end API to always use a Jason web token to prove that 21 00:01:33,810 --> 00:01:37,440 we are authenticated earlier on INSIDE THIS application. 22 00:01:37,440 --> 00:01:42,420 We went through all that work with our off context to make sure that we could sign a user in using the 23 00:01:42,420 --> 00:01:47,900 sign in route right here or the sign an action function or the sign up action function. 24 00:01:47,920 --> 00:01:54,610 Anytime we got a user signed in we then stored that token inside of async storage. 25 00:01:54,630 --> 00:01:59,970 In addition any time a user started our application backup or ever anytime they ever restarted it we 26 00:01:59,970 --> 00:02:05,630 made sure that we had that other action function called tri local sign it. 27 00:02:05,760 --> 00:02:10,320 So anytime our application starts up we take a look inside of async storage check to see if there's 28 00:02:10,350 --> 00:02:15,090 a token there and if there is we stored inside of our context and that's how we indicate that our user 29 00:02:15,090 --> 00:02:20,370 actually has signed in now the token has two uses inside of here. 30 00:02:20,460 --> 00:02:25,140 It tells us whether or not these are signed in but it's also used to authenticate ourselves with our 31 00:02:25,140 --> 00:02:25,980 back end API. 32 00:02:26,520 --> 00:02:31,230 So if we want to make a request to our API and tried to create a new track we need to make sure that 33 00:02:31,230 --> 00:02:34,630 we include that token to include that token. 34 00:02:34,640 --> 00:02:37,170 There are two distinct ways that we can handle this. 35 00:02:37,370 --> 00:02:41,240 One way is kind of a way of that we could kind of stick in the world of react. 36 00:02:41,300 --> 00:02:47,180 Another way would be a lot easier but we're kind of like going outside of the world of react so to speak. 37 00:02:47,870 --> 00:02:52,740 So let me first get just give you a verbal description of how we would stick in the world of react. 38 00:02:53,720 --> 00:02:53,960 Okay. 39 00:02:53,990 --> 00:02:57,990 So as a quick reminder we've got you save track right here. 40 00:02:57,990 --> 00:03:03,680 Remember that's the hook we just put together so we know that inside of here we can access as many different 41 00:03:03,710 --> 00:03:07,840 context objects as we would like and pull some information out of them. 42 00:03:07,880 --> 00:03:15,590 So if we wanted to we could also import inside of your context as off context from our art context file 43 00:03:16,830 --> 00:03:21,780 we could then extract the current token out of there and then maybe pass it into create track right 44 00:03:21,780 --> 00:03:27,810 here so we could take our token directly in that context throw it into create track and then win create 45 00:03:27,820 --> 00:03:32,190 track goes to make a request we would make sure that we include that token which would authenticate 46 00:03:32,190 --> 00:03:32,480 us. 47 00:03:33,360 --> 00:03:37,380 So that definitely works and that sticks inside of the world of react in other words we are making use 48 00:03:37,380 --> 00:03:40,120 of context and all that kind of good stuff. 49 00:03:40,170 --> 00:03:44,760 However it means that we would end up having a lot of duplicate code because he essentially every single 50 00:03:44,760 --> 00:03:49,050 time that we wanted to call an action function that was intended to make a request we'd have to make 51 00:03:49,050 --> 00:03:54,990 sure that we always pull that token out and then always shoved it into that action function every single 52 00:03:54,990 --> 00:03:58,550 time we created an action function that needed to make a request. 53 00:03:58,770 --> 00:04:00,000 So that definitely works. 54 00:04:00,000 --> 00:04:00,980 Hundred percent valid. 55 00:04:01,020 --> 00:04:05,580 We could definitely do it and maybe we could figure out a way to kind of get a little bit more clever 56 00:04:05,940 --> 00:04:07,110 but without a doubt. 57 00:04:07,110 --> 00:04:13,680 Well it's definitely some extra code to write so instead we're gonna take a little bit more clever way 58 00:04:13,890 --> 00:04:19,050 that's going to essentially just deal with everything for us every time automatically and we're going 59 00:04:19,050 --> 00:04:24,990 to put all this extra stuff together inside of our tracker doc J.S. file where we create our axioms 60 00:04:25,020 --> 00:04:29,530 instance let me give you a little bit of background on axioms. 61 00:04:29,540 --> 00:04:34,490 Remember right here is where we create a pre configured version of axioms if we want to. 62 00:04:34,550 --> 00:04:39,590 We can attach some additional functions to this thing that are going to essentially run before we ever 63 00:04:39,590 --> 00:04:41,150 make a request. 64 00:04:41,150 --> 00:04:45,900 One thing we could do is write a function that's going to be executed before we make a request. 65 00:04:46,070 --> 00:04:49,430 And inside there we can take a look inside of async storage. 66 00:04:49,430 --> 00:04:54,840 We can grab our token that is stored inside of there and then we can appended onto our request. 67 00:04:54,920 --> 00:05:00,530 So essentially we can automatically grab our token out of async storage and throw it onto every request 68 00:05:00,560 --> 00:05:04,760 that we ever make to our API through this axles instance. 69 00:05:04,820 --> 00:05:09,800 So it essentially takes care of everything behind the scenes with no extra information passing from 70 00:05:09,800 --> 00:05:10,550 US required. 71 00:05:11,030 --> 00:05:16,640 So I think that's probably a pretty darn good way to go even though once again we're kind of going outside 72 00:05:16,640 --> 00:05:20,930 the bounds of the normal world of react because we're essentially writing some code inside this like 73 00:05:21,110 --> 00:05:26,310 standalone file that doesn't really have a very good idea about the current state of our application. 74 00:05:26,330 --> 00:05:28,450 Nonetheless I think it is a pretty good solution. 75 00:05:28,490 --> 00:05:29,600 So it's what we're going to use. 76 00:05:30,110 --> 00:05:31,950 So let's get to it. 77 00:05:32,120 --> 00:05:32,350 All right. 78 00:05:32,360 --> 00:05:40,430 So to get started at the top we're going to import async storage from react native as quick reminder. 79 00:05:40,430 --> 00:05:45,440 We spoke earlier on INSIDE THIS COURSE about how async storage from react native is being deprecated 80 00:05:45,470 --> 00:05:47,000 and moved into a separate package. 81 00:05:47,540 --> 00:05:50,050 So if you end up getting an error from that line of code right there. 82 00:05:50,060 --> 00:05:55,190 Remember you're going to use that slightly different async storage package that we spoke about earlier 83 00:05:55,190 --> 00:05:57,230 on INSIDE THIS COURSE. 84 00:05:57,360 --> 00:06:02,250 Next up rather than immediately exporting the Acciona instance we create we're going to instead assign 85 00:06:02,250 --> 00:06:08,890 it to a variable and then down at the bottom of file I'll say export default instance. 86 00:06:08,960 --> 00:06:13,520 So the only reason we assign this to a variable is that we can add on that little bit of extra code 87 00:06:13,730 --> 00:06:19,310 to essentially say hey axis run this function before you ever make a request to do that we're going 88 00:06:19,310 --> 00:06:24,950 to write out instance thought interceptors really challenging work right there. 89 00:06:24,980 --> 00:06:26,240 Triple check your spelling. 90 00:06:26,240 --> 00:06:30,470 Very easy to make a misspelling on dot request Dot. 91 00:06:30,470 --> 00:06:33,980 Use so inside of this. 92 00:06:33,980 --> 00:06:35,050 Use function right here. 93 00:06:35,050 --> 00:06:38,320 We're going to pass in two separate functions. 94 00:06:38,320 --> 00:06:46,250 So I'm gonna put in function one and I'll put in function to so the first function right here is going 95 00:06:46,250 --> 00:06:50,140 to be called automatically anytime that we are about to make a request. 96 00:06:50,180 --> 00:06:54,500 The second function is going to be called automatically anytime that there is an error with us making 97 00:06:54,500 --> 00:06:59,090 that request not necessarily in the response but if there is some issue with making the request from 98 00:06:59,090 --> 00:06:59,780 the get go. 99 00:06:59,870 --> 00:07:02,910 Like maybe we don't have an internet connection or something like that. 100 00:07:03,610 --> 00:07:05,600 We'll take care of the Iraq case first. 101 00:07:05,710 --> 00:07:10,440 Recently not doing anything extra here so we're going to put in a little bit of boilerplate code. 102 00:07:10,600 --> 00:07:16,660 We're gonna say taken at the air object that we get whenever the request fails and we're going to return 103 00:07:17,380 --> 00:07:19,750 promise dot reject air. 104 00:07:19,780 --> 00:07:24,430 Like so so this essentially just says Okay let's take whatever error just occurred. 105 00:07:24,430 --> 00:07:32,320 We're going to return a new promise that is by default rejected and we reject it with that error rate. 106 00:07:32,320 --> 00:07:34,960 Now let's take care of the first function here. 107 00:07:34,960 --> 00:07:38,770 So this function is going to be called automatically every time we make a request. 108 00:07:38,770 --> 00:07:41,810 And the argument to it is a config object. 109 00:07:41,810 --> 00:07:46,420 The config object is going to be very similar to the config object we passed inside of here when we 110 00:07:46,420 --> 00:07:47,840 created our instance. 111 00:07:48,060 --> 00:07:52,980 So the config object has some information about the request we are about to make such as the USL that 112 00:07:52,980 --> 00:07:57,460 we're gonna make the request to the method of the request and any headers attached. 113 00:07:57,460 --> 00:08:03,820 The request as well inside this function if we want to we can modify that config object to essentially 114 00:08:03,820 --> 00:08:05,610 modify the request that we're making. 115 00:08:05,650 --> 00:08:12,130 So in our case we probably want to modify this config object and attach on our token from async storage 116 00:08:12,760 --> 00:08:19,090 into our authorization header so inside of here we're definitely going to call async storage which remember 117 00:08:19,090 --> 00:08:24,160 is an asynchronous operation so I can make sure that I put the async keyword on this function so we 118 00:08:24,160 --> 00:08:30,910 can use the async await syntax inside of here I intend to pull my token out of acing storage so say 119 00:08:30,910 --> 00:08:40,600 counts token is a wait a sink storage get item and remember we save this token under the key of simply 120 00:08:40,690 --> 00:08:46,090 token like some so we can then check to see if we actually have a token. 121 00:08:46,120 --> 00:08:51,370 So if we have a token let's try to throw it inside of one of our headers on our request object so we'll 122 00:08:51,370 --> 00:09:00,670 say config dot headers dot authorization capital a authorization like so now just in case you skipped 123 00:09:00,700 --> 00:09:06,220 the Express API section where we set all this stuff up just you know in order to authorize our us with 124 00:09:06,250 --> 00:09:10,210 our backend server and actually be recognized as some particular user. 125 00:09:10,210 --> 00:09:20,140 All we have to do is add on an authorization header with a value of bearer and then our token like so 126 00:09:20,320 --> 00:09:22,870 that's how we authenticate ourselves with our back end API. 127 00:09:22,870 --> 00:09:26,670 And again we spoke about all this stuff when we went through that express API stuff. 128 00:09:27,980 --> 00:09:32,430 Couple of notes here make sure that you've got a capital A on authorization. 129 00:09:32,460 --> 00:09:36,980 Next up make sure that you've got back ticks around the string because we're using some string interpolation. 130 00:09:37,050 --> 00:09:40,050 Make sure you've got a capital B bearer a space. 131 00:09:40,050 --> 00:09:43,830 Don't forget that space and then dollar sign blah blah blah. 132 00:09:43,830 --> 00:09:46,300 Token. 133 00:09:46,410 --> 00:09:52,840 And then finally we will return our modified config object and that's pretty much it. 134 00:09:52,840 --> 00:09:56,940 So now every single time that we make a request through our axioms instance that we have created. 135 00:09:57,070 --> 00:10:02,410 If we have a token it will be automatically added into our request and we don't have to worry about 136 00:10:02,410 --> 00:10:06,300 doing anything else inside of application to somehow authenticate ourselves. 137 00:10:06,340 --> 00:10:10,310 It just all happens behind the scenes automatically okay. 138 00:10:10,320 --> 00:10:11,550 So it looks pretty good. 139 00:10:11,550 --> 00:10:12,640 This is a long video. 140 00:10:12,690 --> 00:10:13,790 Let's take a quick pause right here. 141 00:10:13,800 --> 00:10:19,080 When we come back the next video will make sure that we test out this change to our API by adding in 142 00:10:19,080 --> 00:10:23,920 some additional code to create track right here inside of track context to actually make a request. 143 00:10:24,060 --> 00:10:26,430 So compilers and I'll see you in just a minute.