Convex + Clerk + NextJS server components

🔑Auth❔Advice🧩component

I'm in the process of implementing Clerk with Convex Auth and am trying to wrap my head around a few things.

I'm reading through this https://stack.convex.dev/authentication-best-practices-convex-clerk-and-nextjs post, but running into an issue with protecting the queries when using them in a NextJS server component

Using the convex template

    const preloaded = await preloadQuery(api.myFunctions.listNumbers, {
        count: 3,
    })

    const preloaded = await preloadQuery(api.myFunctions.listNumbers, {
        count: 3,
    })

works fine as long as I don't try to add an auth check in the query

const user = await ctx.auth.getUserIdentity()
        if (user === null) {
            throw new ConvexError('Unauthenticated')
        }

const user = await ctx.auth.getUserIdentity()
        if (user === null) {
            throw new ConvexError('Unauthenticated')
        }

Now of course that query does work in a client component wrapper in

<Authenticated>

<Authenticated>

I'm guessing the db query runs before the auth is fully done, but how would I go about ensuring auth in the query if I want to use the query in a server component?

Authentication Best Practices: Convex, Clerk and Next.js

Authentication issues in real-time applications can cause security risks, especially when client-side queries run before validation. Ensuring authenti...

Convex Community•2w ago

Nahana

Convex + Clerk + NextJS server components

🔑Auth❔Advice🧩component

    const preloaded = await preloadQuery(api.myFunctions.listNumbers, {
        count: 3,
    })

    const preloaded = await preloadQuery(api.myFunctions.listNumbers, {
        count: 3,
    })

works fine as long as I don't try to add an auth check in the query

const user = await ctx.auth.getUserIdentity()
        if (user === null) {
            throw new ConvexError('Unauthenticated')
        }

const user = await ctx.auth.getUserIdentity()
        if (user === null) {
            throw new ConvexError('Unauthenticated')
        }

Now of course that query does work in a client component wrapper in

<Authenticated>

<Authenticated>

I'm guessing the db query runs before the auth is fully done, but how would I go about ensuring auth in the query if I want to use the query in a server component?

Authentication Best Practices: Convex, Clerk and Next.js

Authentication issues in real-time applications can cause security risks, especially when client-side queries run before validation. Ensuring authenti...

Convex + Clerk + NextJS server components

Similar Threads

Convex + Clerk + NextJS server components

Similar Threads

Similar Threads

Similar Threads