So before we get frustrated, because even though we have logged in, we cannot access the dashboard.
Let's fix it.
Let's add the wrapper.
And remember when I showed you the documentation?
What did I say?
That the lowering one is that sucker that causes that.
Now, of course, there is also an error and all that.
But in our case, even when we successfully log in.
Well, the reason why we don't see anything, because we are still in this loading stage.
So when we try to access that page in private or out.
This is still false because authenticator then user, while one is undefined and the other one is false.
Correct.
So that's why this is also false.
So how do we fix that?
And then not show us.
So we would have some kind of wrapper.
And in our case, I think we're going to use that in the abcess.
So we have the wrapper on that in the wrapper.
We will get these things.
The loading and error and all that from the off zero.
And then if the loading will display one spinner, even the error will say something else.
And then, of course, eventually, if everything is correct, we'll just render the children.
So we'll wrap our app Jazz in the wrapper.
And then once we do that, then depending on our stage while we'll display something.
Correct.
So start simply by navigating to objects.
And then we already have imported the author wrapper.
It's in the pages.
And that's the one that's gonna be responsible for that.
So now what I would want is to wrap everything here.
So you say off the wrapper, not provider.
So we're going to go with off provider.
And by the way, this says all the zero provider.
That's not what I would want because the name is off provider.
Please don't mess that one up.
Like I just did.
And I'm going to make sure that I wrap the router as well.
So I'll save it.
Of course it is because I type provider.
So again, my apologies.
Let me delay this essentially.
You just need to use this ortho wrapper.
As you can see, it's very easy to make the mistake.
So make sure you use this ortho wrapper or I don't know, I might change it later to a wrapper or whatever.
Just so there are no confusions like that.
But for timing, I'm just gonna leave it as author wrapper.
We will save it.
And at the moment we just ran author wrapper because of course, we haven't set up any functionality
in there.
So bravely navigate to a ortho wrapper.
We already have all the imports and all that.
And by the way, we have a nice CSF set up as well.
So what I would want to do over here now, my use of OK, got it now at the top.
I would want to grab those two things is loading an hour.
And by the way, which simply are going to copy and paste everything that they're displaying over here.
That's it.
Not much to it.
And we're gonna go at cost.
Is loading with destruction that from the errors as well, and that is coming from use off and we can
Volkert, of course, use off when we invoke it.
After that, I would want to check if I'm loading loading, then if that is the case, I'm going to
do something.
Also, I have if the error.
So we're going to go with an error.
What I would want to do then what I would one after.
And finally, if everything is correct, I'm simply going to return.
A react fragment.
By the way, if you don't know, this is a reac fragment shortcut, which essentially is they don't
have a dev or whatever, some kind of element, because that eventually just leads to a div soup.
In this case, we're seeing a react fragment.
And then author, rapper is going to have a children.
So I'm going to say children, because, of course, I wrap my whole application.
Correct.
I wrapped router and all that.
So on here, I'm going to access those children and I'm going to say if everything is correct, then
I would want to run their dush children.
So, of course, I need to have Coralee braces and I'm going to go for children.
Now, before I say, of course, I would need to come up with what are my displaying.
So if there's gonna be a narrower the way I'm going to display that, I'm going to go with the wrapper
and not in this wrapper, there's going to be a heading one.
And in that having one, I'm just going to display the error message and say error message.
Then if it's loading, what am I doing?
Well, if it's loading, then there's just gonna be a giant spinner.
So this is what I'm talking about.
There are two cases, Poro spinners.
There's one that I'm displaying once I have logged in and I'm searching for user.
And then there is going to be the second one.
That essentially is just taking up the whole screen.
That is by design.
That's how I wanted Cerny here loading.
And then let's return a wrapper wrapper and then inside the wrapper, which is going to place our image.
Now, again, I'm importing my loading one.
So loading Jeff, in this case, as far as the old moves are going to say, Spinner.
Beautiful.
We'll save it.
And it's going to say is loading is not defined meaning?
I checked here for the loading I should have said is loading sake.
Very easy to make a mistake.
And of course, the moment we save, of course, we're going to be directed back to a log page because
we have our private route setup.
But now, once we log in, course, we should be able to go to a dashboard.
So we should be able to render our children.
Let's right out.
Want to go with logging option.
Now, I'm going to log in now.
Again, we can pick which ever we would want, but I think I'm going to go with John in here.
And then once we log in, of course, successfully, we are back in the dashboard.
So now, of course, we can search the user and all that.
Of course, log out not just the shockers that it would work with a get and all that.
We're going to do one more log in.
In this case, I'm going to go with Google and mine.
Of course, now I'm successfully logged in using the social connections.
So that's how we can set up the wrapper.
And that's how we can restrict a route in our application.