Nuxt•2mo ago

Missing cookies in request from server

Hey I am trying to make ofetch call from the middleware to preload data into the store. Problem is that the call should include also cookies with auth information but as i am trying to console.log headers of this request made on server, there are no headers at all

19 Replies

BraňoOP•2mo ago

When I was trying to do same on the client it was working but I want to utilize SSR

Mediv0•2mo ago

Show some codes

BraňoOP•2mo ago

https://stackblitz.com/edit/github-zprj74-tr7rjh?file=server%2Fmiddleware%2Fauth.ts

Branislav Hozza

StackBlitz

Nuxt - cookies issue - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

Mediv0•2mo ago

did you use useRequestHeaders ? on ssr context and server middleware you could write header back to a request(event) using setHeader import { setHeader } from "h3"; setHeader(useRequestEvent()!, "set-cookie", cookies);

BraňoOP•2mo ago

Hm interesting I will try and let you know 🙂

Mediv0•2mo ago

use useRequestHeaders to get access to request cookies there is also setResponseHeaders

export default defineEventHandler((event) => {
  setResponseHeaders(event, {
    "content-type": "text/html",
    "cache-control": "no-cache",
  });
});

export default defineEventHandler((event) => {
  setResponseHeaders(event, {
    "content-type": "text/html",
    "cache-control": "no-cache",
  });
});

BraňoOP•2mo ago

I am getting this error:

BraňoOP•2mo ago

I am unable to use this function in server context

Mediv0•2mo ago

can i see the code by server context u mean the server middleware ? try this appraoch inside event handlers

BraňoOP•2mo ago

In server/middlewares/auth.ts i added this snippet:

export default defineEventHandler(async (event) => {
  const originalHeaders = useRequestHeaders();
  logger.log("Original headers", originalHeaders);
  setHeader(useRequestEvent()!, "set-cookie", originalHeaders["set-cookie"]);

// ...

export default defineEventHandler(async (event) => {
  const originalHeaders = useRequestHeaders();
  logger.log("Original headers", originalHeaders);
  setHeader(useRequestEvent()!, "set-cookie", originalHeaders["set-cookie"]);

// ...

Mediv0•2mo ago

oh ye these composables wont work inside the server handlers to get cookies using h3

defineEventHandler(async (event) => {
    const name = getCookie(event, "name");

    // do something...
}),

defineEventHandler(async (event) => {
    const name = getCookie(event, "name");

    // do something...
}),

there is another way to actually write cookies back something like

 defineEventHandler(async (event) => {
    setCookie(event, "name", "value", { maxAge: 60 * 60 * 24 * 7 });
  }),

 defineEventHandler(async (event) => {
    setCookie(event, "name", "value", { maxAge: 60 * 60 * 24 * 7 });
  }),

your request is in event object you should be able to see it if you log

BraňoOP•2mo ago

Look so this is the issue i am trying to explain, when I am sending initial request to page cookies exist (you can see the first one), but then server tries to fetch data from other API and cookies are missing

  logger.log("Where:", event.path);
  const cookieRaw = getCookie(event, "auth.access-token");
  const cookie = cookieRaw ? (JSON.parse(cookieRaw) as JwtToken) : null;
  if (cookie) {
    setCookie(event, "auth.access-token", JSON.stringify(cookie));
  }
  logger.log("Original cookie", cookie);

  logger.log("Where:", event.path);
  const cookieRaw = getCookie(event, "auth.access-token");
  const cookie = cookieRaw ? (JSON.parse(cookieRaw) as JwtToken) : null;
  if (cookie) {
    setCookie(event, "auth.access-token", JSON.stringify(cookie));
  }
  logger.log("Original cookie", cookie);

BraňoOP•2mo ago

Data fetching runs in middleware

Mediv0•2mo ago

as far as i know subsequent requests are isolated you cannot alter with their headers i guess there was a issue for this for example

fetch("/refresh") // gets new set cookie
fetch("/a_call_that_needs_cookie") // this doesn't have access to cookies generated by /refresh

fetch("/refresh") // gets new set cookie
fetch("/a_call_that_needs_cookie") // this doesn't have access to cookies generated by /refresh

second call will run with the old cookies https://github.com/nuxt/nuxt/issues/13096#issuecomment-1397311005

BraňoOP•2mo ago

I tried reading cookie header in middleware and its there so probably i just somehow need to proxy these cookies into requests that i am sending later

Mediv0•2mo ago

you are trying to refresh an access token right ? I fixed the issue by using middleware combined with a timestamp to track the JWT token's expiry date. In my case, the token was set to expire after 20 minutes. In the middleware, I check if the token has expired, and if so, I handle the refresh, pass the updated cookies, and continue with the request. also have a custom useAuth composable with a useState inside to keep track of cookie expiry on the client side. Additionally, I use a Redis instance on the backend to cache both the JWT and the refresh token for one minute. This ensures that if any subsequent requests fail to get the cookie from the frontend, I can return it directly from the cache. instead of generating new one ( in my case i revoke previous refresh tokens ) simplfied version

import { setHeader } from "h3";
import { useAuth } from "~/composable/useAuth";

export default defineNuxtRouteMiddleware(async () => {
    const { isRefreshNeeded, refreshCSR, refreshSSR, setCookieCSR } = useAuth();

    if (import.meta.server) {
        if (isRefreshNeeded()) {
            try {
                const { cookies, exp } = await refreshSSR(useRequestHeaders());

                cookies.push(`exp=${exp}; Path=/`);
                setHeader(useRequestEvent()!, "set-cookie", cookies);

                return true;
            }
            catch {
                return navigateTo("/auth/login");
            }
        }
    }

    if (import.meta.client) {
        if (isRefreshNeeded()) {
            try {
                await refreshCSR(useRequestHeaders());
                setCookieCSR();
                return true;
            }
            catch {
                return navigateTo("/auth/login");
            }
        }
    }
});

import { setHeader } from "h3";
import { useAuth } from "~/composable/useAuth";

export default defineNuxtRouteMiddleware(async () => {
    const { isRefreshNeeded, refreshCSR, refreshSSR, setCookieCSR } = useAuth();

    if (import.meta.server) {
        if (isRefreshNeeded()) {
            try {
                const { cookies, exp } = await refreshSSR(useRequestHeaders());

                cookies.push(`exp=${exp}; Path=/`);
                setHeader(useRequestEvent()!, "set-cookie", cookies);

                return true;
            }
            catch {
                return navigateTo("/auth/login");
            }
        }
    }

    if (import.meta.client) {
        if (isRefreshNeeded()) {
            try {
                await refreshCSR(useRequestHeaders());
                setCookieCSR();
                return true;
            }
            catch {
                return navigateTo("/auth/login");
            }
        }
    }
});

BraňoOP•2mo ago

No I am trying to get data into pinia store in ssr context. But i am missing auth token in cookies that are sent from nuxt server to my external server with data But as I am trying to explain, my cookies are lost in communication between nuxt server and external server. but this might work let me check

Mediv0•2mo ago

read this https://github.com/nuxt/nuxt/issues/13096#issuecomment-1397311005 it will help

GitHub

pass on cookies from server-side API calls on SSR response · Issue ...

Environment Operating System: Linux Node Version: v16.13.1 Nuxt Version: 3.0.0-27333874.279bfdc Package Manager: [email protected] Bundler: Vite User Config: - Runtime Modules: - Build Modules: - Reprod...

BraňoOP•2mo ago

Okay, I finally have tokens on server but now I am not getting redirected to authorization page... its just ignoring 302 replies

Gaming

Programming

Missing cookies in request from server