In our SignInPage we're now calling
our own login API route.
So when we sign in this will set a cookie
that we can see in the developer tools,
if we look at the Application tab,
here's the cookie with the JSON web token.
That's all very well, but what do we do
with that token now?
For a start we can tell if the user
is authenticated or not.
So in our HomePage for example
we could show a header at the top,
with some information about the user
if they are authenticated,
or a link to the "Sign In" page if they're not.
The same header could be displayed on all pages,
so it could go into our common Page component.
But let's first create a separate NavBar,
similar to what we did in the Blog example.
So this could be a "nav" element
that contains a list of links,
and for that we know that we need
the Link component from the "next/link" module.
The first link could be to the HomePage,
so let's display "Next Shop"
that's the name of our website.
Then we can repeat the whole list item,
but in this case link to the "/sign-in" page.
Let's check what this looks like so far.
Let's insert the NavBar
inside a header element,
and looks like I'll have to type
the import manually.
Import our new "NavBar" component,
and just close the tag.
We can see the two links at the top of the page,
but of course we haven't set any styles yet,
so they don't look that great.
Let's add some padding around the "nav",
at least it's not attached to the border.
Then we can change the list to use Flexbox,
and maybe add some gap between the items.
We could show the first link on the left
and the other on the right,
I'll do a little bit of a hack this time,
and insert an empty list item in the middle,
setting "flex-1" so it will take up
all the free space.
Although if we do this we should at least
set the "role" to "separator" for accessibility.
Now, let's say that
all text should be small by default.
But the first item, that is our website name,
should be in large text instead.
And maybe in "font-extrabold",
so it looks like a logo.
Of course in a real app
you could show a logo image here.
At this point we should be able
to click the "Sign In" link
and be taken to the SignInPage,
or click on "Next Shop"
and go back to the HomePage.
Nothing fancy so far.
But if the user is already authenticated
we don't want to show a "Sign In" link.
If anything we should display a "Sign Out" button.
So let's pretend that somehow
here we have a "user" object,
that includes among other things the user "name".
We'll think about exactly how to obtain
this "user" data later.
For now let's just assume that we have it.
So here we can check if "user" is set,
which means it's logged in,
then we could display a "button",
saying "Sign Out".
While if "user" is not set
then we'll display the "Sign In" link,
so they can log in if they want to.
And if we save now,
the top-right item says "Sign Out,
because we have a "user" object.
In fact, since we also have the user "name",
we could display that in another list item here.
Let's show the "user.name"
before the "Sign Out" item.
This way we can easily tell that
we're currently signed in as "Alice".
Maybe the name could also be a link
that takes the user to their profile page,
or something like that.
But we won't do that in this example.
Rather, let's test what happens
if "user" is "undefined",
which means they're not authenticated.
In this case we only display the "Sign In" link.
Good.
So we have the UI for this NavBar component ready,
displaying different links
depending on the authentication status.
The next step will be to figure out
how to actually get this "user" data.