So we added error handling,
now I want to make sure that
we don't even get that csrf error anymore.
And for this we'll need to add sessions.
And that is something we'll need to add anyways,
because before I add any validation
for the sign up process,
indeed, I want to make sure that we can generally
log users in.
And we'll do that,
as you'll learn in the authentication section
with help of sessions.
Sessions are pieces of data stored on the server,
which are connected to users with help of cookies.
And if a user has a valid cookie with a valid session ID,
that points to one of the sessions stored on the server
and that session then says that this user is authenticated,
then this user can be granted extra access
to extra resources.
That's how authentication with sessions works in a nutshell.
So therefore, we'll need to install new third-party packages
that help us with session management.
Because as so many things,
we don't want to do that ourselves.
It would be cumbersome and also error prone.
So there are more third-party packages we can install,
for example express-session,
but also connect-mongodb-session,
which will be the session storage package
we use for storing the session.
Sessions can be stored anywhere
in memory, which is not ideal though,
in files or in databases.
And I want to store my sessions
in the existing mongodb database I already have,
and this package will help us with that.
So these are two packages that should be installed,
and once they are, we can restart the server.
And now we need to initialize those packages
in order to utilize sessions correctly.
For this Back-End app.js,
we can start by adding those packages here,
the session and the connect mongodb package.
Or we do it a little bit differently,
since we'll have a couple of things to set up there,
I will actually go to a different folder here,
a folder which I will create,
the config folder
in which I'll add a session.js file.
And I want to do all of the sessions set up work in here.
It's not a must do, but something I'll do here
to again keep the app.js file lean.
Here, I want to create my session store
and they offer all require
my mongodb store
by requiring connect-mongodb-session,
and I'll then add a function
which I named createSessionStore,
in which I want to call mongoDbStore,
which is a function to create a new mongoDbStore
that can be used on our session.
And that should be const.
Now mongDbStore wants the session
for which it will be created,
so I will accept a session as a parameter value here,
and we'll have to make sure to provide that value
once we call createSessionStore,
and forward that to mongoDbStore.
Then as a next step,
we can call new mongoDbStore to create a new store object
based on that constructor function,
which is provided by that third party package again,
and we pass out on the fly created object,
to this constructor function
to group various configuration settings together.
For example, the uri.
The uri to our database.
And here that is mongodb://localhost:27017.
Then also the databaseName.
And that here of course, is online-shop.
The same values I use in my database.js file.
And therefore of course we could also store those values
in a global config file and export them there,
but I'll do it like this.
Last but not least, we have to define a collection
in which our sessions will be stored
and I'll name it sessions.
This will then give us the final store
which we can use and attached to our session,
and that is the store I will return here
in my createSessionStore function.
Now I'll add another function in here,
and that is the createSessionConfig function,
in which I wanna create a configuration for my session.
And the configuration is more than just a store.
So here I want to return an object
because the express session package which we will use,
wants an object with all the configuration settings
that we can set for creating such a session.
So here I'll return such a configuration object.
And in there you can set up all kinds of things.
I covered this in depth,
in the authentication course section,
where I introduced you to sessions
and the express session package.
You should set a secret key,
which is used for securing the session
and I'll set it to super-secret.
You might want to pick a longer, more random string there.
I'll set resave to false and saveUninitialized
to false here.
Uninitialized like this.
This ensures that we only saved a session data
to the database if it really changed,
and if some values were set.
And I'll set the store too,
the result of calling this function.
So here I'll then simply call createSessionStore,
and the return value of that will be my store here.
And that's the story I set for the session
that will be created.
And we can also configure the cookie
that belongs to the session.
And if we don't configure it, for example,
it will be cleared or the session will be invalidated
whenever the user closes the browser,
which might be what we want.
Alternatively, we can give this cookie a max age
with the max age property on this cookie object,
which we can set to a value in milliseconds
for which the cookie will be valid.
Even if the browser was closed in between.
And here I'll set this to a value of 2 times 24,
times 60,
times 1000,
to set this to two days in the end.
But you can of course use different values.
It has to be a value in milliseconds though,
or no value at all if you are fine with the session dying
whenever the browser is closed,
which could absolutely be fine.
And now I will just export
this createSessionConfig function like this,
and we can then use it in app.js.
So in app.js here,
maybe here
I'll import createSessionConfig
by requiring ./config/session.
And in this app.js file,
we now also have to import expressSession,
this session package we installed as well.
And then down there before we use the csrfMiddleware,
because that needs a session,
we can call expressSession
as a function to get such a sessionMiddleware,
which will do all the session management for us.
And to this expressSession function execution,
I pass my session configuration.
Now for that, I'll get my sessionConfig here
by calling createSessionConfig.
This function we just worked on a couple of minutes ago,
and I'll pass that to expressSession like this.
Now back in session.js, by the way,
we must not forget that createSessionStore
wants a session, a parameter value in the end,
and at the moment I'm not passing this here
when I call createSessionStore.
Now, actually what we can of course do here,
is we can just import expressSession here,
in this session.js file as well,
and not accept session as a parameter value,
but instead use this imported expressSession package here.
Because that is the session provider,
which we will use for creating a session later anyways.
So we can also do it like this.
And then the SessionStore and Config can be created,
and we can then use this config here
to initialize the session.
And then thereafter the csrf package
should also work correctly.
So if we save all these files and reload,
we should be able to see this sign up form again.
But now in this form, if we inspect it,
we see this hidden input with that csrf token.
And now only forms submissions with that token
will be accepted.
So now we're getting closer to adding authentication
because now we did also add a session provider.
Now of course, we still need to add validation
to this sign up form as well.
But before we do that,
let's actually work on the log in form
and let's make sure that users can actually authenticate
and that we do use sessions for tracking
the authentication status,
before we then find Q and D validation here.