How to redirect from handle in hooks.js?

[ioucyf]

Throw redirect(300,'/login') does not work.

Please help.

Or is it that now the only way to do so is through +page.server.ts via the load handler for the corresponding pathname?

[mustofa-id]

Just return Response object:

return new Response(null, {
	status: 300,
	headers: { location: '/login' }
})

[yousufiqbal]

I see redirect loop in your code. Wrap your response in a condition, otherwise you'll end up with too many redirects error in your browser.

[mustofa-id]

hooks.js handle function literally looks like this: export const handle: Handle = function handle({ event, resolve }) { return new Response(null, { status: 300, headers: { location: '/user' } }); };

This is forever redirection. handle runs every time the server receives a request, you need conditionally return your custom response. Take a look my repo for your reference.

[ioucyf]

@yousufiqbal Thank you for your remark. I changed it to
if (url.pathname !== '/user') return new Response(null, { status: 307, headers: { location: '/user' } });
to test it, and now it redirects to the correct path, but always throws the error: TypeError: Failed to fetch dynamically imported module instead of getting the actual page.

[ioucyf]

@mustofa-id Thank you. I will take a look.

[Antoine-lb]

It works for me but only if I put 302 and not 300

[eltigerchino]

From the docs https://kit.svelte.dev/docs/modules#sveltejs-kit-redirect

Creates a Redirect object. If thrown during request handling, SvelteKit will return a redirect response.

Perhaps the redirect helper method should be able to return a Response in hooks.js in addition to server.js. Might be worth opening an issue to standardise this behaviour.

[ioucyf]

From the docs https://kit.svelte.dev/docs/modules#sveltejs-kit-redirect

Creates a Redirect object. If thrown during request handling, SvelteKit will return a redirect response.

I read that, and I assumed it'd return a response that'll redirect the client to the specified location. But that does not happen in hooks.js.

[DrDanRyan]

I ran into the same issue a while back. I concluded that redirecting from hooks was very problematic given that hooks wasn't firing on client side navigation. My solution was to put Unauthorized errors in hooks, but to put my redirect guards into the load function on my layout. This works well.

[theetherGit]

I ran into same problem and i found a solution. This might not the the your required solution.
I have a CMS which have only 4 to 5 pages un protected so what i did is

import type { Handle } from '@sveltejs/kit';

// custom redirect from joy of code `https://github.com/JoysOfCode/sveltekit-auth-cookies/blob/migration/src/hooks.ts`
function redirect(location: string, body?: string) {
	return new Response(body, {
		status: 303,
		headers: { location }
	});
}

const unProtectedRoutes: string[] = ['/', '/login']


export const handle: Handle = async ({ event, resolve }) => {
	const session = event.cookies.get('session');

	if (!session && !unProtectedRoutes.includes(event.url.pathname)) return redirect('/login', 'No authenticated user.');
	const currentUser = await db.fetch(session as string);

	if (currentUser) {
		event.locals.user = {
			name: currentUser.name,
			email: currentUser.email,
			type: currentUser.user_type,
			active: currentUser.active,
			phone: currentUser.phone
		};
	} else if (!unProtectedRoutes.includes(event.url.pathname)) {
			return redirect('/login')
		}

	return resolve(event);
};

you can do it like that there is bit code missing.

[suryamsj]

I followed this code, but there was a problem. If you access the /api/ route that I have created, you will be directed to the login page. So what if I don't want /api to be included?

[theetherGit]

For this scenario, I use svelte advance routing system, I create (authed) directory for managing this. In authed dir i manage all auth required pages. Code for hooks.server.ts

import { sessionManager } from '$lib/server/redis';
import type { Handle } from '@sveltejs/kit';
import { redirect } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
	if (event.url.pathname.startsWith('/api')) {
		return resolve(event);
	}

	event.locals = {
		isAuthenticated: false,
		user: null
	};

	const { data, error } = await sessionManager.getSession(event.cookies);

	if (error) {
		if (event.route.id?.startsWith('/(authed)')) {
			if (event.url.pathname !== '/logout') {
				await sessionManager.deleteCookie(await event.cookies);
				throw redirect(303, `/?next=${event.url.pathname}`);
			}
		}
		return resolve(event);
	}

	if (Object.keys(data).length > 2) {
		event.locals = {
			isAuthenticated: true,
			user: data
		};
	}

	if (event.route.id?.startsWith('/(authed)')) {
		if (!event.locals.user) {
			await sessionManager.deleteCookie(await event.cookies);
			throw redirect(303, `/?next=${event.url.pathname}`);
		}
	}

	if (!event.route.id?.startsWith('/(authed)')) {
		if (event.locals.user) {
			throw redirect(303, `/dashboard/retention`);
		}
	}

	return resolve(event);
};

[suryamsj]

Thanks for the explanation