We want to use Next.js for our application but we would be using mainly client side rendering for fetching data. The API is an external API will built that we would be calling. Only the homepage will be using server side rendering.
The core API would require login to access the dashboard and the dashboard content is user specific. So, we want to use client side data fetching in next.js.
JWT was used in the external API to give user’s authorization and user’s role along with other user’s details were stored in the JWT access token. We are new to Nextjs and wanted to know how to go about with this.
We need each user to send their access token as part of their request when making API request while inside the dashboard.
Can we store this access token in their local storage and pass it to their header bearer while making API requests?
3
Answers
That’s a very common/viable approach.
But, it’s important to remember that anytime you’re dealing with authorization, it’s important to think about security.
There are differences between the functionality and security of cookies vs local storage vs session storage. XSS attacks are becoming more rare, especially with modern frameworks doing so much to prevent even the most clueless developer from making such mistakes, but it can happen.
Here’s a simple article going over the differences between methods of browser storage and the main functional/security considerations:
https://dev.to/cotter/localstorage-vs-cookies-all-you-need-to-know-about-storing-jwt-tokens-securely-in-the-front-end-15id
Yes you can. After the request is made to login, and the API returns the JWT, you can call localstorage to set the item. Then when making the client side request you would call localstorage to get the item, then pass it in the headers of the request. Keep in mind, you will need to manage expiration.
Another way to go about this is when logging in, have the API return a header for setting a cookie which stores the JWT in cookies. Then when making the request (granted on the same host) it will automatically pass along the cookie if you set the header Access-Control-Allow-Credentials
Personally, I would go with Cookies, because if they are set them to HTTP-Only it will increase security. It also comes with the benefit of having an expiration time so the cookie will clear when it is no longer valid, and the user can close the page, and reopen and still be logged in.
Hope this helps.
Yes you can but Do not store token inside local storage !!
To achieve this : use either a web worker to send the token to your code when needed or just store the token in memory. For example, when you receive your token, put it in a variable accessible to your application.
This way you prevent yourself from Cross Site Scripting (XSS) because local storage can be accessed by any script downloaded by the end user.
Finally, I can recommend to simply store your token inside an http-only cookie : https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie easiest by far