Global 401 handling

[kevinrenskers]

I'm trying to globally handle 401 errors coming from my external server by clearing the token cookie, and then redirecting the user back to the homepage (just to keep it simple). The scenario is that the user has a token stored in his cookie, and this token is no longer valid. An edge case, but one that definitely needs to be handled.

This used to work fine with older versions of SvelteKit by adding the 401 detection code to my API layer: if the response code from the external request is 401 then I call a local endpoint which removes the cookie, then I redirect, and all is done. But now cookies are no longer getting removed, even though the local endpoint gets called just fine.

So instead I tried to create a simple handleError hook:

export const handleError: HandleServerError = ({ error, event }) => {
  if (error.code === 401) {
    event.cookies.set("token", "", { path: "/", httpOnly: true, secure: !dev, maxAge: 0 });
  }
};

While this does delete the cookie, I can't redirect from this code so the user still sees a big fat error on his screen until he manually refreshes, which is just not very friendly of course.

Are there better ways of globally handling 401 errors? I just need to delete the cookie and redirect the user to the homepage. Keeping in mind that these 401 errors can be triggered from SSR and from client side code.

[kevinrenskers]

What I am basically trying to do is adding something like this to my API method (a simple wrapper around fetch):

if (!response.ok) {
  if (response.status === 401) {
    console.log("401 - logging out");
    await postLocal(fetch, "/auth/logout");
    throw redirect(307, "/");
  }
  // Handle other errors...   
}

postLocal just does a POST request to the local endpoint, which looks like this:

import { json, type RequestHandler } from "@sveltejs/kit";
import { dev } from "$app/environment";

export const POST: RequestHandler = async ({ cookies }) => {
  cookies.set("token", "", { path: "/", httpOnly: true, secure: !dev, maxAge: 0 });
  return json({ ok: true });
};

But it simply doesn't delete the cookie, even though the endpoint is getting called.

[cdcarson]

Some issues with the cookies API are being fixed in #6648. But what you are trying to do should be possible with the current version. Things to check:

1. I think you are accounting for the case where webkit won't set Secure cookies on localhost over http://. {secure: !dev}
2. All of the options, except maxAge used set the cookie should be exactly the same as those used to remove it (i.e. with cookie.set and {maxAge: 0}.

If that doesn't work, can you show exactly how you're setting and removing the cookie? It'd help. Thanks.

[kevinrenskers]

I just made a small repro: https://github.com/kevinrenskers/sk-cookie-problem.
When you first open the homepage there is a button to login, it just sets a cookie. Then refresh the website. The cookie should be deleted and then it should redirect, but instead the cookie isn't deleted and that causes an endless redirect loop.

When you remove the throw, the cookie does get deleted. It seems that for some reason the cookie isn't deleted if you throw something as well. Same goes if you throw an error, not only when you throw a redirect.

[kevinrenskers]

It's also very bizarre that relative urls sometimes simply don't work when doing a fetch request :/

[cdcarson]

I don't think this is an issue with cookies. (I'm mainly interested in that possibility, since I was recently working on that API.)

As you said above, replacing the throw with a return works...

import { redirect } from "@sveltejs/kit";
import type { LayoutLoad } from "./$types";

export const load: LayoutLoad = async ({ data }) => {
  if (data.token) {
    // Why does a relative URL not work here???
    await fetch("http://127.0.0.1:5173/auth/logout", { method: "POST" });
   // throw redirect(307, "/");
    return redirect(307, "/");
  }
  return data;
};

So, IMO, it's some inconsistency in whether you throw or return redirect between the load in +layout.server.ts and the load in +layout.ts. I really never used load in the classic sense (before the recent big changes,) so I'm not familiar with the use case for doing what you are doing here.

[kevinrenskers]

But returning a redirect doesn't actually redirect.