[no audio]
So let's now get started.
And for that we have this demo project as mentioned,
and I do strongly recommend that you go through
the Routing section first
so that you understand this project,
and you understand the code in that project.
It's almost the same code
as we had it at the end of the Routing section.
It's just a backend-api that was enhanced
with those authentication features.
And I added a new AuthForm component, and it's styling here
which we'll use in this section;
and a new Authentication page,
though I haven't added any route configuration to lead
to that page yet.
We're going to do that together instead.
So once you have that project on your machine,
once you downloaded it, you should navigate
into this backend-api folder,
and there run "npm install" to install all the dependencies,
and then "npm start" to start that server.
Then in a separate terminal, because you must keep that
backend server up and running in order to be able to
communicate with it,
in a separate terminal window
you navigate into your front and application.
And there you must also install all the dependencies,
and then you can start the development server
with "npm start" there as well.
And now we can start writing some code.
You should then see a page that looks something like this
by the way.
So now we can start writing some code.
And as a first step, I wanna make sure
that we have a way of going to that Authentication page
maybe for a "/auth" route.
And of course, feel free to implement this on your own
as a small little practice.
I'll take a short pause here to let you pause the video
and implement this on your own,
and then thereafter we'll do it together.
[no audio]
So let's now implement this together.
For this of course, we go to App.js where we have
all these route definitions.
And here I want to add a new route definition
for this auth route.
Now the auth route should still be part of my RootLayout.
I still want to have that navigation on top of it and so on.
So therefore, it will be a sibling route to this HomePage,
and to this entire route stack of my events routes.
We could add it here, maybe in front of the newsletter
though the exact position doesn't matter.
The path will be "'auth'".
You could also add "/auth" as this doesn't clash
with the parent path, but a relative path will do.
And then the element is the "AuthenticationPage" component,
this JSX code here.
And for that you also must import the
AuthenticationPage, of course.
Now that's all you have to do.
And with that, we should be able to visit
"localhost:3000/auth" and see this authentication for it.
Of course, it would also be nice to have an entry here
in the main navigation, and therefore I'll go
to my MainNavigation component here,
and in there I'll simply copy that Newsletter list item here,
and add a new NavLink to /auth
which also should get this Active class if it is active.
So I'll keep that code.
Give this a caption of "Authentication".
And with that, of course we do have this new entry here
and we can go to this page through our navigation.
That's of course, nothing new,
but that is how we get started with adding Authentication.
Now we can reach this auth form.
Now as a next step
before we actually start adding authentication logic
I wanna dive into an additional routing concept that allows
us to improve the user experience in this application,
and that fits really well into this core section here.
[no audio]