From 3c42090688166b74badfdefc7ed8c428601a0ba7 Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Wed, 8 Nov 2023 13:54:58 +0200 Subject: [PATCH] chore(clerk-react): Drop deprecations (#1993) * chore(clerk-react): Drop `setSession` from return value of hooks * chore(clerk-react): Drop `useMagicLink` hook * chore(clerk-react): Drop `handleMagicLinkVerification` from isomorphic Clerk * chore(clerk-react): Drop `frontendApi` * chore(clerk-react,chrome-extension): Drop `*MagicLink*` related exports * chore(clerk-react): Add changeset --- .changeset/two-pumas-doubt.md | 12 +++++ .../src/__snapshots__/exports.test.ts.snap | 3 -- .../src/contexts/ClerkContextProvider.tsx | 5 -- packages/react/src/contexts/ClerkProvider.tsx | 8 ++-- .../contexts/__tests__/ClerkProvider.test.tsx | 12 +---- packages/react/src/errors.ts | 6 +-- packages/react/src/hooks/index.ts | 13 +++--- packages/react/src/hooks/useMagicLink.ts | 46 ------------------- packages/react/src/hooks/useSessionList.ts | 20 +------- packages/react/src/hooks/useSignIn.ts | 19 +------- packages/react/src/hooks/useSignUp.ts | 19 +------- packages/react/src/index.ts | 19 ++------ packages/react/src/isomorphicClerk.ts | 31 ++----------- packages/react/src/types.ts | 3 +- packages/react/src/utils/loadClerkJsScript.ts | 14 +++--- 15 files changed, 47 insertions(+), 183 deletions(-) create mode 100644 .changeset/two-pumas-doubt.md delete mode 100644 packages/react/src/hooks/useMagicLink.ts diff --git a/.changeset/two-pumas-doubt.md b/.changeset/two-pumas-doubt.md new file mode 100644 index 0000000000..06275e7a4c --- /dev/null +++ b/.changeset/two-pumas-doubt.md @@ -0,0 +1,12 @@ +--- +'@clerk/clerk-react': major +'@clerk/chrome-extension': major +--- + +Drop deprecations. Migration steps: +- use `setActive` instead of `setSession` from `useSessionList | useSignUp | useSignIn` hooks +- use `publishableKey` instead of `frontendApi` +- use `handleEmailLinkVerification` instead of `handleMagicLinkVerification` from `IsomorphicClerk` +- use `isEmailLinkError` instead of `isMagicLinkError` +- use `EmailLinkErrorCode` instead of `MagicLinkErrorCode` +- use `useEmailLink` instead of `useMagicLink` \ No newline at end of file diff --git a/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap b/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap index 3ac0e70526..5a4bbc8806 100644 --- a/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap +++ b/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap @@ -9,7 +9,6 @@ exports[`public exports should not include a breaking change 1`] = ` "CreateOrganization", "EmailLinkErrorCode", "Experimental__Gate", - "MagicLinkErrorCode", "MultisessionAppSupport", "OrganizationList", "OrganizationProfile", @@ -36,12 +35,10 @@ exports[`public exports should not include a breaking change 1`] = ` "isClerkAPIResponseError", "isEmailLinkError", "isKnownError", - "isMagicLinkError", "isMetamaskError", "useAuth", "useClerk", "useEmailLink", - "useMagicLink", "useOrganization", "useOrganizationList", "useOrganizations", diff --git a/packages/react/src/contexts/ClerkContextProvider.tsx b/packages/react/src/contexts/ClerkContextProvider.tsx index 432444fc40..5973c95576 100644 --- a/packages/react/src/contexts/ClerkContextProvider.tsx +++ b/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({ client: clerk.client as ClientResource, session: clerk.session, diff --git a/packages/react/src/contexts/ClerkProvider.tsx b/packages/react/src/contexts/ClerkProvider.tsx index 8495ed4c77..0bbef0ea4b 100644 --- a/packages/react/src/contexts/ClerkProvider.tsx +++ b/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 }); } } diff --git a/packages/react/src/contexts/__tests__/ClerkProvider.test.tsx b/packages/react/src/contexts/__tests__/ClerkProvider.test.tsx index 2b1cd44dee..cc7cb4a64e 100644 --- a/packages/react/src/contexts/__tests__/ClerkProvider.test.tsx +++ b/packages/react/src/contexts/__tests__/ClerkProvider.test.tsx @@ -24,22 +24,14 @@ type ClerkProviderProps = Parameters[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(); }); - it('publishable key is replaceable with frontendApi', () => { - expectTypeOf({ frontendApi: 'test', children: '' }).toMatchTypeOf(); - }); - - it('errors if no publishableKey or frontendApi', () => { + it('errors if no publishableKey', () => { expectTypeOf({ children: '' }).not.toMatchTypeOf(); }); - - it('errors if both publishableKey and frontendApi are provided', () => { - expectTypeOf({ publishableKey: 'test', frontendApi: 'test' }).not.toMatchTypeOf(); - }); }); }); diff --git a/packages/react/src/errors.ts b/packages/react/src/errors.ts index 0e881c3de3..b5e20bf6d1 100644 --- a/packages/react/src/errors.ts +++ b/packages/react/src/errors.ts @@ -1,15 +1,11 @@ export { - MagicLinkErrorCode, EmailLinkErrorCode, isClerkAPIResponseError, + isEmailLinkError, isKnownError, isMetamaskError, - isMagicLinkError, - isEmailLinkError, } from '@clerk/shared/error'; -export const noFrontendApiError = 'Clerk: You must add the frontendApi prop to your '; - export const noClerkProviderError = 'Clerk: You must wrap your application in a component.'; export const noGuaranteedLoadedError = (hookName: string) => diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts index 7b1f97f9e0..7337ba9ca0 100644 --- a/packages/react/src/hooks/index.ts +++ b/packages/react/src/hooks/index.ts @@ -1,12 +1,11 @@ -export { useUser } from './useUser'; export { useAuth } from './useAuth'; -export { useSession } from './useSession'; export { useClerk } from './useClerk'; -export { useSignIn } from './useSignIn'; -export { useSignUp } from './useSignUp'; -export { useSessionList } from './useSessionList'; +export { useEmailLink } from './useEmailLink'; export { useOrganization } from './useOrganization'; export { useOrganizationList } from './useOrganizationList'; export { useOrganizations } from './useOrganizations'; -export { useMagicLink } from './useMagicLink'; -export { useEmailLink } from './useEmailLink'; +export { useSession } from './useSession'; +export { useSessionList } from './useSessionList'; +export { useSignIn } from './useSignIn'; +export { useSignUp } from './useSignUp'; +export { useUser } from './useUser'; diff --git a/packages/react/src/hooks/useMagicLink.ts b/packages/react/src/hooks/useMagicLink.ts deleted file mode 100644 index 9db5743931..0000000000 --- a/packages/react/src/hooks/useMagicLink.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { deprecated } from '@clerk/shared/deprecated'; -import type { - CreateMagicLinkFlowReturn, - EmailAddressResource, - SignInResource, - SignInStartMagicLinkFlowParams, - SignUpResource, - StartMagicLinkFlowParams, -} from '@clerk/types'; -import React from 'react'; - -type MagicLinkable = SignUpResource | EmailAddressResource | SignInResource; -type UseMagicLinkSignInReturn = CreateMagicLinkFlowReturn; -type UseMagicLinkSignUpReturn = CreateMagicLinkFlowReturn; -type UseMagicLinkEmailAddressReturn = CreateMagicLinkFlowReturn; - -/** - * @deprecated Use `useEmailLink` instead. - */ -function useMagicLink(resource: SignInResource): UseMagicLinkSignInReturn; -/** - * @deprecated Use `useEmailLink` instead. - */ -function useMagicLink(resource: SignUpResource): UseMagicLinkSignUpReturn; -/** - * @deprecated Use `useEmailLink` instead. - */ -function useMagicLink(resource: EmailAddressResource): UseMagicLinkEmailAddressReturn; -function useMagicLink( - resource: MagicLinkable, -): UseMagicLinkSignInReturn | UseMagicLinkSignUpReturn | UseMagicLinkEmailAddressReturn { - deprecated('useMagicLink', 'Use `useEmailLink` instead.'); - - const { startMagicLinkFlow, cancelMagicLinkFlow } = React.useMemo(() => resource.createMagicLinkFlow(), [resource]); - - React.useEffect(() => { - return cancelMagicLinkFlow; - }, []); - - return { - startMagicLinkFlow, - cancelMagicLinkFlow, - } as UseMagicLinkSignInReturn | UseMagicLinkSignUpReturn | UseMagicLinkEmailAddressReturn; -} - -export { useMagicLink }; diff --git a/packages/react/src/hooks/useSessionList.ts b/packages/react/src/hooks/useSessionList.ts index ec8f4b0f90..70c92eadbc 100644 --- a/packages/react/src/hooks/useSessionList.ts +++ b/packages/react/src/hooks/useSessionList.ts @@ -1,4 +1,4 @@ -import type { SessionResource, SetActive, SetSession } from '@clerk/types'; +import type { SessionResource, SetActive } from '@clerk/types'; import { useClientContext } from '../contexts/ClientContext'; import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext'; @@ -7,26 +7,11 @@ type UseSessionListReturn = | { isLoaded: false; sessions: undefined; - /** - * @deprecated This method is deprecated and will be removed in the future. Use {@link Clerk.setActive} instead - * Set the current session explicitly. Setting the session to `null` unsets the active session and signs out the user. - * @param session Passed session resource object, session id (string version) or null - * @param beforeEmit Callback run just before the active session is set to the passed object. Can be used to hook up for pre-navigation actions. - */ - setSession: undefined; setActive: undefined; } | { isLoaded: true; sessions: SessionResource[]; - - /** - * @deprecated This method is deprecated and will be removed in the future. Use {@link Clerk.setActive} instead - * Set the current session explicitly. Setting the session to `null` unsets the active session and signs out the user. - * @param session Passed session resource object, session id (string version) or null - * @param beforeEmit Callback run just before the active session is set to the passed object. Can be used to hook up for pre-navigation actions. - */ - setSession: SetSession; setActive: SetActive; }; @@ -37,13 +22,12 @@ export const useSessionList: UseSessionList = () => { const client = useClientContext(); if (!client) { - return { isLoaded: false, sessions: undefined, setSession: undefined, setActive: undefined }; + return { isLoaded: false, sessions: undefined, setActive: undefined }; } return { isLoaded: true, sessions: client.sessions, - setSession: isomorphicClerk.setSession, setActive: isomorphicClerk.setActive, }; }; diff --git a/packages/react/src/hooks/useSignIn.ts b/packages/react/src/hooks/useSignIn.ts index cf71a261ad..b607c739e3 100644 --- a/packages/react/src/hooks/useSignIn.ts +++ b/packages/react/src/hooks/useSignIn.ts @@ -1,4 +1,4 @@ -import type { SetActive, SetSession, SignInResource } from '@clerk/types'; +import type { SetActive, SignInResource } from '@clerk/types'; import { useClientContext } from '../contexts/ClientContext'; import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext'; @@ -7,25 +7,11 @@ type UseSignInReturn = | { isLoaded: false; signIn: undefined; - /** - * @deprecated This method is deprecated and will be removed in the future. Use {@link Clerk.setActive} instead - * Set the current session explicitly. Setting the session to `null` unsets the active session and signs out the user. - * @param session Passed session resource object, session id (string version) or null - * @param beforeEmit Callback run just before the active session is set to the passed object. Can be used to hook up for pre-navigation actions. - */ - setSession: undefined; setActive: undefined; } | { isLoaded: true; signIn: SignInResource; - /** - * @deprecated This method is deprecated and will be removed in the future. Use {@link Clerk.setActive} instead - * Set the current session explicitly. Setting the session to `null` unsets the active session and signs out the user. - * @param session Passed session resource object, session id (string version) or null - * @param beforeEmit Callback run just before the active session is set to the passed object. Can be used to hook up for pre-navigation actions. - */ - setSession: SetSession; setActive: SetActive; }; @@ -36,13 +22,12 @@ export const useSignIn: UseSignIn = () => { const client = useClientContext(); if (!client) { - return { isLoaded: false, signIn: undefined, setSession: undefined, setActive: undefined }; + return { isLoaded: false, signIn: undefined, setActive: undefined }; } return { isLoaded: true, signIn: client.signIn, - setSession: isomorphicClerk.setSession, setActive: isomorphicClerk.setActive, }; }; diff --git a/packages/react/src/hooks/useSignUp.ts b/packages/react/src/hooks/useSignUp.ts index 182b901538..0b0222879e 100644 --- a/packages/react/src/hooks/useSignUp.ts +++ b/packages/react/src/hooks/useSignUp.ts @@ -1,4 +1,4 @@ -import type { SetActive, SetSession, SignUpResource } from '@clerk/types'; +import type { SetActive, SignUpResource } from '@clerk/types'; import { useClientContext } from '../contexts/ClientContext'; import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext'; @@ -7,25 +7,11 @@ type UseSignUpReturn = | { isLoaded: false; signUp: undefined; - /** - * @deprecated This method is deprecated and will be removed in the future. Use {@link Clerk.setActive} instead - * Set the current session explicitly. Setting the session to `null` unsets the active session and signs out the user. - * @param session Passed session resource object, session id (string version) or null - * @param beforeEmit Callback run just before the active session is set to the passed object. Can be used to hook up for pre-navigation actions. - */ - setSession: undefined; setActive: undefined; } | { isLoaded: true; signUp: SignUpResource; - /** - * @deprecated This method is deprecated and will be removed in the future. Use {@link Clerk.setActive} instead - * Set the current session explicitly. Setting the session to `null` unsets the active session and signs out the user. - * @param session Passed session resource object, session id (string version) or null - * @param beforeEmit Callback run just before the active session is set to the passed object. Can be used to hook up for pre-navigation actions. - */ - setSession: SetSession; setActive: SetActive; }; @@ -36,13 +22,12 @@ export const useSignUp: UseSignUp = () => { const client = useClientContext(); if (!client) { - return { isLoaded: false, signUp: undefined, setSession: undefined, setActive: undefined }; + return { isLoaded: false, signUp: undefined, setActive: undefined }; } return { isLoaded: true, signUp: client.signUp, - setSession: isomorphicClerk.setSession, setActive: isomorphicClerk.setActive, }; }; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 3a59897df4..d31d7e1129 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -1,25 +1,16 @@ import './polyfills'; -export * from './contexts'; export * from './components'; +export * from './contexts'; +export { EmailLinkErrorCode, isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskError } from './errors'; export * from './hooks'; +export { useEmailLink } from './hooks/useEmailLink'; export type { BrowserClerk, ClerkProp, HeadlessBrowserClerk, - WithUserProp, + IsomorphicClerkOptions, WithClerkProp, WithSessionProp, - IsomorphicClerkOptions, + WithUserProp, } from './types'; -export { - MagicLinkErrorCode, - EmailLinkErrorCode, - isClerkAPIResponseError, - isKnownError, - isMetamaskError, - isMagicLinkError, - isEmailLinkError, -} from './errors'; -export { useMagicLink } from './hooks/useMagicLink'; -export { useEmailLink } from './hooks/useEmailLink'; diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts index 9a30c028fe..1580c5821e 100644 --- a/packages/react/src/isomorphicClerk.ts +++ b/packages/react/src/isomorphicClerk.ts @@ -1,22 +1,21 @@ import { inBrowser } from '@clerk/shared/browser'; -import { deprecated } from '@clerk/shared/deprecated'; import { handleValueOrFn } from '@clerk/shared/handleValueOrFn'; import type { ActiveSessionResource, AuthenticateWithMetamaskParams, - BeforeEmitCallback, Clerk, ClientResource, CreateOrganizationParams, CreateOrganizationProps, DomainOrProxyUrl, HandleEmailLinkVerificationParams, - HandleMagicLinkVerificationParams, HandleOAuthCallbackParams, ListenerCallback, OrganizationListProps, OrganizationMembershipResource, + OrganizationProfileProps, OrganizationResource, + OrganizationSwitcherProps, SetActiveParams, SignInProps, SignInRedirectOptions, @@ -30,7 +29,6 @@ import type { UserProfileProps, UserResource, } from '@clerk/types'; -import type { OrganizationProfileProps, OrganizationSwitcherProps } from '@clerk/types'; import { unsupportedNonBrowserDomainOrProxyUrlFunction } from './errors'; import type { @@ -59,7 +57,6 @@ type MethodCallback = () => Promise | 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; @@ -126,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; @@ -153,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; @@ -166,7 +161,7 @@ export default class IsomorphicClerk { if (isConstructor(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); @@ -186,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, @@ -357,11 +351,6 @@ export default class IsomorphicClerk { } }; - setSession = (session: ActiveSessionResource | string | null, beforeEmit?: BeforeEmitCallback): Promise => { - deprecated('setSession', 'Use `Clerk.setActive` instead'); - return this.setActive({ session, beforeEmit }); - }; - openSignIn = (props?: SignInProps): void => { if (this.clerkjs && this.#loaded) { this.clerkjs.openSignIn(props); @@ -669,18 +658,6 @@ export default class IsomorphicClerk { this.premountMethodCalls.set('handleRedirectCallback', callback); } }; - /** - * @deprecated Use `handleEmailLinkVerification` instead. - */ - handleMagicLinkVerification = async (params: HandleMagicLinkVerificationParams): Promise => { - deprecated('handleMagicLinkVerification', 'Use `handleEmailLinkVerification` instead.'); - const callback = () => this.clerkjs?.handleMagicLinkVerification(params); - if (this.clerkjs && this.#loaded) { - return callback() as Promise; - } else { - this.premountMethodCalls.set('handleMagicLinkVerification', callback); - } - }; handleEmailLinkVerification = async (params: HandleEmailLinkVerificationParams): Promise => { const callback = () => this.clerkjs?.handleEmailLinkVerification(params); diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index dd9bb60028..476e74c56f 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -23,7 +23,8 @@ declare global { } } -export type IsomorphicClerkOptions = Omit & { +// TODO(@dimkl): Remove frontendApi when it's removed from ClerkOptions in @clerk/types +export type IsomorphicClerkOptions = Omit & { Clerk?: ClerkProp; clerkJSUrl?: string; clerkJSVariant?: 'headless' | ''; diff --git a/packages/react/src/utils/loadClerkJsScript.ts b/packages/react/src/utils/loadClerkJsScript.ts index ff75bd09d8..c6dab5f282 100644 --- a/packages/react/src/utils/loadClerkJsScript.ts +++ b/packages/react/src/utils/loadClerkJsScript.ts @@ -16,9 +16,9 @@ type LoadClerkJsScriptOptions = Omit { - 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) {