Redirecting in a remote query breaks when crossing layout boundaries and doesn't render the new page
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
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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