sveltejs / sveltejs/kit

SvelteKit restores removed or modified url hash after load function

Open
#7,271 4 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

router
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

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):
Screenshot 2022-10-15 at 21 19 04

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the +layout.js load() reproduction and compare window.location.hash before and after handleAuth(), then inspect the navigation lifecycle that runs before +page.svelte. Reproduce the SPA case with the supplied SvelteKit/Vite setup and verify that a hash removed or changed during load() is not restored in the rendered URL.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.