Getting access to cookies in middleware
Hi am building a very simple auth in Nuxt3. I am setting session cookies with jwt tokens in my login.post.ts endpoint. For the protected pages I am using a middleware, but I am struggling to get access to the cookies in the middleware.
In the login endpoint I am setting the cookie with the h3 setCookie function. Can you please help and let me know how I access the cookie in the middleware now so I can validate the JWT?
Thanks.
30 Replies
have you tried
useCookie ?useCookie to access the cookie only, or both to set and read?
you asked for reading
I have tried useCookie, but it is not working, even thought the cookie is set, see screenshot.
it's a ref. needs .value
Well well, thanks very much. Totally missed that. It's getting the value now.
Thank you very much @Likonima
@Likonima I have one more question please. I am still very new to Nuxt and now that I am using useCookie with the ref, it's giving me a bahaviour that I don't understand.
In this prototype I super simply just want to check if the session exists and if the JWT in the session is correct. However the fact that it's a ref is making this a bit more difficult I feel and I am struggling to get this to work properly, could you please assist?
When no cookie is set, it is correctly redirecting back to /
However when a cookie is set it is showing the protected page that is using this middleware for a split second, before then redirecting to / also.
Why?
sounds weird. at least for the code that can be improved by using
if(!session), if(!payload) and then the optional chaining for session?.value could be omitted
not sure with the theme but did you do compare = null (which would assign a value) instead of === null ?
regardless of that the code improvement should be done using logical not !
yeah that seems to be it and will likely fix your issueI initially had just the logical not (!) but was running into strange behaviour with it, which is why I changed it, but let me try again.
Yeah same strange behaviour after applying those logical not changes
but it's right to use that. any errors?
No errors, just the strange redirect.
unpleasant
can you copy paste the modified code?
Here an even more simple example of the strange behaviour (which may be the root case).
Just having this code (nothing else) in the middleware
It doesn't redirect (navigateTo) at all, whether a cookie with name session is set or not.
I think it's just me missing something important regarding the fact that it's a ref?
well again .value missing but it should redirect in this case since the variable is a ref containing either value of string, null or undefined
This now same behaviour, as in it shows the protected page for a split second, then redirects to /
looks good to me. must be sth else
Yeah there is not really anything to the app.. It's strange.
Also tried in a different browser, same issue.
that needs some debugging. maybe some other condition messing with this logic. without seeing the project I can't tell from here
Even though this is such a small project, creating a band new one now with just the protected page and the middleware, let's see.
Ok found the problem @Likonima , when setting the cookie if httpOnly is set to true, it's doing the strange split second render and then redirect, if I don't set that property (or set to false) it works as it should. Would you know why that is?
Lol, I am giving up.. So it works for the simple check to see if the session exists. If I also do the additional check for the JWT I am again getting this strange split second redirect, so strange!!
I have no clue but I've had several issues when trying to use nuxt as a backend and just don't use it.
I would really like to use it, but it's just not making it easy for me to like it... :*(
Thanks for your help anyways!
it surely does not
After some more trying around, looks like it has to do with doing an async call in the middleware, but I thought middleware supports async? The veryifyJWT is being awaited, once I remove that from the code it works.. Why!?!?
