v5 updates (#619)

Co-authored-by: Lennart <[email protected]>

docs/backend-requests/handling/nodejs.mdx

@@ -15,7 +15,7 @@ The Clerk Node SDK offers two authentication middlewares specifically for [Expre
 
 <CodeBlockTabs type="js-ts" options={["JavaScript", "TypeScript"]}>
   ```js
-  import "dotenv/config"; // To read CLERK_API_KEY
+  import "dotenv/config"; // To read CLERK_SECRET_KEY
   import { ClerkExpressWithAuth } from "@clerk/clerk-sdk-node";
   import express from "express";
 
@@ -39,7 +39,7 @@ app.listen(port, () => {
   ```
 
   ```typescript
-  import "dotenv/config"; // To read CLERK_API_KEY
+  import "dotenv/config"; // To read CLERK_SECRET_KEY
   import {
     ClerkExpressWithAuth,
     LooseAuthProp,
@@ -85,7 +85,7 @@ app.listen(port, () => {
 
 <CodeBlockTabs type="js-ts" options={["JavaScript", "TypeScript"]}>
   ```js
-  import "dotenv/config"; // To read CLERK_API_KEY
+  import "dotenv/config"; // To read CLERK_SECRET_KEY
   import { ClerkExpressRequireAuth } from '@clerk/clerk-sdk-node';
   import express from 'express';
 
@@ -114,7 +114,7 @@ app.listen(port, () => {
   ```
 
   ```typescript
-  import "dotenv/config"; // To read CLERK_API_KEY
+  import "dotenv/config"; // To read CLERK_SECRET_KEY
 import {
   ClerkExpressRequireAuth,
   RequireAuthProp,

docs/components/clerk-provider.mdx

@@ -15,12 +15,7 @@ The `<ClerkProvider>` component must be added to your React entrypoint.
   <Tab>
   The `<ClerkProvider>` component needs to access headers to authenticate correctly. This means anything wrapped by the provider will be opted into dynamic rendering at request time. If you have static-optimized or ISR pages that you would prefer not to be opted into dynamic rendering, make sure they are not wrapped by `<ClerkProvider>`.
 
-  This is easiest to accomplish by ensuring that `<ClerkProvider>` is added further down the tree to wrap route groups that explicitly need authentication instead of having the provider wrap your application root as recommended above. For example, if your project includes a set of landing/marketing pages as well as a dashboard that requires sign-in, you would create separate (marketing) and (dashboard) route groups. Adding `<ClerkProvider>` to the (dashboard)/layout.jsx layout file will ensure that only those routes are opted into dynamic rendering, allowing the marketing routes to be statically optimized.
-
-
-  <Callout type="info">
-    The root layout is a server component. If you plan to use the `<ClerkProvider>` outside the root layout, it will need to be a server component as well.
-  </Callout>
+  This is easiest to accomplish by ensuring that `<ClerkProvider>` is added further down the tree to wrap route groups that explicitly need authentication instead of having the provider wrap your application root as recommended above. For example, if your project includes a set of landing/marketing pages as well as a dashboard that requires login, you would create separate (marketing) and (dashboard) route groups. Adding `<ClerkProvider>` to the `(dashboard)/layout.jsx` layout file will ensure that only those routes are opted into dynamic rendering, allowing the marketing routes to be statically optimized.
 
     <CodeBlockTabs type="router" options={["App Router", "Pages Router"]}>
 
@@ -53,7 +48,7 @@ The `<ClerkProvider>` component must be added to your React entrypoint.
     function MyApp({ Component, pageProps }: AppProps) {
       return (
         <ClerkProvider {...pageProps}>
-        <Component {...pageProps} />
+          <Component {...pageProps} />
         </ClerkProvider>
       );
     }
@@ -94,9 +89,9 @@ The `<ClerkProvider>` component must be added to your React entrypoint.
 
 | Name                      | Type                                                                                  | Description                                                                                                                                                                                                                |
 | ------------------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `publishableKey`          | `string`                                                                              | Clerk publishable key for your instance. This can be found in your Clerk Dashboard on the **[API Keys](https://dashboard.clerk.com/last-active?path=api-keys)** page.                                                                                                                                                   |
-| `frontendApi`             | `string`                                                                              | The frontend API host for your instance. This can be found in your Clerk Dashboard on the **[API Keys](https://dashboard.clerk.com/last-active?path=api-keys)** page under the **Advanced** section.                                                                                                                                        |
-| `navigate?`               | `(to: string) => Promise<unknown> \| void`                                            | A function which takes the destination path as an argument and performs a "push" navigation.                                                                                                                               |
+| `publishableKey`          | `string`                                                                              | The Clerk publishable key for your instance. This can be found in your Clerk Dashboard on the **[API Keys](https://dashboard.clerk.com/last-active?path=api-keys)** page.                                                                                                                                                   |
+| `routerPush?` | `(to: string) => Promise<unknown> \| void`                                                                              | A function which takes the destination path as an argument and performs a "push" navigation.                                                                                                                                        |
+| `routerReplace?` | `(to: string) => Promise<unknown> \| void`                                                                              | A function which takes the destination path as an argument and performs a "replace" navigation.                                                                                                                                        |
 | `clerkJSUrl?`             | `string`                                                                              | Define the URL that `@clerk/clerk-react` should hot-load `@clerk/clerk-js` from.                                                                                                                                           |
 | `clerkJSVariant?`         | `string`                                                                              | If your web application only uses Control components, you can set this value to `headless` and load a minimal ClerkJS bundle for optimal page performance.                                                                 |
 | `clerkJSVersion?`         | `string`                                                                              | Define the npm version for `@clerk/clerk-js`.                                                                                                                                                                              |

docs/manifest.json

@@ -737,8 +737,8 @@
             "/references/backend/organization/get-organization-membership-list"
           ],
           [
-            "getPendingOrganizationInvitationList()",
-            "/references/backend/organization/get-pending-organization-invitation-list"
+            "getOrganizationInvitationList()",
+            "/references/backend/organization/get-organization-invitation-list"
           ],
           [
             "createOrganization()",

docs/organizations/updating-organizations.mdx

@@ -135,7 +135,7 @@ export default function EditOrganization({ organizationId }) {
   async function init() {
     // This is the current organization ID.
     const organizationId = "org_XXXXXXX";
-    const organizationMemberships = await window.Clerk.getOrganizationMemberships()
+    const organizationMemberships = await window.Clerk.user.getOrganizationMemberships()
     const currentMembership = organizationMemberships.find(membership 
       => membership.organization.id === organizationId);
     const currentOrganization = currentMembership.organization;

docs/organizations/viewing-memberships.mdx

@@ -7,7 +7,7 @@ description: Learn how to view organization memberships for the currently signed
 
 Clerk provides the ability for the currently signed-in user to view all the organizations they are members of.
 
-In React and Next.js applications, the [`useOrganizationList()`](/docs/references/react/use-organization-list) hook can be used to return the list of invitations or memberships for the currently active user. In JavaScript applications, the [`getOrganizationMemberships()`](/docs/references/javascript/clerk/organization-methods#get-organization-memberships) method is used to retrieve the list of organizations the current user is a part of and can be accessed through the [`Clerk` object](/docs/references/javascript/clerk/clerk).
+In React and Next.js applications, the [`useOrganizationList()`](/docs/references/react/use-organization-list) hook can be used to return the list of invitations or memberships for the currently active user. In JavaScript applications, the [`getOrganizationMemberships()`](/docs/references/javascript/user/user#get-organization-memberships) method is used to retrieve the list of organizations the current user is a part of and can be accessed through the [`User` object](/docs/references/javascript/user/user).
 
 {/* TODO (DOCS-316): Add a section about viewing all memberships for an organization.
 
@@ -17,7 +17,7 @@ You can use the `getOrganizationMembershipList()` method to retrieve a list of m
 
 ## Usage
 
-{/* TODO (DOCS-316): Update and validate these code examples. */}
+{/* TODO (DOCS-316): Update and validate these code examples. Should have Nextjs App Router and JavaScript only. */}
 
 <CodeBlockTabs type="framework" options={["Next.js", "React", "JavaScript"]}>
 ```tsx filename="pages/joined-organizations.tsx"
@@ -112,7 +112,7 @@ export default JoinedOrganizationList;
 <script>
   const list = document.getElementById("organizations_list");
   try {
-    const organizationMemberships = await window.Clerk.getOrganizationMemberships();
+    const organizationMemberships = await window.Clerk.user.getOrganizationMemberships();
 
     organizationMemberships.map((membership) => {
       const li = document.createElement("li");

docs/references/backend/organization/get-pending-organization-invitation-list.mdx → docs/references/backend/organization/get-organization-invitation-list.mdx

@@ -1,50 +1,65 @@
 ---
-title: getPendingOrganizationInvitationList()
+title: getOrganizationInvitationList()
 description: Retrieves a list of organization invitations that have not yet been accepted.
 ---
 
-# `getPendingOrganizationInvitationList()`
+# `getOrganizationInvitationList()`
 
 Retrieves a list of organization invitations that have not yet been accepted.
 
 ```tsx
 const organizationId = 'my-organization-id';
 
-const invitations = await clerkClient.organizations.getPendingOrganizationInvitationList({ organizationId });
+const invitations = await clerkClient.organizations.getOrganizationInvitationList({ organizationId });
 ```
 
-## `GetPendingOrganizationInvitationListParams`
+## `GetOrganizationInvitationListParams`
 
 | Name | Type | Description |
 | --- | --- | --- |
 | `organizationId` | `string` | The ID of the organization to retrieve the list of pending invitations from. |
+| `status?` | [ 'pending' | 'accepted' | 'status' ] | Filters the list of invitations by status. |
 | `limit?` | `number` | The number of results to return. Must be an integer greater than zero and less than 500. |
 | `offset?` | `number` | The number of results to skip. |
 
 ## Examples
 
-### `getPendingOrganizationInvitationList({ limit })`
+### `getOrganizationInvitationList({ status })`
+
+Retrieves organization invitation list that is filtered by the status of the invitation.
+
+```tsx
+const organizationId = 'my-organization-id';
+
+const invitations = await clerkClient.organizations.getOrganizationInvitationList({
+  organizationId,
+  // returns a list of invitations that have not yet been accepted
+  status: [ 'pending' ],
+});
+```
+
+### `getOrganizationInvitationList({ limit })`
 
 Retrieves organization invitation list that is filtered by the number of results.
 
 ```tsx
 const organizationId = 'my-organization-id';
 
-const invitations = await clerkClient.organizations.getPendingOrganizationInvitationList({
+const invitations = await clerkClient.organizations.getOrganizationInvitationList({
   organizationId,
   // returns the first 10 results
   limit: 10,
 });
 ```
 
-### `getPendingOrganizationInvitationList({ offset })`
+### `getOrganizationInvitationList({ offset })`
 
 Retrieves organization invitation list that is filtered by the number of results to skip.
 
 ```tsx
 const organizationId = 'my-organization-id';
 
-const invitations = await clerkClient.organizations.getPendingOrganizationInvitationList({
+const invitations = await clerkClient.organizations.getOrganizationInvitationList({
   organizationId,
   // skips the first 10 results
   offset: 10,

docs/references/backend/overview.mdx

@@ -75,7 +75,7 @@ Organization operations are exposed under `clerkClient.organizations`. The follo
 - [`getOrganization()`](/docs/references/backend/organization/get-organization)
 - [`getOrganizationList()`](/docs/references/backend/organization/get-organization-list)
 - [`getOrganizationMembershipList()`](/docs/references/backend/organization/get-organization-membership-list)
-- [`getPendingOrganizationInvitationList()`](/docs/references/backend/organization/get-pending-organization-invitation-list)
+- [`getOrganizationInvitationList()`](/docs/references/backend/organization/get-organization-invitation-list)
 
 ### Organization `create` operations
 

docs/references/javascript/organization/organization.mdx

@@ -19,7 +19,6 @@ The following examples assume:
 | `id` | `string` | The unique identifier of the related organization. |
 | `name` | `string` | The name of the related organization. |
 | `slug` | `string \| null` | The organization slug. If supplied, it must be unique for the instance. |
-| `logoUrl` (deprecated) | `string \| null` | Deprecated in favor of `imageUrl`. |
 | `imageUrl` | `string` | Holds the organization logo or default logo. Compatible with Clerk's [Image Optimization](/docs/guides/image-optimization/imageurl-image-optimization). |
 | `hasImage` | `boolean` | A getter boolean to check if the organization has an uploaded image. Returns `false` if Clerk is displaying an avatar for the organization. |
 | `membersCount` | `number` | The number of members the associated organization contains. |

docs/references/javascript/overview.mdx

@@ -71,10 +71,10 @@ Add the following script to your site's `<body>` element:
 
   // Creates asynchronous script
   const script = document.createElement('script');
-  script.setAttribute('data-clerk-frontend-api', frontendApi);
+  script.setAttribute('data-clerk-frontend-api', frontendApiUrl);
   script.setAttribute('data-clerk-publishable-key', clerkPublishableKey);
   script.async = true;
-  script.src = `https://${frontendApi}/npm/@clerk/clerk-js${version}/dist/clerk.browser.js`;
+  script.src = `https://${frontendApiUrl}/npm/@clerk/clerk-js${version}/dist/clerk.browser.js`;
 
   // Adds listener to initialize ClerkJS after it's loaded
   script.addEventListener('load', async function () {

docs/references/javascript/types/clerk-paginated-response.mdx

@@ -16,4 +16,4 @@ An interface that describes the response of a method that returns a paginated li
 
 ## Error handling
 
-Clerk's SDKs always use `Promise<ClerkPaginatedResponse<T>>`. If the promise resolves, you will get back the [properties](#properties) listed above. If the promise is rejected, you will receive a `ClerkAPIResponseError` or network error.
+Clerk's SDKs always use `Promise<ClerkPaginatedResponse<T>>`. If the promise resolves, you will get back the [properties](#properties) listed above. If the promise is rejected, you will receive a `ClerkAPIResponseError` or network error.

docs/references/javascript/user/user.mdx

@@ -23,7 +23,6 @@ The ClerkJS SDK provides some helper [methods](#methods) on the `User` object to
 | `fullName` | `string \| null` | The user's full name. |
 | `username` | `string \| null` | The user's username. |
 | `hasImage` | `boolean` | A getter boolean to check if the user has uploaded an image or one was copied from OAuth. Returns `false` if Clerk is displaying an avatar for the user. |
-| `profileImageUrl` (deprecated) | `string \| null` | Deprecated in favor of `image_url`. |
 | `imageUrl` | `string` | Holds the default avatar or user's uploaded profile image. Compatible with Clerk's [Image Optimization](/docs/guides/image-optimization/imageurl-image-optimization). |
 | `primaryEmailAddress` | [`EmailAddress`][email-ref] \| `null` | Information about the user's primary email address. |
 | `primaryEmailAddressId` | `string \| null` | The unique identifier for the `EmailAddress` that the user has set as primary. |