fix(react): make ClerkProvider publishableKey optional

.changeset/calm-keys-appear.md

@@ -0,0 +1,5 @@
+---
+'@clerk/react': patch
+---
+
+Allow `ClerkProvider` to omit `publishableKey` when it is supplied through `VITE_CLERK_PUBLISHABLE_KEY` or `CLERK_PUBLISHABLE_KEY`.

packages/chrome-extension/src/react/ClerkProvider.tsx

@@ -7,7 +7,12 @@ import React from 'react';
 import { createClerkClient } from '../internal/clerk';
 import type { StorageCache } from '../internal/utils/storage';
 
-type ChromeExtensionClerkProviderProps = ClerkReactProviderProps & {
+type ChromeExtensionClerkProviderProps = Omit<ClerkReactProviderProps, 'publishableKey'> & {
+  /**
+   * Your Clerk Publishable Key, available in the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=api-keys).
+   * Required for Chrome Extensions, which cannot use `@clerk/react`'s environment-variable fallback.
+   */
+  publishableKey: string;
   /**
    * @experimental
    * @description Enables the listener to sync host cookies on changes.

packages/chrome-extension/src/react/__tests__/ClerkProvider.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expectTypeOf, it } from 'vitest';
+
+import type { ClerkProvider } from '../ClerkProvider';
+
+type ClerkProviderProps = Parameters<typeof ClerkProvider>[0];
+
+describe('ClerkProvider', () => {
+  describe('Type tests', () => {
+    describe('publishableKey', () => {
+      it('accepts an explicit publishableKey', () => {
+        expectTypeOf({ publishableKey: 'test', children: '' }).toMatchTypeOf<ClerkProviderProps>();
+      });
+
+      it('requires publishableKey (extensions cannot use the env-var fallback)', () => {
+        expectTypeOf({ children: '' }).not.toMatchTypeOf<ClerkProviderProps>();
+      });
+    });
+  });
+});

packages/react/src/contexts/__tests__/ClerkProvider.test.tsx

@@ -32,12 +32,12 @@ const customUi = {} as Ui<CustomAppearance>;
 describe('ClerkProvider', () => {
   describe('Type tests', () => {
     describe('publishableKey', () => {
-      it('expects a publishableKey and children as the minimum accepted case', () => {
+      it('accepts an explicit publishableKey', () => {
         expectTypeOf({ publishableKey: 'test', children: '' }).toMatchTypeOf<ClerkProviderProps>();
       });
 
-      it('errors if no publishableKey', () => {
-        expectTypeOf({ children: '' }).not.toMatchTypeOf<ClerkProviderProps>();
+      it('accepts no explicit publishableKey', () => {
+        expectTypeOf({ children: '' }).toMatchTypeOf<ClerkProviderProps>();
       });
     });
   });

packages/react/src/types.ts

@@ -48,9 +48,14 @@ export interface Ui<A = any> {
  */
 export type ClerkProviderProps<TUi extends Ui = Ui> = Omit<
   IsomorphicClerkOptions,
-  'appearance' | keyof InternalClerkScriptProps
+  'appearance' | 'publishableKey' | keyof InternalClerkScriptProps
 > & {
   children: React.ReactNode;
+  /**
+   * The Clerk Publishable Key for your instance. When omitted, `@clerk/react` reads the key from
+   * `VITE_CLERK_PUBLISHABLE_KEY` or `CLERK_PUBLISHABLE_KEY`.
+   */
+  publishableKey?: string;
   /**
    * Provide an initial state of the Clerk client during server-side rendering. You don't need to set this value yourself unless you're [developing an SDK](https://clerk.com/docs/guides/development/sdk-development/overview).
    */