using better-auth to protect the entire route

ordinary-sapphire · 2025-03-31T01:47:24.517Z

I have implemented better-auth for tanstack start (https://www.better-auth.com/docs/integrations/tanstack) and I want to protect all pages in the route, how can I do that?

W

wispy-olive•3/31/25, 5:50 AM

I do this in an _auth.tsx file in the beforeload function

export const Route = createFileRoute("/_auth")({
    component: AuthLayout,
    beforeLoad: async ({ context: { user } }) => {
        if (user) {
            throw redirect({
                to: "/",
            });
        }
    },
});

export const Route = createFileRoute("/_auth")({
    component: AuthLayout,
    beforeLoad: async ({ context: { user } }) => {
        if (user) {
            throw redirect({
                to: "/",
            });
        }
    },
});

export const Route = createFileRoute("/_auth")({
    component: AuthLayout,
    beforeLoad: async ({ context: { user } }) => {
        if (user) {
            throw redirect({
                to: "/",
            });
        }
    },
});

export const Route = createFileRoute("/_auth")({
    component: AuthLayout,
    beforeLoad: async ({ context: { user } }) => {
        if (user) {
            throw redirect({
                to: "/",
            });
        }
    },
});

in my _root.tsx:

    beforeLoad: async () => {
        try {
            const session = await fetchSessionFn();
            return session;
        } catch (error) {
            console.error("Failed to fetch session:", error);
            // You can return a default session object or null
            return null;
        }
    },

    beforeLoad: async () => {
        try {
            const session = await fetchSessionFn();
            return session;
        } catch (error) {
            console.error("Failed to fetch session:", error);
            // You can return a default session object or null
            return null;
        }
    },

    beforeLoad: async () => {
        try {
            const session = await fetchSessionFn();
            return session;
        } catch (error) {
            console.error("Failed to fetch session:", error);
            // You can return a default session object or null
            return null;
        }
    },

    beforeLoad: async () => {
        try {
            const session = await fetchSessionFn();
            return session;
        } catch (error) {
            console.error("Failed to fetch session:", error);
            // You can return a default session object or null
            return null;
        }
    },

where fetchsession:

export const fetchSessionFn = createServerFn({ method: "GET" }).handler(
    async () => {
        const res = await fetch(`${MERCURY_URL}/api/auth/get-session`, {
            headers: {
                //get the cookie from the request
                cookie: getHeader("cookie") || "",
            },
        });

        if (!res.ok) {
            throw new Error("Not authenticated");
        }

        const session = (await res.json()) as Session;

        return session;
    },
);

export const fetchSessionFn = createServerFn({ method: "GET" }).handler(
    async () => {
        const res = await fetch(`${MERCURY_URL}/api/auth/get-session`, {
            headers: {
                //get the cookie from the request
                cookie: getHeader("cookie") || "",
            },
        });

        if (!res.ok) {
            throw new Error("Not authenticated");
        }

        const session = (await res.json()) as Session;

        return session;
    },
);

export const fetchSessionFn = createServerFn({ method: "GET" }).handler(
    async () => {
        const res = await fetch(`${MERCURY_URL}/api/auth/get-session`, {
            headers: {
                //get the cookie from the request
                cookie: getHeader("cookie") || "",
            },
        });

        if (!res.ok) {
            throw new Error("Not authenticated");
        }

        const session = (await res.json()) as Session;

        return session;
    },
);

export const fetchSessionFn = createServerFn({ method: "GET" }).handler(
    async () => {
        const res = await fetch(`${MERCURY_URL}/api/auth/get-session`, {
            headers: {
                //get the cookie from the request
                cookie: getHeader("cookie") || "",
            },
        });

        if (!res.ok) {
            throw new Error("Not authenticated");
        }

        const session = (await res.json()) as Session;

        return session;
    },
);

W

wispy-olive•3/31/25, 5:51 AM

you can probably use the better auth client instead to return the session

authClient.getSession()

authClient.getSession()

authClient.getSession()

authClient.getSession()

L

living-lavender•3/31/25, 6:57 AM

You can also cache it with tanstack query

O

ordinary-sapphireOP•3/31/25, 12:28 PM

@bxr getSession with Auth client always returns null, even when cookie is set , not sure why

Lliving-lavender You can also cache it with tanstack query

O

ordinary-sapphireOP•3/31/25, 12:29 PM

Do you have an example of this? I recently started using tanstack start

L

living-lavender•3/31/25, 12:32 PM

Something like this (mind you I have never used better auth)

const getUser = createServerFn({ method: "GET" }).handler(async () => {
  const { headers } = getWebRequest()!;
  const session = await auth.api.getSession({ headers });

  return session?.user || null;
});

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
  user: Awaited<ReturnType<typeof getUser>>;
}>()({
  beforeLoad: async ({ context }) => {
    const user = await context.queryClient.fetchQuery({
      queryKey: ["user"],
      queryFn: ({ signal }) => getUser({ signal }),
    }); // we're using react-query for caching, see router.tsx
    return { user };
  },

const getUser = createServerFn({ method: "GET" }).handler(async () => {
  const { headers } = getWebRequest()!;
  const session = await auth.api.getSession({ headers });

  return session?.user || null;
});

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
  user: Awaited<ReturnType<typeof getUser>>;
}>()({
  beforeLoad: async ({ context }) => {
    const user = await context.queryClient.fetchQuery({
      queryKey: ["user"],
      queryFn: ({ signal }) => getUser({ signal }),
    }); // we're using react-query for caching, see router.tsx
    return { user };
  },

const getUser = createServerFn({ method: "GET" }).handler(async () => {
  const { headers } = getWebRequest()!;
  const session = await auth.api.getSession({ headers });

  return session?.user || null;
});

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
  user: Awaited<ReturnType<typeof getUser>>;
}>()({
  beforeLoad: async ({ context }) => {
    const user = await context.queryClient.fetchQuery({
      queryKey: ["user"],
      queryFn: ({ signal }) => getUser({ signal }),
    }); // we're using react-query for caching, see router.tsx
    return { user };
  },

const getUser = createServerFn({ method: "GET" }).handler(async () => {
  const { headers } = getWebRequest()!;
  const session = await auth.api.getSession({ headers });

  return session?.user || null;
});

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
  user: Awaited<ReturnType<typeof getUser>>;
}>()({
  beforeLoad: async ({ context }) => {
    const user = await context.queryClient.fetchQuery({
      queryKey: ["user"],
      queryFn: ({ signal }) => getUser({ signal }),
    }); // we're using react-query for caching, see router.tsx
    return { user };
  },

L

living-lavender•3/31/25, 12:33 PM

The above is copied from this repo:

https://github.com/dotnize/react-tanstarter

GitHub

GitHub - dotnize/react-tanstarter: minimal TanStack Start template ...

minimal TanStack Start template with React 19, Better Auth, Drizzle ORM, shadcn/ui - dotnize/react-tanstarter

L

living-lavender•3/31/25, 12:34 PM

All credit of course to dotnize

S

spotty-amber•11/4/25, 2:09 PM

I would like to say that I was facing this problem, didn't find support in better-auth discord, then found this thread and it helped me out. But I did my thing based on the examples you guys posted and dotnize's repo.
I believe my approach is clean enough for people who are just meeting tan start and better auth (my case):
I created a

src/lib/authfunctions.ts

src/lib/authfunctions.ts

src/lib/authfunctions.ts

src/lib/authfunctions.ts file similar to dotnize's

auth/functions.ts

auth/functions.ts

auth/functions.ts

auth/functions.ts file:

import { createServerFn } from "@tanstack/react-start";
import { getRequest } from "@tanstack/react-start/server";
import { auth } from "@/lib/auth";

export const $getUser = createServerFn({ method: "GET" }).handler(async () => {
  const session = await auth.api.getSession({ headers: getRequest().headers });
  return session?.user || null;
});

import { createServerFn } from "@tanstack/react-start";
import { getRequest } from "@tanstack/react-start/server";
import { auth } from "@/lib/auth";

export const $getUser = createServerFn({ method: "GET" }).handler(async () => {
  const session = await auth.api.getSession({ headers: getRequest().headers });
  return session?.user || null;
});

import { createServerFn } from "@tanstack/react-start";
import { getRequest } from "@tanstack/react-start/server";
import { auth } from "@/lib/auth";

export const $getUser = createServerFn({ method: "GET" }).handler(async () => {
  const session = await auth.api.getSession({ headers: getRequest().headers });
  return session?.user || null;
});

import { createServerFn } from "@tanstack/react-start";
import { getRequest } from "@tanstack/react-start/server";
import { auth } from "@/lib/auth";

export const $getUser = createServerFn({ method: "GET" }).handler(async () => {
  const session = await auth.api.getSession({ headers: getRequest().headers });
  return session?.user || null;
});

Then in my auth route I was able to

import { $getUser } from '@/lib/authfunctions'

import { $getUser } from '@/lib/authfunctions'

import { $getUser } from '@/lib/authfunctions'

import { $getUser } from '@/lib/authfunctions' and grab user data in

beforeLoad

beforeLoad

beforeLoad

beforeLoad method using

const user = await $getUser()

const user = await $getUser()

const user = await $getUser()

const user = await $getUser().

This problem took me a few hours because as a beginner in fullstack react frameworks I didn't knew what could be used in the file route class and what should be a server function. I specifically tried to retrieve request data (for it's headers) in my _auth route for about an hour, didn't find it in docs, tried to play around with imports, tried to log every argument available in beforeLoad method and in createFileRoute. Only yesterday I saw the

getRequest

getRequest

getRequest

getRequest method in this thread and thought

oh I just found you, you sneaky request object

oh I just found you, you sneaky request object

oh I just found you, you sneaky request object

oh I just found you, you sneaky request object.

D

dramatic-maroon•11/4/25, 9:25 PM

If you're using authClient.useSession anywhere in the app, or Better Auth UI (which uses it under the hood), I would suggest to use an isomorphic function & authClient.getSession from the client, so it correctly updates useSession to use the latest session that is fetched on navigation

D

dramatic-maroon•11/5/25, 12:39 AM

Another thing you might want to consider if you are using authClient.useSession is that this will result in multiple server requests just to authenticate the route. If you're not using authClient.useSession, this approach is probably fine, or if you don't care about double fetching the session

D

dramatic-maroon•11/5/25, 12:41 AM

For example, in my header I am using authClient.useSession to render a UserButton. This means that every page that has header will send a GET request to /api/get-session already. If I want to protect an SSR route at the "middleware" level, I simply check for cookie presence - not an actual getSession check. Then I protect the content on the client by checking if data is not null from authClient.useSession (<SignedIn> component does this from Better Auth UI)

D

dramatic-maroon•11/5/25, 12:46 AM

Another consideration is Cloudflare, if you're serving tons of requests you can save $$ by using prerendered routes, which means you won't be able to do SSR middleware on those routes, so client-side auth checks will be needed via useSession. Or even better, you can use Cloudflare "redirect rules" that just check for the cookie presence and perform the redirect before the route even loads

T

then-purple•11/6/25, 3:37 PM

the docs of better-auth state that it's recommended to use 'authClient' instead of 'server' functions, but I don't think that approach works for isomorphic beforeLoad functions as the session is always null on the server. Is there a way to conditionally run logic based on if it runs on the server or client in tanstack?

Ddramatic-maroon For example, in my header I am using authClient.useSession to render a UserButto...

T

then-purple•11/6/25, 3:46 PM

can you give a code example of this?

T

then-purple•11/6/25, 3:47 PM

an example showing how you can check the session/cookie both client and server side in tanstack

T

then-purple•11/6/25, 4:46 PM

for now, I am using this workaround:

const getUserSessionFromServer = createServerFn({ method: "GET" }).handler(
    async () => {
        const { headers } = getRequest();
        const session = await auth.api.getSession({ headers });

        return session || null;
    },
);

const checkAuthentication = async ({
    authClientWeb,
    queryClient,
}: {
    authClientWeb: typeof authClient;
    queryClient: QueryClient;
}) => {
    let sessionDataFromServer = null;
    const { data: clientSessionData } = await authClientWeb.getSession();

    if (!clientSessionData?.session) {
        sessionDataFromServer = await queryClient.fetchQuery({
            queryKey: ["user", "session"],
            queryFn: ({ signal }) => getUserSessionFromServer({ signal }),
        });
    }

    return {
        isAuthenticated: !!(
            clientSessionData?.session || sessionDataFromServer?.session
        ),
    };
};

const getUserSessionFromServer = createServerFn({ method: "GET" }).handler(
    async () => {
        const { headers } = getRequest();
        const session = await auth.api.getSession({ headers });

        return session || null;
    },
);

const checkAuthentication = async ({
    authClientWeb,
    queryClient,
}: {
    authClientWeb: typeof authClient;
    queryClient: QueryClient;
}) => {
    let sessionDataFromServer = null;
    const { data: clientSessionData } = await authClientWeb.getSession();

    if (!clientSessionData?.session) {
        sessionDataFromServer = await queryClient.fetchQuery({
            queryKey: ["user", "session"],
            queryFn: ({ signal }) => getUserSessionFromServer({ signal }),
        });
    }

    return {
        isAuthenticated: !!(
            clientSessionData?.session || sessionDataFromServer?.session
        ),
    };
};

const getUserSessionFromServer = createServerFn({ method: "GET" }).handler(
    async () => {
        const { headers } = getRequest();
        const session = await auth.api.getSession({ headers });

        return session || null;
    },
);

const checkAuthentication = async ({
    authClientWeb,
    queryClient,
}: {
    authClientWeb: typeof authClient;
    queryClient: QueryClient;
}) => {
    let sessionDataFromServer = null;
    const { data: clientSessionData } = await authClientWeb.getSession();

    if (!clientSessionData?.session) {
        sessionDataFromServer = await queryClient.fetchQuery({
            queryKey: ["user", "session"],
            queryFn: ({ signal }) => getUserSessionFromServer({ signal }),
        });
    }

    return {
        isAuthenticated: !!(
            clientSessionData?.session || sessionDataFromServer?.session
        ),
    };
};

const getUserSessionFromServer = createServerFn({ method: "GET" }).handler(
    async () => {
        const { headers } = getRequest();
        const session = await auth.api.getSession({ headers });

        return session || null;
    },
);

const checkAuthentication = async ({
    authClientWeb,
    queryClient,
}: {
    authClientWeb: typeof authClient;
    queryClient: QueryClient;
}) => {
    let sessionDataFromServer = null;
    const { data: clientSessionData } = await authClientWeb.getSession();

    if (!clientSessionData?.session) {
        sessionDataFromServer = await queryClient.fetchQuery({
            queryKey: ["user", "session"],
            queryFn: ({ signal }) => getUserSessionFromServer({ signal }),
        });
    }

    return {
        isAuthenticated: !!(
            clientSessionData?.session || sessionDataFromServer?.session
        ),
    };
};

P

popular-magenta•11/6/25, 5:21 PM

You can check here => https://github.com/AmanVarshney01/create-better-t-stack/blob/main/apps/cli/templates/auth/better-auth/web/react/tanstack-start/src/routes/dashboard.tsx.hbs

beforeLoad: async () => {
    const session = await getUser();
    const customerState = await getPayment();
    return { session };
  },

beforeLoad: async () => {
    const session = await getUser();
    const customerState = await getPayment();
    return { session };
  },

beforeLoad: async () => {
    const session = await getUser();
    const customerState = await getPayment();
    return { session };
  },

beforeLoad: async () => {
    const session = await getUser();
    const customerState = await getPayment();
    return { session };
  },

Create a new project and select betanstack and better-auth => https://www.better-t-stack.dev/

GitHub

create-better-t-stack/apps/cli/templates/auth/better-auth/web/react...

A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations - AmanVarshney01/create-better-t-stack

Better-T-Stack

A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations

Ddramatic-maroon For example, in my header I am using authClient.useSession to render a UserButto...

W

wispy-olive•11/24/25, 1:34 AM

can you show how you check cookie presence? What if the cookie is expired?

W

wispy-olive•11/24/25, 1:50 AM

I ended up creating an isomorphic fn

export const getUserSession = createIsomorphicFn()
    .server(async () => {
        const { headers } = getRequest();

        const session = await auth.api.getSession({
            headers,
            query: {
                disableCookieCache: true,
            },
        });

        return session || null;
    })
    .client(async () => {
        const session = (await authClient.getSession()).data;
        return session || null;
    });


export const authQueryOptions = () =>
    queryOptions({
        queryKey: ["session"],
        queryFn: async () => await getUserSession(),
        // Match better-auth's cookie cache duration (1 minute)
        // This prevents React Query from serving stale data beyond what better-auth allows
        staleTime: 1000 * 60, // 1 minute - matches better-auth cookieCache.maxAge
        gcTime: 0,
    });

// in beforeLoad
...
    beforeLoad: async ({ context }) => {
        const session = await context.queryClient.ensureQueryData({
            ...authQueryOptions(),
            revalidateIfStale: true,
        });

        if (!session) {
            throw redirect({
                to: "/$pathname",
                params: { pathname: "/sign-in" },
            });
        }

        return { session };
    },
...

export const getUserSession = createIsomorphicFn()
    .server(async () => {
        const { headers } = getRequest();

        const session = await auth.api.getSession({
            headers,
            query: {
                disableCookieCache: true,
            },
        });

        return session || null;
    })
    .client(async () => {
        const session = (await authClient.getSession()).data;
        return session || null;
    });


export const authQueryOptions = () =>
    queryOptions({
        queryKey: ["session"],
        queryFn: async () => await getUserSession(),
        // Match better-auth's cookie cache duration (1 minute)
        // This prevents React Query from serving stale data beyond what better-auth allows
        staleTime: 1000 * 60, // 1 minute - matches better-auth cookieCache.maxAge
        gcTime: 0,
    });

// in beforeLoad
...
    beforeLoad: async ({ context }) => {
        const session = await context.queryClient.ensureQueryData({
            ...authQueryOptions(),
            revalidateIfStale: true,
        });

        if (!session) {
            throw redirect({
                to: "/$pathname",
                params: { pathname: "/sign-in" },
            });
        }

        return { session };
    },
...

export const getUserSession = createIsomorphicFn()
    .server(async () => {
        const { headers } = getRequest();

        const session = await auth.api.getSession({
            headers,
            query: {
                disableCookieCache: true,
            },
        });

        return session || null;
    })
    .client(async () => {
        const session = (await authClient.getSession()).data;
        return session || null;
    });


export const authQueryOptions = () =>
    queryOptions({
        queryKey: ["session"],
        queryFn: async () => await getUserSession(),
        // Match better-auth's cookie cache duration (1 minute)
        // This prevents React Query from serving stale data beyond what better-auth allows
        staleTime: 1000 * 60, // 1 minute - matches better-auth cookieCache.maxAge
        gcTime: 0,
    });

// in beforeLoad
...
    beforeLoad: async ({ context }) => {
        const session = await context.queryClient.ensureQueryData({
            ...authQueryOptions(),
            revalidateIfStale: true,
        });

        if (!session) {
            throw redirect({
                to: "/$pathname",
                params: { pathname: "/sign-in" },
            });
        }

        return { session };
    },
...

export const getUserSession = createIsomorphicFn()
    .server(async () => {
        const { headers } = getRequest();

        const session = await auth.api.getSession({
            headers,
            query: {
                disableCookieCache: true,
            },
        });

        return session || null;
    })
    .client(async () => {
        const session = (await authClient.getSession()).data;
        return session || null;
    });


export const authQueryOptions = () =>
    queryOptions({
        queryKey: ["session"],
        queryFn: async () => await getUserSession(),
        // Match better-auth's cookie cache duration (1 minute)
        // This prevents React Query from serving stale data beyond what better-auth allows
        staleTime: 1000 * 60, // 1 minute - matches better-auth cookieCache.maxAge
        gcTime: 0,
    });

// in beforeLoad
...
    beforeLoad: async ({ context }) => {
        const session = await context.queryClient.ensureQueryData({
            ...authQueryOptions(),
            revalidateIfStale: true,
        });

        if (!session) {
            throw redirect({
                to: "/$pathname",
                params: { pathname: "/sign-in" },
            });
        }

        return { session };
    },
...

D

dramatic-maroon•11/24/25, 2:51 AM

That's totally fine if you don't want to use cookie cache

D

dramatic-maroon•11/24/25, 2:52 AM

I mostly use client side for my projects, way simpler

D

dramatic-maroon•11/24/25, 2:53 AM

Also lets me use static rendering for all my pages (totally free on Cloudflare)

D

dramatic-maroon•11/24/25, 2:55 AM

import { getSessionCookie } from "better-auth/cookies";

const sessionCookie = getSessionCookie(request);

import { getSessionCookie } from "better-auth/cookies";

const sessionCookie = getSessionCookie(request);

import { getSessionCookie } from "better-auth/cookies";

const sessionCookie = getSessionCookie(request);

import { getSessionCookie } from "better-auth/cookies";

const sessionCookie = getSessionCookie(request);

This is how you get the cookie. My setup is session cookie check only when I want to prevent a route from even rendering at all, and then it falls back to client checks on authClient.useSession()

I show skeletons during isPending

D

dramatic-maroon•11/24/25, 3:00 AM

TBH the dream is to check the cookie on Cloudflare's domain rules system and have it redirect the user to sign in directly at the DNS step

D

dramatic-maroon•11/24/25, 3:00 AM

Then the dashboard page is totally static, and does conditional rendering based on authClient.useSession

D

dramatic-maroon•11/24/25, 3:01 AM

You could literally just define a rule on cloudflare, when they go to /dashboard, and they are missing the better auth cookie, redirect to /auth/sign-in.

Then all the pages use Vite prerendering and serve from cdn, no worker cpu for the entire site, only for auth API requests. Unlimited free requests and egress for serving the site

W

wispy-olive•11/24/25, 4:20 AM

ah that's pretty smart

B

brilliant-orange•11/27/25, 6:26 AM

This is a template of mine that showcases how to integrate better-auth and resend in tanstack start.
I am constantly updating the packages to their latest versions, and try to use the best practices as much as I could.
https://github.com/aliallaoua/better-auth

GitHub

GitHub - aliallaoua/better-auth: A production-ready authentication ...

A production-ready authentication starter built with TanStack Start, leveraging best practices and the latest versions of key dependencies. - aliallaoua/better-auth

Bbrilliant-orange This is a template of mine that showcases how to integrate better-auth and resen...

W

wispy-olive•11/27/25, 8:19 PM

nice, i'll take a look. Do you ever run into issues with

tried to stream query ["some_key"] after stream was already closed

tried to stream query ["some_key"] after stream was already closed

tried to stream query ["some_key"] after stream was already closed

tried to stream query ["some_key"] after stream was already closed since you are using tanstack query in ssr? I have it all the time, which made me move away from tanstack query in beforeLoad

I was looking into it and found:

A query (e.g., via prefetchQuery or ensureQueryData in beforeLoad/loader) starts streaming data to the client during prefetch. A mid-stream redirect (e.g., auth guard) aborts/closes the stream prematurely. Client hydration then attempts to resume/access the orphaned query state, triggering the error

A query (e.g., via prefetchQuery or ensureQueryData in beforeLoad/loader) starts streaming data to the client during prefetch. A mid-stream redirect (e.g., auth guard) aborts/closes the stream prematurely. Client hydration then attempts to resume/access the orphaned query state, triggering the error

A query (e.g., via prefetchQuery or ensureQueryData in beforeLoad/loader) starts streaming data to the client during prefetch. A mid-stream redirect (e.g., auth guard) aborts/closes the stream prematurely. Client hydration then attempts to resume/access the orphaned query state, triggering the error

A query (e.g., via prefetchQuery or ensureQueryData in beforeLoad/loader) starts streaming data to the client during prefetch. A mid-stream redirect (e.g., auth guard) aborts/closes the stream prematurely. Client hydration then attempts to resume/access the orphaned query state, triggering the error

using better-auth to protect the entire route

Similar Threads

Similar Threads

Similar Threads