Better Auth•2d ago

Best way to protect routes in TanStack Start?

What's the best way to protect all private routes like /dashboard*, so they redirect to /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, 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>
  );
}

I'm using 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

13 Replies

daveycodez•2d ago

My starter is different https://tanstack.better-auth-starter.com

jasonOP•2d ago

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

daveycodez•2d ago

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? Ohh you need to pass your headers to getSession I thought you meant how to use a root route to capture all your routes If the issue is null session it's because you need to use cookies 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 });

  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;

And use auth instead of authClient

jasonOP•2d ago

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() let me play with it for a bit and see if I can get something working

daveycodez•2d ago

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

jasonOP•2d ago

I'm new to TSS, but my undersatnding was loaders needed to be able to run in either SSR or client side, always 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•2d ago

Yea I would make sure you know when it's running in server vs client Try console logging in your beforeLoad and see if it shows up in browser or terminal

jasonOP•2d ago

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

daveycodez•2d ago

I usually use Next.js so I don't know for sure how TSS utilizes SSR Try console.log on a page with beforeLoad and seeing if it shows up in Chrome console during client navigation

jasonOP•2d ago

Tested it: it does depend on whether you navigate directly to it (SSR) or use the client sidse router 1. visit /dashboard directly - logged on server 2. visit to / and then click Link to /dashboard - logged in browser

jasonOP•2d ago

I found the Clerk + TanStackStart example. Unfortuantely, it takes a totally different approach with some 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•2d ago

This looks useful: https://discord.com/channels/719702312431386674/1356082423338893543 Will explore this path

daveycodez•2d ago

Awesome

Gaming

Programming

Best way to protect routes in TanStack Start?

Did you find this page helpful?