Nuxt•2d ago

useCookie bugged, not keeping state

I am trying to build a system to keep track of user auth, using composables and useCookie. It works fine however the cookie is completely forgetting its token value between functions. Here's the code: https://pastebin.com/UiRnSPRc When the user calls logIn, the token is fetched and set to the cookie. At line 47 you can see I'm logging it and in my tests it is set to the correct value. However the logIn function then calls fetchUser, which accesses the same cookie - but on line 74 you can see it logs undefined for some reason. The cookies are both the same, to ensure it I defined a custom useTokenCookie. I'm really not sure what's happening and why the cookie just magically forgets it's set value?

Pastebin

type User = { id: string; username: string; email: string; crea...

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

3 Replies

kapa.ai•2d ago

Hi @Tony. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights into your issue with useCookie in Nuxt 3. However, I cannot directly access or review the code you've linked on Pastebin, so I'll provide general advice based on common issues and recent fixes related to useCookie. There have been several recent bug fixes and improvements to useCookie in Nuxt 3 that might be relevant to your situation: 1. Fix for useCookie regression (https://github.com/nuxt/nuxt/pull/25598): This fix addressed a regression that affected useCookie behavior. It improved tests to ensure value changes across useCookie invocations are properly handled. 2. Fix for inability to update same useCookie with same initial value (https://github.com/nuxt/nuxt/pull/25255): This resolved an issue where updating a useCookie with the same initial value wasn't working correctly. 3. Prevention of duplicate set-cookie headers (https://github.com/nuxt/nuxt/pull/28211): This fix prevents setting duplicate headers if the value is unchanged, which could potentially cause issues with cookie persistence. Given your description, it seems that the cookie value is not persisting between function calls. This could be due to a few reasons: 1. Timing issues: The cookie might not be set immediately when you try to access it in fetchUser. 2. Server-side vs. client-side execution: Ensure that you're not mixing server-side and client-side code inappropriately. 3. Cookie options: Check if you're using the correct options when creating the cookie, especially regarding expiration and path. To help resolve this issue, you could try the following: 1. Use the refreshCookie utility: Nuxt 3.10 introduced a refreshCookie function to manually refresh useCookie values when a cookie has changed. You can use this after setting the cookie in logIn before calling fetchUser. Here's how you might use it:

   const login = async (username, password) => {
     const token = await $fetch('/api/token', { ... }) // Sets `token` cookie on response
     refreshCookie('token')
     await fetchUser()
   }

   const login = async (username, password) => {
     const token = await $fetch('/api/token', { ... }) // Sets `token` cookie on response
     refreshCookie('token')
     await fetchUser()
   }

Read more about refreshCookie (https://nuxt.com/docs/api/utils/refresh-cookie) 2. Enable the experimental cookieStore option: This feature automatically refreshes useCookie values when cookies change in the browser. You can enable it in your nuxt.config.ts:

   export default defineNuxtConfig({
     experimental: {
       cookieStore: true
     }
   })

   export default defineNuxtConfig({
     experimental: {
       cookieStore: true
     }
   })

Read more about cookieStore (https://nuxt.com/docs/guide/going-further/experimental-features#cookiestore) 3. Double-check your cookie options: Ensure you're setting the correct options for your use case, especially regarding expiration and path. 4. Use useCookie consistently: Make sure you're using useCookie consistently throughout your application, rather than mixing it with other methods of cookie manipulation. If these suggestions don't resolve your issue, you might want to create a minimal reproducible example and open an issue on the Nuxt GitHub repository (https://github.com/nuxt/nuxt) for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@296044953576931328> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TonyOP•2d ago

I should add on that this ONLY happens when logIn calls fetchUser. The token is otherwise set and works fine

Gaming

Programming

useCookie bugged, not keeping state