@clerk/clerk-react: Missing publishableKey in clerk

Question

"use client";

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

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL);
const ConvexClientProvider = ({ children }) => {
  return (
    <ClerkProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
    >
      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
        {children}
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
};

export default ConvexClientProvider;

I have a site I've built with Next 14 and have integrated authentication in my site with Clerk. It shows @clerk/clerk-react: Missing publishableKey is error. i have integreated convex and clerk in this site.

For authentication i did this all steps , https://docs.convex.dev/auth/clerk i used JWT Template and created keys and url. i tried to run this buy using the command : npm convex dev I checked my dependencies also, it shows the @clerk/clerk-react: Missing publishableKey .

Answer 1

This means that NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY is not set. Either you didn't add it to your .env.local, or you are not using Next.js (and need to use a prefix specific to your frontend framework, like VITE_CLERK_PUBLISHABLE_KEY for Vite).

Also check out https://docs.convex.dev/auth/debug