Nuxt•2d ago

Strange cookie behaviour

So, quick recap: When frontend receives cookies with the response on the /auth request, they are received, but for some reason with all of the other requests they are not attached. I've attached the cookie sending code on the server. BTW, it works on chrome, but not on firefox, and at least on my PC it wouldn't work on edge.

11 Replies

kapa.ai•2d ago

Hi @𝚝𝚒𝚖𝚞𝚣𝚔𝚊𝚜. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue with cookies not being properly attached to requests in Firefox and Edge (while working in Chrome) is a known behavior in Nuxt when handling cookies in server-side rendering (SSR) contexts. Understanding the Problem When making API requests in Nuxt, especially during server-side rendering, cookies aren't automatically passed between requests. This is particularly true when: 1. You're setting cookies in one API route and expecting them to be available in another 2. You're using $fetch directly instead of useFetch during SSR 3. You're trying to pass cookies from server-side API calls back to the client The behavior difference between browsers suggests this is related to how Nuxt handles cookie forwarding during SSR and hydration. Why This Happens By default, during server-side rendering: - $fetch doesn't automatically include user cookies or pass on cookies from fetch responses due to security considerations - When a server API sets cookies using setCookie, those cookies aren't automatically forwarded to the client in the SSR response if there's data in the response - Different browsers have different cookie handling behaviors As noted in the documentation: "Cookies are not set if there is data in the response" GitHub Issue #28404. Solutions 1. Use useRequestFetch or useFetch for automatic cookie forwarding

// This will forward the user's headers and cookies to the API
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/endpoint'))

// Or more simply with useFetch which does this automatically
const { data } = await useFetch('/api/endpoint')

// This will forward the user's headers and cookies to the API
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/endpoint'))

// Or more simply with useFetch which does this automatically
const { data } = await useFetch('/api/endpoint')

2. For passing cookies from server API calls back to the client Create a custom fetch utility that explicitly forwards cookies:

// composables/fetch.ts
import { appendResponseHeader } from 'h3'
import type { H3Event } from 'h3'

export const fetchWithCookie = async (event: H3Event, url: string) => {
  /* Get the response from the server endpoint */
  const res = await $fetch.raw(url)
  /* Get the cookies from the response */
  const cookies = res.headers.getSetCookie()
  /* Attach each cookie to our incoming Request */
  for (const cookie of cookies) {
    appendResponseHeader(event, 'set-cookie', cookie)
  }
  /* Return the data of the response */
  return res._data
}

// composables/fetch.ts
import { appendResponseHeader } from 'h3'
import type { H3Event } from 'h3'

export const fetchWithCookie = async (event: H3Event, url: string) => {
  /* Get the response from the server endpoint */
  const res = await $fetch.raw(url)
  /* Get the cookies from the response */
  const cookies = res.headers.getSetCookie()
  /* Attach each cookie to our incoming Request */
  for (const cookie of cookies) {
    appendResponseHeader(event, 'set-cookie', cookie)
  }
  /* Return the data of the response */
  return res._data
}

Then use it in your component:

<script setup lang="ts">
// This composable will automatically pass cookies to the client
const event = useRequestEvent()

const { data: result } = await useAsyncData(() => 
  fetchWithCookie(event!, '/api/with-cookie')
)
</script>

<script setup lang="ts">
// This composable will automatically pass cookies to the client
const event = useRequestEvent()

const { data: result } = await useAsyncData(() => 
  fetchWithCookie(event!, '/api/with-cookie')
)
</script>

This approach is recommended in the Nuxt documentation for passing cookies from server-side API calls. 3. Alternative approach for API routes If you're working with API routes, you can manually append cookies to the response header:

const event = useRequestEvent();

const res = await $fetch('/api/auth/refresh', {
  method: 'POST',
  headers: useRequestHeaders(['cookie']),
  onResponse({ response }) {
    const cookies = response.headers.getSetCookie();

    if (cookies.length && event) {
      cookies.forEach((cookie) => {
        appendResponseHeader(event, 'set-cookie', cookie);
      });
    }
  },
});

const event = useRequestEvent();

const res = await $fetch('/api/auth/refresh', {
  method: 'POST',
  headers: useRequestHeaders(['cookie']),
  onResponse({ response }) {
    const cookies = response.headers.getSetCookie();

    if (cookies.length && event) {
      cookies.forEach((cookie) => {
        appendResponseHeader(event, 'set-cookie', cookie);
      });
    }
  },
});

This approach was shared as a solution in a Stack Overflow post. By implementing one of these approaches, you should be able to resolve the cross-browser cookie handling issues in your Nuxt application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

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

𝚝𝚒𝚖𝚞𝚣𝚔𝚊𝚜OP•2d ago

@kapa.ai here's my auth code

const response = await http.post('/auth', { 
                code: urlParams.get('code'),
                redirect_uri: decodeURIComponent(getRedirectUri())
            });

            isLoading.value = false;
            isSuccess.value = true;
            
            const newUrl = window.location.pathname;
            window.history.replaceState({}, document.title, newUrl);
            
            setTimeout(() => {
                navigateTo('/dashboard')
            }, 300);

const response = await http.post('/auth', { 
                code: urlParams.get('code'),
                redirect_uri: decodeURIComponent(getRedirectUri())
            });

            isLoading.value = false;
            isSuccess.value = true;
            
            const newUrl = window.location.pathname;
            window.history.replaceState({}, document.title, newUrl);
            
            setTimeout(() => {
                navigateTo('/dashboard')
            }, 300);

and here's my middleware:

export default defineNuxtRouteMiddleware(async (to, from) => {
  const http = useHttp();
  const userStore = useUserStore();
  const { $logger } = useNuxtApp();

  try {
    const response = await http.get("/users/@me");
    userStore.setUser(response.data);
    $logger.log("Middleware:", response.data);
    return;
  } catch (error) {
    if (error.response?.status === 304) {
      $logger.log("Middleware: Not Modified (304)");
      return;
    }
    $logger.error("Middleware:", error.response?.data || error.message);
    return navigateTo("/auth");
  }
});

export default defineNuxtRouteMiddleware(async (to, from) => {
  const http = useHttp();
  const userStore = useUserStore();
  const { $logger } = useNuxtApp();

  try {
    const response = await http.get("/users/@me");
    userStore.setUser(response.data);
    $logger.log("Middleware:", response.data);
    return;
  } catch (error) {
    if (error.response?.status === 304) {
      $logger.log("Middleware: Not Modified (304)");
      return;
    }
    $logger.error("Middleware:", error.response?.data || error.message);
    return navigateTo("/auth");
  }
});

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Looking at your code, I can see why you're experiencing cookie issues across different browsers. The problem is related to how cookies are being handled between your authentication request and subsequent API calls in your middleware. The Issue In your authentication code, you're making a POST request to /auth which presumably sets cookies in the response. Then in your middleware, you're trying to make a GET request to /users/@me which should use those cookies for authentication. The issue is that Nuxt doesn't automatically handle cookie forwarding between requests during server-side rendering, especially when using custom HTTP clients (like your useHttp() utility). Solutions 1. Use useCookie for Authentication Tokens Instead of relying on HTTP-only cookies that are automatically attached to requests, you can explicitly manage your authentication tokens using Nuxt's useCookie composable:

// After successful authentication
const authToken = useCookie('auth_token', {
  // Set appropriate options for security
  secure: true,
  path: '/',
  maxAge: 60 * 60 * 24 * 7 // 1 week
})
authToken.value = response.data.token // Store the token from your auth response

// In your HTTP client setup
const http = useHttp();
// Make sure your HTTP client includes the cookie in requests

// After successful authentication
const authToken = useCookie('auth_token', {
  // Set appropriate options for security
  secure: true,
  path: '/',
  maxAge: 60 * 60 * 24 * 7 // 1 week
})
authToken.value = response.data.token // Store the token from your auth response

// In your HTTP client setup
const http = useHttp();
// Make sure your HTTP client includes the cookie in requests

This approach is recommended in the Nuxt documentation and has been confirmed to work in a Stack Overflow solution. 2. Pass Cookies Explicitly in Your HTTP Client If you're using a custom HTTP client, make sure it's configured to include cookies in requests:

// In your useHttp composable/plugin
const http = axios.create({
  baseURL: config.apiBaseUrl,
  withCredentials: true // This is crucial for cross-domain cookie handling
})

// In your useHttp composable/plugin
const http = axios.create({
  baseURL: config.apiBaseUrl,
  withCredentials: true // This is crucial for cross-domain cookie handling
})

3. For Server-Side Middleware If your middleware runs on the server, you need to explicitly forward cookies:

export default defineNuxtRouteMiddleware(async (to, from) => {
  const http = useHttp();
  const userStore = useUserStore();
  const { $logger } = useNuxtApp();
  
  // Get the request headers including cookies
  const headers = useRequestHeaders(['cookie']);
  
  try {
    const response = await http.get("/users/@me", { 
      headers // Forward cookies from the client request
    });
    userStore.setUser(response.data);
    return;
  } catch (error) {
    // Error handling...
    return navigateTo("/auth");
  }
});

export default defineNuxtRouteMiddleware(async (to, from) => {
  const http = useHttp();
  const userStore = useUserStore();
  const { $logger } = useNuxtApp();
  
  // Get the request headers including cookies
  const headers = useRequestHeaders(['cookie']);
  
  try {
    const response = await http.get("/users/@me", { 
      headers // Forward cookies from the client request
    });
    userStore.setUser(response.data);
    return;
  } catch (error) {
    // Error handling...
    return navigateTo("/auth");
  }
});

4. For Cross-Browser Compatibility To ensure cookies work across all browsers, especially for authentication flows, you might need to manually handle cookie forwarding in your API responses:

// In your server API handler
export default defineEventHandler(async (event) => {
  // Your API logic...
  
  // Get cookies from your authentication service
  const authResponse = await $fetch.raw('your-auth-service-url');
  const cookies = authResponse.headers.getSetCookie();
  
  // Forward cookies to the client
  cookies.forEach(cookie => {
    appendResponseHeader(event, 'set-cookie', cookie);
  });
  
  return { /* your response data */ };
});

// In your server API handler
export default defineEventHandler(async (event) => {
  // Your API logic...
  
  // Get cookies from your authentication service
  const authResponse = await $fetch.raw('your-auth-service-url');
  const cookies = authResponse.headers.getSetCookie();
  
  // Forward cookies to the client
  cookies.forEach(cookie => {
    appendResponseHeader(event, 'set-cookie', cookie);
  });
  
  return { /* your response data */ };
});

This approach is based on the solution from Stack Overflow and the Nuxt documentation on passing cookies. By implementing one of these approaches, you should be able to resolve the cross-browser cookie handling issues in your Nuxt application. Let me know if you need more specific guidance based on your authentication flow! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

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

𝚝𝚒𝚖𝚞𝚣𝚔𝚊𝚜OP•2d ago

i dont use server side rendering i think, how could i check that? @kapa.ai

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You can check whether your Nuxt application is using server-side rendering (SSR) by looking at your nuxt.config.ts file. By default, Nuxt uses universal rendering (which includes SSR), but this can be disabled. Here's how to check: 1. Look for the ssr property in your nuxt.config.ts file:

export default defineNuxtConfig({
  ssr: false // If this is set to false, SSR is disabled
})

export default defineNuxtConfig({
  ssr: false // If this is set to false, SSR is disabled
})

If ssr is set to false, your application is using client-side rendering only. If it's not specified or set to true, you're using universal rendering (which includes SSR) Nuxt Configuration. 2. You can also check at runtime using these methods:

// Check if code is running on client
if (import.meta.client) {
  console.log('Running on client')
}

// Check if code is running on server
if (import.meta.server) {
  console.log('Running on server')
}

// Check if the app is currently hydrating (transitioning from SSR to client)
const nuxtApp = useNuxtApp()
if (nuxtApp.isHydrating) {
  console.log('App is hydrating')
}

// Check if code is running on client
if (import.meta.client) {
  console.log('Running on client')
}

// Check if code is running on server
if (import.meta.server) {
  console.log('Running on server')
}

// Check if the app is currently hydrating (transitioning from SSR to client)
const nuxtApp = useNuxtApp()
if (nuxtApp.isHydrating) {
  console.log('App is hydrating')
}

The isHydrating property is particularly useful as it indicates the app is transitioning from server-rendered HTML to client-side Vue application useNuxtApp. 3. You can also check your deployment method: - If you're using nuxi generate or deploying as a static site, you might be using either pre-rendered pages or client-side rendering - If you're running a Node.js server with your Nuxt app, you're likely using SSR Based on your middleware code from your previous message, it appears you're making API requests that could be running on either client or server, depending on your configuration. If you're experiencing issues with cookies only in certain browsers, it suggests you might be using universal rendering, as pure client-side applications typically don't have these cross-browser cookie forwarding issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

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

𝚝𝚒𝚖𝚞𝚣𝚔𝚊𝚜OP•2d ago

yeah, it's not set @kapa.ai

kapa.ai•2d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Since your Nuxt application has ssr: false in your configuration, you're running a client-side only application without server-side rendering. This changes the approach to handling cookies in your application. In a client-side only Nuxt application: 1. All your code runs in the browser 2. Your middleware runs in the browser 3. API requests are made directly from the browser to your API endpoints This means the cookie issues you're experiencing are likely related to how browsers handle cookies rather than Nuxt's SSR cookie forwarding mechanisms. Common causes for cookie issues in CSR mode: 1. Cross-domain cookies: If your API is on a different domain than your Nuxt app, you need to ensure: - Your API sets the appropriate CORS headers - Your API sets SameSite=None; Secure for the cookies - Your HTTP client includes withCredentials: true 2. Cookie attributes: Different browsers handle cookie attributes differently: - Firefox and Edge are stricter about cookie security attributes - Ensure cookies have proper Path, Domain, and SameSite attributes 3. HTTP vs HTTPS: Secure cookies require HTTPS connections For your specific case, try modifying your HTTP client to explicitly include credentials:

// In your useHttp composable or plugin
const http = axios.create({
  baseURL: config.apiBaseUrl,
  withCredentials: true // This is crucial for cross-domain cookie handling
})

// In your useHttp composable or plugin
const http = axios.create({
  baseURL: config.apiBaseUrl,
  withCredentials: true // This is crucial for cross-domain cookie handling
})

If you're using fetch instead of axios:

const response = await fetch('/api/endpoint', {
  credentials: 'include' // Equivalent to withCredentials: true
})

const response = await fetch('/api/endpoint', {
  credentials: 'include' // Equivalent to withCredentials: true
})

Since you're not using SSR, the solutions involving server-side cookie forwarding from my previous responses won't apply to your situation. Focus on browser cookie handling and CORS configuration instead. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

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

Gaming

Programming

Strange cookie behaviour

Did you find this page helpful?