SvelteKit restores removed or modified url hash after load function

[heikkilamarko]

Describe the bug

I am building a SvelteKit SPA app that is using Authorization Code Flow with PKCE with Keycloak.
I want to handle the auth redirect in the load() function of the root +layout.js file. During auth handling, Keycloak JS SDK removes the hash from the url. The problem is that SvelteKit restores the hash after load() function and the rendered url has the auth redirect hash visible.

See the repro below.

Reproduction

+layout.js

export const ssr = false;

/** @type {import('./$types').LayoutLoad} */
export async function load() {
	console.log('[+layout.js] before auth:', window.location.hash);
	await handleAuth();
	console.log('[+layout.js] after auth:', window.location.hash);
}

+page.svelte

<script>
	console.log('[+page.svelte] script:', window.location.hash);
</script>

<main>DEMO PAGE</main>

Screenshot (see the address bar and console logs):

Logs

No response

System Info

System:
    OS: macOS 12.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 440.96 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.11.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Firefox: 105.0.3
    Safari: 15.5
  npmPackages:
    @sveltejs/adapter-static: next => 1.0.0-next.44 
    @sveltejs/kit: next => 1.0.0-next.516 
    svelte: 3.51.0 => 3.51.0 
    vite: 3.1.8 => 3.1.8

Severity

serious, but I can work around it

Additional Information

No response

[dummdidumm]

I'm not sure what's the best way forward here - or rather, if this is "works as designed" or if we should take into account this edge case.

The reason why this happens is that the URL is used to find out the correct route to go to, and that URL is later added unchanged to the function which updates the state, which then also resets the URL hash in your case. One could make the case that at least the hash should be checked for changes.

The workaround in the meantime would be to remove the hash inside the Svelte file or after a setTimeout in the load function, which resolves after it has returned.

[heikkilamarko]

Thanks for the response.

I wouldn't call this an edge case. Authorization Code Flow with PKCE is a widely used auth flow in SPA applications. The current SvelteKit implementation is likely to cause a lot of confusion in these auth scenarios.

[Rich-Harris]

load functions shouldn't really contain side effects (such as writing to window.location.hash) — they can be called when you're not actually navigating (e.g. you mouseover a <a data-sveltekit-prefetch> link), so the timing is all wrong. I don't really understand what the handleAuth() function is doing in your example, but is it something that could happen in an afterNavigate callback?

[JorensM]

I'm having this issue as well, here is the relevant Keycloak.js issue: keycloak/keycloak#14742

@heikkilamarko did you ever manage to solve this?