Setting cookies retrieved from an external api in a form action

[stephane-vanraes]

Asked this on Discord as well and figured something out.
But opening a discussion anyway as I am not sure this is a good approach and if I am missing something. Also think this is not an uncommon thing to try to do so some centralized place for it will do no harm.

I have a form action that calls an external API, this external API responds with some data and sets cookies.
The question now is: how do I pass those cookies to the client ?

Base code:

export const actions = {
    default: async ({ fetch, request, cookies }) => {
        const form = await request.formData();
        const result = await fetch('...', {
            method: 'POST',
            body: form,
            credentials: "include"
        });

        cookies.set(/* what goes here ??? */);

        return await result.json();
    }
}

A "solution" I came up with is to(with the use of set-cookie-parser) grab the set-cookie headers from the fetch result and use cookies.set to add them to my own response:

result.headers.get('set-cookie')?.split(',')
  .map(setCookieParser)
  .forEach(([c]) => {
    cookies.set(c.name, c.value, {
      ...c
    })
  })

But this somehow feels 'dirty' and leaves me with the strange feeling I am doing something wrong.

I also tried using setHeaders like this

setHeaders({
   "set-cookie": result.headers.get('set-cookie') ?? ''
});

but this crashes SvelteKit with a message to use event.cookies.set instead :(

[oliversturm]

Very good question, unless I'm missing something. Cookie pass-through is fully automatic in the request direction, whereas the response requires manual fiddling as you describe. Is there a better way?

[oliversturm]

Follow-up: I just found #7467 (comment) where the approach you mentioned is explicitly suggested. So I guess we're not missing an easier approach at this point.

[while1618]

Is there maybe some better approach by now?

You can use const setCookies = response.headers.getSetCookie(); to extract your cookies, which will give you an array of strings (cookies) you should set. In my case, I have the following structure:

[
	'accessToken=token; Path=/; Max-Age=3600; Expires=Thu, 03 Apr 2025 00:41:07 GMT; Secure; HttpOnly; SameSite=Strict',
	'refreshToken=token; Path=/refresh; Max-Age=3600; Expires=Thu, 03 Apr 2025 00:41:07 GMT; Secure; HttpOnly; SameSite=Strict'
]

So I will expect that I can do something like cookies.set(setCookies[0]) because you already have all the necessary data, so no need to repeat yourself. I know that I can create some util method to autopopulate this, but just curious is there some already built-in method in svelte?

[teemingc]

See #16203