Best Practices for Nuxt 3 + JWT + Pinia + TanStack Query Integration
Hi everyone! I need some help with organizing a Nuxt 3 project that uses JWT, Pinia, and TanStack Query.
My current setup:
- On the login page, I send a request through TanStack Query with the entered phone number and password.
- The received tokens (access and refresh) are encrypted and stored in cookies via Server Routes, and also saved in Pinia.
However, I realize this might not be the best approach.
I have a few questions:
- Should I be using Pinia and TanStack Query for this?
- Would it be better to send the phone number and password directly to Server Routes, make a secure request to the backend from there, encrypt the tokens, and store them in cookies? Then, use middleware to check route protection and user login status by making requests to Server Routes.
- I'm also considering adding an extra request to Server Routes in useCustomFetch to verify login status and refresh tokens if needed. I'm planning to handle 401 errors and logouts in Server Routes as well.
Can you please advise on the best way to organize this process? I'm a bit confused and would really appreciate some guidance!
9 Replies
You are focused on technicalities so much you did not share anything that actually matters. I would start with analyzing project domain, expected functionality, target audience, budget constraints, etc. Because there is no such thing as "one-size-fits-all" architecture.
Imagine you come in to the shop with fishing gear and ask "Is rod X better than Y? What bait do I use? etc.". Any sane person would counter with "Where are you going (river, lake)? What kind of fish is there? etc.
Even if the answer is "generic SaaS project boilerplate to learn stuff", it would be nice to know if you wish to get experience to land a job in an enterprise or a startup.
Thank you for your response. I appreciate the perspective you've shared. To clarify, this is a commercial project that I'm working on. While I'm still new to Nuxt 3, I have some experience with React. The backend endpoints for login, logout, and token refresh were prepared by our backend developers, and now it's my responsibility to implement the frontend.
Given the commercial nature of this project, my main goal is to implement a robust and secure authentication system using JWT.
I'm open to any suggestions on how to improve my current approach or best practices you might recommend. My priority is to create a reliable setup that can handle authentication efficiently, while also considering the potential for future expansion and development.
a robust and secure authentication system using JWTWeird to see these words in the same sentence... You should probably read this. It is an opinion piece, and guys shitting on JWT usually precisely pick and omit use case, to make their message sound like universal truth... but it has good points.
I understand your point, which is why I plan to move the tokens to cookies and store them in an encrypted form. Unfortunately, at this stage, I can't change the technology stack, so I need to find a way to implement authentication using tokens.
Sure, I see no problem with putting tokens into cookies. You only need some
session-expires-at HTTP header to know if it's a good time to ping backend and get new cookie.
For example my backend replaces cookie if 50% of the session time passed, so frontend has something like this:
What future expansion do you anticipate? Introducing 2FA? Adopting passkeys? Asking for OTPs when user does something sensitive?
Domain plays a big role here as well. Is it healthcare? Finance?
--
Ok, that maybe irrelevant at this point. Going back to original question...
Can you please advise on the best way to organize this process?
- give them nice-looking login/registration/reset-password pages, make an easy pinia store to manage it closely together
- add Nuxt middleware for authorization - i.e. restricting routes depending on user role & permissions
- lean towards full SSG - avoiding stateful Nuxt server as backend proxy to make attack surface smaller - you can host static assets on Netlify or make the backend serve them
TanStack Query brings nothing to auth scenarios (but I never used it so, don't quote me) and seems to require stateful backend, meaning it is not my recommendation as you will risk locking yourself in the server-based model.
You may ask backend team if you should anticipate dropping JWT's for http-only cookies when they realize they cannot reliably handle session invalidation π
Personally I learned a lot when I had set up WorkOS with custom pages. Adding MFA support was a breeze π
Thank you, Jacek, for all the valuable advice! I've implemented a setup where server routes handle login, logout, refresh, and check operations, calling the backend accordingly. The tokens are stored encrypted in cookies, and everything is functioning well.
However, Iβm now facing a challenge where I need to add the access token to each request that the application makes to the backend. Since the tokens are stored in cookies on the server, I can't access them in useCustomFetch.
Should I make a proxy request in the server route, add the token to the header there, and then send it to the backend in this modified form? Or should I add a middleware to handle it? What would you recommend?
...in cookies on the server...You probably mean "http-only" cookies stored on the client, accessible only by server that had set them. Well, you are stuck in making Nuxt server a proxy to every backend request. Usually middleware abstract a piece of code to get information from cookies and put them into some kind of request context object, so that you don't need to pollute every request handler, but if you would end up with
[...].ts catch-all handler, you don't really risk any duplication of such logic - hence, middleware does not seem necessary.