Karolus Posts - Convex Community

Karolus

•Created by Karolus on 2/1/2025 in #support-community

App Remounts on Navigation with Tanstack Router + Convex Auth

I verified both Convex Auth and (Clerk + Convex) providers. For both solutions, it seems that the app unmounts for some reason between navigations until the auth state is determined. So even when I am authenticated and navigate between protected routes, the issue remains, and the isAuthenticated state is reset on page navigation. _authed.tsx:

import { createFileRoute, Navigate, Outlet } from '@tanstack/react-router';
import { Authenticated, Unauthenticated } from 'convex/react';

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

function AuthenticatedLayoutRoute() {
  return (
    <>
      <Unauthenticated>
        <Navigate to="/signin" />;
      </Unauthenticated>
      <Authenticated>
        <Outlet />
      </Authenticated>
    </>
  );
}

import { createFileRoute, Navigate, Outlet } from '@tanstack/react-router';
import { Authenticated, Unauthenticated } from 'convex/react';

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

function AuthenticatedLayoutRoute() {
  return (
    <>
      <Unauthenticated>
        <Navigate to="/signin" />;
      </Unauthenticated>
      <Authenticated>
        <Outlet />
      </Authenticated>
    </>
  );
}

app.tsx:

const convex = new ConvexReactClient(
  import.meta.env.VITE_CONVEX_URL as string,
  {
    verbose: true,
  }
);

// Initialize Tanstack Query client
const queryClient = new QueryClient();

// Create the router
const router = createRouter({
  routeTree,
  context: {
    queryClient,
    convexClient: convex,
  },
  defaultPreload: 'intent',
  defaultPreloadStaleTime: 0,
});

// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}

function InnerApp() {
  return <RouterProvider router={router} />;
}

export default function App() {
  return (
    <ClerkProvider publishableKey="pk_...">
      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
        <InnerApp />
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
}

const convex = new ConvexReactClient(
  import.meta.env.VITE_CONVEX_URL as string,
  {
    verbose: true,
  }
);

// Initialize Tanstack Query client
const queryClient = new QueryClient();

// Create the router
const router = createRouter({
  routeTree,
  context: {
    queryClient,
    convexClient: convex,
  },
  defaultPreload: 'intent',
  defaultPreloadStaleTime: 0,
});

// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}

function InnerApp() {
  return <RouterProvider router={router} />;
}

export default function App() {
  return (
    <ClerkProvider publishableKey="pk_...">
      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
        <InnerApp />
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
}

CC: @ballingt we disscused that issue a bit, I think it's good to have seperate topic about that

11 replies