Getting session null in tanstack start beforeLoad
I am getting session null in following implementation when I am using useSession in component itself I am getting session.
import { Navbar } from "@/components/navbar";
import { createFileRoute } from "@tanstack/react-router";
import { authClient } from "@/lib/auth-client";
import { redirect } from "@tanstack/react-router";
export const Route = createFileRoute("/")({
component: App,
beforeLoad: async () => {
const session = await authClient.getSession();
console.log(session.data?.user);
if (!session.data?.user) {
throw redirect({
to: "/sign-in",
});
}
},
});
function App() {
return (
<div className="min-h-screen">
<Navbar />
</div>
);
}import { Navbar } from "@/components/navbar";
import { createFileRoute } from "@tanstack/react-router";
import { authClient } from "@/lib/auth-client";
import { redirect } from "@tanstack/react-router";
export const Route = createFileRoute("/")({
component: App,
beforeLoad: async () => {
const session = await authClient.getSession();
console.log(session.data?.user);
if (!session.data?.user) {
throw redirect({
to: "/sign-in",
});
}
},
});
function App() {
return (
<div className="min-h-screen">
<Navbar />
</div>
);
}Solution
wrote a
createServerFncreateServerFn to get current users session in beforeLoad, my code looks like this @Nitish // src/routes/__root.tsx
const getSession = createServerFn({ method: "GET" }).handler(() => {
return authClient.getSession({
fetchOptions: { headers: getRequestHeaders() },
});
});
export const Route = createRootRouteWithContext<MyRouterContext>()({
beforeLoad: async () => {
const session = await getSession();
return { ...session.data };
},
})// src/routes/__root.tsx
const getSession = createServerFn({ method: "GET" }).handler(() => {
return authClient.getSession({
fetchOptions: { headers: getRequestHeaders() },
});
});
export const Route = createRootRouteWithContext<MyRouterContext>()({
beforeLoad: async () => {
const session = await getSession();
return { ...session.data };
},
})// src/routes/_session.ts - used protecting auth required routes
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/_session")({
beforeLoad: ({ context }) => {
if (!context.user) {
console.log("no user in session, redirecting to /login");
} else {
console.log("user in session:", context.user);
}
},
});// src/routes/_session.ts - used protecting auth required routes
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/_session")({
beforeLoad: ({ context }) => {
if (!context.user) {
console.log("no user in session, redirecting to /login");
} else {
console.log("user in session:", context.user);
}
},
});