We wrote this "user" API route
that reads the JSON web token sent as a cookie
and passes it to the CMS to get the user details.
What we want to do now
is call that API route from our NavBar component,
so that we can get a real value
for this "user" variable.
Let's call "useState"
to turn it into a state variable.
And the hook returns an array
where the second element is a setter function.
Now we can call "useEffect"
to call the API as soon as this component is mounted.
But let's make sure to pass
an empty array as dependencies,
because we only want this to run once.
And here we can call our "fetchJson" function
passing "/api/user",
that's the path for our new API route.
Now, "fetchJson" returns a Promise
so let's create an anonymous async function
and immediately invoke it,
so here we can get the result,
that's a "user" object, using "await".
At this point we can update our state variable
by calling "setUser".
So what will happen is that
when this NavBar component is created
"user" will initially be "undefined",
because we're calling "useState"
without passing any initial value.
But then the effect function will be called
and the "user" variable will be set
to the value returned by the API route.
That's assuming that the API request succeeds.
But it's also possible that it might fail,
because if we're not authenticated
it will return a 401 status.
So this is something we need to handle in our code.
Try fetching the user,
but if that fails then, what should we do?
If we get to this point
it simply means we're not signed in,
so we don't really need to do anything,
because that's the initial state anyway.
Ok. Now, to make sure this is working as we hope
let's add a log statement,
printing the current "user" state.
Now we can save,
and go and test it.
We can see in the browser console
that "user" is initially "undefined",
then there's a request to "/api/user"
but that failed with "401 Unauthorized",
so the "user" variable was not updated.
As a result we're not authenticated,
and in fact the NavBar shows a "Sign In" link.
Now, let's go and sign in,
as "alice@example.com",
with password "Alice123".
Submit!
And in the logs we can see that
the sign in request succeeded,
and we received the correct user details.
But in this page nothing changed.
We should probably redirect the user
to a different page after they log in.
But if we manually go back to the HomePage for now,
you can see that at this stage we are logged in,
as user "Alice".
Even if we reload this page,
we will still be logged in,
because we set a session cookie,
that will be remembered until we close the browser.
And in this case the "user" variable
is still "undefined" at the beginning,
but then we receive the data from the API
and "user" is updated with that data.
So this is working ok.
Now, let's do that thing we said we wanted to do,
that is redirect after signing in.
After we get a successful response
we could send the user to the HomePage.
To do that we'll need to use the Next.js router,
that we can access by importing the "useRouter" hook
from the "next/router" module.
So we can call this hook to get the "router" object,
and once we have the "router"
we can use it after signing in.
This "router" object provides
a number of methods to do with navigation.
To send the user to another page
we can simply call "push"
and pass the path,
that in this case is just "/"
which means the HomePage.
Let's see if this works.
To test this we'll need to log out first,
but we haven't implemented
the Sign Out functionality yet.
So what we could do is open the Developer Tools
and manually delete the "jwt" cookie.
If there is no cookie then
we are not authenticated.
We'll need to refresh the application though.
Ok, now we can try signing in again,
with the usual email and password,
When we click "Sign In"
we're sent to the HomePage,
and the NavBar also shows that
we are signed in as "Alice".
The NavBar will try fetching
the user data every time it's mounted,
and that happens on every page
as we could see if we look at the network requests.
Here I have "XHR" selected
and let's filter "/api" requests only.
If we go and open another page,
like the first product
you can see in the Developer Tools that
this caused a new "user" request to be loaded.
And if we go back to the HomePage,
again this makes another "user" request.
Every time we click on a page
the NavBar component will be mounted,
fetching the user data again.
In the next section we'll see
how to cache the "user" data
so it doesn't need to be re-requested every time.
But this approach works fine for now,
what we're doing in the NavBar I mean.
We're making the API request inside "useEffect",
so we'll get fresh "user" data
every time this component is mounted.