noctate•10mo ago

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

6 Replies

noctateOP•10mo ago

Is it possible to get current user id on the server side right now?

ballingt•10mo ago

Convex Auth is in beta, this is early days — but this is coming! I'm digging into this this week.

noctateOP•10mo ago

No worries I realize it takes time especially with stuff like tanstack start which is alpha, just keep good work and take your time guys!

Jrenk•8mo ago

Hi Tom! Found this thread after having the exact same issue. Completely understand everything is new here, but is it possible to get the user in a beforeLoad or loader yet?

ballingt•8mo ago

It's going to be another week, last month ended up being mostly other topics, and then when I got back to this I made https://convex-tanstack-start.vercel.app/ — and currently I'm debugging a FOUC issue https://github.com/TanStack/router/issues/2700 I found while creating that.

Jrenk•8mo ago

No worries. Thanks! Site looks great, gonna read through it now.

convex auth + tanstack start

Did you find this page helpful?