Why NextAuth uses cookies??

Introduction

So we want to authenticate our user in our NextJS app, right? Then why don't we just make a request to the server the first time for authentication, get the JWT token, and then maybe store it in our local storage and keep sending the token in our subsequent requests?

Sounds like a decent approach, doesn't it? Yeah, it could have been a possible and decent approach if we were working with React, where everything is client-side rendered. But in NextJS, if we attempt to do so, we will be compromising the benefits that NextJS brings, such as SSR (Server-Side Rendering). This is because NextJS is different from our traditional MERN stack applications, where using JWT with localStorage could have been an acceptable option.

Why Not LocalStorage?

So, let's understand what's different in NextJS that is stopping us from attempting this approach. In NextJS, all the pages are server-side rendered by default, although it can opt for client-side rendering for pages we want to make interactive.

Only client-side rendered pages can access browser-specific constructs such as localStorage, because localStorage is present only on the browser. Hence, there is no way for us to use localStorage as a way to maintain a session or make authenticated requests in a server-side rendered page in NextJS.

The Role of Cookies

Then the option left for us is to use something that can be accessed by these pages on the servers so that they can hydrate our pages on the server itself and return us pages with us already authenticated. So here comes our sweet little savior... Cookies!

What are cookies? 🍪

Cookies are small pieces of data sent by the server to the browser while browsing, which are then automatically stored in our browser. This stored piece of data in the browser is sent again to the server with every future request. So, cookies offer a very reliable way for websites to remember user-specific things. We can leverage cookies for the following purposes:

Session Management: Cookies are used to identify the user (by the websites) and maintain a session state of the user across multiple pages that the user visits.

NOTE: "Session" is the term used to refer to a user's time browsing a website.
Tracking User Behavior: Cookies can track users' activity across the sites to get insights about the browsing behavior of the user. It is used for analytics purposes, to improve targeted advertising, and more.
Personalizing User Experience: Cookies keep track of the pages/websites that the user visits, the preferences of the users, likes and dislikes, in order to tailor the contents and ads that the websites show to their users.
Improved Security: Cookies can be very useful in authenticating our users. We can set cookies in response to the user signup in the browser, and now this cookie will be used to keep the user's session in subsequent requests as the cookies once set in the browser by a particular website will be sent back to that website with every request made to the website (with no exception).

How Auth Works with Cookies

Conclusion

So, all in all, we cannot use localStorage for authentication in NextJS because in NextJS, pages are server-side rendered by default. For the initial request to be pre-rendered, we cannot send localStorage items for the very first request that we make from the browser. However, cookies, once set in the browser, are sent to the website by default and can get us pre-rendered and populated pages in the very first initial request itself.

Here, the "very first initial request" means when we search for a website in the browser, and at that point, the browser makes the request to the server to get the resources.