Integration with Convex Custom Auth

"use client";

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

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

export const ConvexClientProvider = ({ children }: { children: ReactNode }) => {
  return (
    <ClerkProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}
    >
      <ConvexProviderWithAuth useAuth={useAuth} client={convex}>
        {children}
      </ConvexProviderWithAuth>
    </ClerkProvider>
  );
};