Nuxt 3 passing data from server middleware to app middleware
I have a situation where I am verifying jwt token so if it is verified then i want to send Boolean value so i do certain condition, vice-versa.
Passing via cookies is the only way or we can use event.context.isverified as Boolean in server middleware and get its value in app middleware as useState('isVerfied' () => false)
I tried the useState but the value doesn't get reflected.
Both middleware are global middleware
2 Replies
Hi @Evascene_void. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Short answer: don’t rely on useState from server middleware. Use server → client payload or initialize shared state via a Nuxt plugin, or use cookies.
Options backed by sources:
- Attach data on the server and read it on the client via payload/useNuxtApp: server-side values can be exposed to the client through Nuxt’s payload (e.g., data/state populated on the server is available on the client) (useNuxtApp payload). You can compute isVerified in a server route/middleware and then expose it to the client, e.g., set a state on server (useState) so it’s serialized into the payload and readable on the client (use-nuxt-app payload).
- Initialize from cookies with a plugin, then consume in route middleware. Read the cookie on server using useCookie (works server and client), put it into a Pinia store or a state in a Nuxt plugin that runs before route middleware, then use it in app middleware (Using cookies in APIs and Middlewares and the update recommending useCookie; also see using useCookie for auth/state and SSR-safe access (Accessing tokens…), and persisting state via useCookie rather than localStorage (Persist state…)).
- Read headers in a server-side plugin and prime a store/state for SSR use, then consume in middleware (pattern shown for IP-based flag; same idea applies to isVerified) (Nuxt3: provide server evaluated variable…).
Notes:
- Server middleware runs in Nitro (h3) and can set event.context.isVerified, but that context is not directly available in client-side app middleware. You must bridge it: serialize via payload/state on SSR, or set a cookie and hydrate a store/state in a plugin before middlewares run (server directory/middleware behavior).
- useState works across SSR/CSR when the state is created server-side during rendering; it’s then available via payload on the client. If you set it only in server middleware without rendering context linkage, it won’t reflect on the client. Use a plugin or set the state during SSR of the page so it’s serialized (useNuxtApp payload state).
If you need code, the sources don’t provide a complete snippet for JWT verification → payload, but they do show the patterns above.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@719787055789506632> Kapa.ai is still learning and improving, please let me know how I did by reacting below.