sveltejs / sveltejs/kit

Redirecting in a remote query breaks when crossing layout boundaries and doesn't render the new page

Open
#16,974 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Describe the bug

I have a basic scenario:

  • Home page with a link to /dashboard
  • Dashboard page calls several protected queries that throw redirects if a user is not logged in or does not have access
    • Dashboard is under a layout, for showing breadcrumbs, user profile pic etc.
  • Redirect is to a /login page that is not under the /dashboard layout

If I click on the dashboard link, the server logs an unauthenticated attempt, throws the redirect, the browser even changes url (and inspecting page.route and page.url indeed confirms that they change). HOWEVER, the actual page rendered doesn't change. No console.log error, no server error, no nothing. It's like clicking the button does nothing. Refreshing the page does take me to /login, since that's the url in the browser tab.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-ocysfp2e?file=src%2Froutes%2F%2Bpage.svelte

Click on "go to dashboard". You will see logs in the console that the redirect is thrown, but nothing changes on the page itself. Interestingly, if you click on the link again, it goes straight through to the dashboard page even though there's a literal query there that is awaited at script level and throws. In my real project, no matter how many times I click the dashboard button, it never renders the login page and is stuck on the home page. It refuses to work unless I delete the layout page sibling of the dashboard +page.svelte.

Logs

System Info
Stackblitz env. 

On my machine i tested both on the latest svelte and sveltekit versions, AND also post SK3 migration with the latest next version (25), and still the same behavior.
Severity

blocking an upgrade

Additional Information

As a workaround, I just put this in a +layout.server.ts (the /dashboard layout)

import { getUser } from '#lib/remotes/auth.remote.js';

export const load = async () => {
	await getUser(); //throws redirect if no user is logged
};

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 StackBlitz reproduction and src/routes/+page.svelte, then inspect the dashboard route's layout and the provided +layout.server.ts workaround. Verify navigation from the home page to /dashboard when the protected query redirects to /login across layout boundaries. Done means the login page renders during client-side navigation, with a regression test covering the scenario.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.