Van De Mog Posts - Convex Community

Van De Mog

Posts Comments

CCConvex Community

•Created by Van De Mog on 8/19/2024 in #support-community

_generated exports 2 api imports

3 replies

CCConvex Community

•Created by Van De Mog on 4/14/2024 in #support-community

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;

8 replies