Tanstack Start + Firebase Auth #5581

jsantanders · 2025-10-22T03:04:15Z

jsantanders
Oct 22, 2025

Hi everyone,

I’m working on implementing authentication with Firebase Auth in a TanStack Start project. The main challenge I’m facing is that most of Firebase’s documentation for handling SSR authentication is tailored to Next.js, which doesn’t translate directly. https://firebase.google.com/docs/web/ssr-apps

I’ve looked at the example here: TanStack Router Firebase Auth Example, but it doesn’t fully meet my needs. Specifically, I need to handle the auth token on the server functions as well.

Has anyone tackled a similar setup or can point me in the right direction? Any guidance or examples would be much appreciated!

Some of my code:

// src/routes/__root.tsx
/// <reference types="vite/client" />
import type { ReactNode } from "react";
import {
  Outlet,
  HeadContent,
  Scripts,
  createRootRouteWithContext,
} from "@tanstack/react-router";
import type { QueryClient } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";

import appCss from "@/styles/app.css?url";
import { User } from "@/lib/auth";
import {
  AuthContextProvider,
  AuthContextType,
  useAuth,
} from "@/providers/auth";

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
  auth: AuthContextType;
}>()({
  beforeLoad: () => {
    const auth = useAuth();
    //What to do here?
  },
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        title: "TanStack Start Starter",
      },
    ],
    links: [
      {
        rel: "stylesheet",
        href: appCss,
      },
    ],
  }),
  component: RootComponent,
});

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

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
  const auth = useAuth();

  // If the provider is initially loading, do not render the router
  if (auth.isInitialLoading) {
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        <div className="flex h-screen w-full items-center justify-center p-4">
          <div className="size-10 rounded-full border-4 border-gray-200 border-t-foreground animate-spin" />
        </div>
        <Scripts />
      </body>
    </html>;
  }

  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <TanStackRouterDevtools position="bottom-right" />
        <ReactQueryDevtools buttonPosition="bottom-left" />
        <Scripts />
      </body>
    </html>
  );
}

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

export function getRouter() {
  const queryClient = new QueryClient();

  const router = createRouter({
    routeTree,
    context: { queryClient, auth: undefined! },
    defaultPreload: "intent",
    scrollRestoration: true,
  });
  setupRouterSsrQueryIntegration({
    router,
    queryClient,
  });

  return router;
}

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

//providers/auth.tsx
import * as React from "react";

import {
  type User,
  getAuth,
  onAuthStateChanged,
  signOut,
  signInWithEmailAndPassword,
} from "firebase/auth";
import { flushSync } from "react-dom";
import { app } from "@/lib/firebase";

export type AuthContextType = {
  isAuthenticated: boolean;
  isInitialLoading: boolean;
  login: (email: string, password: string) => Promise<void>;
  logout: () => Promise<void>;
  user: User | null;
};

const AuthContext = React.createContext<AuthContextType | null>(null);

export function AuthContextProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [user, setUser] = React.useState<User | null>(null);
  const [isInitialLoading, setIsInitialLoading] = React.useState(true);
  const isAuthenticated = !!user;

  React.useEffect(() => {
    if (typeof window === "undefined") return;

    const auth = getAuth(app);
    const unsubscribe = onAuthStateChanged(auth, (u) => {
      flushSync(() => {
        setUser(u);
        setIsInitialLoading(false);
      });
    });
    return () => unsubscribe();
  }, []);

  const logout = React.useCallback(async () => {
    if (typeof window === "undefined") return;
    await signOut(getAuth(app));
    setUser(null);
    setIsInitialLoading(false);
  }, []);

  const login = React.useCallback(async (email: string, password: string) => {
    if (typeof window === "undefined") return;
    const result = await signInWithEmailAndPassword(
      getAuth(app),
      email,
      password
    );
    flushSync(() => {
      setUser(result.user);
      setIsInitialLoading(false);
    });
  }, []);

  return (
    <AuthContext.Provider
      value={{ isInitialLoading, isAuthenticated, user, login, logout }}
    >
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const context = React.useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
}

omridevk · 2025-10-22T12:22:03Z

omridevk
Oct 22, 2025

https://tanstack.com/start/latest/docs/framework/react/examples/start-basic-auth?path=examples%2Freact%2Fstart-basic-auth%2Fsrc%2Froutes%2F__root.tsx
Might be more helpful, as the example you are referencing is for tanstack router and not start, so it is missing the SSR part.
You might want to use a middleware for this use case so the auth will be available in server fns as well or server routes, depends on the kind of middleware you define

1 reply

omridevk Oct 22, 2025

but once you auth in the beforeLoad and return the auth, it will be available in the component context as well, loaders, etc.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Tanstack Start + Firebase Auth #5581

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Tanstack Start + Firebase Auth #5581

Uh oh!

jsantanders Oct 22, 2025

Replies: 1 comment · 1 reply

Uh oh!

omridevk Oct 22, 2025

Uh oh!

omridevk Oct 22, 2025

jsantanders
Oct 22, 2025

Replies: 1 comment 1 reply

omridevk
Oct 22, 2025