Okay.
Before we set up loader in the dashboard layout page, let's quickly recall the request we're going
to be working with.
So the URL is going to be forward slash users, forward slash current user.
It's going to be a get request.
So the method is going to be get.
We're now going to send any data.
And as far as the response, if everything is correct, if the cookie is valid, if the JWT is valid,
we're going to get info about the current user.
Everything starting with ID all the way up to the role.
All right.
And once we're familiar with the basic loader setup, now let's set up a proper request to get the current
user.
And it's going to accomplish two things.
First of all, we'll get the user info because again, please keep in mind we're not storing this data
anywhere on the front end.
Remember, everything is located actually in that token.
So in order to understand what is the current user, yes, we want to make that request back to the
server.
That's number one.
Number two, if there's some kind of error, let's say the token is invalid or a cookie is invalid,
what happens?
Well, we have that auth middleware, correct.
So if we're not able to get the current user, we'll actually log out the user from our application,
essentially from our dashboard.
So at the end of the day, it's going to provide two functionalities the info about the current user
as well as the authentication for our dashboard one, because like I keep saying in the dashboard we
have all of the functionality.
So let's start working on it.
First of all, I'm going to make this async since we're going to make the request.
Then we want to set up, try and catch.
And for starters we want to go with const.
And I'll right away the structure, the data, because this is going to be the case where we will pass
the user info down to a dashboard layout.
And remember, we're getting back giant object and there we're looking for the data.
Now which request do we want to make?
Well, we're going to go with Await.
Then custom fetch.
So we import that and then we're looking for get request and we'll go with forward slash users.
And then we want to go with that current user.
And again, please keep in mind whenever we log in, remember we get the cookie and then in that cookie
we'd have JWT.
So pretty much when we make the request, that cookie with the JWT are going to go back to the server
and if everything is correct, we'll complete the current user request.
And if we're successful, we want to return the data.
Now if there is an error, like I said.
This is going to work as the authentication, I'm going to redirect the user back to the home page,
basically back to our landing one.
So if there is any issue with JWT, the user will have to repeat the login step.
And keep in mind we're logging this data in here because we have access to it in use loader data.
And if I navigate to the browser, I can nicely see that the current user is John.
Now of course, if I'll log in as Peter, you can probably already guess that we'll get back info on
Peter.
Now since all of the info is stored in a cookie, even when I refresh, since this is still valid,
the cookie and JWT, of course I get back the user, but please keep in mind that if for example the
token or the JWT expires, then of course we'll get back 401.
And in order to demonstrate that, I'll simply wipe this one clean and refresh and check it out.
Now we redirect the user back to the landing page.
Why?
Well, because now the server responds with 401.
So again, let me go back to a login one successfully log in and now I get the info on John.
And before we continue, I want to do two things.
First of all, we'll change from temp user to the actual user.
We're getting back from the database.
And since I kept the same structure, essentially I just want to destructure user out of that data and
then I'll remove the hardcoded value and what's super, super cool since I kept the same structure everywhere
where pretty much we're using that name.
More specifically in this button, we'll have the correct name.
And just to showcase that, let me navigate to login one.
And since I created the.
User with the email of Peter.
I can log in and notice.
Now, of course, the name over here is going to be Peter.
So again, same deal.
So this is going to be our current user.
And of course, instead of hard coding, we're getting it from our loader.
And the very last thing that I want to do in this video is to showcase how in React router Dom outlet
actually has the context prop.
So we can go over here context and since I want to provide the object, I'm going to go with double
curlies.
Please keep in mind it's not a special syntax.
Essentially I'm just passing here the object and in here I want to provide the user.
So like I said, when we created this dashboard context provider, technically if you just want to pass
some value down to the pages and not only to the pages, but also components that are in the pages,
you can simply use the outlet and pass in the value into the context.
So this works right out of the box, just like the provider over here.
The difference, of course, is that we don't need to do anything.
We simply go with this context.
And then in the upcoming videos, I'll show you how we can access this user.
So again, instead of setting it up manually over here, our context, which we used for small sidebar,
big sidebar and nav bar.
This one is for all of the pages and components that are inside of those pages, and we're just providing
this user value because in some of the pages we'll actually use some of those values from the user object.