With our axis instance configured we can go back over to our auto and text file and start to implement
those different action functions.
So I'm gonna go back to.
Off context.
J.S. at the top I will import the tracker API or the axles instance so we just created from that tracker
dot J J.S. file so I gonna call it tracker API inside of here and I'll import that from up one directory
API tracker case.
Now we can go down to our sign up action right here and we already put down a couple of notes or comments
inside of here to guide us in what we want to do inside of here.
I'm going to delete these comments just to make the code I write a little bit more clear.
I put together kind of a expanded version of what we want to do inside of your inside of a quick diagram.
So let's go through that diagram really quickly even though we already discussed exactly what we want
to do.
OK.
So inside there we're going to make our request to sign up.
So that's going to be a post request to our API.
If that request is not successful.
So if we fall in the case over here then we probably want to show an error message to the user to do
so.
We're going to dispatch an action that's going to update our state object or our state value inside
of our reducer and we're going to make sure that we reflect an error message inside of there.
Then inside of our sign up component or the sign up screen we can take that updated piece of state that
air property and we'll attempt to show it as an error to the user on the screen so that they know that
something went wrong during the sign up process.
If everything goes correctly then remember we engineered our API whenever we sign up successfully to
return a Jason web token.
If you skipped all that express API set up stuff in those optional videos all you need to understand
is that this Jason web token is essentially a string of characters that proves that we are signed in
with our API.
The first thing we're going to do after that is make sure that we take that Jason web token and store
it on the device so that even if a user restarts our application when the applicant's application starts
back up we can look at some storage we can pull the token out and say OK we've got a token here our
user must be signed in after that we're then going to dispatch an action to put that token in our state
object and we're going to use the presence of that token as proof that we are signed in or not.
Remember previously I'd said with our default state value right here that we going to have an is signed
in flag but I said hey that's going to be temporary.
So having something like is signed in is not super useful.
Instead if we just store the token on this object right here or on our state object the presence of
a Jason web token essentially means hey we have successfully signed in so we can use the existence of
a token inside of our state object as proof that we are signed in then finally after that we're gonna
make sure that we navigate our user over to the main flow inside of our application.
So that's the general idea that's if we're going to go through.
So let's start writing out some code to make it all happen guess we'll find my sign up action.
Here it is right here inside there I'm going to first set up a tri catch statement like so that inside
of our tri we're gonna make our actual request.
So I gonna say constant response is going to be a weight tracker API dot post because remember we want
to make a post request and we're gonna send that off to our sign up route and along with our sign up
we're going to send along some amount of data that's going to be the email and password that is being
passed into our action function so I'll pass along email and password like so it's now if everything
goes correctly we'll immediately get our response and we can extract our token out of there for right
now let's just add in a quick console log of a response dot data to make sure that we get that token
back alternately if something goes incorrectly.
Well we're going to fall into the catch case right here.
So right now once again we'll just do a console log and see what the error message is.
So I'll do air dot message.
Like so.
Let's save this.
Now last thing we have to do before we can test this out is make sure that we wire up are off context
inside of our sign up screen.
And whenever user presses that sign up button we want to make sure that we run this function right here
in passing our email and password so back inside my sign up screen at the very top.
Remember what we have to do to get access to those action functions or any time you want to access anything
coming from a context object to get access to that information.
We're going to first import the use context took from react and we're also going to import our context
object from the context file in this case off context.
So we're gonna go up one directory context of context.
Remember just like we mentioned around the provider inside of our app dot J.S. file where eventually
probably gonna have multiple different contexts variables inside of some different files inside this
project.
So right away I'm going to rename that variable just in case I ever import some other context object
inside of here.
So I will rename it to context as off context like so.
So now inside of our component we can d structure out our state object and sign up.
That's our action function.
We just defined from use context with off context like so.
So now that sign up function as soon as we call it with an object that has our email and password provided
by the user that's going to initiate our request to sign up with our API so down inside of our button
element right here we'll add on our on press callback so whenever user presses that thing we want to
call sign up and we want to pass in the current email and password pieces of state remember email and
password are the two pieces of state that we set up right here okay.
So that should be it.
Now at present remember we just have some console logs that are going to verify that we either sign
up successfully or not.
So let's just try to sign up successfully right now and then take a look at our terminal and see what
kind of console logs we get going to save this file I'll then go back over to my application.
It looks like I've got a little typo somewhere.
I've got to put the await keyword on there.
My mistake.
So back inside of off context here's our function.
I use the awake keyword right there.
I need to make sure there's Mark that function as async.
It's funny because when you're writing this code I was thinking to myself Oh yeah.
Don't forget to put async on there but clearly I just totally forgot.
Yes.
Now I can refresh here's our application.
So now we can enter in an email and password.
So for this first test I'm gonna put in a email and password that do not exist on my back end.
Guess I'm going to put in a completely new email that I've never used before.
So inside of here I'll put in something like test 10 at test dot com and I'll put in some random password
in this case is just can be simply password and I'll try to sign up.
So nothing really happens here so I'm gonna go check my terminal and see what happened.
So back inside my terminal.
Here we go.
So I've got a response right here.
That's the response I got back from my API so it's an object.
It has a token property and right there is my Jason Webb token.
Again this information right here is what is going to prove that I am authenticated with the API.
So I need to include that Jason Webb token with any follow up request that I make through axioms.
OK.
So that looks pretty good.
So let's now try to get an error to get an error with our API or we have to do is attempt to sign up
once again with the same email.
Remember every email sign up inside of our application has to be unique.
So if we tried to sign up once again with these same email it should result in an error.
So I'm going to hit sign up once again go back over and I see it request failed with status code for
twenty two.
Well if you recall from our API I can flip back over to that code Ed really quickly for our API
right here whenever we tried to sign up here's auth roots.
Let's find our sign up root handler here it is right here.
So we had said that if a user ever tries to sign up with an existing email that's going to be throw
an error when we try to save the user.
And so fall into this case right here.
So we get a error status for twenty two and that's definitely the four twenty two that we just saw in
our console to actually see the real error message that gets sent back.
We could alternatively back inside of our sign up action file right here rather than doing a console
log of error message off the top of my head I think we can do like air dot data.
I want to say no.
Eric response dot data.
Let's try that out.
And then if we go back over and try to sign up with the same email once again
and then go back to our terminal there we go.
So now that's the error that we got from our API the one that essentially tells us that this email is
already in use.
So remember we had said we were putting together the API that this error message is not really user
friendly.
So maybe we don't want to use exactly that error message right there but at least we can verify that.
Yeah we are in contact with our API.
We can sign up and if we try to sign up with some invalid information we get some appropriate error
message back.
So this is definitely a good step forward.
So now that we are getting our response here the last thing I have to do is kind of implement the rest
of these two flows.
So we need to if we sign up successfully we need to take that Jason web token and stored on the device.
We need to dispatch our action navigate in if something went wrong.
We need to show some kind of error message.
So let's take care of these two branches in the next video.