Best way to protect routes in TanStack Start?

What's the best way to protect all private routes like

/dashboard*

/dashboard*

/dashboard*

/dashboard*, so they redirect to

/login

/login

/login

/login if no session exists? I don't see this aspect in the example: https://github.com/better-auth/better-auth/tree/main/examples/tanstack-example

Below is my attempt, but session is always

null

null

, even if the user is authenticated.

// /routes/(authenticated)/route.tsx -- a layout despite the weird name.
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
import { authClient } from "@/lib/auth-client";

export const Route = createFileRoute("/(authenticated)")({
  component: AuthenticatedLayout,
  beforeLoad: async ({ location }) => {
    const { data: session } = await authClient.getSession();

    if (!session) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.pathname,
        },
      });
    }

    return { session };
  },
});

function AuthenticatedLayout() {
  return (
    <div className="min-h-screen">
      <Outlet />
    </div>
  );
}

// /routes/(authenticated)/route.tsx -- a layout despite the weird name.
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
import { authClient } from "@/lib/auth-client";

export const Route = createFileRoute("/(authenticated)")({
  component: AuthenticatedLayout,
  beforeLoad: async ({ location }) => {
    const { data: session } = await authClient.getSession();

    if (!session) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.pathname,
        },
      });
    }

    return { session };
  },
});

function AuthenticatedLayout() {
  return (
    <div className="min-h-screen">
      <Outlet />
    </div>
  );
}

// /routes/(authenticated)/route.tsx -- a layout despite the weird name.
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
import { authClient } from "@/lib/auth-client";

export const Route = createFileRoute("/(authenticated)")({
  component: AuthenticatedLayout,
  beforeLoad: async ({ location }) => {
    const { data: session } = await authClient.getSession();

    if (!session) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.pathname,
        },
      });
    }

    return { session };
  },
});

function AuthenticatedLayout() {
  return (
    <div className="min-h-screen">
      <Outlet />
    </div>
  );
}

// /routes/(authenticated)/route.tsx -- a layout despite the weird name.
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
import { authClient } from "@/lib/auth-client";

export const Route = createFileRoute("/(authenticated)")({
  component: AuthenticatedLayout,
  beforeLoad: async ({ location }) => {
    const { data: session } = await authClient.getSession();

    if (!session) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.pathname,
        },
      });
    }

    return { session };
  },
});

function AuthenticatedLayout() {
  return (
    <div className="min-h-screen">
      <Outlet />
    </div>
  );
}

I'm using

authClient.getSession()

authClient.getSession()

authClient.getSession()

authClient.getSession() b/c I believe this needs to work for both SSR and in the client.

CC @daveycodez Looking through the msg history, it appears you contributed the TanStack Start example, but I don't see this aspect in the example. Maybe you know?

GitHub

better-auth/examples/tanstack-example at main · better-auth/better...

The most comprehensive authentication framework for TypeScript - better-auth/better-auth

daveycodez•4/2/25, 1:52 AM

My starter is different

daveycodez•4/2/25, 1:52 AM

https://tanstack.better-auth-starter.com

jasonOP•4/2/25, 2:13 AM

Thanks. I'm not seeing the answer there either though. Any chance you know?

daveycodez•4/2/25, 2:17 AM

I think this is more a TanStack Start thing vs a Better Auth thing, since you'd need to do this regardless of the auth provider. I don't know all the details for how to do this. Try pinging Tanner on twitter?

daveycodez•4/2/25, 2:21 AM

Ohh you need to pass your headers to getSession

daveycodez•4/2/25, 2:22 AM

I thought you meant how to use a root route to capture all your routes

daveycodez•4/2/25, 2:22 AM

If the issue is null session it's because you need to use cookies

daveycodez•4/2/25, 2:24 AM

import { getWebRequest } from "@tanstack/react-start/server";import { getWebRequest } from "@tanstack/react-start/server";

  const { headers } = getWebRequest()!;
  const session = await auth.api.getSession({ headers });

  const { headers } = getWebRequest()!;
  const session = await auth.api.getSession({ headers });

daveycodez•4/2/25, 2:26 AM

  const request = getWebRequest();
  const session = request ? await auth.api.getSession({ headers: request.headers }) : null;

  const request = getWebRequest();
  const session = request ? await auth.api.getSession({ headers: request.headers }) : null;

daveycodez•4/2/25, 2:28 AM

And use auth instead of authClient

jasonOP•4/2/25, 2:28 AM

hmm. I didn't think that would work b/c the loader has to work in SSR or client side, that's why I went with authClient.getSession()

jasonOP•4/2/25, 2:28 AM

let me play with it for a bit and see if I can get something working

daveycodez•4/2/25, 2:28 AM

How can you detect if the loader is running server side or not

jasonOP•4/2/25, 2:28 AM

I'm new to TSS, but my undersatnding was loaders needed to be able to run in either SSR or client side, always

jasonOP•4/2/25, 2:29 AM

I don't know the answer to that. If I need to use two different better auth methods, I can pursue that question in TanStack's discord

daveycodez•4/2/25, 2:29 AM

Yea I would make sure you know when it's running in server vs client

daveycodez•4/2/25, 2:30 AM

Try console logging in your beforeLoad and see if it shows up in browser or terminal

jasonOP•4/2/25, 2:30 AM

I believe it depends if you hit the route directly (ssr) or navigate to it using the client side router

daveycodez•4/2/25, 2:30 AM

I usually use Next.js so I don't know for sure how TSS utilizes SSR

daveycodez•4/2/25, 2:31 AM

Try console.log on a page with beforeLoad and seeing if it shows up in Chrome console during client navigation

jasonOP•4/2/25, 2:34 AM

Tested it: it does depend on whether you navigate directly to it (SSR) or use the client sidse router

visit /dashboard directly - logged on server
visit to / and then click Link to /dashboard - logged in browser

jasonOP•4/2/25, 2:41 AM

I found the Clerk + TanStackStart example. Unfortuantely, it takes a totally different approach with some createClerkHandler()createClerkHandler() function, so it not possible to extrapolate much from it. I'll ask in TanStack's Discord and report back if I learn something
https://tanstack.com/start/latest/docs/framework/react/examples/start-clerk-basic?path=examples%2Freact%2Fstart-clerk-basic%2Fsrc%2Froutes%2F_authed.tsx

React TanStack Start Start Clerk Basic Example | TanStack Start Docs

An example showing how to implement Start Clerk Basic in React using TanStack Start.

jasonOP•4/2/25, 2:48 AM

This looks useful: start-questionsusing better-auth to protect the entire route Will explore this path

daveycodez•4/2/25, 3:40 AM

Awesome

Best way to protect routes in TanStack Start?

Similar Threads

Similar Threads

Similar Threads