1
00:00:00,000 --> 00:00:03,000
So how can we add a header here

2
00:00:03,000 --> 00:00:07,000
that's only visible if the user is logged in?

3
00:00:07,000 --> 00:00:10,000
Well, as always, there would be multiple ways.

4
00:00:10,000 --> 00:00:12,000
One way of course would be to simply add it

5
00:00:12,000 --> 00:00:15,000
to that training page.

6
00:00:15,000 --> 00:00:19,000
But in many apps, you might have more than one page

7
00:00:19,000 --> 00:00:23,000
that should be accessible by logged in users.

8
00:00:23,000 --> 00:00:26,000
So a better way to add such a header would be a layout,

9
00:00:27,000 --> 00:00:29,000
but I don't wanna use the root layout

10
00:00:29,000 --> 00:00:33,000
because then that logout button would be on all pages,

11
00:00:33,000 --> 00:00:36,000
even the login page, and it shouldn't be there.

12
00:00:37,000 --> 00:00:40,000
So I want a specific layout

13
00:00:40,000 --> 00:00:44,000
for all the pages that require user authentication,

14
00:00:44,000 --> 00:00:47,000
so that require a logged-in user.

15
00:00:48,000 --> 00:00:51,000
And we can use a route group for that.

16
00:00:51,000 --> 00:00:53,000
And that's a feature about which you learned

17
00:00:53,000 --> 00:00:55,000
earlier in the course.

18
00:00:55,000 --> 00:00:59,000
You can create a route group by using brackets,

19
00:00:59,000 --> 00:01:03,000
regular parentheses around some name of your choice.

20
00:01:03,000 --> 00:01:05,000
And then you can move all the pages

21
00:01:05,000 --> 00:01:07,000
that should belong to this route group,

22
00:01:07,000 --> 00:01:09,000
into that route group folder.

23
00:01:10,000 --> 00:01:15,000
Now this will not add a new segment to the URL path,

24
00:01:15,000 --> 00:01:17,000
but it will group all these pages together.

25
00:01:17,000 --> 00:01:21,000
And for example, does allow you to set up a layout

26
00:01:21,000 --> 00:01:23,000
that will apply to all the pages

27
00:01:23,000 --> 00:01:25,000
that belong to this route group.

28
00:01:27,000 --> 00:01:29,000
And therefore, here we can now export

29
00:01:29,000 --> 00:01:31,000
a function called AuthLayout.

30
00:01:32,000 --> 00:01:34,000
And this will receive a children prop,

31
00:01:34,000 --> 00:01:36,000
like all components will.

32
00:01:37,000 --> 00:01:40,000
And here we could now return a specific layout

33
00:01:40,000 --> 00:01:42,000
for logged-in users

34
00:01:42,000 --> 00:01:47,000
or for pages that require logged in users.

35
00:01:48,000 --> 00:01:51,000
Now, for that, I'll go to my root layout

36
00:01:51,000 --> 00:01:54,000
and copy this basic HTML snippet

37
00:01:54,000 --> 00:01:56,000
and actually also copy the metadata

38
00:01:56,000 --> 00:01:59,000
and this globals.css import

39
00:01:59,000 --> 00:02:02,000
because I still want styling here.

40
00:02:02,000 --> 00:02:04,000
And this will replace the root layout here

41
00:02:04,000 --> 00:02:07,000
because it's technically on the same level.

42
00:02:07,000 --> 00:02:09,000
It's nested in a folder,

43
00:02:09,000 --> 00:02:13,000
but a folder that doesn't add a path segment.

44
00:02:13,000 --> 00:02:18,000
So it will replace it and act as a new root layout.

45
00:02:18,000 --> 00:02:22,000
And therefore it's this root layout structure

46
00:02:22,000 --> 00:02:26,000
I want to use here and maybe name it AuthRootLayout.

47
00:02:28,000 --> 00:02:31,000
And here in the body, I now want to add a header

48
00:02:31,000 --> 00:02:34,000
above the children.

49
00:02:34,000 --> 00:02:36,000
And in that header I'll add a paragraph

50
00:02:36,000 --> 00:02:38,000
where I'll say welcome back.

51
00:02:38,000 --> 00:02:41,000
And then below that paragraph,

52
00:02:41,000 --> 00:02:45,000
or visually it will be next to that paragraph,

53
00:02:45,000 --> 00:02:48,000
I'll add a form where I want to have a button

54
00:02:48,000 --> 00:02:49,000
that says, logout.

55
00:02:51,000 --> 00:02:52,000
At the moment, it won't work,

56
00:02:52,000 --> 00:02:55,000
but we'll take care of that soon.

57
00:02:55,000 --> 00:02:58,000
We also need to adjust this globals.css import

58
00:02:58,000 --> 00:03:00,000
and go up one level here,

59
00:03:00,000 --> 00:03:04,000
because even though this won't add a path segment

60
00:03:04,000 --> 00:03:08,000
to the URL, it's still a physical folder in our file system

61
00:03:08,000 --> 00:03:12,000
and therefore seen relative from that layout.js file,

62
00:03:12,000 --> 00:03:16,000
we need to go up one level to wrap those styles.

63
00:03:18,000 --> 00:03:21,000
With that, if you save that and reload,

64
00:03:21,000 --> 00:03:23,000
you should see this header here.

65
00:03:24,000 --> 00:03:26,000
Now, to get the right styling,

66
00:03:26,000 --> 00:03:31,000
I'll actually add an ID to it, auth-header.

67
00:03:31,000 --> 00:03:34,000
That's some styling I prepared in advance.

68
00:03:34,000 --> 00:03:37,000
And with that, that looks better.

69
00:03:37,000 --> 00:03:39,000
Now let's make sure that this button works.