feat(nextjs): Handle URL <> Session Org Mismatch in Middleware

.changeset/olive-trainers-heal.md

@@ -0,0 +1,5 @@
+---
+"@clerk/nextjs": patch
+---
+
+Introduces `organizationSyncOptions` option to `clerkMiddleware`, which syncs an active organization or personal account from a URL to the Clerk session.

integration/templates/next-app-router/src/app/organizations-by-id/[id]/page.tsx

@@ -0,0 +1,18 @@
+import { auth } from '@clerk/nextjs/server';
+
+export default function Home({ params }: { params: { id: string } }) {
+  const { orgId } = auth();
+
+  if (params.id != orgId) {
+    console.log('Mismatch - returning nothing for now...', params.id, orgId);
+  }
+
+  console.log("I'm the server and I got this id: ", orgId);
+
+  return (
+    <>
+      <p>Org-specific home</p>
+      <p>From auth(), I know your org id is: {orgId}</p>
+    </>
+  );
+}

integration/templates/next-app-router/src/app/organizations-by-id/[id]/settings/page.tsx

@@ -0,0 +1,18 @@
+import { auth } from '@clerk/nextjs/server';
+
+export default function Home({ params }: { params: { id: string } }) {
+  const { orgId } = auth();
+
+  if (params.id != orgId) {
+    console.log('Mismatch - returning nothing for now...', params.id, orgId);
+  }
+
+  console.log("I'm the server and I got this id: ", orgId);
+
+  return (
+    <>
+      <p>Org-specific settings</p>
+      <p>From auth(), I know your org id is: {orgId}</p>
+    </>
+  );
+}

integration/templates/next-app-router/src/app/organizations-by-slug/[slug]/page.tsx

@@ -0,0 +1,18 @@
+import { auth } from '@clerk/nextjs/server';
+
+export default function Home({ params }: { params: { slug: string } }) {
+  const { orgSlug } = auth();
+
+  if (params.slug != orgSlug) {
+    console.log('Mismatch - returning nothing for now...', params.slug, orgSlug);
+  }
+
+  console.log("I'm the server and I got this slug: ", orgSlug);
+
+  return (
+    <>
+      <p>Org-specific home</p>
+      <p>From auth(), I know your org slug is: {orgSlug}</p>
+    </>
+  );
+}

integration/templates/next-app-router/src/app/organizations-by-slug/[slug]/settings/page.tsx

@@ -0,0 +1,18 @@
+import { auth } from '@clerk/nextjs/server';
+
+export default function Home({ params }: { params: { slug: string } }) {
+  const { orgSlug } = auth();
+
+  if (params.slug != orgSlug) {
+    console.log('Mismatch - returning nothing for now...', params.slug, orgSlug);
+  }
+
+  console.log("I'm the server and I got this slug: ", orgSlug);
+
+  return (
+    <>
+      <p>Org-specific settings</p>
+      <p>From auth(), I know your org slug is: {orgSlug}</p>
+    </>
+  );
+}

integration/templates/next-app-router/src/app/personal-account/page.tsx

@@ -0,0 +1,15 @@
+import { auth } from '@clerk/nextjs/server';
+
+export default function Home(): {} {
+  const { orgId } = auth();
+
+  if (orgId != null) {
+    console.log('Oh no, this page should only activate on the personal account!');
+  }
+
+  return (
+    <>
+      <p>Welcome to your personal account</p>
+    </>
+  );
+}

integration/testUtils/handshake.ts

@@ -104,7 +104,13 @@ export function generateConfig({ mode, matchedKeys = true }: { mode: 'test' | 'l
     exp: number;
     nbf: number;
   };
-  const generateToken = ({ state }: { state: 'active' | 'expired' | 'early' }) => {
+  const generateToken = ({
+    state,
+    extraClaims,
+  }: {
+    state: 'active' | 'expired' | 'early';
+    extraClaims?: Map<string, any>;
+  }) => {
     const claims = { sub: 'user_12345' } as Claims;
 
     const now = Math.floor(Date.now() / 1000);
@@ -121,6 +127,14 @@ export function generateConfig({ mode, matchedKeys = true }: { mode: 'test' | 'l
       claims.nbf = now - 10 + 600;
       claims.exp = now + 60 + 600;
     }
+
+    // Merge claims with extraClaims
+    if (extraClaims) {
+      for (const [key, value] of extraClaims) {
+        claims[key] = value;
+      }
+    }
+
     return {
       token: jwt.sign(claims, rsa.private, {
         algorithm: 'RS256',