DEV Community

Cover image for Session Management- Cookies, Session and JWT
renam singla
renam singla

Posted on

Session Management- Cookies, Session and JWT

#express #cookie #webdev #jwt

Since every request to a server is a new request, so for the server to identify whether the request came from the same browser/ user, we use SESSION MANAGEMENT.

In order to identify the user, we use the concept of Cookies, Session, and JWT

COOKIES

The cookies , is a way to identify whether the user is a new user or has visited the website before.

  • When a client sends a “sign in” request to the server using a form lets say, in response to that server generates the personalised or generic response .
  • With the response, the server sends a “cookie”, an additional data to the client which stores information about the user which helps to distinguish the user.
  • Next time , whenever the user makes a get request to the server for that PORT it will also give its cookie with the request to the server , which says, i am the same user that signed in before , hence helps for identification of the authenticated client.
  • Basically cookie is a medium through which a user can remain logged in as server has information of the user through cookie.

How to set a Cookie?

  • Cookie stores the user information key-value format, the cookie can be set by- 
//user, id and info is an object of cookie
res.cookie('user','123',{
                httpOnly: false, //it allows access to the javascript
                secure: false, //allow over HTTP
                sameSite: 'Strict',
                maxAfe: 65480000 //in sec, it gives the expire time of the cookie
                });
Enter fullscreen mode Exit fullscreen mode

  • The another way to set a cookie is-

    • This is an object of user-data containing the information of the user 
const userdata= {
                username,
                id:123
                };
Enter fullscreen mode Exit fullscreen mode
  • This userdata object then further is JSON.stringify to store is a cookie with the help of function res.cookie() 
res.cookie('user', JSON.stringify(userdata),{
                httpOnly: false, //it allows access to the javascript
                });
Enter fullscreen mode Exit fullscreen mode

Here, the object of javascript needs to be changed as a string in order to store it in cookie, as it is not a primitive data type.

SO, LETS SEE HOW WILL COOKIES WORK IN CONTEXT OF AN APPLICATION!!

1. Start a Server -

To start a server , we need to install npm package and express and further use app.listen() function.

For in detail understanding refer to the previous blog- https://dev.to/renam_singla_fb52a400f07e/expressjs-for-beginners-get-post-serving-static-files-577d

2. Declaring the Functionality of the Application

It is important to know what the application will do and understanding of its flow before building it. So let’s start with declaring our functionality, request and the working of the app.

//we need a log-in page, which will give a .html page
app.get('/login', (req,res)=>{

});

//this will set the cookie, with the information send by the user
app.post('/login', (req,res)=>{

});

//we need a profile page, which is accessible to only users having the cookie
//and help in their identification
app.get('/profile',(req,res)=>{

});

//a log-out page which will delete the cookie
app.get('/logout', (req,res)=>{

});
Enter fullscreen mode Exit fullscreen mode

FLOW OF APPLICATION-

flow

3. Create a "LOGIN" page -

Through this page, client can sign in to the application using post request and with it a cookie will be created and send to the browser by the server.

To access this page on browser, we create a GET REQUEST on the server , which will send this file in response using res.sendFile and path.join() function

login

Here, this get request will give a html file in the same directory.

This inhex.html page contains a form tag, which lets the user “sign in” by giving the asked information .

<body>
    <h1>COOKIES</h1>
    <form action="/login" method="POST">
        <input type="text" name="username" placeholder="add username">
        <button type="submit">login</button>
    </form>
</body>
Enter fullscreen mode Exit fullscreen mode

Further, submitting the form, will send a post request through browser, through which later a cookie will be set.

So , our login page will look like-

outputcookie
But , if cookie already exists, then user must be redirected to the profile-

if (req.cookies.user) {
        return res.redirect('/profile');
    }
Enter fullscreen mode Exit fullscreen mode

4. Set a Cookie-

To set a cookie, we first need to install the cookie package from npm , here we are going to use cookie-parser package.

npm install cookie-parser
Enter fullscreen mode Exit fullscreen mode

And then, require it in the app.js file

set cookie

As discussed initially , to set a cookie, we use res.cookie() function.

  • Now, we will first require the “username” send by the user by the form.
  • Then, create an object for cookie data using that username.
  • Which will further help to set a cookie after changing it to a string

…when the post request was made on the submission of the form

post

And since the cookie is set now, the user can have access to /profile URL path

5. Access to “/profile” and Working of it-

Firstly for any user to access 'profile path , it is mandatory to have a cookie, which means they have logged in , otherwise the user should be redirected to the /login path

  • req.cookies : command helps to read the cookie, by the name- user 
app.get('/profile', (req,res)=>{

                if(!req.cookies.user){
                    res.redirect('/login');
                }
});
Enter fullscreen mode Exit fullscreen mode

If cookie exists-

  • We can have the username on the profile with number of times the user visited/ refreshed the profile url path
  • For js to require the username from the cookie, we need to parse the cookie
  • With the above response in res.send(), we will also send a logout button (having /logout path ) if user wants to log out from the application

profile

OUTPUT-

cookie output

6. Logout from the Application-

When clicked on the logout BUTTON, the '/logout' path will be requested due to <a> tag.

  • Where we simply empty the cookie string.
  • Cookie can not be deleted as once set, it cannot be modified from server side, as it is stored by the browser
  • And since the cookie is empty, the profile page won’t be accessed in future as it requires username and further redirect to the /login .

logout

With the cookies, there is an issue that we have not addressed yet, that they can be manipulated y anyone and hence the user can be changed without any restriction.

To stop this, we use SESSION.

SESSION

  • The session has a “session map” which will store the object of the session-data, and it will send an “id” in respond which will be stored in cookie rather than the data.
  • Therefore, no one will have access to the authentication data and it cannot be manipulated anymore.
  • The session-id will be generated automatically
  • Hence the session data is stored in the server side and session-Id is only accessible by the cookie.

NOTE- session can be stored in the database as well

1. How to use express-session?

Firstly install express-session npm package, in the terminal-

npm i express-session
Enter fullscreen mode Exit fullscreen mode

Then require it in the js file-

const session= require('express-session');
app.use(session({
    secret: 'notknownbytheuser', //for id generation, secret is required
    resave: false, //do not change the data
    saveUninitialized: true  
    //irrespective of requirement everyone will get a session ID
}))
Enter fullscreen mode Exit fullscreen mode
  • Secret should not be shared with anyone
  • saveUninitialized will create an id even before the user has login as default

The express-session do not need to use parser, it manages it by itself

2. Set a session-

On our login page, to set a session-

  • The user provides a username and the object of that is then required by the session using the POST request.
  • To set the session and to read as well we use- req.session.user
  • And in return it creates an unique id by itself 
app.post('/login',(req,res)=>{
    const {username}= req.body;

    let userData={
        username,
        count:0
    }

    // setting the session- putting userData in the session
    req.session.user= userData;
    res.redirect('/profile');
})
Enter fullscreen mode Exit fullscreen mode

The Output in the browser, will only show the “id”

session

For the profile get request-

app.get('/profile', (req,res)=>{
    if(!req.session.user){
         return res.redirect('/login');
    }

    req.session.user.count++;
    let userData= req.session.user;

    res.send(`welcome ${userData.username} with the count: ${userData.count}
        <br> <br>
        <a href='/logout'>
            <button>logout</button>
        </a>`)
})
Enter fullscreen mode Exit fullscreen mode

3. Delete a session-

When clicked on the “logout” button, /logout path is requested-

app.get('/logout',(req,res)=>{
    req.session.destroy(function(error){
        res.redirect('/login');
    })
})
Enter fullscreen mode Exit fullscreen mode

To delete, we use req.session.destroy(function(error)) function which is an error first callback function.

If there is no error it will simply does perform the function otherwise will give an error

LASTLY,

if the server is refreshed, session map will loose its data, hence it is better to store sessions in a database.

JWT- JSON WEB TOKEN

JWT comprises of three things-

  • Header: type and algorithm
  • Payload: user information
  • Signature: having header, payload and secret

We also need JWT secret.

JWT does not go with each request by itself like cookie, it needs to be send with the request.

Here, we will also be requiring cookie to store “token”, hence install that by referring to the above blog.

1. Install JWT- 

const jwt= require('jsonwebtoken');
Enter fullscreen mode Exit fullscreen mode

JWT generates a “token” when provided the payload and the JWT secret

Therefore, we have to create a JWT secret as well-

const JWT_SECRET= "decneicnjvbjrgvd";
Enter fullscreen mode Exit fullscreen mode

2. Generate a JWT -

In the post request of the form when submitted the form, we first create a token by-

var token= jwt.sign(userData, JWT_SECRET);
Enter fullscreen mode Exit fullscreen mode

And then this token is stored in the cookie using CookieParser as we did before

res.cookie('token',token,{ 
        httpOnly:true
    } )
Enter fullscreen mode Exit fullscreen mode

So the POST request for /login looks like-

post login

3. Verification of the token -

Before giving access to the profile, it is important to verify that the token exists and if exists , does it matches the user.

  • first we require the token from the cookie, if it exists then we proceed
  • The userData then is verified using the “token” and the “secret key”
  • If it does not matches , the request will be redirected to the /login
  • This is done using either error first callback function or using try-catch syntax

Now, after the token is verified, we proceed to show the profile to the client.

profile jwt

OUTPUT ON THE BROWSER AND THE TOKEN IN THE COOKIE-

output jwt

4. Logout -

To logout, we simply empty the cookie, which establishes that the token does not exists

app.get('/logout',(req,res)=>{
    res.cookie('token',"",{
        httpOnly:true
    })
    res.redirect('/login');
})
Enter fullscreen mode Exit fullscreen mode

And then , at /login get request , we first check if the token exists or not.

  • if the token exists the client is redirected to the profile page only-

get login

With this the working of JWT is completed!!

Anyone interested to view the whole code can check out the GitHub link-

https://github.com/renamsingla/Session_Management

Top comments (2)

Collapse
 
naman_arora_6e4fb5d60690d profile image
Naman Arora •

Singla ji kya aap mujhe tuition dedoge aapke notes toh badhe ache hai❤️

Collapse
 
naman_arora_6e4fb5d60690d profile image
Naman Arora •

ohho the notes are super awesome😍😍😍😍