And once we have our log-in on logout functionality in place now, let's start restricting the access
to a dashboard to the people who haven't logged in.
So if we take a look at our complete application, once I log out, I'm being kicked back to a log and
page.
And even though that I know that my dashboard is essentially my home page.
So just my domain, if I'm trying to get there, since I haven't logged in, I'm being kicked back to
a logging one.
So I only can access the dashboard if I log in.
So if I haven't logged in, then of course, this is not going to work on this case.
Of course, I removed my coding addict, I think.
So let me just log in with a Google and then once I do, of course, I can see my dashboard.
Now, how do we do that in our application?
Well, first we will need to set up a private account.
So how does that look like?
Well, if we take a look at the objects, we have one Rodford dashboard.
We have one for the log in.
And then, of course, we have also one for their car.
You'll notice here that we have a component in the pages that has the name of Private Road.
So this is where we'll set this up.
Well, essentially, the way it's going to work is we're going to have a private route and we will wrap
our route.
The one that we would want to protect in this case, of course, is that is going to be our dashboard
one.
We'll wrap this one in.
A private truck.
And in that private, you're out.
We will check.
Hey, what's happening?
Are we returning something?
Are we locked then and all that?
So let's try to do that.
So in the private route, first, what I would want you to understand, that route is still going to
be passed in.
And by the way.
This is annoying.
I don't know why it's not opening a new one here.
So let me close these ones.
I'm gonna close the dashboards for now and then we'll only have two of them.
We don't need context.
Read me or index and what you need to understand that still the private route will wrap dashboard.
So that will still happen.
That's my will right away say that I would want to access to things.
I would want to access children because again, the dashboard will be a child of private route.
And I definitely want to render it here.
What we're doing here is we are collecting Devourers and then we can just give it some kind of name,
which in my case is going to be addressed.
So what am I doing over here?
Well, still, the private route is going to have the path as well as exact on all that.
So that's not going to change.
So first, I would want to grab my children so that it was a special prop and then I would want to collect
rest of the props that are going to be on my component, whatever they are.
And once we have this particular set up, then for the time being, we're just going to come up with
a local variable and I'm going to say is authenticated or something like that or is used there.
Let's use the same one.
And for the time being, we'll say, yeah, the user is true.
But of course, eventually we'll use our use off and all that.
Now, once we have this particular setup now, I would want to decide what am I doing?
So in here, I'll say that I'm returning a year out.
So that is still coming from reactor RDM snorers in the app.
We imported it out.
So we're doing the same thing over here.
I'm still importing.
They're out.
So in the private out, I will return a year out.
I will grab all the props that I'll set up on a private route.
That's why I'll do.
Yeah.
Grab me arrest or whatever name you give over here to the rest of the props.
So notice how we're now spreading out.
So here we were collecting them, collecting the rest of the props that were on the private route.
And now I'm just spreading them out.
Now I'm placing on that route that I'm returning.
And then for the route, we would have a render prop.
So we're going to go with a render.
And then in that run prop, we need to pass in the function.
Now, from that function, wherever we're going to return.
Well, that is what we're going to render.
So in here, what I could say is a return.
And then I'm just going to check my user.
So if the user is true, then I'm just going to pass in children.
If it's not, then we have another component.
Then we have redirect.
So in this case, I'm going to say if the user is false, then go to redirect and then kick it back
to a log one or wherever you'd want.
So in this case, I know that I have an option of logging in the log in page.
So that's why I'm kicking the user back to a logging page.
So we're gonna do that.
And then, of course, I'll close out my component.
So that should be our setup.
And now, of course, we don't need this private throughout anymore.
So now we'll save it.
Hopefully everything is clear what's happening at least up until this point, because we're just using
a local variable.
And don't worry, we'll fix that in a second.
But now in the app Jayesh, I'm also importing the private route.
So now what I would want to do is the changes are on correct because now instead of the normal route
since I set up the private route.
Well, now I'm going to say private rock like so.
So now once we save it, everything should be displayed.
Correct.
Because in the private route, this is still true.
So we're still random dashboard just because our users true horror knows what happens here.
If I go back to false now, I'm being kicked back to a lock.
And why?
Well, because this value is false.
So now in my render prop, what am I doing here?
I'm checking if the user that only display the children.
What are the children?
That's the dashboard.
However, if it's not, then.
Please use the redirect component and kick the user or a visitor back to a logging page.
Now I can click all day long and I'm not gonna get there all day long.
I can just keep on typing, keep on typing and all that.
And nothing is going to happen.
And what is our next step?
Well, now, of course, I would want to hook it up to the use off.
Correct.
I would want to check whether the user has logged in.
And if that is the case, then I'm only going to display the dashboard.
So instead of just displaying this as a local variable.
Now, I would want to access my user off just like we were doing a number.
So that doesn't change.
I'm just gonna go with cons online is authenticated, authenticated and then user and also equal to
a use of remember.
And then I'll invoke it.
Now the same how in another bar is going to say is authenticated.
Right away I messed it up.
Authenticated and user.
So if that is the case.
Beautiful.
Then is users gonna be true.
And then of course will render Barack right the way that there's a gotcha.
And that Godhra has to do with the fact that we don't have the wrapper yet.
That's why I previously mentioned that it's so important for us to have the wrapper, because you will
see, even though technically on a surface our functionality makes sense, it's not going to work.
I just showed you that.
Yes.
If you're just hardcoded, you're not going to be able back to a dashboard.
But I can tell you right away, even with a log in functionality, we're not going to get there.
That's why we'll need a wrapper.
So say it.
This is going to kick me back to airlock, and we already know that.
So now, of course, let's bravely navigate to our logon page, and the only thing we need to do is
essentially use the use off and then set up a log in functionality.
Not not while we're at it in the log.
I might as well also log in, maybe sign up, because maybe some people are confused.
So sign up, Mike.
So let's try it out.
How does that look?
I think it looks good enough.
And in here.
What are we looking for?
Well, we all need to import, of course, our use off, which of course, we already are doing.
And then.
We would want to get our log-in with redirect, because even though we were using this a number, correct,
again, technically at the end, we're not going to use that Navar anyway, because once we log animals
display the dashboard and that log in link won't show up.
Now, I'm not going to delete that because I would want you to have it for reference.
But I'm just telling you why we won't use that log in.
We redirect in the number.
Now, I will head back to a logging page.
Then we will get that from Yusoff.
So concert and then log in with redirect.
So log in with redirect.
Here.
And that is going to be equal to a use off.
We will.
And Volkert.
And now, of course, for my button.
What do I need to do?
Well, I just need to set this up.
I need to say oncologic is equal.
And then a log-in with redirect.
Let's say it just to make it interesting.
I'm going to navigate to a bigger screen.
We have our star.
Beautiful.
I can refresh, of course.
I haven't logged in and all that, so that's why I don't see the dashboard.
But since it is loading, I can tell right away that even when we log in, this is not going to work.
So let me try it now.
Remember my e-mail that I changed?
Let me try with this one, John, and log in.
And yep, I technically logged in and everything is fine.
But Norrish, I'm being kicked back all the time and this is exactly what will fix in the next video.