All right.
Let's get started with cookie based authentication.
Well, we are going to use the previous project, but for me, I have made a copy and then rename this
one to cookie based authentication.
So in that way, in the future, I can make reference to those different types of authentication.
So let's get started.
Well, we can maintain this route or we can remove everything from this route, but for the meantime,
let's maintain it for future references.
So let's collapse the route that we are not going to work on at the moment and have some enough room
to start with cookies.
So now down here or up.
Let's start from the up here.
Okay.
Up here.
Yes.
Let me collapse this one also.
And now let's start with good.
So the whole logic is that we are going to save the user login details inside the cookie and the cookie
I will save inside the user browser go.
So how can we create that?
So let's create one route.
Where is going to send a cookie to the browser?
In that way we are able to use that one for logging and logging out.
So the first route going to be sent.
Cookie.
To the client and that is a browser so app darts gates and the endpoint it can be anything but let's
make it more descriptive.
I send cookies and our callback function as that I have access to req and then my response.
So it is how we send cookie as easy as you think.
So here send cookie.
Go make a list of response on that.
We have a method called Cookie and this is a method that takes in two elements that is the key value
per.
So here we can save any property.
For the meantime, let's make the property name as name and the value is going to be John as that.
So with this one, let's go ahead and send a response that cookie sent as that.
Cookie set.
I was sent.
I said, whatever.
So now I have save it.
Now let's go to the browser and let's make use of forest slash cookies.
And as called sense.
Let's hit enter now.
I think my endpoint is wrong.
It's send cookies.
I made a mistake here.
You're going to be saying cookies.
Now I got a message that cookie sent.
So how can we check right click and click on inspect and then click on the application.
And here on the left side here and a storage click on cookies.
And in there we have our URL which is lookup with column 3000.
If you click on that, you can see that we have this window with a name and value and this is where
our cookies are being stored.
So the name represents the name of the cookie we set, which is name here.
And the value is John, which is this one.
And we have additional property, the domain that it is on which is local.
Host indeed it is local host and a path and also have a session called expire, meaning at what time
we want to expire this cookie.
And I'll explain to you very soon and you also have some property called HTTP only.
It means that if you don't want anybody to tamper with our cookies, we need to send the cookie over
at https.
So I will show you as you move on.
For the meantime, let's focus on this two key value per.
And since we have the user in the browser upon every request, our server can check if there's a user
name inside the browser so that the flow of cookie based authentication.
So how can we register from the form and save the data inside cookie here?
So let me show you how we're going to do it.
Pretty simple, right?
Yes, it is.
So all what we are going to do is that inside the registration route for this one.
For the meantime, if you are trying to hash the user password before saving it, you are going to have
a couple of steps.
But let's make it pretty simple.
So instead we are not going to make use of decrypt inside this or we can use it for the meantime.
Let's ignore the big functionality.
So let's remove that and let's also comment this one out from here or we can remove it as that.
So now before saving, what are we going to do?
So what comes back from the user here is a user being registered.
So here we can assign the user into a variable as that.
So after we got the user, then we can save the user details inside cookies.
So here save.
Or store.
Username.
And password.
Inside the cookies.
But to increase the security level, it is not advisable to save the password inside cookies.
But for the meantime, let's go by this as we move on.
We need to improve the code a little bit.
So here we go.
So on red dot cookie, as we did before, the property name here is going to be as that's going to be
a string as user name.
It can be anything but the value is going to be user from our DB and going to be the user name as that.
And for this one, we can save many cookies as we want, so we can copy this one also.
And down here, let's say the password for now, and we avoid that one very soon and the password from
the DB.
Also, I want to show you that open registration, we are going to save the user inside our cookie.
That's what I'm trying to do.
So now moment of truth where we also have full name.
Why not?
We can also save the full name.
Also inside that we're going to be the full name and you're going to be asked to name.
All right, so now let's go ahead and register.
So save it.
And now full name going to be as John Doe and username going to be as John and password.
One, two, three, four, five.
And let's hit register.
Well, for some reasons we are not getting the registered user.
Why is it so?
All right, so let's check our code a little bit and see where we are getting something wrong, where
isn't being saved in here.
So let's go ahead and then console log the registered user and see if we are going to register the user.
Well, all right.
So here we go.
Let's open the terminal here and check if when I see the registered user where our server has hung out
because we are not returning anything from the root.
So register anything here, anything here, anything here and let's see, let's check it.
Well, we have it here.
Let's try to put in a string here and says.
Emma.
Let's save it and check it out.
Inside the browser.
Let's go ahead and register a user.
And at the end, we want to save the user details inside the cookie.
So let's say we want to register Daniel, and the user name is done and the password is one, two,
three, four, five and register.
Well, why is it that we are not seeing the details here?
The reason is that we are not returning anything from this root.
So let's go ahead and retain, let's say restart, redirect and then go to the login page after registration.
So let's save it.
And now let's refresh the page and let's make the request.
Let's go to register and going to be Daniel and Dan lowercase Dan and password.
One, two, three, four, five.
Now let's hit register and you can see something incredible has happened here we have the full name,
which is Daniel here, and then we have the password, which is this, and we have the user name, which
is this.
I use imama y.
Okay, that's okay.
Don't worry.
So the good news is that we are able to get the details here.
That is awesome.
So how can we get this data inside our root?
But the cool thing is that for cookies like this one, we can tamper with the values here.
So for this one, I can change this one to anything.
You see how I'm trying to turn with the cookies and then I can even use JavaScript to access the cookies.
So if I go to console and I make use of document dot cookie, you can see that we have the user details
here, meaning I can use JavaScript to interact with my cookie in this way.
That's why we say that cookies are not secured, but we will find a way to avoid this one very soon.
Now here comes the question How can we log in?
It's pretty simple.
We are going to use the form to log in with our username and password.
And since this user has been saved into our DB, we can use that one to find the user.
If you check our database and I refresh it, you're going to see that.
I'm going to see Daniel, which is this one over here.
I have the username as that in full name as that.
So how are we going to log in?
It means that this logic remains the same for logging in, but in this one we are making use of what's
the secret password?
So we are going to tamper with it.
But instead let's go ahead and register a user with hash password as we did before.
So we are going to bring in the big package to do the registration.
But instead upon registration, we are not going to save the password into cookies.
So let me remove the password here.
But for the meantime, let's maintain it.
And now let's go ahead and then hash the user password.
So as we did before, let's move first.
Here we have the sorts equal to await, then be encrypt dot gen sorts, pass in ten and cast the hashed.
Password as passed is equal to the awaits be scraped.
Darts.
Hash and our patch in the plane password and then the salt.
So here before saving it, let's bring this one up, the sorting here before saving it as that.
And now instead of this plain password, we are going to save the hash password as that.
Now the registration is complete.
So let's go ahead and register a new user and to check if the hash password will be saved inside the
cookies.
So go to register.
Let's refresh it.
Open the application and the cookies.
Let's remove everything from here, trash it and let's go.
So let's go ahead and register this time around.
Let's say three months and four months.
Password.
One, two, three, four, five.
So let's go ahead and click register and let's see.
And indeed we have the user details inside our cookies.
We have the full name, a famous password, a string of characters as that, and the user name Y Emma
here.
But we use them as well.
Let's see.
Well, it's because of this code.
We are setting the username here.
So let's remove that and use the.
User dot username.
Good.
So now we have it.
So let's go ahead and then log in.
Now everything is correct, so let's go ahead and then log in with those credentials.
And one, two, three, four, five.
Let's see.
Now everything is correct.
So while cookies are.
Why are we saving this user here?
So now here comes the question.
How can we implement the protected route?
Remember?
And the fact about cookies we made mention that cookies are used for session management.
And last point is that we can use cookies to store the current user in that way.
Upon every request, we are going to check if a user is logged in.
So how are we going to do that?
So back to a route called protected.
This route here you can see that we are just sending the template.
So here we are going to check if a user is logged in and we can do that by checking the user inside
our browser here.
And that way we'll be able to know if indeed there is a user cohort, Emmanuelle or Thomas or whatever.
But before you move on, you can see that we have additional cookies here and this one is from the URL
of the image we use.
And like I said, that most applications use cookies to keep track about the user activity.
So Pixabay also used what is called cookies to keep track of the user.
We see that a domain is from where?
From Pixabay.com because inside our model we use the URL from Pixabay.
That's why we got cookies from Pixabay.
For now, let's focus our own cookies here.
So here is a clue.
When I go to this route first I want to check if there's a user called Thomas in the cookies.
So how can we get it?
And to get a quick is is pretty simple using express so let's see how we can get a cookie.
So back to the protected route here, let's try to make use of this method.
So here let's say get cookies.
So here we go.
All right, so let's check it out.
If I go to the protected route, when I click on that, let's check the console.
You see that we have undefined.
So by default Express cannot pass the cookies from our browser unless we installed a third package called
Cookie Pass.
So and at this point we say that we need a package called Cookie Pass to send back the cookie to the
server upon each request.
So back to our terminal, let's go ahead and install a package called cookie parser.
So npm I cookie.
Dash Plaza.
And here we go.
Now it has finished installing.
Boom.
Okay, let's clear the console and let's start this server.
Now, how can we configure cookie parser?
It's really simple.
So let's require the package here.
Cost.
Cookie parser.
Is equal to require the package as cookie parcel as that.
And I'm going to pass cookie parcel as it mature and that is it.
So here these are our words here.
Let's say pass.
Cookie.
Cookies.
So app tarts use.
Then you pass in the cookie parser as a method or function.
So now here we go.
So now let's open the terminal.
And now let's try to hit the endpoint, slash protected.
Now let's check the terminal where we got undefined.
Sorry.
On my side is supposed to be rec dot cookies.
Yeah.
So let's refresh the page by hitting the endpoint.
And now you see that I have the user details inside our root.
But if I turn the cookie parser off like that and I made the request to the root, let's see.
It can see that it is undefined.
So this shows that cookie parser allows us to retrieve the cookie from the browser and that is it.
So here how can we protect?
First of all, we can check if there is a property on the foo name or the user name and that way we
are going allow you to want to access that.
So here we go.
So now we can find the user under here.
So let me call up this one.
And now how are we going to implement that?
So here we go.
Const is equal to user, which is equal to rec dot cookies and I only need the user name only from the
cookie like that.
So here, if there is user name, it simply means that the user has logged in.
Right?
So here we go.
So we can pass that one even to the templates as that as a screen agreement, as user.
Like that.
So on a template, you are going to dynamically render a text based on the status.
So here before we even let's remove this one.
Before we even display this one or this text, let's wrap this one or let me have some room here and
show you what I mean.
So what we are going to do is that we are going to display a text.
Each one says that you are not.
Locked.
Locked in like that.
And if you are looking, we are going to display this work.
So how are you going to do it?
So let's use the Aegis template or syntax.
So here we are going to write JavaScript inside here.
So if there is a user on a template, then we will go ahead and then display this one here.
Cut it and place it here.
So here, let's close the Aegis syntax here.
Likewise.
Here.
Also good.
Otherwise, go ahead and render this or let's bring the arrows.
Also here, arrows and make sure that you close this tags and close this one or so like that.
And let's cut this one and place it inside here.
Now, moment of truth.
So if I go to the page, you will see that when I refresh it, I see where where from this error.
Let's see our code or bottom side.
We need to pass in as object to the templates as that.
So now let's save it and now let's refresh it.
And we see that we have welcome.
But if I remove this cookie, let me remove the user name.
And now let's refresh it.
And we see that you are not logged in.
So it means that upon logging into we need to save the user into the cookies.
So here this what we can do, we can copy this one.
And now upon logging into where is the logging route, which is let's have some room here, which is
this one now before sending which is here, we need to set the user into cookies.
So we are going to use user found here, user found going to be this ones and as that.
So I want to save the password again.
So let's remove the password from the cookies as that.
So let's go ahead and then continue the logging in.
So log in here, Lizzy, and then one, two, three, four, five and then click on log in where I got
some error.
So let's check the terminal here.
Where are we getting wrong.
User found is not.
Oh I have user found.
User found.
Sorry guys it's about the redirection is going to be user found.
Yeah.
Good.
So let's try again.
Refresh it.
And now let's go to the list.
Remove the user here or the cookies.
And now let's go to log in.
Lizzie.
One, two, three, four, five and log in and now let's go to protected and now work on.
So now everything is working.
So what about the if I go to log in sorry.
When I log in and I want to go to the profile page.
Let's see.
Now I want to look out.
When I click on logout, it means I want to remove the cookies from the browser.
So let's see how we can implement the logout.