Convex Auth | Convex Community | Page 1

patent copper Jun 16, 2025, 3:04 PM

How can I check if the user is currently logged in the beforeLoad of tanstack start/router? I am using convex auth

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

export const Route = createFileRoute('/_authenticated')({
component: AuthenticatedLayoutComponent,
beforeLoad: async ({ context }) => {},
})

function AuthenticatedLayoutComponent() {
return <Outlet />
}

rare iceBOT Jun 16, 2025, 3:04 PM

Hi @patent copper. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

To check if the user is currently logged in within the beforeLoad of TanStack Start/Router using Convex Auth, you currently face a limitation: Convex Auth does not provide a built-in, server-side way to check authentication status in beforeLoad like Clerk or Supabase do. The Convex Auth handshake is driven by the React context and client-side hooks, and there is no direct method to synchronously check authentication in beforeLoad on the server or during route loading. This is a known gap and has been discussed by Convex staff and community members.

Current State:

With Clerk or Supabase, you can check for a user in context (e.g., context.userId or context.user) in beforeLoad because their integrations provide this information server-side.
With Convex Auth, the authentication state is managed client-side, and the Convex client does not expose the auth state in a way that is directly accessible in beforeLoad. The Convex team has acknowledged this and is considering improvements, but as of now, there is no official solution for Convex Auth in TanStack Start's beforeLoad (source, source).

What you can do:

You can only reliably check authentication status in the React component tree using the useConvexAuth() hook or the <Authenticated>, <Unauthenticated>, and <AuthLoading> components. This means your route protection logic should be implemented in the component, not in beforeLoad:

import { Outlet, Navigate } from '@tanstack/react-router'
import { useConvexAuth } from 'convex/react'

function AuthenticatedLayoutComponent() {
  const { isLoading, isAuthenticated } = useConvexAuth();

if (isLoading) {
return <div>Loading authentication...</div>;
}
if (!isAuthenticated) {
return <Navigate to="/login" replace />;
}
return <Outlet />;
}

([example](<https://discord.com/channels/1019350475847499849/1335682607375056988>))

**Summary:**  
You cannot currently check Convex Auth status in `beforeLoad` of TanStack Start/Router. You must perform auth checks in your React components using `useConvexAuth()`. The Convex team is aware of this limitation and may provide a solution in the future, but for now, this is the recommended approach.

If you need server-side or loader-based auth checks, you may want to consider using Clerk or Supabase, which have documented support for this pattern ([Clerk example](<https://docs.convex.dev/client/react/tanstack-start/tanstack-start-with-clerk>)).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#Convex Auth