In this video we're gonna make sure that we take the name of track in all those locations and make a
request to our back end API.
Now as a quick reminder in order to make a request to our API we have to have and grok running.
So right now you should be able to go back to your terminal and see and grok running and he should see
something it says.
Session status online.
If you do not have an grok running anymore or if it is expired as a quick reminder you can start it
back up with and grok HDP three thousand where three thousand right there is the port of your express
API so I've still got my express API running inside of a separate terminal window and it is still running
on port three thousand got to make sure that I run and grok I'm gonna make sure that I take that forwarding
address right there I'm going to copy it and then make sure that I have that same exact address inside
of my API tracker dot J.S. file so rather than that base you are l I'm going to updated with the new
address like so OK.
Now we've got that in there we can start to actually make our request so back inside of my track contexts
at the very top of this file I'm going to make sure that I import that tracker API which is actually
an Acciona instance.
So I'll get tracker API from dot dot slash API tracker like so.
All right.
Now just one very small thing to remember here.
One very small thing remember we set up our back end API to always use a Jason web token to prove that
we are authenticated earlier on INSIDE THIS application.
We went through all that work with our off context to make sure that we could sign a user in using the
sign in route right here or the sign an action function or the sign up action function.
Anytime we got a user signed in we then stored that token inside of async storage.
In addition any time a user started our application backup or ever anytime they ever restarted it we
made sure that we had that other action function called tri local sign it.
So anytime our application starts up we take a look inside of async storage check to see if there's
a token there and if there is we stored inside of our context and that's how we indicate that our user
actually has signed in now the token has two uses inside of here.
It tells us whether or not these are signed in but it's also used to authenticate ourselves with our
back end API.
So if we want to make a request to our API and tried to create a new track we need to make sure that
we include that token to include that token.
There are two distinct ways that we can handle this.
One way is kind of a way of that we could kind of stick in the world of react.
Another way would be a lot easier but we're kind of like going outside of the world of react so to speak.
So let me first get just give you a verbal description of how we would stick in the world of react.
Okay.
So as a quick reminder we've got you save track right here.
Remember that's the hook we just put together so we know that inside of here we can access as many different
context objects as we would like and pull some information out of them.
So if we wanted to we could also import inside of your context as off context from our art context file
we could then extract the current token out of there and then maybe pass it into create track right
here so we could take our token directly in that context throw it into create track and then win create
track goes to make a request we would make sure that we include that token which would authenticate
us.
So that definitely works and that sticks inside of the world of react in other words we are making use
of context and all that kind of good stuff.
However it means that we would end up having a lot of duplicate code because he essentially every single
time that we wanted to call an action function that was intended to make a request we'd have to make
sure that we always pull that token out and then always shoved it into that action function every single
time we created an action function that needed to make a request.
So that definitely works.
Hundred percent valid.
We could definitely do it and maybe we could figure out a way to kind of get a little bit more clever
but without a doubt.
Well it's definitely some extra code to write so instead we're gonna take a little bit more clever way
that's going to essentially just deal with everything for us every time automatically and we're going
to put all this extra stuff together inside of our tracker doc J.S. file where we create our axioms
instance let me give you a little bit of background on axioms.
Remember right here is where we create a pre configured version of axioms if we want to.
We can attach some additional functions to this thing that are going to essentially run before we ever
make a request.
One thing we could do is write a function that's going to be executed before we make a request.
And inside there we can take a look inside of async storage.
We can grab our token that is stored inside of there and then we can appended onto our request.
So essentially we can automatically grab our token out of async storage and throw it onto every request
that we ever make to our API through this axles instance.
So it essentially takes care of everything behind the scenes with no extra information passing from
US required.
So I think that's probably a pretty darn good way to go even though once again we're kind of going outside
the bounds of the normal world of react because we're essentially writing some code inside this like
standalone file that doesn't really have a very good idea about the current state of our application.
Nonetheless I think it is a pretty good solution.
So it's what we're going to use.
So let's get to it.
All right.
So to get started at the top we're going to import async storage from react native as quick reminder.
We spoke earlier on INSIDE THIS COURSE about how async storage from react native is being deprecated
and moved into a separate package.
So if you end up getting an error from that line of code right there.
Remember you're going to use that slightly different async storage package that we spoke about earlier
on INSIDE THIS COURSE.
Next up rather than immediately exporting the Acciona instance we create we're going to instead assign
it to a variable and then down at the bottom of file I'll say export default instance.
So the only reason we assign this to a variable is that we can add on that little bit of extra code
to essentially say hey axis run this function before you ever make a request to do that we're going
to write out instance thought interceptors really challenging work right there.
Triple check your spelling.
Very easy to make a misspelling on dot request Dot.
Use so inside of this.
Use function right here.
We're going to pass in two separate functions.
So I'm gonna put in function one and I'll put in function to so the first function right here is going
to be called automatically anytime that we are about to make a request.
The second function is going to be called automatically anytime that there is an error with us making
that request not necessarily in the response but if there is some issue with making the request from
the get go.
Like maybe we don't have an internet connection or something like that.
We'll take care of the Iraq case first.
Recently not doing anything extra here so we're going to put in a little bit of boilerplate code.
We're gonna say taken at the air object that we get whenever the request fails and we're going to return
promise dot reject air.
Like so so this essentially just says Okay let's take whatever error just occurred.
We're going to return a new promise that is by default rejected and we reject it with that error rate.
Now let's take care of the first function here.
So this function is going to be called automatically every time we make a request.
And the argument to it is a config object.
The config object is going to be very similar to the config object we passed inside of here when we
created our instance.
So the config object has some information about the request we are about to make such as the USL that
we're gonna make the request to the method of the request and any headers attached.
The request as well inside this function if we want to we can modify that config object to essentially
modify the request that we're making.
So in our case we probably want to modify this config object and attach on our token from async storage
into our authorization header so inside of here we're definitely going to call async storage which remember
is an asynchronous operation so I can make sure that I put the async keyword on this function so we
can use the async await syntax inside of here I intend to pull my token out of acing storage so say
counts token is a wait a sink storage get item and remember we save this token under the key of simply
token like some so we can then check to see if we actually have a token.
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
say config dot headers dot authorization capital a authorization like so now just in case you skipped
the Express API section where we set all this stuff up just you know in order to authorize our us with
our backend server and actually be recognized as some particular user.
All we have to do is add on an authorization header with a value of bearer and then our token like so
that's how we authenticate ourselves with our back end API.
And again we spoke about all this stuff when we went through that express API stuff.
Couple of notes here make sure that you've got a capital A on authorization.
Next up make sure that you've got back ticks around the string because we're using some string interpolation.
Make sure you've got a capital B bearer a space.
Don't forget that space and then dollar sign blah blah blah.
Token.
And then finally we will return our modified config object and that's pretty much it.
So now every single time that we make a request through our axioms instance that we have created.
If we have a token it will be automatically added into our request and we don't have to worry about
doing anything else inside of application to somehow authenticate ourselves.
It just all happens behind the scenes automatically okay.
So it looks pretty good.
This is a long video.
Let's take a quick pause right here.
When we come back the next video will make sure that we test out this change to our API by adding in
some additional code to create track right here inside of track context to actually make a request.
So compilers and I'll see you in just a minute.