redirect and delete cookie in hooks.server.ts

[xmlking]

I am trying to implement auth hook / middleware to transform user JWT token into user object by parsing and validation the cookie token.

I am getting into ERR_TOO_MANY_REDIRECTS situation in a spacial case:

1. have a valid token and page that has form is opened in the browser
2. wait for taken expire (~30min) and try to submit the form
3. this time, it is supposed to delete the stale token and redirect to login page.

but what actually happening is: The stale token never got deleted. I am getting into ERR_TOO_MANY_REDIRECTS

This is not working

			cookies.delete('token', { path: '/' }); // <-- this is not deleting the token !
			return Response.redirect(`${event.url.origin}/login`, 307);

as workaround I had to do this. but this don't work properly with progressively enhance forms

			return new Response(null, {  // <-- so, i have to do this way
				status: 300,
				headers: {
					location: `${event.url.origin}/login`,
					'set-cookie': `token=; Path=/; Expires=${new Date(0)}`
				}
			});

export const setUser: Handle = async ({ event, resolve }) => {
	const { cookies } = event;

	const token = cookies.get('token');
	if (token) {
		try {
			const jwtObj = jwt.decode(token, { complete: true });
			const iss = (jwtObj?.payload as JwtPayload).iss;
			const kid = jwtObj?.header.kid;
			assert.ok(iss && kid && clients.has(iss) && verifyOptions.has(iss), 'Unknwon issuer');
			const client = clients.get(iss) as JwksClient;
			const key = await client.getSigningKey(kid);
			const signingKey = key.getPublicKey();

			const jwtPayload = jwt.verify(token, signingKey, verifyOptions.get(iss)) as JwtPayload;
			// AuthLogger.debug('jwtPayload', jwtPayload);
			const user: AppUser = {
				sub: jwtPayload.sub ?? '',
				name: jwtPayload.name ?? '',
				email: jwtPayload.email ?? jwtPayload.upn ?? '',
				roles: (jwtPayload.roles as Role[]) ?? ['Policy.Read' as Role]
			};
			event.locals.user = user;
			event.locals.token = token;
		} catch (error) {
			AuthLogger.error(error);
			AuthLogger.warn('bad token. deleteing token cookie');
			console.log(event.request.headers.get('cookie'));
			// Not working
			cookies.delete('token', { path: '/' }); // <-- this is not deleting the token !
			return Response.redirect(`${event.url.origin}/login`, 307);
			// Workarround
			return new Response(null, {  // <-- so, i have to do this way
				status: 300,
				headers: {
					location: `${event.url.origin}/login`,
					'set-cookie': `token=; Path=/; Expires=${new Date(0)}`
				}
			});
		}
	}

	return await resolve(event);
};

wonder if you have butter solution

to reproduce: https://github.com/xmlking/svelte-starter-kit/blob/main/src/lib/middleware/auth.ts

I have this expectation
if hooks.server.ts don't set event.locals.user, +layout.server.ts will block requests going to +page.server.ts
But actually requests are going to +page.server.ts and +layout.server.ts redirect not working for inline request.

.
├── hooks.server.ts <--  get token cookie and parse/validate and extract User from claims. set User on`event.locals.user`
└── routes
    ├── (app)
    │   └── dashboard
    │       ├── +layout.server.ts <-- check `locals.user == null` and `throw redirect(307, '/login');` 
    │       ├── +layout.svelte
    │       ├── +page.svelte
    │       └── policies
    │           ├── +page.server.ts   <-- use `locals.user` for business use case
    │           ├── +page.svelte
    │           └── [id]
    │               ├── +page.server.ts
    │               └── +page.svelte
    ├── (auth)
    │   ├── +layout.svelte
    │   ├── callback
    │   │   └── +page.svelte
    │   ├── login
    │   │   └── +page.svelte
    │   └── logout
    │       └── +page.server.ts
    ├── +error.svelte
    └── +layout.svelte

[eltigerchino]

Returning a custom Response object does not include the set-cookie header set by event.cookies. This only applies after returning the Response object from resolve(event).
You can use the SvelteKit redirect instead: e.g., throw redirect(302, '/login')
https://kit.svelte.dev/docs/modules#sveltejs-kit-redirect

[eltigerchino]

sounds like an issue with the token logic. If the token decoding is always throwing an error, it will redirect infinitely.

[xmlking]

my requirement is: for whatever reason I cannot parse/validate token, I want to delete it and redirect to fresh login.
why it do redirect infinitely ? my home page don't have any built-in redirects
but the real question is why the cookie is not getting deleted when we do throw redirect(CODE, '/') ?

[eltigerchino]

When it redirects, it loops back into the hooks code to handle the redirect request. For issue is the logic behind checking and deleting the cookie. If not handled properly, it will repeat checking the cookie, failing, and redirecting. I have a few suggestions below:

• Maybe cookies.delete is not deleting the cookie? Is the path set to the same path as when the cookie was set?
• What if you use cookies.set to manually set the expiration date? (this was a workaround for the buggy behaviour with cookies.delete)
• What about the logic of checking the cookie value? Will checking for a specific value in the cookie fix the issue?
• Instead of checking for a token on every request, what about limiting the scope to certain paths? (This way it doesn't check for a token, fail, redirect to login, and check for a token again at the login page.)

[xmlking]

• Maybe cookies.delete is not deleting the cookie? -- paths are correct. it works when there is no redirect.
• What if you use cookies.set to manually set the expiration date? -- This is only workaround worked as I stated above. Cavity: it only work for code 300 and payload as null. That means the used get a blank page and they have to reload to go to expected state.
• Instead of checking for a token on every request, what about limiting the scope to certain paths? -- this is a good idea for performance optimization. For now I have few server-side calls, i.e, SSR for first page load and few API calls.

[eltigerchino]

You can try moving the redirect logic to a +layout.server.js which is in a different path from the login page. This would prevent the redirect loop.

Or you can check the event.url.pathname to see if it matches the login page and prevent the redirect.

[xmlking]

throw redirect(302, '/login') also caused recursive calls and resulted in client side error: ERR_TOO_MANY_REDIRECTS

[aypm-dev]

I recommend using cookies.set("cookie", "", { path: "/", maxAge: 0}) for deleting cookies, I also encounter the problem where the delete method is not deleting cookies and looks like setting the cookie as empty and with max age 0 reliable deletes the cookie.

And for ERR_TOO_MANY_REDIRECTS maybe you can check the URL path to see if the user is in a route that doesn't require the token (/login, /logout, /register.... etc ) to avoid the token checking and redirecting again to log in.

But I hope you already fixed it