So how can we add a header here
that's only visible if the user is logged in?
Well, as always, there would be multiple ways.
One way of course would be to simply add it
to that training page.
But in many apps, you might have more than one page
that should be accessible by logged in users.
So a better way to add such a header would be a layout,
but I don't wanna use the root layout
because then that logout button would be on all pages,
even the login page, and it shouldn't be there.
So I want a specific layout
for all the pages that require user authentication,
so that require a logged-in user.
And we can use a route group for that.
And that's a feature about which you learned
earlier in the course.
You can create a route group by using brackets,
regular parentheses around some name of your choice.
And then you can move all the pages
that should belong to this route group,
into that route group folder.
Now this will not add a new segment to the URL path,
but it will group all these pages together.
And for example, does allow you to set up a layout
that will apply to all the pages
that belong to this route group.
And therefore, here we can now export
a function called AuthLayout.
And this will receive a children prop,
like all components will.
And here we could now return a specific layout
for logged-in users
or for pages that require logged in users.
Now, for that, I'll go to my root layout
and copy this basic HTML snippet
and actually also copy the metadata
and this globals.css import
because I still want styling here.
And this will replace the root layout here
because it's technically on the same level.
It's nested in a folder,
but a folder that doesn't add a path segment.
So it will replace it and act as a new root layout.
And therefore it's this root layout structure
I want to use here and maybe name it AuthRootLayout.
And here in the body, I now want to add a header
above the children.
And in that header I'll add a paragraph
where I'll say welcome back.
And then below that paragraph,
or visually it will be next to that paragraph,
I'll add a form where I want to have a button
that says, logout.
At the moment, it won't work,
but we'll take care of that soon.
We also need to adjust this globals.css import
and go up one level here,
because even though this won't add a path segment
to the URL, it's still a physical folder in our file system
and therefore seen relative from that layout.js file,
we need to go up one level to wrap those styles.
With that, if you save that and reload,
you should see this header here.
Now, to get the right styling,
I'll actually add an ID to it, auth-header.
That's some styling I prepared in advance.
And with that, that looks better.
Now let's make sure that this button works.