Route protection at page level in async svelte + ssr

[islamzaoui]

I tried using this helper:

export async function requireAuth() {
	const session = await getCurrentSessionQuery();
	if (!session) {
		throw redirect(302, "/signin");
	}

	return session;
}

in +page.svelte to protect routes:

<script lang="ts">
	import { requireAuth } from "@/helpers/require";

	const session = await requireAuth();
</script>

<pre>{JSON.stringify(session, null, 2)}</pre>

Is this okey or should I stick to protecting routes using hooks.server.ts, I dont want to use it just because of the nested if else hell.

[apoorva-01]

Stick with the server side, but don't reach for hooks.server.ts and don't do it in +page.svelte. Put the guard in the route's load.

redirect() only does anything when SvelteKit is the one catching the throw during request handling. That's load, form actions, handle, +server. A component's <script> isn't in that pipeline. So your version has two holes: on a client-side navigation there's no server round-trip at all, so await requireAuth() runs in the browser after the page has already started rendering, and the thrown redirect just gets swallowed instead of navigating. And even on the first SSR hit, throwing a redirect out of component render isn't a supported control-flow path, so you're relying on luck.

You don't need the if/else hell to avoid the component approach though. The helper you already wrote works as-is in a load:

// +page.server.ts
export const load = async (event) => {
  const session = await requireAuth(event); // throws redirect(302, '/signin') when there's no session
  return { session };
};

One line per protected route, redirect fires reliably because load is request handling, and it runs before any HTML goes out so nothing protected flashes. If you want to cover a whole section instead of a single page, move the same call into +layout.server.ts for that folder. hooks.server.ts is the right tool when you want one rule over a path prefix (/admin/*); for per-route it's just noise.

[brunnerh]

You should not use load for this.

load functions run in parallel, this only protects this specific load function, not any parent or children (including layouts) in the route's hierarchy.

[brunnerh]

An auth helper like this might not be reliable when combined with other loading mechanisms (which could happen as separate requests that will not be intercepted).

It might be OK as a remote function, as those should all be executed together on the server before returning when using remote functions exclusively. Though with remote functions, those should be protected on their own to prevent bypasses, so you probably would not call the utility directly but have each remote functions call it. (Because there can be many such functions, I opened an issue about module-level protection a while ago.)

If you are not going with remote functions, you probably should still stick to hooks.server.ts to have the most reliable method of preventing unauthorized access to specific routes.

[islamzaoui]

so something like this would be good enough:

<!-- /(guest)/+layout.svelte -->
<script lang="ts">
	import { beforeNavigate } from "$app/navigation";
	import { requireGuestQuery } from "@/remotes/guard.remote";

	let { children } = $props();

	await requireGuestQuery();

	$effect(() => {
		const interval = setInterval(async () => {
			await requireGuestQuery().refresh();
		}, 10_000);

		return () => {
			clearInterval(interval);
		};
	});

	beforeNavigate(async () => {
		await requireGuestQuery().refresh();
	});
</script>

{@render children()}

rest of the remote functions are also protected incase this fails for some reason