Example for flashCookieOptions

[austins]

Are there any examples on where to place flashCookieOptions assignments globally?

[ciscoheat]

Set them in the same file as the one you're calling loadFlash:

import { loadFlash, flashCookieOptions } from 'sveltekit-flash-message/server';

flashCookieOptions.sameSite = 'lax';

export const load = loadFlash(async (event) => {
  const data = { someOther: 'data' };
  return data;
});

[Kokonoeqt]

Set them in the same file as the one you're calling loadFlash:

import { loadFlash, flashCookieOptions } from 'sveltekit-flash-message/server';

flashCookieOptions.sameSite = 'lax';

export const load = loadFlash(async (event) => {
  const data = { someOther: 'data' };
  return data;
});

Hi @ciscoheat thanks for the example, but for some reason it doesn't work, I am getting this warning in the console.

Some cookies are misusing the recommended “SameSite“ attribute 2
Cookie “flash” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite [client.js:148:58](https://template.website.moe/node_modules/.pnpm/sveltekit-flash-message@2.1.3_@sveltejs+kit@1.22.6_svelte@4.2.0/node_modules/sveltekit-flash-message/dist/client.js)

I basically tried to do what you posted above:

import { loadFlash, flashCookieOptions } from "sveltekit-flash-message/server";

flashCookieOptions.sameSite = "lax";

export const load = loadFlash(async (event) => {
  const data = { someOther: "data" };
  return data;
});

Am I missing something?

Edit: Also I noticed that the default it's set to strict which is what I want, so I am not sure why the console giving me that error?

Hmm I think only firefox gives me the warning, chrome doesn't show any warning whatsoever, I think I will just ignore it for now and if there is issue with it then will get back here, unless it's not meant to show any warning in firefox then I would like to know how to suppress it or fix it.

[ciscoheat]

Can you check the cookie attributes in Firefox's dev console? As you say strict is default, so this is quite strange.

[Kokonoeqt]

Can you check the cookie attributes in Firefox's dev console? As you say strict is default, so this is quite strange.

Hi @ciscoheat,

Hmm the cookies is supposed to be in the storage right? If it's then I believe it's missing or not setting it at all? But toast still works and the data still get passed around I did everything as README. and I don't have anything that sets cookie there is one in the login route which I am testing but that doesn't override it or it shouldn't because it's basically a proxy server that sends request to my main server:

Something like this:

    // Extract Set-Cookie header
    const cookieHeaderFromServer = response.headers.get("Set-Cookie");
    if (cookieHeaderFromServer) {
      const parsedCookie = cookie.parse(cookieHeaderFromServer);
      const options = {
        httponly: true,
        secure: true,
        path: parsedCookie.Path,
        expires: new Date(parsedCookie.Expires),
        sameSite: parsedCookie.SameSite.toLowerCase() as
          | boolean
          | "lax"
          | "strict"
          | "none"
          | undefined,
      };
      event.cookies.set("sid", parsedCookie.mhr_sid, options);
    }

But I disabled this and set bare minimum that returns the form and still same issue. Not sure why it's not setting the cookie at all or am I looking in the wrong place? I tested it chrome and same issue it didn't set the cookie and works fine.

Also I noticed for firefox my redirect won't work on subdomain/domain probably (flash not being set. So my toast doesn't work) but works fine with localhost. I am assuming it's because of the cookie it's missing. It works fine for google chrome (I think it's because it sets the cookie to lax by default?) But the cookie is missing in chrome as well I can't find it, nor in the request or in the actual cookie storage.

More context: /src/routes/+layout.server.ts

import { loadFlash, flashCookieOptions } from "sveltekit-flash-message/server";

flashCookieOptions.expires = undefined;
export const load = loadFlash(async (event) => {
  const data = { someOther: "data" };
  return data;
});

/src/routes/+layout.svelte

<script lang="ts">
  import { page } from "$app/stores";
  import { getFlash } from "sveltekit-flash-message";
  import { Toast } from "@skeletonlabs/skeleton";
  import { toastStore, type ToastSettings } from "@skeletonlabs/skeleton";

  const flash = getFlash(page);

  flash.subscribe(($flash) => {
    if (!$flash) return;
    // Provide the toast settings
    const t: ToastSettings = {
      message: $flash.message,
      background:
        $flash.type == "error"
          ? "variant-filled-error"
          : "variant-filled-success",
      timeout: 5000,
      hoverable: true,
    };

    // Trigger the toast:
    toastStore.trigger(t);
  });
</script>

<Toast />
<main>
  <slot />
</main>

[ciscoheat]

The cookie is deleted quickly, so you have to watch closely in the list. I don't know about firefox, but in Chrome it's under Application > Storage > Cookies in devtools.

[kaiserbh]

25 should fix the warnings on Firefox, and there is an explanation why the cookie is not being shown at all or gets removed instantly.

[ciscoheat]

Added the example in the readme, and the mentioned issue should be fixed, so I'm closing this now.