kit: `cookies.delete` not working when using form `enhance`

Describe the bug

Using enhance on a <form> and throwing redirect in the form action causes cookies.delete to not work in the page server load function.

Reproduction

https://github.com/s3812497/sveltekit-enhance-bug

Reproduction:

  1. Click the enhanced form button.
  2. User is redirected.
  3. Cookie is not deleted.

Expected:

  1. Click the enhanced form button.
  2. User is redirected.
  3. Cookie is deleted in +page.server

Logs

No response

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 1.56 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 104.0.1
    Firefox Developer Edition: 105.0
    Safari: 15.6.1
    Safari Technology Preview: 16.0
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.71 
    @sveltejs/kit: next => 1.0.0-next.472 
    svelte: ^3.44.0 => 3.50.0 
    vite: ^3.1.0 => 3.1.0

Severity

serious, but I can work around it

Additional Information

No response

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 1
  • Comments: 15 (14 by maintainers)

Commits related to this issue

Most upvoted comments

Mhm then maybe this is a bug with deleting cookies after all…

@s3812497 i haven’t used the new cookies.delete function, but i am able to use cookies.set to remove a cookie:

cookies.set("cookieName", "", {
    httpOnly: true,
    path: '/',
    maxAge: 0
  })

@s3812497 Not solving for now, just trying to diagnose. Can you try this, and see whether it works as you intend? In src/routes/somewhere/+page.server.ts add the options parameter to cookies.delete with the path set…

import type { PageServerLoad } from "./$types";

export const load: PageServerLoad = ({ cookies }) => {
  // added options with path to both lines
  cookies.delete("cookie1", {path: '/'}); 
  cookies.delete("cookie2", {path: '/'});
};

This works for me (but I may be missing the point. )

It works as expected.

I have tested the new update with the same reproduction and the issue still persists.

@s3812497 Yep. #6622 fixed something relatively obvious, but there’s something else going on here. This issue should be reopened.

I dug into this again and am seeing a difference between client and server where I don’t know how to best handle it:

  • when you go to /page directly, setting a cookie in its load function, that cookie is scoped to the / path
  • when you go to /page/ directly (note the trailing slash; set through trailingSlash: 'always'), setting a cookie in its load function, that cookie is scoped to the /page path
  • when you go to the /page through a client-side navigation, setting a cookie in its load function, that cookie is scope to the /page path

Reason for the difference in behavior: it seems that the browser goes back to the last slash and uses that as the path. This means

  • direct hit goes to the /page path -> /
  • direct hit goes to the /page/ path -> /path
  • the client-side navigation calls the page through /page/__data.json -> /path

I’m not sure about the best way forward here.

I think I lean towards a combinations of option 1 and 2