noctateN
Convex Community•17mo ago•
6 replies
noctate

convex auth + tanstack start

Hello guys im playing with convex and tanstack start, want to implement authentication, this is example page 
export const Route = createFileRoute('/page')({
  component: SignIn,
  loader: ({ context }) =>
    context.queryClient.ensureQueryData(authQueries.currentUser()),
})

function Component() {
  const { data: user } = useSuspenseQuery(authQueries.currentUser())
  return (
    <div>
      {JSON.stringify(user)}
      hello
      <AuthForm type="signIn" />
    </div>
  )
}
this is how i get current user 
currentUser: () => convexQuery(api.auth.getCurrentUser, {}),
getCurrentUser is straight from docs: 
export const getCurrentUser = query({
  args: {},
  handler: async (ctx) => {
    const userId = await getAuthUserId(ctx)
    console.log(userId)
    if (!userId) return null
    return await ctx.db.get(userId)
  },
})
My problem is that inside loader the user is null, so inside component i can see small delay then data is available. this is my router setup: 
 const router = routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      defaultPreload: 'intent',
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: () => <NotFound />,
      context: { queryClient },
      Wrap: ({ children }) => (
        <ConvexAuthProvider client={convexQueryClient.convexClient}>
          <ConvexProvider client={convexQueryClient.convexClient}>
            {children}
          </ConvexProvider>
        </ConvexAuthProvider>
      ),
    }),
    queryClient,
  )
Was this page helpful?