bxr Comments - Answer Overflow

// better-auth-ssr-handler
import type { AnyRouter } from "@tanstack/react-router";
import type { EventHandler } from "@tanstack/react-start/server";
import { getSession } from "@/lib/server/auth";
import type { QueryClient } from "@tanstack/react-query";

export type HandlerCallback<TRouter extends AnyRouter> = (ctx: {
    request: Request;
    router: TRouter;
    responseHeaders: Headers;
}) => Response | Promise<Response>;

export type CustomizeStartHandler<TRouter extends AnyRouter> = (
    cb: HandlerCallback<TRouter>,
) => EventHandler;

export function withBetterAuth<TRouter extends AnyRouter>(
    startHandler: CustomizeStartHandler<TRouter>,
) {
    return (cb: HandlerCallback<TRouter>): EventHandler =>
        startHandler(async ({ request, router, responseHeaders }) => {
            const qc = router.options.context.queryClient as QueryClient;

            const session = await getSession();

            qc.setQueryData(["session"], session);

            // 4) stash session + user into router context
            router.update({
                context: {
                    ...router.options.context,
                    session,
                },
            });

            // 5) run through all loaders / beforeLoad
            await router.load();

            // 6) hand back to your normal handler (e.g. defaultStreamHandler)
            return cb({ request, router, responseHeaders });
        });
}

//ssr.tsx
import {
    createStartHandler,
    defaultStreamHandler,
} from "@tanstack/react-start/server";
import { getRouterManifest } from "@tanstack/react-start/router-manifest";

import { createRouter } from "./router";
import { withBetterAuth } from "@/lib/ssr/auth";

export default withBetterAuth(
    createStartHandler({
        createRouter,
        getRouterManifest,
    }),
)(defaultStreamHandler);

// better-auth-ssr-handler
import type { AnyRouter } from "@tanstack/react-router";
import type { EventHandler } from "@tanstack/react-start/server";
import { getSession } from "@/lib/server/auth";
import type { QueryClient } from "@tanstack/react-query";

export type HandlerCallback<TRouter extends AnyRouter> = (ctx: {
    request: Request;
    router: TRouter;
    responseHeaders: Headers;
}) => Response | Promise<Response>;

export type CustomizeStartHandler<TRouter extends AnyRouter> = (
    cb: HandlerCallback<TRouter>,
) => EventHandler;

export function withBetterAuth<TRouter extends AnyRouter>(
    startHandler: CustomizeStartHandler<TRouter>,
) {
    return (cb: HandlerCallback<TRouter>): EventHandler =>
        startHandler(async ({ request, router, responseHeaders }) => {
            const qc = router.options.context.queryClient as QueryClient;

            const session = await getSession();

            qc.setQueryData(["session"], session);

            // 4) stash session + user into router context
            router.update({
                context: {
                    ...router.options.context,
                    session,
                },
            });

            // 5) run through all loaders / beforeLoad
            await router.load();

            // 6) hand back to your normal handler (e.g. defaultStreamHandler)
            return cb({ request, router, responseHeaders });
        });
}

//ssr.tsx
import {
    createStartHandler,
    defaultStreamHandler,
} from "@tanstack/react-start/server";
import { getRouterManifest } from "@tanstack/react-start/router-manifest";

import { createRouter } from "./router";
import { withBetterAuth } from "@/lib/ssr/auth";

export default withBetterAuth(
    createStartHandler({
        createRouter,
        getRouterManifest,
    }),
)(defaultStreamHandler);

I think it's a step forward, in dev it doesn't work yet i notice that the cookie is set but the user session disappears after the client loads

45 replies

BABetter Auth

•Created by bxr on 4/17/2025 in #help

I’ll figure something out, thanks for all your help thus far

45 replies

BABetter Auth

•Created by bxr on 4/17/2025 in #help

I think you have an example tanstack start repo but that didn’t have any prefetch ssr set up so I just did this

45 replies

BABetter Auth

•Created by bxr on 4/17/2025 in #help

Weird that the issue doesn’t happen locally though

45 replies

BABetter Auth

•Created by bxr on 4/17/2025 in #help

I see I wasn’t aware a session key was already set up with your library

45 replies

BABetter Auth

•Created by bxr on 4/17/2025 in #help

Yep it’s in my __root route

}),

    component: () => {
        const router = useRouter();
        return (
            <AuthQueryProvider>
                <AuthUIProviderTanstack
                    authClient={authClient}
                    providers={["discord"]}
                    basePath="/"
                    baseURL={env.VITE_AGORA_URL}
                    navigate={(href) => router.navigate({ href })}
                    replace={(href) => router.navigate({ href, replace: true })}
                    Link={({ href, ...props }) => <Link to={href} {...props} />}
                    localization={{
                        signInDescription: "Login with your Discord or email",
                    }}
                >
                    <RootDocument>
                        <Outlet />
                        <Toaster />
                        <TanStackRouterDevtools position="bottom-right" />
                        <ReactQueryDevtools buttonPosition="top-right" />
                    </RootDocument>
                </AuthUIProviderTanstack>
            </AuthQueryProvider>
        );
    },
    beforeLoad: async ({ context }) => {
        const user = await context.queryClient.ensureQueryData({
            queryKey: ["user"],
            queryFn: ({ signal }) => getUser({ signal }),
        });
        return { user };
    },

}),

    component: () => {
        const router = useRouter();
        return (
            <AuthQueryProvider>
                <AuthUIProviderTanstack
                    authClient={authClient}
                    providers={["discord"]}
                    basePath="/"
                    baseURL={env.VITE_AGORA_URL}
                    navigate={(href) => router.navigate({ href })}
                    replace={(href) => router.navigate({ href, replace: true })}
                    Link={({ href, ...props }) => <Link to={href} {...props} />}
                    localization={{
                        signInDescription: "Login with your Discord or email",
                    }}
                >
                    <RootDocument>
                        <Outlet />
                        <Toaster />
                        <TanStackRouterDevtools position="bottom-right" />
                        <ReactQueryDevtools buttonPosition="top-right" />
                    </RootDocument>
                </AuthUIProviderTanstack>
            </AuthQueryProvider>
        );
    },
    beforeLoad: async ({ context }) => {
        const user = await context.queryClient.ensureQueryData({
            queryKey: ["user"],
            queryFn: ({ signal }) => getUser({ signal }),
        });
        return { user };
    },