Security Issue: SSR Global State

[Hunter Johnston]

The toastState is exported as a global object, which is advised against here: https://kit.svelte.dev/docs/state-management

Instead, the state should be initialized inside the root layout which would set the toast function to the context, so that it could be accessed by any component using a function like so:

Root layout:

<script lang="ts">
  import { initToaster } from "svelte-sonner"

  // init toaster would handle setting the context/initializing the toast state
  initToaster()
</script>

Any component within the app:

<script lang="ts">
  import { getToast } from "svelte-sonner"

  // get toast would get the toast function from the context
  const toast = getToast()

  function doSomething() {
     toast("something was done right")
  }
</script>

Alternatively, you could abstract the initialization away from the user, at the cost of having to wrap the entire layout contents in some sort of ToastProvider.

I'd like to use this project with https://github.com/huntabyte/shadcn-svelte, but noticed the current global state implementation which makes me hesitant to use.

Let me know if this is something you'd like to address, I'm willing to submit a PR.

[Robert Soriano]

Hi @huntabyte, thanks for commenting! Anything that would help improve svelte sonner, I'm willing to discuss!

[Hunter Johnston]

Awesome! I'm going to dig into the code a bit, we may be able to just add a browser check to the toast functions to ensure no writes to that state happen on the server-side.