SvelteKit SPA - React on route change (protected routes)

[LukaHarambasic]

Heyho,

I'm really struggling to set up protected routes for a SPA. I think I have now tried everything to intercept every page load:

1. hooks.server.ts - doesn't work with @sveltejs/adapter-static as far as I can tell.
2. $navigating in routes/+layout.svelte - feels hacky, especially as 3. exists
3. beforeNavigate() in routes/+layout.svelte - doesn't work on the initial page load, but for every other navigation
4. load() in routes/+page.ts - only works on the initial page load

I'll go with a combination of 3. & 4., but I'm still unsure if it's the right way. Even if I would prefer 3. as it includes the group which I would like to identify protected routes. Does someone have an idea or am I missing something?

svelte.config.js

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter({
			fallback: 'index.html',
		}),
	}
};

export default config;

routes/+layout.ts

export const ssr = false;

Cheers,
Luka

[LukaHarambasic]

Seems like I was a little bit sleepy yesterday... I'm sure I checked this approach as well at some point.

Solution

routes/+layout.ts

import { handleRouting, RouteType } from '$lib/utils/route';
import type { LayoutLoad } from './$types';
import { goto } from '$app/navigation';
import { get } from 'svelte/store';
import { userStore } from '$lib/stores/user';

export const ssr = false;

export const load = (async ({ route }) => {
    const routeType = handleRouting(route.id || '')
    const user = get(userStore);
    const isUserLoggedIn = user.user_id !== '';
    if (routeType === RouteType.PAGE_PROTECTED) {
        if (!isUserLoggedIn) {
            console.log("forwarding to /login")
            goto('/login')
        }
    }
    return {};
}) satisfies LayoutLoad;

$lib/utils/route.ts

const GROUPS_UNPROTECTED = ['(user)']
const API_USER_PROTECTED = ['/api/dk/init']

export function handleRouting(path: string): RouteType | null {
    if (path === '') return null
    if (path.startsWith('/api')) {
        if (API_USER_PROTECTED.includes(path)) {
            console.log("API_USER_PROTECTED")
            return RouteType.API_USER_PROTECTED
        } else {
            console.log("API_BEARER_PROTECTED")
            return RouteType.API_BEARER_PROTECTED
        }
    } else {
        const isUnprotected = GROUPS_UNPROTECTED.find((group) => path.includes(group))
        if (isUnprotected) {
            console.log("PAGE_UNPROTECTED")
            return RouteType.PAGE_UNPROTECTED
        } else {
            console.log("PAGE_PROTECTED")
            return RouteType.PAGE_PROTECTED
        }
    }
}

export enum RouteType {
    PAGE_PROTECTED,
    PAGE_UNPROTECTED,
    API_USER_PROTECTED,
    API_BEARER_PROTECTED,
}

[0djek]

Wanted to ask: was there a specific reason that you used goto() instead of throw redirect() in the load function?

Also, I'm confused because I saw many available variations of this: should you await goto or just goto? Because as far as I can tell, goto returns Promise, so shouldn't it be awaited?

[LukaHarambasic]

I can't really remember. I just tried every think I found. I'm for sure no expert on this. It seemed to work for me in this moment of time, not more and less :)

[dummdidumm]

throw redirect(..) is the correct solution, goto wouldn't work on the server (though you're creating an SPA, so doesn't really matter for you)

[stamler]

@LukaHarambasic Your solution appears to only work on initial page load. Am I missing something? Is there a better solution for this?

[LukaHarambasic]

That's the solution I came up with, and it seemed to work. Sorry

[leandrocruz]

AFAIK, it does not work if you are already in a protected route, then you logout the user, then navigate to another protected route with the same layout. The load function in +layout.js is only called if you navigate to a different layout/route. If your route is at the same level, the validation would fail. Example:

• from /app/a
• to /app/b

The load() in /app/+layout.js will not be called