@clerk/upgrade 1.0.2 → 1.0.3

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

@@ -0,0 +1,628 @@
+---
+title: "Upgrading Javascript to Core 2"
+description: "Learn how to upgrade Clerk's Javascript SDK to the latest version."
+---
+
+{/* 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. */}
+
+# Upgrading `@clerk/clerk-js` to Core 2
+
+Core 2 is included in the Javascript SDK starting with version 5. This new version ships with an improved design and UX for its built-in components, no "flash of white page" when authenticating, and a variety of smaller DX improvements and housekeeping items. Each of the potentially breaking changes are detailed in this guide, below.
+
+By the end of this guide, you'll have successfully upgraded your JS project to use `@clerk/clerk-js` v5. You'll learn how to update your dependencies, resolve breaking changes, and find deprecations. Step-by-step instructions will lead you through the process.
+
+## Preparing to upgrade
+
+Before uprading, it's highly recommended that you update your Clerk SDKs to the latest Core 1 version (`npm i @clerk/clerk-js@4`). Some changes required for Core 2 SDKs can be applied incrementally to the v5 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.
+
+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.
+
+## Updating to Core 2
+
+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 @clerk/clerk-js
+    ```
+
+    ```bash filename="terminal"
+    yarn add @clerk/clerk-js
+    ```
+
+    ```bash filename="terminal"
+    pnpm add @clerk/clerk-js
+    ```
+
+</CodeBlockTabs>
+
+## CLI upgrade helper
+
+Clerk now provides a `@clerk/upgrade` CLI tool that you can use to ease the upgrade process. The tool will scan your codebase and produce a list of changes you'll need to apply to your project. It should catch the vast majority of the changes needed for a successful upgrade to any SDK including Core 2. This can save you a lot of time reading through changes that don't apply to your project.
+
+To run the CLI tool, navigate to your project and run it in the terminal:
+
+<CodeBlockTabs type="installer" options={["npm", "yarn", "pnpm"]}>
+  ```bash filename="terminal"
+  npx @clerk/upgrade
+  ```
+
+```bash filename="terminal"
+yarn dlx @clerk/upgrade
+```
+
+```bash filename="terminal"
+pnpm dlx @clerk/upgrade
+```
+
+</CodeBlockTabs>
+
+If you are having trouble with `npx`, it's also possible to install directly with `npm i @clerk/upgrade -g`, and can then be run with the `clerk-upgrade` command.
+
+## Breaking Changes
+
+### Component design adjustments
+
+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.
+
+[More detail on these changes &raquo;](component-redesign)
+
+### After sign up/in/out default value change
+
+Defining redirect URLs for after sign up, in, and/or out via the Clerk dashboard has been removed in Core 2. In your Clerk dashboard, under "paths", there is a section called "Component paths", where URLs could be defined that had a deprecation warning. In Core 2, this functionality has been removed, and specifying redirect paths via the dashboard will no longer work. If you need to pass a redirect URL for after sign in/up/out, there are [a few different ways this can be done](https://clerk.com/docs/account-portal/custom-redirects), from environment variables to middleware to supplying them directly to the relevant components.
+
+As part of this change, the default URL for each of these props has been set to `/`, so if you are passing `/` explicitly to any one of the above props, that line is no longer necessary and can be removed.
+
+```diff
+- <UserButton afterSignOutUrl='/' />
++ <UserButton />
+```
+
+### `afterSignXUrl` changes
+
+Some changes are being made to the way that "after sign up/in url"s and redirect url props are handled as part of this new version, in order to make behavior more clear and predictable.
+
+> We will refer to these urls as `afterSignXUrl` where `X` could be `Up` or `In` depending on the context.
+
+Previously, setting `afterSignInUrl` or `afterSignOutUrl` would only actually redirect some of the time. If the user clicks on any form of link that takes them to a sign up/in page, Clerk automatically sets `redirect_url` in the querystring such that after the sign up or in, the user is returned back to the page they were on before. This is a common pattern for sign up/in flows, as it leads to the least interruption of the user's navigation through your app. When a `redirect_url` is present, any value passed to `afterSignInUrl` or `afterSignUpUrl` is ignored. However, if the user navigates directly to a sign up/in page, there’s no redirect url in the querystring and in this case the `afterSignInUrl` or `afterSignOutUrl` would take effect. This behavior was not intuitive and didn't give a way to force a redirect after sign up/in, so the behavior is changing to address both of these issues.
+
+All `afterSignXUrl` props and `CLERK_AFTER_SIGN_X_URL` environment variables have been removed, and should be replaced by one of the following options:
+
+- `signXForceRedirectUrl` / `CLERK_SIGN_X_FORCE_REDIRECT_URL` - if set, Clerk will always redirect to provided URL, regardless of what page the user was on before. Use this option with caution, as it will interrupt the user’s flow by taking them away from the page they were on before.
+- `signXFallbackRedirectUrl` / `CLERK_SIGN_UP_FALLBACK_REDIRECT_URL` - if set, this will mirror the previous behavior, only redirecting to the provided URL if there is no `redirect_url` in the querystring.
+
+If neither value is set, Clerk will redirect to the `redirect_url` if present, otherwise it will redirect to `/`. If you'd like to retain the current behavior of your app without any changes, you can switch `afterSignXUrl` with `signXFallbackRedirectUrl` as such:
+
+```diff
+- <SignIn afterSignInUrl='/foo' />
++ <SignIn signInFallbackRedirectUrl='/foo' />
+```
+
+### Removed: `orgs` claim on JWT
+
+In the previous version of Clerk's SDKs, if you decode the session token that Clerk returns from the server, you'll currently find an `orgs` claim on it. It lists all the orgs associated with the given user. Now, Clerk returns the `org_id`, `org_slug`, and `org_role` of the **active** organization.
+
+The `orgs` claim was part of the `JwtPayload`. Here are a few examples of where the `JwtPayload` could be found.
+
+<Accordion titles={["Next.js", "Fastify", "@clerk/backend", "@clerk/clerk-sdk-node"]} heading="h5">
+  <AccordionPanel>
+    ```typescript filename="Next.js"
+    import { getAuth } from "@clerk/nextjs/server"
+    const claims: JwtPayload = getAuth(request).sessionClaims
+
+    import { getAuth } from "@clerk/ssr.server"
+    const claims: JwtPayload = (await getAuth(request)).sessionClaims
+    ```
+
+  </AccordionPanel>
+  <AccordionPanel>
+    ```typescript filename="Fastify"
+    import { getAuth } from "@clerk/fastify"
+    const claims: JwtPayload = (await getAuth(request)).sessionClaims
+    ```
+  </AccordionPanel>
+  <AccordionPanel>
+    ```typescript filename="@clerk/backend"
+    import { createClerkClient } from "@clerk/backend"
+
+    const clerkClient = createClerkClient({ secretKey: "" })
+    const requestState = await clerkClient.authenticateRequest(
+      request,
+      { publishableKey: "" }
+    )
+    const claims: JwtPayload = requestState.toAuth().sessionClaims
+    ```
+
+  </AccordionPanel>
+  <AccordionPanel>
+    ```typescript filename="@clerk/clerk-sdk-node"
+    import { clerkClient } from "@clerk/clerk-sdk-node"
+
+    router.use((...args) => clerkClient.expressRequireAuth()(...args))
+    router.get("/me", async (req, reply: Response) => {
+      return reply.json({ auth: req.auth })
+    })
+    ```
+
+  </AccordionPanel>
+</Accordion>
+
+If you would like to have your JWT return all of the user's organizations, you can create a [custom JWT template](/docs/backend-requests/making/jwt-templates) in your dashboard. Add `{ "orgs": "user.organizations" }` to it.
+
+### Path routing is now the default
+
+On components like [`<SignIn />`](/docs/components/authentication/sign-in) you can define the props `routing` and `path`. `routing` can be set to `'hash' | 'path' | 'virtual'` and describes the routing strategy that should be used. `path` defines where the component is mounted when `routing="path"` is used.
+
+In the latest version, the **default** `routing` strategy has become `'path'`. Unless you change the `routing` prop, you'll need to define the `path` prop. The affected components are:
+
+- `<SignIn />`
+- `<SignUp />`
+- `<UserProfile />`
+- `<CreateOrganization />`
+- `<OrganizationProfile />`
+
+Here's how you'd use the components going forward:
+
+```jsx
+<SignIn path="/sign-in" />
+<SignUp path="/sign-up" />
+<UserProfile path="/user-profile" />
+<CreateOrganization path="/create-org" />
+<OrganizationProfile path="/org-profile" />
+```
+
+If you don't define the `path` prop an error will be thrown. Of course, you can still use `routing="hash"` or `routing="virtual"`.
+
+```jsx
+<UserProfile routing="hash" />
+<OrganizationProfile routing="virtual" />
+```
+
+
+
+### Image URL Name Consolidation
+
+There are a number of Clerk primitives that contain images, and previously they each had different property names, like `avatarUrl`, `logoUrl`, `profileImageUrl`, etc. In order to promote consistency and make it simpler for developers to know where to find associated images, all image properties are now named `imageUrl`. See the list below for all affected classes:
+
+<Accordion titles={["<code>Organization.logoUrl</code> -&gt; <code>Organization.imageUrl</code>", "<code>User.profileImageUrl</code> -&gt; <code>.imageUrl</code>", "<code>ExternalAccount.avatarUrl</code> -&gt; <code>.imageUrl</code>", "<code>OrganizationMembershipPublicUserData.profileImageUrl</code> -&gt; <code>.imageUrl</code>"]}>
+  <AccordionPanel>    
+    The `logoUrl` property of any [`Organization` object](https://clerk.com/docs/references/javascript/organization/organization#organization) has been changed to `imageUrl`.
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `profileImageUrl` property of any `User` object has been changed to `imageUrl`.
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `avatarUrl` property of any [`ExternalAcccount` object](https://clerk.com/docs/references/javascript/external-account) has been changed to `imageUrl`.
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `profileImageUrl` property of any `OrganizationMembershipPublicUserData` object has been changed to `imageUrl`.
+  </AccordionPanel>
+</Accordion>
+
+### Changes to pagination arguments for some functions
+
+There were some changes made to pagination-related arguments passed into functions, in order to make it more clear how to control paginated results. See each function impacted by these changes below:
+
+<Accordion titles={["<code>Organization.getRoles</code> arguments changed", "<code>Organization.getMemberships</code> arguments changed", "<code>Organization.getDomains</code> arguments changed", "<code>Organization.getInvitations</code> arguments changed", "<code>Organization.getMembershipRequests</code> arguments changed", "<code>User.getOrganizationInvitations</code> arguments changed", "<code>User.getOrganizationSuggestions</code> arguments changed", "<code>User.getOrganizationMemberships</code> arguments changed"]}>
+  <AccordionPanel>    
+    There have been a couple changes to the pagination arguments that can be passed into this function - `limit` has been renamed to `pageSize`, and `offset` has been renamed to `initialPage`. This will help to make it more clear and simple to reason about pagination control. Example of how changes might look below:
+    
+    ```diff
+      const { data } = await organization.getRoles({
+    -   limit: 10,
+    +   pageSize: 10,
+    -   offset: 10,
+    +   initialPage: 2,
+      })
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    There have been a couple changes to the pagination arguments that can be passed into this function - `limit` has been renamed to `pageSize`, and `offset` has been renamed to `initialPage`. This will help to make it more clear and simple to reason about pagination control. Example of how changes might look below:
+    
+    ```diff
+      const { data } = await organization.getMemberships({
+    -   limit: 10,
+    +   pageSize: 10,
+    -   offset: 10,
+    +   initialPage: 2,
+      })
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    There have been a couple changes to the pagination arguments that can be passed into this function - `limit` has been renamed to `pageSize`, and `offset` has been renamed to `initialPage`. This will help to make it more clear and simple to reason about pagination control. Example of how changes might look below:
+    
+    ```diff
+      const { data } = await organization.getDomains({
+    -   limit: 10,
+    +   pageSize: 10,
+    -   offset: 10,
+    +   initialPage: 2,
+      })
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    There have been a couple changes to the pagination arguments that can be passed into this function - `limit` has been renamed to `pageSize`, and `offset` has been renamed to `initialPage`. This will help to make it more clear and simple to reason about pagination control. Example of how changes might look below:
+    
+    ```diff
+      const { data } = await organization.getInvitations({
+    -   limit: 10,
+    +   pageSize: 10,
+    -   offset: 10,
+    +   initialPage: 2,
+      })
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    There have been a couple changes to the pagination arguments that can be passed into this function - `limit` has been renamed to `pageSize`, and `offset` has been renamed to `initialPage`. This will help to make it more clear and simple to reason about pagination control. Example of how changes might look below:
+    
+    ```diff
+      const { data } = await organization.getMembershipRequests({
+    -   limit: 10,
+    +   pageSize: 10,
+    -   offset: 10,
+    +   initialPage: 2,
+      })
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    There have been a couple changes to the pagination arguments that can be passed into this function - `limit` has been renamed to `pageSize`, and `offset` has been renamed to `initialPage`. This will help to make it more clear and simple to reason about pagination control. Example of how changes might look below:
+    
+    ```diff
+      const { data } = await user.getOrganizationInvitations({
+    -   limit: 10,
+    +   pageSize: 10,
+    -   offset: 10,
+    +   initialPage: 2,
+      })
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    There have been a couple changes to the pagination arguments that can be passed into this function - `limit` has been renamed to `pageSize`, and `offset` has been renamed to `initialPage`. This will help to make it more clear and simple to reason about pagination control. Example of how changes might look below:
+    
+    ```diff
+      const { data } = await user.getOrganizationSuggestions({
+    -   limit: 10,
+    +   pageSize: 10,
+    -   offset: 10,
+    +   initialPage: 2,
+      })
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    There have been a couple changes to the pagination arguments that can be passed into this function - `limit` has been renamed to `pageSize`, and `offset` has been renamed to `initialPage`. This will help to make it more clear and simple to reason about pagination control. Example of how changes might look below:
+    
+    ```diff
+      const { data } = await user.getOrganizationMemberships({
+    -   limit: 10,
+    +   pageSize: 10,
+    -   offset: 10,
+    +   initialPage: 2,
+      })
+    ```
+  </AccordionPanel>
+</Accordion>
+
+### Changes to some function return signatures
+
+There have been changes to return signatures for some functions. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. This change also aligns the response shape with what is returned from the Clerk backend API. Each impacted function is listed below, along with code examples:
+
+<Accordion titles={["<code>Users.getOrganizationMembershipList</code> return signature changed", "<code>Users.getOrganizationInvitationList</code> return signature changed", "<code>Organizations.getOrganizationInvitationList</code> return type changed", "<code>User.getOrganizationMembershipList</code> return type changed", "<code>Users.getOrganizationList</code> return signature changed", "<code>Organization.getOrganizationList</code> return type changed", "<code>Invitations.getInvitationList</code> return signature changed", "<code>Sessions.getSessionList</code> return signature changed", "<code>Users.getUserList</code> return signature changed", "<code>AllowlistIdentifiers.getAllowlistIdentifierList</code> return signature changed", "<code>Clients.getClientList</code> return signature changed", "<code>RedirectUrls.getRedirectUrlList</code> return signature changed", "<code>Users.getUserOauthAccessToken</code> return signature changed"]}>
+  <AccordionPanel>    
+    The response payload of `Users.getOrganizationMembershipList` was changed as part of the core 2 release. Rather than directly returning ` data`, the return signature is now `{ data, totalCount }`. Since backend API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily, and this change in the backend SDK aligns the response shape with what the backend API returns directly.
+    
+    Here's an example of how the response shape would change with this modification:
+    
+    ```diff
+    - const data = await clerkClient.users.getOrganizationMembershipList()
+    + const { data, totalCount } = await clerkClient.users.getOrganizationMembershipList()
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The response payload of `Users.getOrganizationInvitationList` was changed as part of the core 2 release. Rather than directly returning ` data`, the return signature is now `{ data, totalCount }`. Since backend API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily, and this change in the backend SDK aligns the response shape with what the backend API returns directly.
+    
+    Here's an example of how the response shape would change with this modification:
+    
+    ```diff
+    - const data = await clerkClient.users.getOrganizationInvitationList()
+    + const { data, totalCount } = await clerkClient.users.getOrganizationInvitationList()
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below:
+    
+    ```diff
+      const data = await clerkClient.organizations.getOrganizationInvitationList({
+        organizationId: "...",
+      })
+    
+    - data.forEach(() => {})
+    + data.data.forEach(() => {})
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below:
+    
+    ```diff
+      const { user } = useUser()
+      const membershipList = user.getOrganizationMembershipList()
+    
+    - membershipList.forEach(() => {})
+    + membershipList.data.forEach(() => {})
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The response payload of `Users.getOrganizationList` was changed as part of the core 2 release. Rather than directly returning ` data`, the return signature is now `{ data, totalCount }`. Since backend API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily, and this change in the backend SDK aligns the response shape with what the backend API returns directly.
+    
+    Here's an example of how the response shape would change with this modification:
+    
+    ```diff
+    - const data = await clerkClient.users.getOrganizationList()
+    + const { data, totalCount } = await clerkClient.users.getOrganizationList()
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The return type for this function was previously `[Items]` but has now been updated to `{ data: [Items], totalCount: number }`. Since Clerk's API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily. A before/after code example can be seen below:
+    
+    ```diff
+      const { organization } = useOrganization()
+      const orgList = organization.getOrganizationList()
+    
+    - orgList.forEach(() => {})
+    + orgList.data.forEach(() => {})
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The response payload of `Invitations.getInvitationList` was changed as part of the core 2 release. Rather than directly returning ` data`, the return signature is now `{ data, totalCount }`. Since backend API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily, and this change in the backend SDK aligns the response shape with what the backend API returns directly.
+    
+    Here's an example of how the response shape would change with this modification:
+    
+    ```diff
+    - const data = await clerkClient.invitations.getInvitationList()
+    + const { data, totalCount } = await clerkClient.invitations.getInvitationList()
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The response payload of `Sessions.getSessionList` was changed as part of the core 2 release. Rather than directly returning ` data`, the return signature is now `{ data, totalCount }`. Since backend API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily, and this change in the backend SDK aligns the response shape with what the backend API returns directly.
+    
+    Here's an example of how the response shape would change with this modification:
+    
+    ```diff
+    - const data = await clerkClient.sessions.getSessionList()
+    + const { data, totalCount } = await clerkClient.sessions.getSessionList()
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The response payload of `Users.getUserList` was changed as part of the core 2 release. Rather than directly returning ` data`, the return signature is now `{ data, totalCount }`. Since backend API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily, and this change in the backend SDK aligns the response shape with what the backend API returns directly.
+    
+    Here's an example of how the response shape would change with this modification:
+    
+    ```diff
+    - const data = await clerkClient.users.getUserList()
+    + const { data, totalCount } = await clerkClient.users.getUserList()
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The response payload of `AllowlistIdentifiers.getAllowlistIdentifierList` was changed as part of the core 2 release. Rather than directly returning ` data`, the return signature is now `{ data, totalCount }`. Since backend API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily, and this change in the backend SDK aligns the response shape with what the backend API returns directly.
+    
+    Here's an example of how the response shape would change with this modification:
+    
+    ```diff
+    - const data = await clerkClient.allowlistIdentifiers.getAllowlistIdentifierList()
+    + const { data, totalCount } = await clerkClient.allowlistIdentifiers.getAllowlistIdentifierList()
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The response payload of `Clients.getClientList` was changed as part of the core 2 release. Rather than directly returning ` data`, the return signature is now `{ data, totalCount }`. Since backend API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily, and this change in the backend SDK aligns the response shape with what the backend API returns directly.
+    
+    Here's an example of how the response shape would change with this modification:
+    
+    ```diff
+    - const data = await clerkClient.clients.getClientList()
+    + const { data, totalCount } = await clerkClient.allowlistIdentifiers.getClientList()
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The response payload of `RedirectUrls.getRedirectUrlList` was changed as part of the core 2 release. Rather than directly returning ` data`, the return signature is now `{ data, totalCount }`. Since backend API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily, and this change in the backend SDK aligns the response shape with what the backend API returns directly.
+    
+    Here's an example of how the response shape would change with this modification:
+    
+    ```diff
+    - const data = await clerkClient.redirectUrls.getRedirectUrlList()
+    + const { data, totalCount } = await clerkClient.redirectUrls.getRedirectUrlList()
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The response payload of `Users.getUserOauthAccessToken` was changed as part of the core 2 release. Rather than directly returning ` data`, the return signature is now `{ data, totalCount }`. Since backend API responses are paginated, the `totalCount` property is helpful in determining the total number of items in the response easily, and this change in the backend SDK aligns the response shape with what the backend API returns directly.
+    
+    Here's an example of how the response shape would change with this modification:
+    
+    ```diff
+    - const data = await clerkClient.users.getUserOauthAccessToken()
+    + const { data, totalCount } = await clerkClient.users.getUserOauthAccessToken()
+    ```
+  </AccordionPanel>
+</Accordion>
+
+### Deprecation removals & housekeeping
+
+As part of this major version, a number of previously deprecated props, arugments, methods, etc. have been removed. Additionally there have been some changes to things that are only used internally, or only used very rarely. It's highly unlikely that any given app will encounter any of these items, but they are all breaking changes, so they have all been documented below.
+
+<Callout type='info'>
+  For this section more than any other one, please use the CLI upgrade tool (`npx @clerk/upgrade`). Changes in this
+  section are very unlikely to appear in your codebase, the tool will save time looking for them.
+</Callout>
+
+#### Deprecation removals
+
+<Accordion titles={["<code>User.update({ password: &#39;x&#39; })</code> -&gt; <code>User.updatePassword(&#39;x&#39;)</code>", "<code>Clerk.experimental_canUseCaptcha</code> property removed", "<code>Clerk.experimental_captchaURL</code> property removed", "<code>Clerk.experimental_captchaSiteKey</code> property removed", "<code>Clerk.__unstable__invitationUpdate</code> removed", "<code>Clerk.__unstable__membershipUpdate</code> removed", "<code>redirect_url</code> -&gt; <code>redirectUrl</code> as param of <code>User.createExternalAccount</code>", "<code>generatedSignature</code> -&gt; <code>signature</code> as param of <code>Signup.attemptWeb3WalletVerification</code>"]}>
+  <AccordionPanel>    
+    If you are updating a user's password via the [`User.update` method](https://clerk.com/docs/references/javascript/user/user#update), it must be changed to [`User.updatePassword`](https://clerk.com/docs/references/javascript/user/password-management#update-password) instead. This method will require the current password as well as the desired new password. We made this update to improve the security of password changes. Example below:
+    
+    ```diff
+    - user.update({ password: 'foo' });
+    
+    + user.updatePassword({
+    +   currentPassword: 'bar',
+    +   newPassword: 'foo',
+    +   signOutOfOtherSessions: true,
+    + });
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The experimental property `Clerk.experimental_canUseCaptcha` has been removed. There is no replacement for this functionality currently. If this is problematic for your application, please [reach out to our support team](https://clerk.com/support)!
+  </AccordionPanel>
+  <AccordionPanel>    
+    The experimental property `Clerk.experimental_captchaURL` has been removed. There is no replacement for this functionality currently. If this is problematic for your application, please [reach out to our support team](https://clerk.com/support)!
+  </AccordionPanel>
+  <AccordionPanel>    
+    The experimental property `Clerk.experimental_captchaSiteKey` has been removed. There is no replacement for this functionality currently. If this is problematic for your application, please [reach out to our support team](https://clerk.com/support)!
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `Clerk.__unstable__invitationUpdate` experimental property has been removed, and has no current replacement. If this is an issue in your codebase, please [reach out to Clerk support](https://clerk.com/support)!
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `Clerk.__unstable__membershipUpdate` experimental property has been removed, and has no current replacement. If this is an issue in your codebase, please [reach out to Clerk support](https://clerk.com/support)!
+  </AccordionPanel>
+  <AccordionPanel>    
+    The param `redirect_url` of [`User.createExternalAccount`](https://clerk.com/docs/references/javascript/user/create-metadata#create-external-account) has been updated to `redirectUrl`. This is a simple text replacement without any signature changes.
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `generatedSignature` param to [`Signup.attemptWeb3WalletVerification()`](https://clerk.com/docs/references/javascript/sign-up/web3-verification#attempt-web3-wallet-verification) has been removed. Instead, use the `signature` param. Note that this param takes a string, where the `generatedSignature` param took a function, so both key and value will need to change.
+    
+    ```js
+    // before
+    s.attemptWeb3WalletVerification({
+      generatedSignature: async () => 'signatureString',
+    });
+    
+    // after
+    s.attemptWeb3WalletVerification({ signature: 'signatureString' });
+    
+    // or, if you still need to fetch the signature async
+    const signatureString = await (async () => 'signatureString');
+    s.attemptWeb3WalletVerification({ signature: signatureString });
+    ```
+  </AccordionPanel>
+</Accordion>
+
+#### Other Breaking changes
+
+<Accordion titles={["<code>setSession</code> -&gt; <code>setActive</code>", "<code>Organization.create(&#39;x&#39;)</code> -&gt; <code>Organization.create({ name: &#39;x&#39; })</code>", "<code>Organization.getPendingInvitations()</code> -&gt; <code>Organization.getInvitations({ status: &#39;pending&#39; })</code>", "<code>MagicLinkError</code> -&gt; <code>EmailLinkError</code>", "<code>isMagicLinkError</code> -&gt; <code>isEmailLinkError</code>", "<code>MagicLinkErrorCode</code> -&gt; <code>EmailLinkErrorCode</code>", "<code>useMagicLink</code> -&gt; <code>useEmailLink</code>", "<code>handleMagicLinkVerification</code> -&gt; <code>handleEmailLinkVerification</code>", "<code>[User|OrganizationMembershipPublicData].profileImageUrl</code> -&gt; <code>[User|OrganizationMembershipPublicData].imageUrl</code>", "<code>Clerk.getOrganizationMemberships()</code> -&gt; <code>user.getOrganizationMemberships()</code>", "<code>lastOrganizationInvitation</code> and <code>lastOrganizationMember</code> dropped from event emitter", "<code>Clerk.redirectToHome()</code> removed", "<code>Clerk.isReady()</code> removed", "Replace <code>signOutCallback</code> prop on <code>SignOutButton</code> with <code>redirectUrl</code>", "<code>Clerk</code> import changed"]}>
+  <AccordionPanel>    
+    `setSession` should be replaced with `setActive`. The format of the parameters has changed slightly - `setActive` takes an object where `setSession` took params directly. The `setActive` function also can accept an `organization` param that is used to set the currently active organization. The return signature did not change. Read the [API documentation](/docs/references/javascript/clerk/session-methods#set-active) for more detail. This function should be expected to be returned from one of the following Clerk hooks: `useSessionList`, `useSignUp`, or `useSignIn`. Some migration examples:
+    
+    ```diff
+    - await setSession('sessionID', () => void)
+    + await setActive({ session: 'sessionID',  beforeEmit: () => void })
+    
+    - await setSession(sessionObj)
+    + await setActive({ session: sessionObj })
+    
+    - await setSession(sessionObj, () => void)
+    + await setActive({ session: sessionObj,  beforeEmit: () => void })
+    ```
+    
+    `setActive` also supports setting an active organization:
+    
+    ```js
+    await setActive({
+      session: 'sessionID',
+      organization: 'orgID',
+      beforeEmit: () => void
+    })
+    
+    await setActive({
+      session: sessionObj,
+      organization: orgObj,
+      beforeEmit: () => void
+    })
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    Passing a string as an argument to `Organization.create` is no longer possible - instead, pass an object with the `name` property.
+    
+    ```diff
+    - Organization.create('...');
+    + Organization.create({ name: '...' });
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `Organization.getPendingInvitations()` method has been removed. You can use `Organization.getInvitations` instead.
+    
+    ```diff
+    - Organization.getPendingInvitations();
+    + Organization.getInvitations({ status: 'pending' });
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    Across Clerk's documentation and codebases the term "magic link" was changed to "email link" as it more accurately reflects the functionality.
+  </AccordionPanel>
+  <AccordionPanel>    
+    Across Clerk's documentation and codebases the term "magic link" was changed to "email link" as it more accurately reflects the functionality.
+  </AccordionPanel>
+  <AccordionPanel>    
+    Across Clerk's documentation and codebases the term "magic link" was changed to "email link" as it more accurately reflects the functionality.
+  </AccordionPanel>
+  <AccordionPanel>    
+    Across Clerk's documentation and codebases the term "magic link" was changed to "email link" as it more accurately reflects functionality.
+  </AccordionPanel>
+  <AccordionPanel>    
+    Across Clerk's documentation and codebases the term "magic link" was changed to "email link" as it more accurately reflects functionality.
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `profileImageUrl` property of any [`User` object](https://clerk.com/docs/references/javascript/user/user#user) or [`OrganizationMembershipPublicData` object](https://github.com/clerk/javascript/blob/37f36e538d8879981f76f4a433066e057afb06de/packages/backend/src/api/resources/OrganizationMembership.ts#L31) has been changed to `imageUrl`.
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `getOrganizationMemberships` [method on the `Clerk` class](https://clerk.com/docs/references/javascript/clerk/clerk#organization) has been removed. Instead, use `getOrganizationMemberships` on a user instance.
+    
+    ```diff
+    - Clerk.getOrganizationMemberships();
+    + user.getOrganizationMemberships();
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    If you are using [`Clerk.addListener`](https://clerk.com/docs/references/javascript/clerk/clerk#add-listener) or `OrganizationContext` and utilizing either the `lastOrganizationInvitation` and/or `lastOrganizationMember` emitted events, these properties have been removed, as they were only relevant for internal use. We are not providing a way to backfill this functionality at the moment. If you are using it and this is an issue for you, please [reach out to Clerk support](https://clerk.com/support) and we can find a way to resolve the issue!
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `Clerk.redirectToHome` method has been removed. If you are looking for a generic replacement for this method, you can instead use `window.Clerk.redirectToAfterSignUp()` or `window.Clerk.redirectAfterSignIn()`.
+    
+    To set the `afterSignUpUrl` or `afterSignInUrl`, you can:
+    
+    - If not using a react-based SDK, pass the values into `Clerk.load` as such: `Clerk.load({ afterSignUpUrl: 'x', afterSignInUrl: 'y' })`
+    - If using a react-based SDK, [pass the desired values into ClerkProvider](https://clerk.com/docs/components/clerk-provider#properties)
+    - If using the Next.js SDK, set with `NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL` or `NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL`
+    - If using remix SDK, set with `CLERK_AFTER_SIGN_IN_URL` or `CLERK_AFTER_SIGN_UP_URL`
+  </AccordionPanel>
+  <AccordionPanel>    
+    We have removed the `Clerk.isReady()` function - instead, please use the `Clerk.loaded` property to check whether Clerk has completed loading.
+  </AccordionPanel>
+  <AccordionPanel>    
+    The `signOutCallback` prop on the [`<SignOutButton />` component](https://clerk.com/docs/components/unstyled/sign-out-button) has been removed. Instead, you can use the `redirectUrl` prop. Example below:
+    
+    ```diff
+      import { SignOutButton } from "@clerk/clerk-react";
+    
+      export const Signout = () => {
+        return (
+          <SignOutButton
+    -       signOutCallback={() => { window.location.href = "/your-path" }}
+    +       redirectUrl="/your-path"
+          >
+            <button>Sign Out</button>
+          </SignOutButton>
+        )
+      }
+    ```
+  </AccordionPanel>
+  <AccordionPanel>    
+    The top level `Clerk` import was changed to a named export, like `{ Clerk }`. This is just a name change and can be treated as a text replacement, no changes to the params or return types.
+    
+    ```diff
+    - import Clerk from '@clerk/clerk-js';
+    + import { Clerk } from '@clerk/clerk-js';
+    ```
+  </AccordionPanel>
+</Accordion>
+
+
+