chore(clerk-react): Drop frontendApi

packages/react/src/contexts/ClerkContextProvider.tsx

@@ -1,4 +1,3 @@
-import { deprecated } from '@clerk/shared/deprecated';
 import type { ClientResource, InitialState, Resources } from '@clerk/types';
 import React from 'react';
 
@@ -24,10 +23,6 @@ export function ClerkContextProvider(props: ClerkContextProvider): JSX.Element |
   const { isomorphicClerkOptions, initialState, children } = props;
   const { isomorphicClerk: clerk, loaded: clerkLoaded } = useLoadedIsomorphicClerk(isomorphicClerkOptions);
 
-  if (isomorphicClerkOptions.frontendApi) {
-    deprecated('frontendApi', 'Use `publishableKey` instead.');
-  }
-
   const [state, setState] = React.useState<ClerkContextProviderState>({
     client: clerk.client as ClientResource,
     session: clerk.session,

packages/react/src/contexts/ClerkProvider.tsx

@@ -1,4 +1,4 @@
-import { isLegacyFrontendApiKey, isPublishableKey } from '@clerk/shared/keys';
+import { isPublishableKey } from '@clerk/shared/keys';
 import type { InitialState } from '@clerk/types';
 import React from 'react';
 
@@ -19,15 +19,13 @@ export type ClerkProviderProps = IsomorphicClerkOptions & {
 
 function ClerkProviderBase(props: ClerkProviderProps): JSX.Element {
   const { initialState, children, ...restIsomorphicClerkOptions } = props;
-  const { frontendApi = '', publishableKey = '', Clerk: userInitialisedClerk } = restIsomorphicClerkOptions;
+  const { publishableKey = '', Clerk: userInitialisedClerk } = restIsomorphicClerkOptions;
 
   if (!userInitialisedClerk) {
-    if (!publishableKey && !frontendApi) {
+    if (!publishableKey) {
       errorThrower.throwMissingPublishableKeyError();
     } else if (publishableKey && !isPublishableKey(publishableKey)) {
       errorThrower.throwInvalidPublishableKeyError({ key: publishableKey });
-    } else if (!publishableKey && frontendApi && !isLegacyFrontendApiKey(frontendApi)) {
-      errorThrower.throwInvalidFrontendApiError({ key: frontendApi });
     }
   }
 

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

@@ -24,22 +24,14 @@ type ClerkProviderProps = Parameters<typeof ClerkProvider>[0];
 
 describe('ClerkProvider', () => {
   describe('Type tests', () => {
-    describe('publishableKey and frontendApi', () => {
+    describe('publishableKey', () => {
       it('expects a publishableKey and children as the minimum accepted case', () => {
         expectTypeOf({ publishableKey: 'test', children: '' }).toMatchTypeOf<ClerkProviderProps>();
       });
 
-      it('publishable key is replaceable with frontendApi', () => {
-        expectTypeOf({ frontendApi: 'test', children: '' }).toMatchTypeOf<ClerkProviderProps>();
-      });
-
-      it('errors if no publishableKey or frontendApi', () => {
+      it('errors if no publishableKey', () => {
         expectTypeOf({ children: '' }).not.toMatchTypeOf<ClerkProviderProps>();
       });
-
-      it('errors if both publishableKey and frontendApi are provided', () => {
-        expectTypeOf({ publishableKey: 'test', frontendApi: 'test' }).not.toMatchTypeOf<ClerkProviderProps>();
-      });
     });
   });
 

packages/react/src/errors.ts

@@ -1,15 +1,13 @@
 export {
-  MagicLinkErrorCode,
   EmailLinkErrorCode,
+  MagicLinkErrorCode,
   isClerkAPIResponseError,
+  isEmailLinkError,
   isKnownError,
-  isMetamaskError,
   isMagicLinkError,
-  isEmailLinkError,
+  isMetamaskError,
 } from '@clerk/shared/error';
 
-export const noFrontendApiError = 'Clerk: You must add the frontendApi prop to your <ClerkProvider>';
-
 export const noClerkProviderError = 'Clerk: You must wrap your application in a <ClerkProvider> component.';
 
 export const noGuaranteedLoadedError = (hookName: string) =>

packages/react/src/isomorphicClerk.ts

@@ -57,7 +57,6 @@ type MethodCallback = () => Promise<unknown> | unknown;
 
 export default class IsomorphicClerk {
   private readonly mode: 'browser' | 'server';
-  private readonly frontendApi?: string;
   private readonly publishableKey?: string;
   private readonly options: IsomorphicClerkOptions;
   private readonly Clerk: ClerkProp;
@@ -124,8 +123,7 @@ export default class IsomorphicClerk {
   }
 
   constructor(options: IsomorphicClerkOptions) {
-    const { Clerk = null, frontendApi, publishableKey } = options || {};
-    this.frontendApi = frontendApi;
+    const { Clerk = null, publishableKey } = options || {};
     this.publishableKey = publishableKey;
     this.#proxyUrl = options?.proxyUrl;
     this.#domain = options?.domain;
@@ -151,7 +149,6 @@ export default class IsomorphicClerk {
     // - https://github.com/remix-run/remix/issues/2947
     // - https://github.com/facebook/react/issues/24430
     if (typeof window !== 'undefined') {
-      window.__clerk_frontend_api = this.frontendApi;
       window.__clerk_publishable_key = this.publishableKey;
       window.__clerk_proxy_url = this.proxyUrl;
       window.__clerk_domain = this.domain;
@@ -164,7 +161,7 @@ export default class IsomorphicClerk {
 
         if (isConstructor<BrowserClerkConstructor | HeadlessBrowserClerkConstrutor>(this.Clerk)) {
           // Construct a new Clerk object if a constructor is passed
-          c = new this.Clerk(this.publishableKey || this.frontendApi || '', {
+          c = new this.Clerk(this.publishableKey || '', {
             proxyUrl: this.proxyUrl,
             domain: this.domain,
           } as any);
@@ -184,7 +181,6 @@ export default class IsomorphicClerk {
         if (!global.Clerk) {
           await loadClerkJsScript({
             ...this.options,
-            frontendApi: this.frontendApi,
             publishableKey: this.publishableKey,
             proxyUrl: this.proxyUrl,
             domain: this.domain,

packages/react/src/types.ts

@@ -23,7 +23,8 @@ declare global {
   }
 }
 
-export type IsomorphicClerkOptions = Omit<ClerkOptions, 'isSatellite'> & {
+// TODO(@dimkl): Remove frontendApi when it's removed from ClerkOptions in @clerk/types
+export type IsomorphicClerkOptions = Omit<ClerkOptions, 'isSatellite' | 'frontendApi'> & {
   Clerk?: ClerkProp;
   clerkJSUrl?: string;
   clerkJSVariant?: 'headless' | '';

packages/react/src/utils/loadClerkJsScript.ts

@@ -16,9 +16,9 @@ type LoadClerkJsScriptOptions = Omit<IsomorphicClerkOptions, 'proxyUrl' | 'domai
 };
 
 export const loadClerkJsScript = (opts: LoadClerkJsScriptOptions) => {
-  const { frontendApi, publishableKey } = opts;
+  const { publishableKey } = opts;
 
-  if (!publishableKey && !frontendApi) {
+  if (!publishableKey) {
     errorThrower.throwMissingPublishableKeyError();
   }
 
@@ -32,7 +32,7 @@ export const loadClerkJsScript = (opts: LoadClerkJsScriptOptions) => {
 };
 
 const clerkJsScriptUrl = (opts: LoadClerkJsScriptOptions) => {
-  const { clerkJSUrl, clerkJSVariant, clerkJSVersion, proxyUrl, domain, publishableKey, frontendApi } = opts;
+  const { clerkJSUrl, clerkJSVariant, clerkJSVersion, proxyUrl, domain, publishableKey } = opts;
 
   if (clerkJSUrl) {
     return clerkJSUrl;
@@ -41,10 +41,10 @@ const clerkJsScriptUrl = (opts: LoadClerkJsScriptOptions) => {
   let scriptHost = '';
   if (!!proxyUrl && isValidProxyUrl(proxyUrl)) {
     scriptHost = proxyUrlToAbsoluteURL(proxyUrl).replace(/http(s)?:\/\//, '');
-  } else if (domain && !isDevOrStagingUrl(parsePublishableKey(publishableKey)?.frontendApi || frontendApi || '')) {
+  } else if (domain && !isDevOrStagingUrl(parsePublishableKey(publishableKey)?.frontendApi || '')) {
     scriptHost = addClerkPrefix(domain);
   } else {
-    scriptHost = parsePublishableKey(publishableKey)?.frontendApi || frontendApi || '';
+    scriptHost = parsePublishableKey(publishableKey)?.frontendApi || '';
   }
 
   const variant = clerkJSVariant ? `${clerkJSVariant.replace(/\.+$/, '')}.` : '';
@@ -53,11 +53,9 @@ const clerkJsScriptUrl = (opts: LoadClerkJsScriptOptions) => {
 };
 
 const applyClerkJsScriptAttributes = (options: LoadClerkJsScriptOptions) => (script: HTMLScriptElement) => {
-  const { publishableKey, frontendApi, proxyUrl, domain } = options;
+  const { publishableKey, proxyUrl, domain } = options;
   if (publishableKey) {
     script.setAttribute('data-clerk-publishable-key', publishableKey);
-  } else if (frontendApi) {
-    script.setAttribute('data-clerk-frontend-api', frontendApi);
   }
 
   if (proxyUrl) {