Route Protection Auth Session with Query Fail on Manual URL Change Subsequent Visit

[Kisagi07]

In SolidStart documentation : https://docs.solidjs.com/solid-start/advanced/auth

I'm creating the project using npm create solid@latest -- -st basic

this is the code in about.tsx

import { Title } from "@solidjs/meta";
import { createAsync, query, redirect } from "@solidjs/router";
import { useSession } from "vinxi/http";

type SessionData = {
  id: number
}

async function useAuthSession() {
  "use server";
  const session = await useSession<SessionData>({
    password: "1uWHSUOv3gnJBiFkerd99RDXDXM7xPisqTBBqHPszxc=",
    name: "auth",
  });

  return session;
}

export async function getUser() {
  "use server";
  const session = await useAuthSession();
  if (!session.data.id) return null;
  return session.data;
}

const queryUser = query(async function() {
  "use server"
  const user = await getUser()
  if(!user) {
    throw redirect("/");
  }

  return user
}, "checkuser")

export default function About() {
  createAsync(() => queryUser())
  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
    </main>
  );
}

If I visit /about for the first time it will properly redirect to / , clicking on the about navigation will properly navigate back to / but if I manually change the url to /about after being redirected to / it will cause this error in console and fail to redirect.

Error: Cannot set headers after they are sent to the client

I don't know if this is intentional or not. I appreciate any answers

[Kisagi07]

By using deferStream: true in createAsync I can avoid this problem it seems

createAsync(() => queryUser(), {deferStream: true})

doing this cause redirect to always work even in manual URL change visit

but since the documentation of the auth does not say anything about this, I won't mark this as answer yet

[Kisagi07]

I think the breaking point is the redirect

const getUserData = query(async () => {
  "use server"
  const user = await getUser()
  // if (!user) throw redirect("/login")
  return user
}, "get-user-data")

commenting redirect and navigating between /, /about multiple times show no error to appear, I doubt this is the cause of the problem though.

[zhengkyl]

Adding { deferStream: true } is the answer.

In your code example, session.data.id is always undefined because session.data is you object you passeduseSession, so it always runs the redirect.

Without deferStream, when you visit the link directly, you have two responses from the server. The initial streamed html, and then data later in a second response. The redirect is done via a 302 Redirect using headers, but headers are already set in the initial response, hence the error message.

With deferStream, the server waits until the query finishes before sending anything. No double headers.

When you navigate using page links, there is client side navigation and no streaming. Only the data needs to be fetched so only one response.

I created an issue for the docs because this is a common problem solidjs/solid-docs#1384