1
00:00:03,000 --> 00:00:05,827
In our SignInPage we're now calling

2
00:00:05,827 --> 00:00:07,766
our own login API route.

3
00:00:08,347 --> 00:00:10,943
So when we sign in this will set a cookie

4
00:00:10,943 --> 00:00:13,414
that we can see in the developer tools,

5
00:00:14,480 --> 00:00:16,642
if we look at the Application tab,

6
00:00:16,642 --> 00:00:19,313
here's the cookie with the JSON web token.

7
00:00:19,877 --> 00:00:22,213
That's all very well, but what do we do

8
00:00:22,213 --> 00:00:23,411
with that token now?

9
00:00:24,577 --> 00:00:26,965
For a start we can tell if the user

10
00:00:26,965 --> 00:00:28,603
is authenticated or not.

11
00:00:29,443 --> 00:00:31,533
So in our HomePage for example

12
00:00:31,533 --> 00:00:33,902
we could show a header at the top,

13
00:00:33,902 --> 00:00:36,410
with some information about the user

14
00:00:36,410 --> 00:00:38,222
if they are authenticated,

15
00:00:38,222 --> 00:00:41,497
or a link to the "Sign In" page if they're not.

16
00:00:42,276 --> 00:00:45,417
The same header could be displayed on all pages,

17
00:00:45,417 --> 00:00:48,427
so it could go into our common Page component.

18
00:00:48,993 --> 00:00:51,846
But let's first create a separate NavBar,

19
00:00:51,846 --> 00:00:54,839
similar to what we did in the Blog example.

20
00:00:55,409 --> 00:00:57,599
So this could be a "nav" element

21
00:00:57,599 --> 00:00:59,652
that contains a list of links,

22
00:01:00,842 --> 00:01:03,047
and for that we know that we need

23
00:01:03,047 --> 00:01:06,189
the Link component from the "next/link" module.

24
00:01:09,475 --> 00:01:11,933
The first link could be to the HomePage,

25
00:01:14,975 --> 00:01:16,675
so let's display "Next Shop"

26
00:01:16,675 --> 00:01:18,557
that's the name of our website.

27
00:01:19,118 --> 00:01:21,725
Then we can repeat the whole list item,

28
00:01:22,818 --> 00:01:25,526
but in this case link to the "/sign-in" page.

29
00:01:27,918 --> 00:01:29,990
Let's check what this looks like so far.

30
00:01:32,118 --> 00:01:33,704
Let's insert the NavBar

31
00:01:33,704 --> 00:01:35,359
inside a header element,

32
00:01:37,584 --> 00:01:39,230
and looks like I'll have to type

33
00:01:39,230 --> 00:01:40,259
the import manually.

34
00:01:42,549 --> 00:01:44,999
Import our new "NavBar" component,

35
00:01:44,999 --> 00:01:46,655
and just close the tag.

36
00:01:47,515 --> 00:01:49,823
We can see the two links at the top of the page,

37
00:01:50,323 --> 00:01:53,049
but of course we haven't set any styles yet,

38
00:01:53,049 --> 00:01:54,908
so they don't look that great.

39
00:01:55,469 --> 00:01:57,980
Let's add some padding around the "nav",

40
00:01:57,980 --> 00:02:00,554
at least it's not attached to the border.

41
00:02:01,116 --> 00:02:04,426
Then we can change the list to use Flexbox,

42
00:02:05,382 --> 00:02:08,389
and maybe add some gap between the items.

43
00:02:08,889 --> 00:02:11,132
We could show the first link on the left

44
00:02:11,132 --> 00:02:12,645
and the other on the right,

45
00:02:13,201 --> 00:02:16,019
I'll do a little bit of a hack this time,

46
00:02:16,019 --> 00:02:19,043
and insert an empty list item in the middle,

47
00:02:19,043 --> 00:02:21,449
setting "flex-1" so it will take up

48
00:02:21,449 --> 00:02:22,754
all the free space.

49
00:02:23,461 --> 00:02:26,033
Although if we do this we should at least

50
00:02:26,033 --> 00:02:29,046
set the "role" to "separator" for accessibility.

51
00:02:29,609 --> 00:02:30,913
Now, let's say that

52
00:02:30,913 --> 00:02:33,384
all text should be small by default.

53
00:02:34,242 --> 00:02:37,433
But the first item, that is our website name,

54
00:02:37,433 --> 00:02:39,703
should be in large text instead.

55
00:02:41,108 --> 00:02:43,332
And maybe in "font-extrabold",

56
00:02:43,332 --> 00:02:45,111
so it looks like a logo.

57
00:02:45,686 --> 00:02:47,277
Of course in a real app

58
00:02:47,277 --> 00:02:49,561
you could show a logo image here.

59
00:02:50,131 --> 00:02:51,986
At this point we should be able

60
00:02:51,986 --> 00:02:53,603
to click the "Sign In" link

61
00:02:53,603 --> 00:02:55,459
and be taken to the SignInPage,

62
00:02:56,079 --> 00:02:57,803
or click on "Next Shop"

63
00:02:57,803 --> 00:02:59,902
and go back to the HomePage.

64
00:02:59,902 --> 00:03:01,477
Nothing fancy so far.

65
00:03:02,127 --> 00:03:05,152
But if the user is already authenticated

66
00:03:05,152 --> 00:03:08,102
we don't want to show a "Sign In" link.

67
00:03:08,102 --> 00:03:11,884
If anything we should display a "Sign Out" button.

68
00:03:12,536 --> 00:03:14,770
So let's pretend that somehow

69
00:03:14,770 --> 00:03:17,005
here we have a "user" object,

70
00:03:17,582 --> 00:03:20,775
that includes among other things the user "name".

71
00:03:21,682 --> 00:03:24,435
We'll think about exactly how to obtain

72
00:03:24,435 --> 00:03:26,058
this "user" data later.

73
00:03:26,628 --> 00:03:29,235
For now let's just assume that we have it.

74
00:03:29,735 --> 00:03:32,411
So here we can check if "user" is set,

75
00:03:32,411 --> 00:03:34,312
which means it's logged in,

76
00:03:34,882 --> 00:03:37,080
then we could display a "button",

77
00:03:37,080 --> 00:03:38,278
saying "Sign Out".

78
00:03:39,982 --> 00:03:41,772
While if "user" is not set

79
00:03:41,772 --> 00:03:44,388
then we'll display the "Sign In" link,

80
00:03:44,388 --> 00:03:46,797
so they can log in if they want to.

81
00:03:47,448 --> 00:03:48,766
And if we save now,

82
00:03:48,766 --> 00:03:51,124
the top-right item says "Sign Out,

83
00:03:51,693 --> 00:03:53,500
because we have a "user" object.

84
00:03:54,000 --> 00:03:56,846
In fact, since we also have the user "name",

85
00:03:56,846 --> 00:03:59,951
we could display that in another list item here.

86
00:04:01,199 --> 00:04:02,906
Let's show the "user.name"

87
00:04:02,906 --> 00:04:04,678
before the "Sign Out" item.

88
00:04:05,299 --> 00:04:07,423
This way we can easily tell that

89
00:04:07,423 --> 00:04:09,879
we're currently signed in as "Alice".

90
00:04:10,445 --> 00:04:12,647
Maybe the name could also be a link

91
00:04:12,647 --> 00:04:15,290
that takes the user to their profile page,

92
00:04:15,290 --> 00:04:16,737
or something like that.

93
00:04:16,737 --> 00:04:19,065
But we won't do that in this example.

94
00:04:19,753 --> 00:04:22,019
Rather, let's test what happens

95
00:04:22,019 --> 00:04:23,848
if "user" is "undefined",

96
00:04:23,848 --> 00:04:26,626
which means they're not authenticated.

97
00:04:27,272 --> 00:04:30,793
In this case we only display the "Sign In" link.

98
00:04:30,793 --> 00:04:31,160
Good.

99
00:04:31,733 --> 00:04:35,382
So we have the UI for this NavBar component ready,

100
00:04:35,382 --> 00:04:37,279
displaying different links

101
00:04:37,279 --> 00:04:40,125
depending on the authentication status.

102
00:04:40,125 --> 00:04:42,679
The next step will be to figure out

103
00:04:42,679 --> 00:04:45,379
how to actually get this "user" data.