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

@@ -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`

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",

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,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 <ClerkProvider>';
-
 export const noClerkProviderError = 'Clerk: You must wrap your application in a <ClerkProvider> component.';
 
 export const noGuaranteedLoadedError = (hookName: string) =>

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';

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,
   };
 };

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,
   };
 };

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,
   };
 };

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';