N
Nuxt•2mo ago
Thick Black W

useCookie() BUG. Expired cookie still reads previous values instead of default, cookie in memory?

Seems I've discovered a bug. Expired cookies, where maxAge has passed still reads previously saved cookie value. 
function onDownload(url: string): void {
    console.log("Downloading video from: " + url);

    const downloads = useCookie<{
        download_clicks_count: number;
        lastUrl: string;
        timestamp: number;
    }>('downloads', {
        default: () => ({
            download_clicks_count: 0,
            lastUrl: '',
            timestamp: Date.now()
        }),
        maxAge: 3 // 3 seconds
    });

    downloads.value.download_clicks_count += 1;

    if (downloads.value.download_clicks_count > 1) {
        window.alert("Excessive download. Wait at least 30 seconds before requesting a new download.");
        return;
    }


    downloads.value.lastUrl = url;
    downloads.value.timestamp = Date.now();

    // Optionally send it to your server
    $fetch('/api/log-download', {
        method: 'POST',
        body: downloads.value
    });
}
function onDownload(url: string): void {
    console.log("Downloading video from: " + url);

    const downloads = useCookie<{
        download_clicks_count: number;
        lastUrl: string;
        timestamp: number;
    }>('downloads', {
        default: () => ({
            download_clicks_count: 0,
            lastUrl: '',
            timestamp: Date.now()
        }),
        maxAge: 3 // 3 seconds
    });

    downloads.value.download_clicks_count += 1;

    if (downloads.value.download_clicks_count > 1) {
        window.alert("Excessive download. Wait at least 30 seconds before requesting a new download.");
        return;
    }


    downloads.value.lastUrl = url;
    downloads.value.timestamp = Date.now();

    // Optionally send it to your server
    $fetch('/api/log-download', {
        method: 'POST',
        body: downloads.value
    });
}
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Thick Black W. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're correct in observing that sometimes, after a cookie expires (e.g., when maxAge is set to a few seconds), useCookie may still return the previous value instead of the default. This behavior has been reported by other users and is related to how Nuxt manages cookie state between server and client, as well as how the browser handles expired cookies. Key points from the knowledge sources: - The useCookie composable returns a Vue ref that is SSR-friendly and works on both client and server. Updating the ref updates the cookie, unless readonly is set. However, the value is read from the request headers on the server and from document.cookie on the client. If the cookie has expired in the browser, but the in-memory ref is not refreshed, you may see stale values until a full reload or manual refresh occurs Docs: useCookie - Return Values. - There is a known issue where the initial value of a cookie may not be written if it has expired or if the default value is being used, leading to inconsistencies between the in-memory ref and the actual browser cookie GitHub PR: write initial cookie value if different from document.cookie. - To address this, Nuxt introduced the refreshCookie utility in v3.10, which allows you to manually refresh the value of a cookie ref from the browser's current cookie value. This is useful when you know the cookie value has changed or expired and want to ensure the ref is up to date Docs: refreshCookie. - Additionally, enabling the experimental cookieStore option in your nuxt.config.ts can help automatically refresh useCookie values when cookies change in the browser (if supported) Docs: cookieStore. How to fix or work around this: 1. Manually refresh the cookie value
After you expect the cookie to have expired or changed, call refreshCookie('downloads') to update the ref from the browser's cookie store. 
   import { refreshCookie } from '#app'

   // After some action or on a timer
   refreshCookie('downloads')
   
   import { refreshCookie } from '#app'

   // After some action or on a timer
   refreshCookie('downloads')
2. Enable automatic cookie refresh (experimental)
In your nuxt.config.ts, enable the experimental cookieStore: 
   export default defineNuxtConfig({
     experimental: {
       cookieStore: true
     }
   })
   
   export default defineNuxtConfig({
     experimental: {
       cookieStore: true
     }
   })
This will keep your useCookie refs in sync with browser cookies if the browser supports the CookieStore API. Summary:
This is a known limitation/quirk in Nuxt's cookie handling. Use refreshCookie to manually sync, or enable the experimental cookieStore for automatic updates. If you still see issues, ensure your cookie options (like sameSite, path, etc.) are set correctly, as some users have reported that changing sameSite from None to Lax resolved similar problems GitHub Issue: useCookie not updating value in browser. If you need more robust or immediate cookie state, consider these workarounds until the behavior is improved in future Nuxt releases. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@1321238874634195004> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?