chore(clerk-js): Drop deprecations (#2082)

* chore(clerk-react): Drop `frontendApi`

* chore(clerk-react,chrome-extension): Drop `*MagicLink*` related exports

* chore(clerk-js): Drop `*MagicLink*` related exports

* chore(types): Drop `*MagicLink*` related exports

* chore(clerk-js): Drop `orgs` claim

* chore(clerk-js,types): Drop `afterSwitchOrganizationUrl` claim

* chore(clerk-js): Drop support for `frontendApi` as parameter

* chore(clerk-js,types): Drop image related properties

- `ExternalAccount.avatarUrl`
- `ExternalAccountJSON.avatar_url`
- `Organization.logoUrl`
- `OrganizationJSON.logo_url`
- `User.profileImageUrl`
- `UserJSON.profile_image_url`
- `OrganizationMembershipPublicUserData.profileImageUrl`
- `OrganizationMembershipPublicUserDataJSON.profile_image_url`

* chore(clerk-js,types): Drop `*captcha` related methods from Clerk

* chore(clerk-js,types): Drop `Organization` related deprecations

* chore(*): Drop `useOrganizations`

* chore(clerk-js,types): Drop `appearance.userProfile`

* chore(clerk-js,clerk-react): Drop `membershipList` and `invitationList` params deprecations

* chore(clerk-js,types): Drop `Clerk.setSession`

* chore(clerk-js,types): Drop `redirect_url` deprecations

* chore(clerk-js,types): Drop `GetMembershipsParams`

* chore(clerk-js): Drop `generateSignature`

* chore(clerk-js,types): Drop `password`

* chore(clerk-js,types): Drop deprecated `addListener/removeListener` from matchMedia return

* chore(repo): Add word spelling in vscode workspace + fix typos

* chore(clerk-js,types): Use paginated responses in get memberships endpoints

* chore(repo): Add changeset

* chore(clerk-js,types): Address PR comments

Author: dimkl

.changeset/fast-games-hide.md

@@ -0,0 +1,39 @@
+---
+'@clerk/chrome-extension': major
+'@clerk/clerk-js': major
+'@clerk/nextjs': major
+'@clerk/shared': major
+'@clerk/clerk-react': major
+'@clerk/types': major
+'@clerk/clerk-expo': major
+---
+
+Drop deprecations. Migration steps:
+- use `publishableKey` instead of `frontendApi`
+- use `Clerk.handleEmailLinkVerification()` instead of `Clerk.handleMagicLinkVerification()`
+- use `isEmailLinkError` instead of `isMagicLinkError`
+- use `EmailLinkErrorCode` instead of `MagicLinkErrorCode`
+- use `useEmailLink` instead of `useMagicLink`
+- drop `orgs` jwt claim from session token
+- use `ExternalAccount.imageUrl` instead of `ExternalAccount.avatarUrl`
+- use `Organization.imageUrl` instead of `Organization.logoUrl`
+- use `User.imageUrl` instead of `User.profileImageUrl`
+- use `OrganizationMembershipPublicUserData.imageUrl` instead of `OrganizationMembershipPublicUserData.profileImageUrl`
+- use `useOrganizationList` instead of `useOrganizations`
+- use `userProfileProps` instead of `userProfile` in `Appearance`
+- use `Clerk.setActive()` instead of `Clerk.setSession()`
+- drop `password` param in `User.update()`
+- use `afterSelectOrganizationUrl` instead of `afterSwitchOrganizationUrl` in `OrganizationSwitcher`
+- drop `Clerk.experimental_canUseCaptcha` / `Clerk.Clerk.experimental_captchaSiteKey` / `Clerk.experimental_captchaURL` (were meant for internal use)
+- use `User.getOrganizationMemberships()` instead of `Clerk.getOrganizationMemberships()`
+- drop `lastOrganizationInvitation` / `lastOrganizationMember` from Clerk emitted events
+- drop `Clerk.__unstable__invitationUpdate` / `Clerk.__unstable__membershipUpdate`
+- drop support for string param in `Organization.create()`
+- use `Organization.getInvitations()` instead of `Organization.getPendingInvitations()`
+- use `pageSize` instead of `limit` in `OrganizationMembership.retrieve()`
+- use `initialPage` instead of `offset` in `OrganizationMembership.retrieve()`
+- drop `lastOrganizationInvitation` / `lastOrganizationMember` from ClerkProvider
+- use `invitations` instead of `invitationList` in `useOrganization`
+- use `memberships` instead of `membershipList` in `useOrganization`
+- use `redirectUrl` instead of `redirect_url` in `User.createExternalAccount()`
+- use `signature` instead of `generatedSignature` in `Signup.attemptWeb3WalletVerification()`

.vscode/settings.json

@@ -5,5 +5,24 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true,
   },
-  "eslint.workingDirectories": [{ "mode": "auto" }],
+  "eslint.workingDirectories": [
+    {
+      "mode": "auto"
+    }
+  ],
+  "cSpell.words": [
+    "accountsstage",
+    "adduser",
+    "arethetypeswrong",
+    "attw",
+    "BAPI",
+    "citty",
+    "execa",
+    "FAPI",
+    "jwks",
+    "lclclerk",
+    "lclstage",
+    "nextjs",
+    "publint"
+  ],
 }

packages/chrome-extension/src/__snapshots__/exports.test.ts.snap

@@ -41,7 +41,6 @@ exports[`public exports should not include a breaking change 1`] = `
   "useEmailLink",
   "useOrganization",
   "useOrganizationList",
-  "useOrganizations",
   "useSession",
   "useSessionList",
   "useSignIn",

packages/clerk-js/README.md

@@ -44,13 +44,13 @@ There are two ways you can include ClerkJS in your project. You can either [impo
 npm install @clerk/clerk-js
 ```
 
-Once you have installed the package, you will need to import the ClerkJS object constructor into your code and pass it your [Frontend API](https://dashboard.clerk.com/last-active?path=api-keys) as a parameter.
+Once you have installed the package, you will need to import the ClerkJS object constructor into your code and pass it your [Publishable Key](https://dashboard.clerk.com/last-active?path=api-keys) as a parameter.
 
 ```js
 import Clerk from '@clerk/clerk-js';
 
-const clerkFrontendApi = 'pk_[publishable_key]';
-const clerk = new Clerk(clerkFrontendApi);
+const clerkPublishableKey = 'pk_[publishable_key]';
+const clerk = new Clerk(clerkPublishableKey);
 await clerk.load({
   // Set load options here...
 });
@@ -65,14 +65,13 @@ Add the following script to your site's `<body>` element:
 ```html
 <script>
   // Get this URL and Publishable Key from the Clerk Dashboard
-  const clerkFrontendApi = 'pk_[publishable_key]';
+  const clerkPublishableKey = 'pk_[publishable_key]';
   const frontendApi = '[your-domain].clerk.accounts.dev';
   const version = '@latest'; // Set to appropriate version
 
   // Creates asynchronous script
   const script = document.createElement('script');
-  script.setAttribute('data-clerk-frontend-api', frontendApi);
-  script.setAttribute('data-clerk-publishable-key', clerkFrontendApi);
+  script.setAttribute('data-clerk-publishable-key', clerkPublishableKey);
   script.async = true;
   script.src = `https://${frontendApi}/npm/@clerk/clerk-js${version}/dist/clerk.browser.js`;
 

packages/clerk-js/jest.setup.ts

@@ -15,8 +15,6 @@ if (typeof window !== 'undefined') {
       matches: false,
       media: query,
       onchange: null,
-      addListener: jest.fn(), // deprecated
-      removeListener: jest.fn(), // deprecated
       addEventListener: jest.fn(),
       removeEventListener: jest.fn(),
       dispatchEvent: jest.fn(),
@@ -28,7 +26,6 @@ if (typeof window !== 'undefined') {
 
   //@ts-expect-error
   global.IntersectionObserver = class IntersectionObserver {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     constructor() {}
 
     disconnect() {

packages/clerk-js/src/core/clerk.redirects.test.ts

@@ -52,8 +52,8 @@ const mockUserSettings = {
   },
 };
 
-const developmentFrontendApi = 'clerk.abcef.12345.dev.lclclerk.com';
-const productionFrontendApi = 'clerk.abcef.12345.prod.lclclerk.com';
+const developmentPublishableKey = 'pk_test_Y2xlcmsuYWJjZWYuMTIzNDUuZGV2LmxjbGNsZXJrLmNvbSQ';
+const productionPublishableKey = 'pk_live_Y2xlcmsuYWJjZWYuMTIzNDUucHJvZC5sY2xjbGVyay5jb20k';
 
 describe('Clerk singleton - Redirects', () => {
   let mockNavigate = jest.fn();
@@ -111,12 +111,12 @@ describe('Clerk singleton - Redirects', () => {
 
         mockUsesUrlBasedSessionSync.mockReturnValue(true);
 
-        clerkForProductionInstance = new Clerk(productionFrontendApi);
+        clerkForProductionInstance = new Clerk(productionPublishableKey);
         await clerkForProductionInstance.load({
           navigate: mockNavigate,
         });
 
-        clerkForDevelopmentInstance = new Clerk(developmentFrontendApi);
+        clerkForDevelopmentInstance = new Clerk(developmentPublishableKey);
         await clerkForDevelopmentInstance.load({
           navigate: mockNavigate,
         });
@@ -189,12 +189,12 @@ describe('Clerk singleton - Redirects', () => {
 
         mockUsesUrlBasedSessionSync.mockReturnValue(true);
 
-        clerkForProductionInstance = new Clerk(productionFrontendApi);
+        clerkForProductionInstance = new Clerk(productionPublishableKey);
         await clerkForProductionInstance.load({
           navigate: mockNavigate,
         });
 
-        clerkForDevelopmentInstance = new Clerk(developmentFrontendApi);
+        clerkForDevelopmentInstance = new Clerk(developmentPublishableKey);
         await clerkForDevelopmentInstance.load({
           navigate: mockNavigate,
         });
@@ -280,12 +280,12 @@ describe('Clerk singleton - Redirects', () => {
       beforeEach(async () => {
         mockUsesUrlBasedSessionSync.mockReturnValue(false);
 
-        clerkForProductionInstance = new Clerk(productionFrontendApi);
+        clerkForProductionInstance = new Clerk(productionPublishableKey);
         await clerkForProductionInstance.load({
           navigate: mockNavigate,
         });
 
-        clerkForDevelopmentInstance = new Clerk(developmentFrontendApi);
+        clerkForDevelopmentInstance = new Clerk(developmentPublishableKey);
         await clerkForDevelopmentInstance.load({
           navigate: mockNavigate,
         });
@@ -313,12 +313,12 @@ describe('Clerk singleton - Redirects', () => {
           }),
         );
 
-        clerkForProductionInstance = new Clerk(productionFrontendApi);
+        clerkForProductionInstance = new Clerk(productionPublishableKey);
         await clerkForProductionInstance.load({
           navigate: mockNavigate,
         });
 
-        clerkForDevelopmentInstance = new Clerk(developmentFrontendApi);
+        clerkForDevelopmentInstance = new Clerk(developmentPublishableKey);
         await clerkForDevelopmentInstance.load({
           navigate: mockNavigate,
         });