Search code examples
javascriptcookiesjwtsveltesveltekit

SvelteKit: cookies.set() In Form Action Not Working


I am trying to implement JWT-based user sessions with SvelteKit, and have mostly been following the explanation for form actions given on their website: https://kit.svelte.dev/docs/form-actions

+page.svelte

<form method="POST" action="?/signIn">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <button type="submit">Submit</button>
</form>

+page.server.svelte

import { fail, redirect } from "@sveltejs/kit";
import { signIn } from "$lib/server/database";

export const actions = {
  signIn: async ({ cookies, request }) => {
    const data = await request.formData();

    const name = data.get("name");
    const password = data.get("password");

    if (!name || !password) {
      return fail(400);
    }

    try {
      cookies.set("jwt", await signIn(name, password));
    } catch (error) {
      return fail(400);
    }

    throw redirect(303, "/");
  },
};

I have tested my signIn method which I import and use here, and it does return a token when called with the correct credentials. So far, so good. However, I noticed that I don't see any cookies in my developer tools. It seems like the cookies.set() call simply does nothing. I'd like to set the returned JWT as a cookie so that I can authenticate my users, so what am I doing wrong?


Solution

  • In case anybody else has this problem: While the cookie was set as it was supposed to when using Chrome, it wasn't in Safari. I solved this by setting the secure option to false, even though the SvelteKit docs state that this is done automatically on localhost.