And once we have wrapped our whole application in our zero provider and of course our want to set up
my user contacts now, I have to be honest, though, once we set up this provider, technically you
don't have to set up the user context.
I just set it up because we already had structure for all the contacts.
So I thought that it's just going to make sense if we do it in this case.
But keep in mind that when it comes to of zero, you can just use the hook because all the information
is going to be available in the hook.
So if you have only one place, for example, in application when you would want to use the authentication,
you can simply import the hook and then just check the values.
It's also doable, but in my case, of course, I will set up my user contacts and then unwrap the application
because I think that we already have structure for that.
So we might as well do it with a user as well.
Just keep in mind, technically, if you have only one place and you don't want to reuse it in multiple
places, you can just use the hook.
It's pretty convenient since remember, we are already wrapping the application anywhere in our auth
provider.
So where I have the user context before I set anything up, of course in the next year, I also would
want to add it to my render.
So where we have our provider in between the product provider and user provider.
We're just going to go with user and provider here, and, of course, I need to set it up in the bottom
as well.
So in between product and provider, we set up our user provider.
And then again, if we take a look at the docs, keep on scrolling, keep on scrolling.
Notice this is the hook that they provide.
And these are some of the values that we can get.
If you remember in a previous application we used is uploading.
Now, in this case, I will show you the prop and I'll show you the viewers and all that.
But the way our app works right now.
We actually don't need so in this application, in this project, we won't use this loading, but we
did use in the previous one.
So if you want to see exactly how it works and why it is important, then of course it's just going
to the previous project.
But in this case, we were able to create our app without it.
So we have our hook and then of course, we just need to invoke it and then grab some values out of
the data that is getting back.
So I'm going to navigate back to my user contacts and I'm going to hop here where I have the actual
component and we'll just set up our destruction.
So we're getting the object back, the data object.
And then I already know which properties I'm looking for.
And again, if you want to double check with docs, you can definitely do so.
But I already know that I would want to invoke the use of Zerok and the props or the data that I would
want to get back is is authenticated.
That essentially is going to be a flag when we have a login with redirect.
So this is a function that performs login functionality.
And of course we also have a longer function and we have a user.
So this is going to let us know whether we have a user and what are the credentials for user as well
as E is loading.
Like I said, in this case, we won't use it, but I still would want to show you what values you see.
And then, of course, I'm passing the value.
So that's awesome.
But I would want to set up the user just so we can see the values.
So eventually there's going to be a tiny, tiny state value over here for user.
And since I would want us to be on the same page, I will set up the user fact and I will invoke it
every time the is authenticated changes.
And I simply would want to log some data, some say log user and maybe let's add here a string as well
as a user and let's copy and paste.
By the way, I should have probably set up your templates and say user, and as you can see, I'm just
logging the user that is coming from Arth zero and I'll do the same thing here.
So let me delete this line here and I'll copy and paste.
It is going to be three logs.
One is going to be for the user, then will say is authenticated.
Carried over here, and of course, this is going to be the value, again, that is coming from my hook.
And lastly, I just want to show you the ease loading in this case.
I'll select both of them is is loading and of course, time being.
Remember that these should all be false, meaning, of course, the loading might be different, but
for the user and is authenticated, this should return false because we haven't logged in.
But when it comes to value now, I would want to nicely parse down some of the functions.
So again, I'll set up my JavaScript object and I would want to parse down logged in function, log
all function and eventually that is going to be a user in a state which I'm going to create in a second.
So let's go with login.
With redirect.
So we're passing this down to the context.
We're also passing a log functionality.
And then, like I said, let's set up a state value.
So in this case, I'm not going to set up a reducer because essentially there's only one value and I'm
going to call this my user just so it's different than the user that we're getting back from zero.
So we're not confused.
And of course, I'm going to go with set my user.
That is my function because I will invoke it here in the use of fact.
And by default, I'll use my use state and I'll just set it equal to now.
I'm down in the value.
I'll also pass in my user and once we have a setup for user context.
And of course, we will go to one of the components that will need the function for log out and log
in and we'll test it out, and then the next video will set up our user and functionality where at least
we can show or hide some elements or components based on whether we have logged in or we're still logged
out.