Cookie vs Token authentication

Working of Cookie Authentication

Let's now discuss the working of cookie authentication step by step.

Step 1: In the first step, the client will send the login request to the server by logging in to the app, as shown in the below image. 

Step 2: Now, the server will check the login details, and if it matches, it will create a session in the database. You can see this in the image below.

Step 3: After the session creation in the database, the server will return a session cookie (only kept during the current session) to the client. In other words, the server responds to the client by putting the cookie in the Set-Cookie header.

Step 4: As the cookie is sent to the client, now each request from the client that it will send to the server will contain a cookie. The server will then check if these requests came from the same user with the help of that cookie. If the request matches with the cookie present in the server, the request will get authenticated. Else the request will be rejected by the server.

Step 5: At last, when the client logouts from the app, all the sessions created during the process will get deleted from the server and the database along with cookies.

Token Authentication

Token authentication needs a more manual setup as compared to cookie authentication. But it also helps the user overcome the cookie-based approach's flaws.

In this method, the client/browser receives an encrypted token from the server after it has verified the user's login details. This encrypted token can then be added as an authorization header to later made requests and is kept by the browser.

Working of Token Authentication

Let's now discuss the working of token authentication step by step.

Step 1: The first step is the same as the cookie authentication. The client will send the login request to the server by logging in to the app. 

Step 2: In the next step, the server will validate the request and generate a token, sign it and send it back to the client.

Step 3: Now, the client will store the token and send it back with the requests using the Javascript to the server. If the token matches the server data, then the request will be authenticated else rejected.

Step 4: In the end, the client will click on the logout button, but the token present in the website must be cleared manually from the storage. All the sessions present on the server or database will be vanished after that.

Structures

You must have been thinking how these two authentications look like. So in this section, we will look at the structures of cookie and token authentication.

The cookie authentication looks like this:

HTTP/2.0 200 OK
Content-Type: text/html
Set-Cookie: <cookie-name>=<cookie-value>; expiration=<date>
Set-Cookie:<cookie-name>=<cookie-value>; Max-Age=<number>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain>
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path>
Set-Cookie: <cookie-name>=<cookie-value>; Secure;
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly;

The above is an example response of Set-Cookie headers. This cookie is supplied as a name-value pair and provides a unique id that identifies the user. A cookie contains information such as the expiry date, domain, age, last access, and so forth. 

Now coming to the token authentication. The snippet of the token authentication looks like this:

eyJhbGciOiJIUzI1NiIsInR5cCI5IkpXVCJ9
.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG8lIiwiaWF0IjoxNTE2MjM5MDIyfQ
.SflKxwRJSMeKKF2QT4fwpMeJf36POk69JV_adQssw5c

The above example is a JWT (JSON Web Token) example. A JWT token has three parts separated by dots (.). The three components are: 

• JWT header 
   
• JWT payload
   
• Signature (header.payload.signature).

Cookie vs Token

Now as we have understood both concepts deeply, it's time to compare them on the basis of a few parameters. Let's go.

Frequently Asked Question

Is the session a cookie?

No, cookies are client-side files that contain user information on a local computer.

What are the different types of cookies?

Different types of cookies are available, like Session Cookies, Permanent Cookies, First-Party Cookies, Third-Party Cookies, Flash Cookies, etc.

What are session cookies?

Session cookies are the cookies that contain the user's activities for as long as the session expires. Once the session expires, the cookie gets deleted.

List the libraries used for authentication in JavaScript.

The top libraries used for Authentication are Passport JS, AuthO,  Permit, Grant, Feathers Authentication Management, and Firebase Authentication.

What is CAPTCHA authentication?

A CAPTCHA authentication is a case that helps verify the working of browser cookies and CAPTCHA-based verification.

Conclusion

This article discusses the topic of Cookie vs Token Authentication. In detail, we have seen the definition of both cookie and token authentication. Along with this, we have seen their working example, structures, and tabular comparison between them.

We hope this blog has helped you enhance your knowledge of Cookie vs Token Authentication. If you want to learn more, then check out our articles.

• Authentication Testing
• Cookie Authentication
• Introduction to authentication
• Introduction to C#
• Difference Between Data Analyst and Business Analyst

And many more on our platform Coding Ninjas Studio.

Refer to our Guided Path to upskill yourself in DSA, Competitive Programming, JavaScript, System Design, and many more! If you want to test your coding ability, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio!

But suppose you have just started your learning process and are looking for questions from tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problems, interview experiences, and interview bundles for placement preparations.

However, you may consider our paid courses to give your career an edge over others!

Happy Learning!