Merge branch 'main' into igor/getorganizationlist-orderby

docs/backend-requests/handling/nodejs.mdx

@@ -26,7 +26,8 @@ The Clerk Node SDK offers two authentication middlewares specifically for [Expre
   app.get(
     "/protected-endpoint",
     ClerkExpressWithAuth({
-      // ...options
+      // Add options here
+      // See the Middleware options section for more details
     }),
     (req, res) => {
       res.json(req.auth);
@@ -61,7 +62,8 @@ app.listen(port, () => {
   app.get(
     '/protected-route',
     ClerkExpressWithAuth({
-      // ...options
+      // Add options here
+      // See the Middleware options section for more details
     }),
     (req: WithAuthProp<Request>, res: Response) => {
       res.json(req.auth);
@@ -96,7 +98,8 @@ app.listen(port, () => {
   app.get(
     '/protected-endpoint',
     ClerkExpressRequireAuth({
-      // ...options
+      // Add options here
+      // See the Middleware options section for more details
     }),
     (req, res) => {
       res.json(req.auth);
@@ -135,7 +138,8 @@ declare global {
 app.get(
   '/protected-route',
   ClerkExpressRequireAuth({
-    // ...options
+    // Add options here
+    // See the Middleware options section for more details
   }),
   (req: RequireAuthProp<Request>, res) => {
     res.json(req.auth);
@@ -168,6 +172,12 @@ These options can be used with both [`ClerkExpressWithAuth`](#clerk-express-with
 
 | Name        | Type        | Description    |
 | ----------- | ----------- | -------------- |
+| `audience` | `string \| string[]` | A string or list of [audiences](https://datatracker.ietf.org/doc/html/rfc7519#section-4.1.3). If passed, it is checked against the `aud` claim in the token. |
 | `authorizedParties`| `string[]` | Can be used to validate that the `azp` claim equals any of your known origins that are permitted to generate those tokens. This is an extra security check that we highly recommend that you do. For more information, refer to [Manual JWT Verification](https://clerk.com/docs/backend-requests/handling/manual-jwt).<br />An example of the value you can pass is: `['http://localhost:4003', 'https://clerk.dev']` |
 | `jwtKey`  | `string` | Clerk's JWT session token can be verified in a networkless manner using the JWT verification key. By default, Clerk will use our well-known JWKs endpoint to fetch and cache the key for any subsequent token verification. If you use the `CLERK_JWT_KEY` environment variable or the `jwtKey` option to supply the key, Clerk will pick it up and do networkless verification for session tokens using it. For more information, refer to [Networkless Token Verification](https://clerk.com/docs/references/nodejs/token-verification#validate-the-authorized-party-of-a-session-token). |
 | `onError` | `(error: ClerkAPIResponseError) => unknown` | This function can act as a custom error handler tailored to the needs of your application.  |
+| `signInUrl` | `string` | The URL to redirect to when the user is not authenticated. |
+{/* | `strict` | `boolean` | When set to `true`, the middleware will raise an error when an unauthenticated request is made. When set to `false`, the middleware will return an empty auth object. | */}
+| `isSatellite` | `boolean \| (url: URL) => boolean` | When using Clerk's satellite feature, this should be enabled for secondary domains. |
+| `domain` | `string \| (url: URL) => boolean` | The domain used for satellites to inform Clerk where this application is deployed. |
+| `proxyUrl` | `string` | If using a proxy, specify the URL of the proxy. |

docs/components/authentication/sign-in.mdx

@@ -35,27 +35,23 @@ The following example includes basic implementation of the `<SignIn />` componen
 
 <Tabs type="framework" items={["Next.js", "React", "Remix", "Gatsby"]}>
   <Tab>
-    You can embed the `<SignIn />` component using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes). This allows you to redirect the user inside your application. The `<SignIn />` component should be mounted on a public page.
+    The following example demonstrates how you can use the `<SignIn />` component on a public page.
 
-    <CodeBlockTabs type="router" options={["App Router", "Pages Router"]}>
-      ```jsx filename="/app/sign-in/[[...sign-in]]/page.tsx"
-      import { SignIn } from "@clerk/nextjs";
+    If you would like to create a dedicated `/sign-in` page in your Next.js application, check out the [dedicated guide.](/docs/references/nextjs/custom-signup-signin-pages).
 
-      export default function Page() {
-        return <SignIn />;
-      }
-      ```
+    ```tsx filename="app/page.tsx"
+    import { SignIn, useUser } from "@clerk/nextjs";
 
-      ```jsx filename="/pages/sign-in/[[...index]].tsx"
-      import { SignIn } from "@clerk/nextjs";
+    export default function Home() {
+      const { user } = useUser();
 
-      const SignInPage = () => (
-        <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
-      );
+      if (!user) {
+        return <SignIn />;
+      }
 
-      export default SignInPage;
-      ```
-    </CodeBlockTabs>
+      return <div>Welcome!</div>;
+    }
+    ```
   </Tab>
 
   <Tab>

docs/components/authentication/sign-up.mdx

@@ -36,26 +36,23 @@ The following example includes basic implementation of the `<SignIn />` componen
 
 <Tabs type="framework" items={["Next.js", "React", "Remix", "Gatsby"]}>
   <Tab>
-    You can embed the `<SignUp />` component using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes). This allows you to redirect the user inside your application. The `<SignUp />` component should be mounted on a public page.
+    The following example demonstrates how you can use the `<SignUp />` component on a public page.
 
-    <CodeBlockTabs type="router" options={["App Router", "Pages Router"]}>
-      ```jsx filename="/app/sign-up/[[...sign-up]]/page.tsx"
-      import { SignUp } from "@clerk/nextjs";
+    If you would like to create a dedicated `/sign-up` page in your Next.js application, check out the [dedicated guide.](/docs/references/nextjs/custom-signup-signin-pages).
 
-      export default function Page() {
+    ```tsx filename="app/page.tsx"
+    import { SignUp, useUser } from "@clerk/nextjs";
+
+    export default function Home() {
+      const { user } = useUser();
+
+      if (!user) {
         return <SignUp />;
       }
-      ```
-
-      ```jsx filename="/pages/sign-up/[[...index]].tsx"
-      import { SignUp } from "@clerk/nextjs";
 
-      const SignUpPage = () => (
-        <SignUp path="/sign-up" routing="path" signInUrl="/sign-in" />
-      );
-      export default SignUpPage;
-      ```
-    </CodeBlockTabs>
+      return <div>Welcome!</div>;
+    }
+    ```
   </Tab>
 
   <Tab>

docs/components/control/clerk-loaded.mdx

@@ -13,38 +13,81 @@ The `<ClerkLoaded>` component guarantees that the Clerk object has loaded and wi
 
 <Tabs type="framework" items={["Next.js", "React", "Remix"]}>
   <Tab>
-  ```tsx filename="pages/_app.tsx"
-  import "@/styles/globals.css";
-  import { ClerkLoaded, ClerkProvider } from "@clerk/nextjs";
-  import { AppProps } from "next/app";
+  <Tabs type="router" items={["App Router", "Pages Router"]}>
+  <Tab>
+    ```tsx filename="app/layout.tsx"
+      import { ClerkProvider, ClerkLoaded, ClerkLoading } from '@clerk/nextjs'
+      import './globals.css';
+
+      export default function RootLayout({
+        children,
+      }: {
+        children: React.ReactNode
+      }) {
+        return (
+          <ClerkProvider>
+            <html lang="en">
+              <body>
+                <ClerkLoaded>
+                  {children}
+                </ClerkLoaded>
+              </body>
+            </html>
+          </ClerkProvider>
+        )
+      }
+    ```
+
+    Once you have wrapped your app with `<ClerkLoaded>`, you can access the `Clerk` object without the need to check if it exists.
+
+    ```tsx filename="app/page.tsx"
+    declare global {
+      interface Window {
+        Clerk: any;
+      }
+    }
 
-  function MyApp({ Component, pageProps }: AppProps) {
-    return (
+    export default function Home() {
+      return <div>This page uses Clerk {window.Clerk.version}; </div>;
+    }
+    ```
+    </Tab>
 
-    <ClerkProvider {...pageProps}>
-      <ClerkLoaded>
-        <Component {...pageProps} />
-      </ClerkLoaded>
-    </ClerkProvider>
-    ); 
-  }
+    <Tab>
+    ```tsx filename="pages/_app.tsx"
+    import "@/styles/globals.css";
+    import { ClerkLoaded, ClerkProvider } from "@clerk/nextjs";
+    import { AppProps } from "next/app";
 
-  export default MyApp;
-  ```
+    function MyApp({ Component, pageProps }: AppProps) {
+      return (
 
-  Once you have wrapped your app with `<ClerkLoaded>`, you can access the `Clerk` object without the need to check if it exists.
+      <ClerkProvider {...pageProps}>
+        <ClerkLoaded>
+          <Component {...pageProps} />
+        </ClerkLoaded>
+      </ClerkProvider>
+      );
+    }
 
-  ```tsx filename="pages/index.tsx"
-  declare global {
-    interface Window {
-      Clerk: any;
+    export default MyApp;
+    ```
+
+    Once you have wrapped your app with `<ClerkLoaded>`, you can access the `Clerk` object without the need to check if it exists.
+
+    ```tsx filename="pages/index.tsx"
+    declare global {
+      interface Window {
+        Clerk: any;
+      }
     }
-  }
 
-  export default function Home() {
-    return <div>This page uses Clerk {window.Clerk.version}; </div>;
-  }
-  ```
+    export default function Home() {
+      return <div>This page uses Clerk {window.Clerk.version}; </div>;
+    }
+    ```
+    </Tab>
+    </Tabs>
   </Tab>
 
   <Tab>
@@ -65,7 +108,7 @@ The `<ClerkLoaded>` component guarantees that the Clerk object has loaded and wi
           <Page />
         </ClerkLoaded>
       </ClerkProvider>
-    ); 
+    );
   }
 
   function Page() {
@@ -77,7 +120,7 @@ The `<ClerkLoaded>` component guarantees that the Clerk object has loaded and wi
 
     return (
       <div>The content </div>
-    ); 
+    );
   }
 
   export default App;
@@ -102,4 +145,4 @@ The `<ClerkLoaded>` component guarantees that the Clerk object has loaded and wi
   </Tab>
 </Tabs>
 
-</InjectKeys>
+</InjectKeys>

docs/components/control/clerk-loading.mdx

@@ -13,27 +13,55 @@ The `<ClerkLoading>` renders its children while Clerk is loading, and is helpful
 
 <Tabs type="framework" items={["Next.js", "React", "Remix"]}>
   <Tab>
-  ```tsx filename="pages/_app.tsx"
-  import "@/styles/globals.css";
-  import { ClerkLoaded, ClerkLoading, ClerkProvider } from "@clerk/nextjs";
-  import { AppProps } from "next/app";
-
-  function MyApp({ Component, pageProps }: AppProps) {
-    return (
-
-    <ClerkProvider {...pageProps}>
-      <ClerkLoading>
-        <div>Clerk is loading</div>
-      </ClerkLoading>
-      <ClerkLoaded>
-        <Component {...pageProps} />
-      </ClerkLoaded>
-    </ClerkProvider>
-    ); 
-  }
+    <CodeBlockTabs type="router" options={["App Router", "Pages Router"]}>
+    ```tsx filename="app/layout.tsx"
+      import { ClerkProvider, ClerkLoaded, ClerkLoading } from '@clerk/nextjs'
+      import './globals.css';
+
+      export default function RootLayout({
+        children,
+      }: {
+        children: React.ReactNode
+      }) {
+        return (
+          <ClerkProvider>
+            <html lang="en">
+              <body>
+                <ClerkLoading>
+                  <div>Clerk is loading...</div>
+                </ClerkLoading>
+                <ClerkLoaded>
+                  {children}
+                </ClerkLoaded>
+              </body>
+            </html>
+          </ClerkProvider>
+        )
+      }
+    ```
+
+    ```tsx filename="pages/_app.tsx"
+    import "@/styles/globals.css";
+    import { ClerkLoaded, ClerkLoading, ClerkProvider } from "@clerk/nextjs";
+    import { AppProps } from "next/app";
+
+    function MyApp({ Component, pageProps }: AppProps) {
+      return (
+
+      <ClerkProvider {...pageProps}>
+        <ClerkLoading>
+          <div>Clerk is loading</div>
+        </ClerkLoading>
+        <ClerkLoaded>
+          <Component {...pageProps} />
+        </ClerkLoaded>
+      </ClerkProvider>
+      );
+    }
 
-  export default MyApp;
-  ```
+    export default MyApp;
+    ```
+    </CodeBlockTabs>
   </Tab>
 
   <Tab>
@@ -80,4 +108,4 @@ The `<ClerkLoading>` renders its children while Clerk is loading, and is helpful
   </Tab>
 </Tabs>
 
-</InjectKeys>
+</InjectKeys>