With our user context initial setup complete now we can set up our state values as well as the function.
More specifically we're going to have user logging.
So we're gonna set up a log and functionality as well as logo.
So we're gonna have a link where we click on user log out function and then of course we'll just log
out our function.
Now we're going to start by setting up our user.
Again we're gonna use or use state.
So we're gonna go with cost then we're gonna go with user of course we're destruction that from the
array set user and that is gonna be equal to react use state.
And then as initial value for the time being I'm gonna pass in the object and that object is gonna have
to values user name just gonna be equal to no.
And then also a token that is also gonna be initially equal to know we're gonna say that.
And now let's set up our functions.
So like I said we're gonna have two functions one for logging in and the other one for logging out and
I'm gonna name my functions user log in and user log on but again feel free to name your functions.
However you would please.
So I'm gonna go with const user log in and then this function is gonna get an object a user object I'm
probably a million dollar question is Well where are we gonna get that object.
Well if we're going to head over to a log in page notice we're getting a response and instead of just
constant logging our response.
Now we're gonna do a bit of destruction here.
So we're gonna get the data that we're looking for from that giant object and we're gonna pass in our
log in function.
So again our user logging.
That's where we're gonna get our user object and once we're gonna get our user object then we're gonna
use set user and then we're gonna set new user but also we're gonna need to use a local storage because
similarly like we did with card.
Remember when we work with card context.
Well I would want to process that data and we're going to use a local storage for that.
So the moment we set user in our state we also are gonna do a local storage local storage then we have
of course a method of set item and then we're going to set a user key and we need to pass in the value.
So we're going to have a Jason we need to string a fi and we're going to pass in the same user object
so the same user object that we're using in order to set the user locally for our state.
We're also gonna persist in the local storage and then let's also write a user logout.
So we're going to have a cost user logout and then this is going to be a function.
It doesn't take any arguments and it's just going to clear everything that we have within a state.
So let me write a set user and we're gonna go back to initial values where we have a object and the
user name was not like so and then the token was not as well.
Both of them were null and in local storage we're going to remove our item we're going to remove the
user item.
So let's write local storage remove item and we would want to remove the user.
And if we're looking at it what is happening while we are setting everything in a local storage.
So initially just like we did with cart we can set up the function correct where once we load our user
context we can just check whether we have any values within the local storage because that way when
we refresh the application or let's say user comes back while we're going to remember that instead of
again every time starting from scratch.
So I'm gonna leave this for your reference.
I'm going to head over up here and by the way first I'm going to copy and paste that I guess that I'm
just gonna comment this out as this is what we initially wrote but then we're going to set up the same
function like we did with a cart.
However in this case it's going to be the user.
So it can be above the user context below the user context doesn't really matter.
I'm going to have a function then the function name is gonna be get user from a local storage and don't
ask me why I just sometimes like these long function names because it's somehow just explained to me
better what is happening not that is a big deal of course we could have just said get user and everything
would work exactly the same but again don't ask me so I'm going to go with return then we're going to
go with local storage get item.
So the same like we did with car we're gonna check whether that user key exists if it does then return
but we're going to use a jasmine pass for that if it doesn't exist then again we're gonna set it equal
to user name now as well as token No.
So since it is a ternary operator again we have our question mark then we have Jason pass and we're
gonna pass in the local storage get item and we're gonna get our user or if the user is not there then
we're just going to return a object with a user name of No user name equal to no and then of course
also the same works for talking.
We're gonna go username as well as tokens now and then instead of setting it always as a empty object
meaning the properties set to null.
Then of course I'm gonna run my get user from local storage.
We're gonna save it.
And of course currently we don't have anything because our local storage is empty.
As far as user is concerned we do have a cart but we don't have the user.
So we're gonna head over to a log in page and we would need to change around things.
Right.
Because even though currently we have the response with a simple value well that's not going to be the
case anymore because within the user context now we can pass value as an object.
So I'm going to delete my simple string then I'm going to set it as an object and I'm passing three
things I'm going to pass user I'm going to pass user log in and also I'm going to pass user.
But I just got a bit confused because I'm not going to use user logout within the logging but we still
need to pass it.
So sorry about my confusion.
Yes we do need to pass an user log out because I would like to access it.
Well in my application.
Correct.
So of course that's gonna be within the logout link and we're gonna head over back to a logging J.S..
All right.
So we're console logging in the response I can see that I'm getting my user which is currently no.
As well as token and then user logging and user logout.
And in this case we are going to get specific things not just everything.
So I'm gonna delete my value and I'm gonna replace it with a user log in like so.
So I'd like to get my function.
And now what's gonna happen.
Well when we're getting a register or where we're going to sign in and if our response is gonna be a
success.
So essentially we are good to go.
Then of course we would want to set up our user because that way we're gonna set up in a local storage.
So when we refresh we're still going to know that we have the user and the way we're gonna set that
up.
We have the response.
And I guess just for the sake of clarity I'm going to console log one more time response just so we
know where we're getting this data.
So let me save it.
I believe out a John so I might as well can just sign in but just please keep in mind the same is gonna
work with registering Sir John at Jim mail dot com and I believe that was my password.
So let's stretch submit and I do have my data.
So what are we looking for here.
Well first of all I would like to get my token so I'm gonna be setting up a.
Object that is going to have two things it is going to have a token as well as the user name again.
That's exactly what we were looking for from our user context.
And first we're gonna start by the structuring and we're going to structure out the Jason W T.
Or I'm sorry the Jason Webb token or JWT as well as we're gonna get a user now whereas the user.
Well both of them are in fact in the data or the user name is in within the user property.
So the way we're going to structure that and I guess in this case I'm going to remove the console log
and we're going to say alright.
So first of all I would want to get my JWT or Jason Webb token.
So since it is sitting within the same object I can just get it.
Now please keep in mind though when I say the same object we're gonna have to access response and data
because a response is an object itself.
And then within the data data of course this is the object itself but then we're looking for the JWT.
So Jason Webb token and I'm gonna say that I would want to get a Jason Webb token.
However I'm going to rename it I'm gonna say that it's simple it's gonna be a token and then the second
thing I'm looking for is the user name.
Now the user name like I said is within the user property which is a object itself.
So we have user and then we have the user name so let's write user.
And when we're structuring we write user since user is already an object itself then we look for user
name.
Now we have access to two things.
Two token as well as the user name.
And now we're going to create a new object.
So let's create a new object by saying const new user and that is gonna be equal to a token.
And of course I need to set it up properly so the property name of token which has a value of the token
that I'm getting back as well as the property of user name that has the value of the property that I'm
getting back from the response data we're going to add a column let's say here and then we're gonna
two things we're going to log in our user and then we're also going to navigate away from the log in
page to let's say product page.
So we have user logging that is our function.
We do need to pass in our new user object and then also like I said we would want to navigate away.
So we have history already Bush remembered that was coming from reactor order dumb and in my case I'm
going to navigate and I'm going to say that we're gonna go to a product page.
Now I'm going to save it and we're gonna head over to a bigger screen size just so we can see better
and we're going to test out both cases if we want to sign in and if we'd want to register.
So let's start by trying to register.
Let me just double check whether I have Peter there because I would want to register and I don't want
to get a dumber so I don't have to Peter I have the John.
Awesome.
So let's do this.
Let's say that there's going to be an email by Peter at gmail dot com.
Then we're gonna have the password and then we're gonna have a user name again off Peter.
And the moment we submit we should see within a local storage our token as well as the user.
Awesome.
We do.
So we have a user name of Peter as well as a token.
Again we're not setting up any kind of changes yet in our front end.
So eventually again multiple things are going to change the moment we're gonna get that user but our
initial setup is correct because we are getting our user.
All right.
And we also navigated away from the page.
Awesome.
Now let's try to log in one more time.
In this case we're going to use already existing user by the name of John just so we can see how we
can override that.
So let's say John and John is going to log in when I say Gmail and then we're going to go again with
a simple password and Yep again we navigate away.
So our request was successful.
And then of course we get our token as well as the user name.
So that's how we can set up our user context.