@clerk/upgrade 1.0.2 → 1.0.3

package/dist/guide-generators/core-2/retheme/__output.mdx

@@ -0,0 +1,440 @@
+---
+title: "Redesigned Components in Core 2"
+description: "Learn how to handle changes as a result of redesigned components in Clerk Core 2"
+---
+
+{/* WARNING: This is a generated file and should not be edited directly. To update its contents, see the "upgrade" package in the clerk/javascript repo. */}
+
+# Redesigned Components in Core 2
+
+The new version ships with improved design and UX across all of Clerk's [UI components](/docs/components/overview). If you have used the [`appearance` prop](/docs/components/customization/overview) or tokens for a [custom theme](/docs/components/customization/overview#create-a-custom-theme), you will likely need to make some adjustments to ensure your styling is still looking great. If you're using the [localization prop](/docs/components/customization/localization) you will likely need to make adjustments to account for added or removed localization keys.
+
+<Callout type='info'>
+  If you are not customizing the appearance of your components, or using `localization`, you can skip this section. If
+  you are, we recommend using our CLI (`npx @clerk/upgrade`) to scan for changes required as part of the component
+  redesign more quickly.
+</Callout>
+
+The sections below contain more info on each change made to the customization ids and localization keys for reference. Regardless of how thoroughly you have reviewed the following information, we still recommend that you ensure that you have taken some time to manually look through each of your views to ensure that everything looks good still.
+
+Also worth noting - if you are using Clerk's account portal (hosted sign in page), and would like to enable the new design there, you can do so via the "customization" tab on the [account portal page](https://dashboard.clerk.com/last-active?path=account-portal) in your dashboard. Selecting "Core 2" from the "ClerkJS Components" dropdown will enable the new designs.
+
+## Appearance Changes
+
+<Accordion titles={["Within <code>&lt;UserProfile /&gt;</code>, Multi-Factor Auth is Added via Dropdown", "Breaking Changes to appearance variables", "<code>Settings</code> -&gt; <code>General</code> tab in <code>OrganizationProfile</code>", "Within <code>&lt;UserProfile /&gt;</code>, Account and Security Pages Separated", "Within <code>&lt;UserProfile /&gt;</code>, Connected Accounts Added via Dropdown", "<code>userButtonPopoverActionButtonText</code> customization id removed", "<code>userButtonBox</code> is now a child of <code>userButtonTrigger</code>", "<code>organizationSwitcherPopoverActionButtonText</code> customization id removed", "Changes to the <code>card</code> customization id", "Back button customization ids change on alternative 2fa methods page", "<code>button</code> -&gt; <code>organizationListCreateOrganizationActionButton</code> customization id", "<code>socialButtonsBlockButtonArrow</code> customization id removed", "Identity preview avatar customization ids removed", "Changes to default variables"]}>
+  <AccordionPanel>    
+    Within the `<UserProfile />` component (which is also rendered by `<UserButton />`), adding a multi-factor auth (MFA) method is now rendered as a dropdown instead of a modal. If you were relying on the modal for any sort of customizations, these customizations will need to be adjusted to the new form factor.
+    
+    Two new appearance prop keys were added to aid with this process: `cl-menuList__mfa` for styling the list of MFA factors, and `cl-menuItem__mfa` for styling individual items.
+  </AccordionPanel>
+  <AccordionPanel>    
+    Several appearance variables have been removed or renamed. If you were using these variables in your application, you will need to update your code to use the new variables.
+    
+    - The `fontSmoothing` variable has been removed.
+    - The `shadowShimmer` variable has been removed.
+    - The `colorAlphaShade` variable has been renamed to `colorNeutral`.
+  </AccordionPanel>
+  <AccordionPanel>    
+    The "Settings" tab within the `<OrganizationProfile />` component has been renamed to "General". If you are linking directly to `/organization-settings` from anywhere, the link will need to be updated to `/organization-general`.
+    
+    If you are [customizing the component](https://clerk.com/docs/components/customization/organization-profile) by re-ordering the pages, the label used to target this page must be changed from `settings` to `general` as well.
+    
+    If you are using the [appearance prop](https://clerk.com/docs/components/customization/overview) to customize the appearance of the `<OrganizationProfile />` component, please note that the `cl-profilePage__organizationSettings` key has also been changed to `cl-profilePage__organizationGeneral` to be consistent with the naming change.
+  </AccordionPanel>
+  <AccordionPanel>    
+    Within the `<UserProfile />` component (which is also rendered by `<UserButton />`), the "Account" and "Security" pages now live within their own tabs. Previously, "Security" was a section within the "Account" tab. The "Security" page can now be directly linked to under the `/security` path if desired.
+  </AccordionPanel>
+  <AccordionPanel>    
+    Within the `<UserProfile />` component (which is also rendered by `<UserButton />`), adding a connected account is now rendered as a dropdown instead of a modal. If you were relying on the modal for any sort of customizations, these customizations will need to be adjusted to the new form factor.
+    
+    New appearance prop keys were added to aid with customization, if desired:
+    
+    - `cl-menuList__connectedAccounts` for styling the list of connected account addition options
+    - `cl-menuItem__connectedAccounts` for styling individual items in the connected account options list
+    - `cl-menuList__web3Wallets` for styling the list of web3 wallet addition options
+    - `cl-menuItem__web3Wallets` for styling individual items in the web3 wallets options list
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `userButtonPopoverActionButtonText` customization id has been removed, as the text for this button is now directly rendered inside the button rather than an extra wrapping element. The nested ids `userButtonPopoverActionButtonText__signOut` and `userButtonPopoverActionButtonText__manageAccount` have also been removed. Any styling that needs to apply to the text can be applied to its direct parent `cl-userButtonPopoverActionButton`.
+  </AccordionPanel>
+  <AccordionPanel>    
+    The parent-child relationship of the two elements `userButtonTrigger` and `userButtonBox` has been swapped. Previously, `userButtonTrigger` was nested inside of `userButtonBox`, and now `userButtonBox` is nested inside of `userButtonTrigger`. This change resolves [some usability issues](https://github.com/clerk/javascript/issues/1625) in `<UserButton />`. If you are applying style customization to either of these elements, your customizations may need to be adjusted.
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `organizationSwitcherPopoverActionButtonText` customization id has been removed, as the text for this button is now directly rendered inside the button rather than an extra wrapping element. The nested ids `organizationSwitcherPopoverActionButtonText__manageOrganization` and `organizationSwitcherPopoverActionButtonText__createOrganization` have also been removed. Any styling that needs to apply to the text can be applied to its direct parent `cl-organizationSwitcherPopoverActionButton`.
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `card` customization id in the previous major version was the main and only container element for components. Outside the `card` element, a new `cardBox` id was introduced that allows more fine-grained style customization.
+    
+    As a note, if you are changing the background color of `card`, you will also need to also apply the same color on the `footer` id as well. The `footer` now gray by default, and it’s located outside `card`, but inside `cardBox`.
+    
+    A `footerItem` id was also added for more targeted styling of items inside the `footer`.
+  </AccordionPanel>
+  <AccordionPanel>    
+    The "back" button on the panel within `<SignIn />` that lists out alternative two factor auth methods has changed location, and there have been some changes to the ids as a result of this:
+    
+    - `headerBackIcon` has been removed, as there is no longer an associated icon
+    - `headerBackRow` has been renamed to `backRow` as it's no longer in the header
+    - `headerBackLink` has been renamed to `backLink` as it's no longer in the header
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `button` customization id was used only in one place, for a button to create a new organization in the `<OrganizationList />` component. This id has been removed and replaced by the more appropriately named `organizationListCreateOrganizationActionButton` customization id instead.
+  </AccordionPanel>
+  <AccordionPanel>    
+    Social sign-in buttons in the new component designs no longer include arrows, so the `socialButtonsBlockButtonArrow` customization id has been removed. You can use the `socialButtonsIconButton` to apply custom styling to the social buttons if desired.
+  </AccordionPanel>
+  <AccordionPanel>    
+    When signing in with Clerk's `<SignIn />` component, after entering a username or email the user is brought to a second pane where they can enter a second factor such as a password. On this pane, there is an area called "identity preview" that shows the username/email that they are entering a password/etc for. Previously, this area included the user's avatar, but this is no longer the case in updated designs. As such, the customization ids related to the user's avatar have been removed.
+  </AccordionPanel>
+  <AccordionPanel>    
+    The default values of some [appearance variables](/docs/components/customization/variables) have changed which may impact your UI (if you are not already overriding them).
+    
+        - The default `colorPrimary` value changed from `#103FEF` to `#2F3037`. As the new color is a dark grey, the `colorPrimary` of the dark theme was changed to `#FFFFFF`.
+        - The default `fontSize` value changed from `1rem` to `0.8125rem`
+        - The default `fontWeight` values changed from `{ normal: 400, medium: 500, bold: 600 }` to `{ normal: 400, medium: 500, semibold: 600, bold: 700 }`.
+  </AccordionPanel>
+</Accordion>
+
+## Localization Changes
+
+<Accordion titles={["New localization keys added", "Removed localization keys", "Localization keys changed"]}>
+  <AccordionPanel>    
+    As part of the redesign of Clerk's components, a number of new localization keys have been added and can be seen along with their default english values in the code block below. If you do not supply translated values for these keys in your custom localization, they will fall back to the default english values specified below.
+    
+    ```js
+    const newValues = {
+      formButtonPrimary__verify: 'Verify',
+      formFieldInputPlaceholder__confirmDeletionUserAccount: 'Delete account',
+      organizationProfile: {
+        invitePage: {
+          selectDropdown__role: 'Select role',
+        },
+        navbar: {
+          description: 'Manage your organization.',
+          general: 'General',
+          members: 'Members',
+          title: 'Organization',
+        },
+        profilePage: {
+          domainSection: {
+            menuAction__manage: 'Manage',
+            menuAction__remove: 'Delete',
+            menuAction__verify: 'Verify',
+          },
+        },
+        start: {
+          headerTitle__general: 'General',
+          profileSection: {
+            primaryButton: 'Update profile',
+            title: 'Organization Profile',
+            uploadAction__title: 'Logo',
+          },
+        },
+        verifiedDomainPage: {
+          title: 'Update {{domain}}',
+        },
+      },
+      signIn: {
+        accountSwitcher: {
+          action__addAccount: 'Add account',
+          action__signOutAll: 'Sign out of all accounts',
+          subtitle: 'Select the account with which you wish to continue.',
+          title: 'Choose an account',
+        },
+        alternativeMethods: {
+          actionText: 'Don’t have any of these?',
+          subtitle: 'Facing issues? You can use any of these methods to sign in.',
+        },
+        forgotPassword: {
+          subtitle_email: 'First, enter the code sent to your email ID',
+          subtitle_phone: 'First, enter the code sent to your phone',
+          title: 'Reset password',
+        },
+      },
+      unstable__errors: {
+        form_param_format_invalid__phone_number: 'Phone number must be in a valid international format',
+      },
+      userProfile: {
+        emailAddressPage: {
+          verifyTitle: 'Verify email address',
+        },
+        formButtonPrimary__add: 'Add',
+        formButtonPrimary__remove: 'Remove',
+        formButtonPrimary__save: 'Save',
+        mfaPhoneCodePage: {
+          backButton: 'Use existing number',
+          successMessage1:
+            'When signing in, you will need to enter a verification code sent to this phone number as an additional step.',
+          successMessage2:
+            'Save these backup codes and store them somewhere safe. If you lose access to your authentication device, you can use backup codes to sign in.',
+          successTitle: 'SMS code verification enabled',
+        },
+        navbar: {
+          account: 'Profile',
+          description: 'Manage your account info.',
+          security: 'Security',
+          title: 'Account',
+        },
+        passwordPage: {
+          checkboxInfoText__signOutOfOtherSessions:
+            'It is recommended to sign out of all other devices which may have used your old password.',
+          successMessage__set: 'Your password has been set.',
+          successMessage__signOutOfOtherSessions: 'All other devices have been signed out.',
+          successMessage__update: 'Your password has been updated.',
+          title__set: 'Set password',
+          title__update: 'Update password',
+        },
+        phoneNumberPage: {
+          verifySubtitle: 'Enter the verification code sent to {{identifier}}',
+          verifyTitle: 'Verify phone number',
+        },
+        start: {
+          passwordSection: {
+            primaryButton__updatePassword: 'Update password',
+          },
+          profileSection: {
+            primaryButton: 'Update profile',
+          },
+          usernameSection: {
+            primaryButton__updateUsername: 'Update username',
+          },
+        },
+        usernamePage: {
+          title__set: 'Set username',
+          title__update: 'Update username',
+        },
+      },
+    };
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    As part of the redesign of Clerk's components, a number of localization keys have been removed as they were no longer present in the new designs. You should remove any of these keys that are present in your localization object as they are no longer needed.
+    
+    ```js
+    const deletedKeys = [
+      'formFieldLabel__emailAddress_phoneNumber',
+      'formFieldLabel__phoneNumber_username',
+      'formFieldLabel__emailAddress_phoneNumber_username',
+      'formFieldInputPlaceholder__emailAddress_phoneNumber',
+      'formFieldInputPlaceholder__phoneNumber_username',
+      'formFieldInputPlaceholder__emailAddress_phoneNumber_username',
+      'signIn.forgotPassword.title_email',
+      'signIn.forgotPassword.title_phone',
+      'signIn.forgotPassword.formSubtitle_email',
+      'signIn.forgotPassword.formSubtitle_phone',
+      'signIn.emailCode.formSubtitle',
+      'signIn.phoneCode.formSubtitle',
+      'signIn.phoneCodeMfa.formSubtitle',
+      'signIn.totpMfa.formSubtitle',
+      'signIn.backupCodeMfa.formTitle',
+      'signIn.backupCodeMfa.formSubtitle',
+      'userProfile.start.headerSubtitle__account',
+      'userProfile.start.headerSubtitle__security',
+      'userProfile.start.usernameSection.primaryButton__changeUsername',
+      'userProfile.start.emailAddressesSection.detailsTitle__primary',
+      'userProfile.start.emailAddressesSection.detailsSubtitle__primary',
+      'userProfile.start.emailAddressesSection.detailsTitle__nonPrimary',
+      'userProfile.start.emailAddressesSection.detailsSubtitle__nonPrimary',
+      'userProfile.start.emailAddressesSection.detailsTitle__unverified',
+      'userProfile.start.emailAddressesSection.detailsSubtitle__unverified',
+      'userProfile.start.emailAddressesSection.destructiveActionTitle',
+      'userProfile.start.emailAddressesSection.destructiveActionSubtitle',
+      'userProfile.start.phoneNumbersSection.detailsTitle__primary',
+      'userProfile.start.phoneNumbersSection.detailsSubtitle__primary',
+      'userProfile.start.phoneNumbersSection.detailsTitle__nonPrimary',
+      'userProfile.start.phoneNumbersSection.detailsSubtitle__nonPrimary',
+      'userProfile.start.phoneNumbersSection.detailsTitle__unverified',
+      'userProfile.start.phoneNumbersSection.detailsSubtitle__unverified',
+      'userProfile.start.phoneNumbersSection.destructiveActionTitle',
+      'userProfile.start.phoneNumbersSection.destructiveActionSubtitle',
+      'userProfile.start.connectedAccountsSection.title__conectionFailed',
+      'userProfile.start.connectedAccountsSection.title__connectionFailed',
+      'userProfile.start.connectedAccountsSection.title__reauthorize',
+      'userProfile.start.connectedAccountsSection.actionLabel__conectionFailed',
+      'userProfile.start.connectedAccountsSection.destructiveActionSubtitle',
+      'userProfile.start.connectedAccountsSection.destructiveActionAccordionSubtitle',
+      'userProfile.start.passwordSection.primaryButton__changePassword',
+      'userProfile.start.mfaSection.phoneCode.destructiveActionTitle',
+      'userProfile.start.mfaSection.phoneCode.destructiveActionSubtitle',
+      'userProfile.start.mfaSection.phoneCode.title__default',
+      'userProfile.start.mfaSection.phoneCode.title__setDefault',
+      'userProfile.start.mfaSection.phoneCode.subtitle__default',
+      'userProfile.start.mfaSection.phoneCode.subtitle__setDefault',
+      'userProfile.start.mfaSection.totp.title',
+      'userProfile.start.mfaSection.totp.subtitle',
+      'userProfile.start.mfaSection.totp.destructiveActionSubtitle',
+      'userProfile.start.mfaSection.totp.destructiveActionLabel',
+      'userProfile.start.activeDevicesSection.primaryButton',
+      'userProfile.start.activeDevicesSection.detailsTitle',
+      'userProfile.start.activeDevicesSection.detailsSubtitle',
+      'userProfile.start.activeDevicesSection.destructiveActionTitle',
+      'userProfile.start.activeDevicesSection.destructiveActionSubtitle',
+      'userProfile.start.web3WalletsSection.destructiveActionTitle',
+      'userProfile.start.web3WalletsSection.destructiveActionSubtitle',
+      'userProfile.start.dangerSection.deleteAccountTitle',
+      'userProfile.start.dangerSection.deleteAccountDescription',
+      'userProfile.profilePage.fileDropAreaTitle',
+      'userProfile.profilePage.fileDropAreaAction',
+      'userProfile.usernamePage.title',
+      'userProfile.phoneNumberPage.infoText__secondary',
+      'userProfile.passwordPage.title',
+      'userProfile.passwordPage.changePasswordTitle',
+      'userProfile.passwordPage.successMessage',
+      'userProfile.passwordPage.changePasswordSuccessMessage',
+      'userProfile.passwordPage.sessionsSignedOutSuccessMessage',
+      'userProfile.mfaPhoneCodePage.successMessage',
+      'organizationProfile.start.headerTitle__settings',
+      'organizationProfile.start.headerSubtitle__members',
+      'organizationProfile.start.headerSubtitle__settings',
+      'organizationProfile.profilePage.subtitle',
+      'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify',
+      'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove',
+      'organizationProfile.verifiedDomainPage.enrollmentTab.formButton__save',
+      'organizationProfile.membersPage.start.headerTitle__active',
+      'organizationProfile.membersPage.start.headerTitle__invited',
+      'organizationProfile.membersPage.invitationsTab.manualInvitations.headerTitle',
+      'organizationProfile.membersPage.invitationsTab.manualInvitations.headerSubtitle',
+      'organizationProfile.membersPage.requestsTab.requests.headerTitle',
+      'organizationProfile.membersPage.requestsTab.requests.headerSubtitle',
+      'createOrganization.subtitle',
+    ];
+    ```
+    
+    If you'd like to automate this, you can use the [lodash omit function](https://lodash.com/docs/#omit) as such:
+    
+    ```js
+    import { omit } from 'lodash-es';
+    
+    const localization = omit(yourOldOject, deletedKeys);
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The values of some keys have been changed on the default [en-US localization object](https://github.com/clerk/javascript/blob/main/packages/localizations/src/en-US.ts). The list below shows you the new defaults (as of writing this guide) which you can either use or overwrite. If you have overridden these values, make sure to double check so you can be sure that your modifications are appropriate.
+    
+    ```js
+    const changedValues = {
+      formFieldLabel__organizationName: 'Name',
+      formFieldLabel__organizationSlug: 'Slug',
+      formFieldInputPlaceholder__emailAddresses: 'example@email.com, example2@email.com',
+      formFieldInputPlaceholder__organizationSlug: 'my-org',
+      signUp: {
+        start: {
+          subtitle: 'Welcome! Please fill in the details to get started.',
+          actionText: 'Already have an account?',
+        },
+        emailCode: {
+          subtitle: 'Enter the verification code sent to your email',
+        },
+        phoneCode: {
+          subtitle: 'Enter the verification code sent to your phone',
+        },
+        continue: {
+          subtitle: 'Please fill in the remaining details to continue.',
+          actionText: 'Already have an account?',
+        },
+      },
+      signIn: {
+        start: {
+          title: 'Sign in to {{applicationName}}',
+          subtitle: 'Welcome back! Please sign in to continue',
+          actionText: 'Don’t have an account?',
+        },
+        password: {
+          subtitle: 'Enter the password associated with your account',
+        },
+        forgotPasswordAlternativeMethods: {
+          label__alternativeMethods: 'Or, sign in with another method',
+        },
+        resetPassword: {
+          title: 'Set new password',
+        },
+        phoneCodeMfa: {
+          subtitle: 'To continue, please enter the verification code sent to your phone',
+        },
+        totpMfa: {
+          subtitle: 'To continue, please enter the verification code generated by your authenticator app',
+        },
+        backupCodeMfa: {
+          subtitle: 'Your backup code is the one you got when setting up two-step authentication.',
+        },
+      },
+      userProfile: {
+        start: {
+          headerTitle__account: 'Profile details',
+          emailAddressesSection: {
+            primaryButton: 'Add email address',
+            detailsAction__unverified: 'Verify',
+            destructiveAction: 'Remove email',
+          },
+          phoneNumbersSection: {
+            primaryButton: 'Add phone number',
+          },
+          mfaSection: {
+            phoneCode: {
+              destructiveActionLabel: 'Remove',
+            },
+            backupCodes: {
+              actionLabel__regenerate: 'Regenerate',
+            },
+          },
+          dangerSection: {
+            title: 'Delete account',
+            deleteAccountButton: 'Delete account',
+          },
+        },
+        profilePage: {
+          imageFormSubtitle: 'Upload',
+          imageFormDestructiveActionSubtitle: 'Remove',
+          fileDropAreaHint: 'Recommended size 1:1, up to 10MB.',
+        },
+        phoneNumberPage: {
+          infoText:
+            'A text message containing a verification code will be sent to this phone number. Message and data rates may apply.',
+        },
+        connectedAccountPage: {
+          socialButtonsBlockButton: '{{provider|titleize}}',
+        },
+        mfaPhoneCodePage: {
+          primaryButton__addPhoneNumber: 'Add phone number',
+          subtitle__availablePhoneNumbers:
+            'Select an existing phone number to register for SMS code two-step verification or add a new one.',
+          subtitle__unavailablePhoneNumbers:
+            'There are no available phone numbers to register for SMS code two-step verification, please add a new one.',
+        },
+        deletePage: {
+          actionDescription: "Type 'Delete account' below to continue.",
+        },
+      },
+      organizationSwitcher: {
+        action__createOrganization: 'Create organization',
+        action__manageOrganization: 'Manage',
+      },
+      organizationProfile: {
+        profilePage: {
+          title: 'Update profile',
+          dangerSection: {
+            leaveOrganization: {
+              actionDescription: "Type '{{organizationName}}' below to continue.",
+            },
+            deleteOrganization: {
+              actionDescription: "Type '{{organizationName}}' below to continue.",
+            },
+          },
+        },
+        invitePage: {
+          title: 'Invite new members',
+          subtitle: 'Enter or paste one or more email addresses, separated by spaces or commas.',
+        },
+      },
+      createOrganization: {
+        title: 'Create organization',
+      },
+      organizationList: {
+        title: 'Choose an account',
+        titleWithoutPersonal: 'Choose an organization',
+      },
+    };
+    ```
+  </AccordionPanel>
+</Accordion>
+

package/dist/guide-generators/core-2/shared/prepare.mdx

@@ -2,9 +2,4 @@
 
 Before uprading, it's highly recommended that you update your Clerk SDKs to the latest Core 1 version (`npm i <%= packageName %>@<%= parseInt(version.substring(1)) - 1 %>`). Some changes required for Core 2 SDKs can be applied incrementally to the <%= version %> release, which should contribute to a smoother upgrading experience. After updating, look out for deprecation messages in your terminal and browser console. By resolving these deprecations you'll be able to skip many breaking changes from Core 2.
 
-<Callout>
-  Note that Core 2 is currently in beta, while we field feedback and ensure stability. Deploying beta versions to
-  production is not recommended and should be done at your own risk.
-</Callout>
-
 Additionally, some of the minumum version requirements for some base dependencies have been updated such that versions that are no longer supported or are at end-of-life are no longer guaranteed to work correctly with Clerk.

package/dist/guide-generators/core-2/shared/update-version.mdx

@@ -1,18 +1,18 @@
-## Updating to Core 2 Beta
+## Updating to Core 2
 
-Whenever you feel ready, go ahead and install the latest beta version of any Clerk SDKs you are using. Make sure that you are prepared to patch some breaking changes before your app will work properly, however. The commands below demonstrate how to install the latest beta.
+Whenever you feel ready, go ahead and install the latest version of any Clerk SDKs you are using. Make sure that you are prepared to patch some breaking changes before your app will work properly, however. The commands below demonstrate how to install the latest version.
 
 <CodeBlockTabs type="installer" options={["npm", "yarn", "pnpm"]}>
     ```bash filename="terminal"
-    npm install <%= packageName %>@beta
+    npm install <%= packageName %>
     ```
 
     ```bash filename="terminal"
-    yarn add <%= packageName %>@beta
+    yarn add <%= packageName %>
     ```
 
     ```bash filename="terminal"
-    pnpm add <%= packageName %>@beta
+    pnpm add <%= packageName %>
     ```
 
 </CodeBlockTabs>

package/dist/versions/core-2/backend/members-count.md

@@ -1,6 +1,6 @@
 ---
-title: "`Organization.members_count` -> `Organization.membersCount`"
-matcher: "\.members_count"
+title: '`Organization.members_count` -> `Organization.membersCount`'
+matcher: "\\.members_count"
 ---
 
 The `members_count` attribute of the `Organization` resource has been renamed to `membersCount` to match the naming convention of other attributes.

package/dist/versions/core-2/index.js

@@ -4,7 +4,7 @@ const load = createLoader({
   baseUrl: 'https://clerk.com/docs/upgrade-guides/core-2'
 });
 const changesAffectingAll = ['organization-getroles-arguments-changed', 'organization-getmemberships-arguments-changed', 'organization-getdomains-arguments-change', 'organization-getinvitations-arguments-changed', 'organization-getmembershiprequests-arguments-changed', 'user-getorganizationinvitations-arguments-changed', 'user-getorganizationsuggestions-arguments-changed', 'user-getorganizationmemberships-arguments-changed', 'user-getorganizationmemberships-return-signature', 'getorganizationinvitationlist-return-signature', 'getorganizationinvitationlist-return-type-change', 'getorganizationmembershiplist-return-type-change', 'getorganizationlist-return-signature', 'getorganizationlist-return-type-change', 'getinvitationlist-return-signature', 'getsessionlist-return-signature', 'getuserlist-return-signature', 'getallowlistidentifierlist-return-signature', 'getclientlist-return-signature', 'getredirecturllist-return-signature', 'getuseroauthaccesstoken-return-signature', 'organization-logourl', 'user-profileimageurl', 'user-update-password'];
-const jsChanges = ['setsession', 'organization-create-string', 'organization-getpendinginvitations', 'mfa-dropdown', 'appearance-variables-breaking-changes', 'aftersignxurl-changes', 'supported-external-accounts-type-removed'];
+const jsChanges = ['setsession', 'organization-create-string', 'organization-getpendinginvitations', 'mfa-dropdown', 'appearance-variables-breaking-changes', 'aftersignxurl-changes', 'supported-external-accounts-removed'];
 const reactChanges = ['magiclinkerrorcode', 'usemagiclink', 'ismagiclinkerror', 'magiclinkerror', 'handlemagiclinkverification', 'clerkprovider-frontendapi-2', 'navigate-to-routerpush-routerreplace', 'afterswitchorganizationurl', 'appearance-organizationpreview-organizationswitcher', 'useorganization-invitationlist', 'useorganization-membershiplist', 'useorganizations', 'userprofile-prop', 'organizationprofile-settings', 'userprofile-security', 'connected-accounts-dropdown', 'userbuttonpopoveractionbuttontext-removed', 'userbuttontrigger-userbuttonbox-invert', 'organizationswitcherpopoveractionbuttontext-removed', 'card-changes', 'alternativemethods-backlink', 'button-to-organizationlistcreateorganizationactionbutton', 'remove-socialbuttonsblockbuttonarrow', 'remove-identitypreview-avatar', 'withsession-removed', 'withclerk-removed', 'withuser-removed-2', 'withclerk-hof-removed', 'withsession-hof-removed', 'withuser-hof-removed', 'multisessionappsupport-import-change', 'clerkprovideroptionswrapper-dropped', 'new-localization-keys', 'removed-localization-keys', 'changed-localization-keys', 'signoutcallback-to-redirecturl', 'min-react-version', 'externalaccount-avatarurl', 'organizationmembershippublicuserdata-profileimageurl'];
 export default {
   nextjs: load('nextjs', dedupeMerge(changesAffectingAll, jsChanges, ['api-key-to-secret-key', 'frontend-api-to-publishable-key', 'with-clerk-middleware-removed', 'auth-middleware-deprecated', 'clerk-js-version-next-public', 'authmiddleware-apikey', 'authmiddleware-frontendapi', 'createclerkclient-apikey', 'createclerkclient-frontendapi', 'getauth-apikey', 'clerkprovider-frontendapi-2', 'import-nextjs-app-beta', 'import-nextjs-ssr', 'import-nextjs-edge-middleware', 'import-nextjs-edge-middlewarefiles', 'import-api-url', 'import-api-version', 'import-clerk-js-url', 'import-clerk-js-version', 'import-domain', 'import-is-satellite', 'import-proxy-url', 'import-publishable-key', 'import-secret-key', 'import-sign-in-url', 'import-sign-up-url', 'import-nextjs-api', 'api-url-value-change', 'ismagiclinkerror', 'usemagiclink', 'magiclinkerrorcode', 'organizationprofile-settings', 'userprofile-security', 'connected-accounts-dropdown', 'userbuttonpopoveractionbuttontext-removed', 'userbuttontrigger-userbuttonbox-invert', 'organizationswitcherpopoveractionbuttontext-removed', 'card-changes', 'alternativemethods-backlink', 'button-to-organizationlistcreateorganizationactionbutton', 'remove-socialbuttonsblockbuttonarrow', 'remove-identitypreview-avatar', 'multisessionappsupport-import-change', 'auth-import-change', 'currentuser-import-change', 'authmiddleware-import-change', 'buildclerkprops-import-change', 'verifytoken-import-change', 'verifyjwt-import-change', 'decodejwt-import-change', 'signjwt-import-change', 'constants-import-change', 'createauthenticaterequest-import-change', 'createisomorphicrequest-import-change', 'clerk-import-change', 'isclerkapiresponserror-import-change', 'isemaillinkerror-import-change', 'isknownerror-import-change', 'ismetamaskerror-import-change', 'withsession-removed', 'withclerk-removed', 'withuser-removed-2', 'withclerk-hof-removed', 'withsession-hof-removed', 'withuser-hof-removed', 'next-public-clerk-js-url', 'new-localization-keys', 'removed-localization-keys', 'changed-localization-keys', 'signoutcallback-to-redirecturl', 'min-nextjs-version', 'redirecttosignin-import-path', 'redirecttosignup-import-path', 'externalaccount-avatarurl', 'organizationmembershippublicuserdata-profileimageurl'])),

package/dist/versions/core-2/nextjs/auth-middleware-deprecated.md

@@ -6,9 +6,9 @@ matcherFlags: 'm'
 warning: true
 ---
 
-The [`authMiddleware`](https://clerk.com/docs/references/nextjs/auth-middleware) API from `@clerk/nextjs` has been marked as deprecated. We highly recommend using [`clerkMiddleware`](https://beta.clerk.com/docs/references/nextjs/clerk-middleware) going forward. `clerkMiddleware` protects no routes by default and you need to add your individual routes you want to opt into protection. Here's an example of having all routes public except for everything under `/dashboard`.
+The [`authMiddleware`](https://clerk.com/docs/references/nextjs/auth-middleware) API from `@clerk/nextjs` has been marked as deprecated. We highly recommend using [`clerkMiddleware`](https://clerk.com/docs/references/nextjs/clerk-middleware) going forward. `clerkMiddleware` protects no routes by default and you need to add your individual routes you want to opt into protection. Here's an example of having all routes public except for everything under `/dashboard`.
 
-For more documentation on the new `clerkMiddleware` function, check out [our official docs](https://beta.clerk.com/docs/references/nextjs/clerk-middleware)!
+For more documentation on the new `clerkMiddleware` function, check out [our official docs](https://clerk.com/docs/references/nextjs/clerk-middleware)!
 
 **Before:**
 

package/dist/versions/core-2/nextjs/authmiddleware-import-change.md

@@ -6,7 +6,7 @@ category: 'top-level-imports'
 replaceWithString: 'nextjs/server'
 ---
 
-The `authMiddleware` import path has changed from `@clerk/nextjs` to `@clerk/nextjs/server`, as this is a helper that should be only used on the server side. You must update your import path in order for it to work correctly. Note as well that `authMiddleware` is deprecated as of this release, and we recommend [using `clerkMiddleware` instead](https://beta.clerk.com/docs/references/nextjs/clerk-middleware). Example below of the fix that needs to be made:
+The `authMiddleware` import path has changed from `@clerk/nextjs` to `@clerk/nextjs/server`, as this is a helper that should be only used on the server side. You must update your import path in order for it to work correctly. Note as well that `authMiddleware` is deprecated as of this release, and we recommend [using `clerkMiddleware` instead](https://clerk.com/docs/references/nextjs/clerk-middleware). Example below of the fix that needs to be made:
 
 ```diff
 - import { authMiddleware } from "@clerk/nextjs"

package/dist/versions/core-2/nextjs/with-clerk-middleware-removed.md

@@ -4,7 +4,7 @@ category: 'middleware'
 matcher: "withClerkMiddleware\\("
 ---
 
-`withClerkMiddleware` has been deprecated and is now removed in v5. We recommend moving to `clerkMiddleware` instead. Please read the [clerkMiddleware guide](https://beta.clerk.com/docs/references/nextjs/clerk-middleware) for more details. Here’s an example of how a simple middleware setup might look before and after.
+`withClerkMiddleware` has been deprecated and is now removed in v5. We recommend moving to `clerkMiddleware` instead. Please read the [clerkMiddleware guide](https://clerk.com/docs/references/nextjs/clerk-middleware) for more details. Here’s an example of how a simple middleware setup might look before and after.
 
 ```js
 // Before: using withClerkMiddleware

package/dist/versions/core-2/node/createclerkexpressrequireauth-public-key-required.md

@@ -1,7 +1,7 @@
 ---
-title: "`createClerkExpressRequireAuth` requires publishable key"
+title: '`createClerkExpressRequireAuth` requires publishable key'
+matcher: 'createClerkExpressRequireAuth'
 warning: true
-matcher: `createClerkExpressRequireAuth`
 ---
 
 The `createClerkExpressRequireAuth` method now requires a clerk public key in order to work correctly. It can be passed in as a parameter directly, or picked up via environment variable. An error will be thrown now if there's no public key provided, this was not previously the case.

package/dist/versions/core-2/node/createclerkexpresswithauth-publickey-required.md

@@ -0,0 +1,7 @@
+---
+title: '`createClerkExpressWithAuth` requires publishable key'
+warning: true
+matcher: 'createClerkExpressWithAuth'
+---
+
+The `createClerkExpressWithAuth` method now requires a clerk public key in order to work correctly. It can be passed in as a parameter directly, or picked up via environment variable. An error will be thrown now if there's no public key provided, this was not previously the case.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clerk/upgrade",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "type": "module",
   "main": "dist/cli.js",