TanStack Router with Clerk

[JORDAAAN1495]

I am trying to test out TanStack Router with Clerk and facing some difficulties with the auth and using the the clerk or convex hooks. Has anyone had any luck at setting up auth? I find that I get stuck in an infinite loop of continuously logging in. I have seen a similar post regarding clerk on here and tried that implementation, however no luck.

This is using the latest packages as of today (brand new app via Vite).

This is my __root.tsx

import type { LoadedClerk } from "@clerk/types";
import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";

interface MyRouterContext {
  isSignedIn: boolean;
  auth?: LoadedClerk;
}

export const Route = createRootRouteWithContext<MyRouterContext>()({
  component: () => <Outlet />,
});

This is the index.tsx

import { useUser } from "@clerk/clerk-react";
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
  beforeLoad: async ({ context }) => {
    if (!context.isSignedIn) {
      await context.auth?.redirectToSignIn();
    }
  },
  component: Index,
});

function Index() {
  const { user } = useUser();

  return <>{user?.fullName}</>;
}

This is the App.tsx

import { ClerkProvider, useAuth, useClerk } from "@clerk/clerk-react";
import { RouterProvider } from "@tanstack/react-router";
import { ConvexReactClient } from "convex/react";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import router from "./router";
import appSettings from "./utils/appSettings";

function InnerApp() {
  const { isSignedIn } = useAuth();
  const auth = useClerk();

  return <RouterProvider router={router} context={{ isSignedIn, auth }} />;
}

function App() {
  const convex = new ConvexReactClient(appSettings.convex.url);

  return (
    <ClerkProvider publishableKey={appSettings.clerk.publishableKey}>
      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
        <InnerApp />
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
}

export default App;

And finally this is the router.tsx

import { createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";

const router = createRouter({
  routeTree,
  context: {
    isSignedIn: false,
    auth: undefined,
  },
});

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

export default router;

[keduong33]

Have you figured out the solution?

[ssijak]

https://tanstack.com/router/v1/docs/framework/react/examples/start-clerk-basic

[aldotestino]

I found two possible solutions:

1. Use beforeLoad to check for the token and redirect:

This approach checks the token during the route loading phase and redirects the user if the token is missing.

import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';

export const Route = createFileRoute('/_authed')({
  beforeLoad: async ({ context }) => {
    // Fetch the token before rendering the route
    const token = await context.auth.getToken();
    // Redirect to sign-in if token is missing
    if (!token) {
      throw redirect({
        to: '/sign-in',
      });
    }
  },
  component: Outlet,
});

2. Use Clerk's <SignedIn> and <SignedOut> components:

This approach is more declarative, using Clerk's built-in components to conditionally render based on the user's signed-in state.

import { SignedIn, SignedOut } from '@clerk/clerk-react';
import { createFileRoute, Navigate, Outlet } from '@tanstack/react-router';

export const Route = createFileRoute('/_authed')({
  component: AuthedLayout,
});

function AuthedLayout() {
  return (
    <>
      {/* Render Outlet if user is signed in */}
      <SignedIn>
        <Outlet />
      </SignedIn>
      {/* Redirect to sign-in if user is signed out */}
      <SignedOut>
        <Navigate to="/sign-in" />
      </SignedOut>
    </>
  );
}

[mikr13]

How are you getting .getToken() in context.auth? LoadedClerk doesn't have getToken method as far as I can see. It has session & other stuff!

[aldotestino]

Sorry, my auth is the return of useAuth() and not of useClerk()

[mikr13]

Makes sense. Thanks!