Handling Auth with TanStack Start and TanStack Router #6391

LinusOhl · 2026-01-16T10:40:01Z

LinusOhl
Jan 16, 2026

Preface:
I'm trying to handle authentication on my front-end using TanStack Start and TanStack Router, protected routes, user data, etc. I am running my own Node.JS back-end that, when authenticates a user, sets two HttpOnly cookies (refresh token and access token).

I'd like to be able to have protected routes and know which user is currently logged in in my front-end, however, I'm not sure what the correct approach might be. I'd like to be able to utilize the beforeLoad() functionality, but I've not found a solution that will allow me to use it. I've tried using a React context (an auth context), and I've tried using server functions provided by TanStack Start.

When trying to use a context, I run into the issue where I can't properly set the context so that it is usable in a beforeLoad(). And the problem I've found when using server functions is that I am relying on cookies provided by my back-end, which in turn seems to cause issues. I may very well be missing some info/part/code that would solve it, but so far I've found no solution.

// router.tsx
import { QueryClient } from "@tanstack/react-query";
import { createRouter, ErrorComponent } from "@tanstack/react-router";
import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
import { routeTree } from "./routeTree.gen";

export function getRouter() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
      },
    },
  });

  const router = createRouter({
    routeTree,
    context: { queryClient },
    defaultErrorComponent: ({ error }) => <ErrorComponent error={error} />,
    defaultPreload: "intent",
  });

  setupRouterSsrQueryIntegration({
    router,
    queryClient,
  });

  return router;
}

declare module "@tanstack/react-router" {
  interface Register {
    router: ReturnType<typeof getRouter>;
  }
}

// src/routes/__root.tsx
/// <reference types="vite/client" />

import { MantineProvider } from "@mantine/core";
import type { QueryClient } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import {
  createRootRouteWithContext,
  HeadContent,
  Outlet,
  Scripts,
} from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import type { ReactNode } from "react";
import { theme } from "../configs/theme";
import { AuthProvider } from "../contexts/AuthContext";

import "@mantine/core/styles.css";

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
}>()({
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        title: "Start",
      },
    ],
    links: [
      {
        rel: "preconnect",
        href: "https://fonts.googleapis.com",
      },
      {
        rel: "preconnect",
        href: "https://fonts.gstatic.com",
        crossOrigin: "",
      },
      {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css2?family=Parkinsans:[email protected]&display=swap",
      },
    ],
  }),
  component: RootComponent,
});

function RootComponent() {
  return (
    <RootDocument>
      <Outlet />
    </RootDocument>
  );
}

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <AuthProvider>
          <MantineProvider theme={theme}>{children}</MantineProvider>
        </AuthProvider>

        <TanStackRouterDevtools position="bottom-right" />
        <ReactQueryDevtools buttonPosition="bottom-left" />
        <Scripts />
      </body>
    </html>
  );
}

// src/contexts/AuthContext.tsx
import { Loader } from "@mantine/core";
import {
  createContext,
  type ReactNode,
  useContext,
  useEffect,
  useState,
} from "react";
import { BASE_URL_LOCAL } from "../helpers";

export interface AuthContext {
  user: User | null;
  isLoading: boolean;
  login: (email: string, password: string) => Promise<void>;
}

type BaseResponse<T> = {
  status: string;
  data: T;
};

type User = {
  id: string;
  email: string;
  firstName: string;
};

const AuthContext = createContext<AuthContext | null>(null);

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(true);

  useEffect(() => {
    const initializeAuth = async () => {
      try {
        const response = await fetch(`${BASE_URL_LOCAL}/auth/refresh`, {
          method: "GET",
          credentials: "include",
        });

        if (!response.ok) {
          throw new Error("Failed to refresh access token.");
        }

        const result = (await response.json()) as BaseResponse<User>;

        setUser(result.data);
        setIsLoading(false);
      } catch (error) {
        setUser(null);
      } finally {
        setIsLoading(false);
      }
    };

    initializeAuth();
  }, []);

  const login = async (email: string, password: string) => {
    const response = await fetch(`${BASE_URL_LOCAL}/auth/login`, {
      method: "POST",
      body: JSON.stringify({
        email,
        password,
      }),
      credentials: "include",
    });

    if (!response.ok) {
      return;
    }

    const result = (await response.json()) as BaseResponse<User>;
    setUser(result.data);
  };

  const value: AuthContext = {
    user,
    isLoading,
    login,
  };

  // if (isLoading) {
  //   return <Loader />;
  // }

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

export const useAuth = () => {
  const context = useContext(AuthContext);

  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider.");
  }

  return context;
};

// src/routes/index.tsx
export const Route = createFileRoute("/")({
  beforeLoad: async () => {
    // Where I'd like access to user/auth, for example.
  },
  component: Home,
});

Open for any ideas!

PS. I'm very much still learning, and some of these things are new to me.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Handling Auth with TanStack Start and TanStack Router #6391

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Handling Auth with TanStack Start and TanStack Router #6391

Uh oh!

LinusOhl Jan 16, 2026

Replies: 0 comments

LinusOhl
Jan 16, 2026