Van De Mog•10mo ago

Clerk and Convex Implementation Using Server Components

My current implementation is completelly client side, and I did found some docs on clerk website regarding authentication using NextJs App router and RSC. (https://clerk.com/docs/references/nextjs/auth) Although the conflict begins here, convex docs tells us to use const { isAuthenticated, isLoading } = useConvexAuth(); https://docs.convex.dev/auth/custom-auth#using-the-new-provider But that is not made for RSC either. Do we have a middleground or examples? My current code:

"use client";
import Link from "next/link";
import { SignInButton, SignOutButton, SignUpButton } from "@clerk/clerk-react";
import { useConvexAuth } from "convex/react";

const Header = () => {
    const { isAuthenticated, isLoading } = useConvexAuth();
    return (
        <header className="flex h-20 w-full shrink-0 items-center container">
            <Link className="mr-auto" href="/">
                Home
            </Link>
            <nav className="hidden lg:flex space-x-4">
                <Link className="text-lg font-semibold hover:underline" href="/today">
                    Today&apos;s Questions
                </Link>
                <Link className="text-lg font-semibold hover:underline" href="/browse">
                    Browse
                </Link>
                {isAuthenticated && !isLoading && (
                    <>
                        <Link className="text-lg font-semibold hover:underline" href="/ask">
                            Ask a Question
                        </Link>
                        <SignOutButton />
                    </>
                )}
                {!isAuthenticated && !isLoading && (<><SignInButton />
                    <SignUpButton /></>)}
                {isLoading && <p>Loading...</p>}
            </nav>
        </header>

    )
}

export default Header;

"use client";
import Link from "next/link";
import { SignInButton, SignOutButton, SignUpButton } from "@clerk/clerk-react";
import { useConvexAuth } from "convex/react";

const Header = () => {
    const { isAuthenticated, isLoading } = useConvexAuth();
    return (
        <header className="flex h-20 w-full shrink-0 items-center container">
            <Link className="mr-auto" href="/">
                Home
            </Link>
            <nav className="hidden lg:flex space-x-4">
                <Link className="text-lg font-semibold hover:underline" href="/today">
                    Today&apos;s Questions
                </Link>
                <Link className="text-lg font-semibold hover:underline" href="/browse">
                    Browse
                </Link>
                {isAuthenticated && !isLoading && (
                    <>
                        <Link className="text-lg font-semibold hover:underline" href="/ask">
                            Ask a Question
                        </Link>
                        <SignOutButton />
                    </>
                )}
                {!isAuthenticated && !isLoading && (<><SignInButton />
                    <SignUpButton /></>)}
                {isLoading && <p>Loading...</p>}
            </nav>
        </header>

    )
}

export default Header;

auth() | Clerk

Access minimal authentication data for managing sessions and data fetching.

Custom Auth Integration | Convex Developer Hub

Convex can be integrated with any identity provider supporting the

7 Replies

Van De MogOP•10mo ago

Maybe I got it wrong on why we should use the ConvexClientProviderWithClerk and combo it with the useConvexAuth()

FleetAdmiralJakob 🗕 🗗 🗙•10mo ago

lol, i asked the same question right now. did not now that you have the same one. https://discord.com/channels/1019350475847499849/1229055723019829378

Michal Srb•10mo ago

You can use Clerk’s middleware to gate your routes inside the Next server, or fetchQuery a custom query that returns the auth status.

Van De MogOP•10mo ago

and how does that play with the ConvexClientProviderWithClerk? Having the middleware negates the functionality of the provider? it looks so @Michal Srb

Michal Srb•10mo ago

You need both. On the server, you can use Clerk's middleware to 1. Decide whether the route is accessible or redirect 2. Get the token to authenticate your Convex queries On the client, you need ConvexProviderWithClerk to 1. (optionally) Decide when you can render components with useQuery calls requiring auth 2. Authenticate your Convex queries, mutations and actions I recommend following this example: https://github.com/nutlope/notesgpt

GitHub

GitHub - Nutlope/notesGPT: Record voice notes & transcribe, summari...

Record voice notes & transcribe, summarize, and get tasks - Nutlope/notesGPT

7bonex•10mo ago

@Michal Srb what's the difference between "Preloading data for Client Components for a Server Component" and "Using Convex to render Server Components" as documented in https://docs.convex.dev/client/react/nextjs/server-rendering#using-convex-to-render-server-components

Next.js Server Rendering | Convex Developer Hub

Next.js automatically renders both Client and Server Components on the server

Michal Srb•10mo ago

@7bonex preloading data means you will pick up on the client with a reactive query. Using convex to render server components leads to no reactivity for the loaded data (the standard RSC model).

Clerk and Convex Implementation Using Server Components

Did you find this page helpful?