noctate Posts - Convex Community

noctate

•Created by noctate on 9/2/2024 in #support-community

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>
  )
}

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, {}),

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)
  },
})

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,
  )

 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,
  )

7 replies