reactjsnext.jsclerk

Error:Clerk: useAuth() called in static mode, wrap this component in <ClerkProvider dynamic> to make auth data available during server-side rendering

Question:

I'm working with Next.js and using Clerk for authentication alongside the Convex client. I encountered this error:

Error: Clerk: useAuth() called in static mode, wrap this component in <ClerkProvider dynamic> to make auth data available during server-side rendering.

I tried wrapping the component in <ClerkProvider dynamic>, as the error suggested, and also added "use client" at the top of the file. However, I'm still getting the error.

Here’s my setup:

  1. Provider and Layout Setup:

    I’m using ConvexProviderWithClerk along with ClerkProvider to pass useAuth for authentication.

    Below is my ConvexClientProvider component:

    import { ClerkProvider, useAuth } from "@clerk/nextjs";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { ConvexReactClient } from "convex/react";

interface ConvexClientProviderProps {
    children: React.ReactNode;
}

const PUBLISHABLE_KEY = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!;
const convexUrl = process.env.NEXT_PUBLIC_CONVEX_URL!;
const convex = new ConvexReactClient(convexUrl);

export const ConvexClientProvider = ({ children }: ConvexClientProviderProps) => {
    return (
        <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
            <ConvexProviderWithClerk useAuth={useAuth} client={convex}>
                {children}
            </ConvexProviderWithClerk>
        </ClerkProvider>
    );
};

  2. Root Layout Component:

    Here’s the structure of my RootLayout component, which wraps the app in ConvexClientProvider:

    import { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { ConvexClientProvider } from "@/providers/convex-client-provider";

export const metadata: Metadata = {
    title: "Create Next App",
    description: "Generated by create next app",
};

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <body>
                <ConvexClientProvider>{children}</ConvexClientProvider>
            </body>
        </html>
    );
}

Things I've Tried:

  1. Adding "use client" at the top of the RootLayout file and ConvexClientProvider.
  2. Wrapping the ConvexClientProvider with <ClerkProvider dynamic> as suggested in the error message.
Solution

  • You need to import ClerkProvider,useAuth from "@clerk/clerk-react";

    import { ClerkProvider, useAuth } from "@clerk/clerk-react";

    It is mentioned here in convex docs: https://docs.convex.dev/auth/clerk