7 replies

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();

const { isAuthenticated, isLoading } = useConvexAuth();

const { isAuthenticated, isLoading } = useConvexAuth();

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;

"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

Clerk and Convex Implementation Using Server Components

Similar Threads

Similar Threads

Similar Threads