feat(nextjs): Next.js@15 compatibility

.changeset/grumpy-hairs-remember.md

@@ -0,0 +1,7 @@
+---
+"@clerk/nextjs": major
+"@clerk/upgrade": minor
+---
+
+@clerk/nextjs: Converting auth() and clerkClient() interfaces to be async
+@clerk/upgrade: Adding required codemod for @clerk/nextjs breaking changes

.changeset/shiny-numbers-walk.md

@@ -0,0 +1,6 @@
+---
+"@clerk/nextjs": major
+---
+
+Support `unstable_rethrow` inside `clerkMiddleware`.
+We changed the errors thrown by `protect()` inside `clerkMiddleware` in order for `unstable_rethrow` to recognise them and rethrow them.

.changeset/ten-worms-report.md

@@ -0,0 +1,5 @@
+---
+"@clerk/nextjs": major
+---
+
+Removes deprecated APIs: `authMiddleware()`, `redirectToSignIn()`, and `redirectToSignUp()`. See the migration guide to learn how to update your usage.

integration/presets/longRunningApps.ts

@@ -23,12 +23,14 @@ export const createLongRunningApps = () => {
     { id: 'react.vite.withEmailLinks', config: react.vite, env: envs.withEmailLinks },
     { id: 'remix.node.withEmailCodes', config: remix.remixNode, env: envs.withEmailCodes },
     { id: 'next.appRouter.withEmailCodes', config: next.appRouter, env: envs.withEmailCodes },
+    { id: 'next.appRouter.15RCwithEmailCodes', config: next.appRouter15Rc, env: envs.withEmailCodes },
     {
       id: 'next.appRouter.withEmailCodes_persist_client',
       config: next.appRouter,
       env: envs.withEmailCodes_destroy_client,
     },
     { id: 'next.appRouter.withCustomRoles', config: next.appRouter, env: envs.withCustomRoles },
+    { id: 'next.appRouter.15RCwithCustomRoles', config: next.appRouter15Rc, env: envs.withCustomRoles },
     { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
     { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
     { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },

integration/presets/next.ts

@@ -16,6 +16,60 @@ const appRouter = applicationConfig()
   .addDependency('react-dom', constants.E2E_REACT_DOM_VERSION)
   .addDependency('@clerk/nextjs', constants.E2E_CLERK_VERSION || clerkNextjsLocal);
 
+const appRouter15Rc = applicationConfig()
+  .setName('next-app-router')
+  .useTemplate(templates['next-app-router'])
+  .setEnvFormatter('public', key => `NEXT_PUBLIC_${key}`)
+  .addScript('setup', constants.E2E_NPM_FORCE ? 'npm i --force' : 'npm i')
+  .addScript('dev', 'npm run dev')
+  .addScript('build', 'npm run build')
+  .addScript('serve', 'npm run start')
+  .addDependency('next', 'rc')
+  .addDependency('react', 'rc')
+  .addDependency('react-dom', 'rc')
+  .addDependency('@clerk/nextjs', constants.E2E_CLERK_VERSION || clerkNextjsLocal)
+  .addFile(
+    'src/middleware.ts',
+    () => `import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
+import { unstable_rethrow } from 'next/navigation';
+
+const csp = \`default-src 'self';
+  script-src 'self' 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' 'nonce-deadbeef';
+  img-src 'self' https://img.clerk.com;
+  worker-src 'self' blob:;
+  style-src 'self' 'unsafe-inline';
+  frame-src 'self' https://challenges.cloudflare.com;
+\`;
+
+const isProtectedRoute = createRouteMatcher(['/protected(.*)', '/user(.*)', '/switcher(.*)']);
+const isAdminRoute = createRouteMatcher(['/only-admin(.*)']);
+const isCSPRoute = createRouteMatcher(['/csp']);
+
+export default clerkMiddleware(async (auth, req) => {
+  if (isProtectedRoute(req)) {
+    try { await auth.protect() }
+    catch (e) { unstable_rethrow(e) }
+  }
+
+  if (isAdminRoute(req)) {
+    try { await auth.protect({role: 'admin'}) }
+    catch (e) { unstable_rethrow(e) }
+  }
+
+  if (isCSPRoute(req)) {
+    req.headers.set('Content-Security-Policy', csp.replace(/\\n/g, ''));
+  }
+});
+
+export const config = {
+  matcher: [
+    '/((?!.*\\\\..*|_next).*)', // Don't run middleware on static files
+    '/', // Run middleware on index page
+    '/(api|trpc)(.*)',
+  ], // Run middleware on API routes
+};`,
+  );
+
 const appRouterTurbo = appRouter
   .clone()
   .setName('next-app-router-turbopack')
@@ -48,6 +102,7 @@ const appRouterAPWithClerkNextV4 = appRouterQuickstart
 
 export const next = {
   appRouter,
+  appRouter15Rc,
   appRouterTurbo,
   appRouterQuickstart,
   appRouterAPWithClerkNextLatest,

integration/templates/next-app-router/src/app/api/me/route.ts

@@ -1,6 +1,6 @@
 import { auth } from '@clerk/nextjs/server';
 
-export function GET() {
-  const { userId } = auth();
+export async function GET() {
+  const { userId } = await auth();
   return new Response(JSON.stringify({ userId }));
 }

integration/templates/next-app-router/src/app/api/settings/route.ts

@@ -1,6 +1,6 @@
 import { auth } from '@clerk/nextjs/server';
 
-export function GET() {
-  const { userId } = auth().protect(has => has({ role: 'admin' }) || has({ role: 'org:editor' }));
+export async function GET() {
+  const { userId } = await auth.protect((has: any) => has({ role: 'admin' }) || has({ role: 'org:editor' }));
   return new Response(JSON.stringify({ userId }));
 }

integration/templates/next-app-router/src/app/csp/page.tsx

@@ -1,10 +1,12 @@
 import { headers } from 'next/headers';
 import { ClerkLoaded } from '@clerk/nextjs';
 
-export default function CSPPage() {
+export default async function CSPPage() {
+  const cspHeader = await headers().get('Content-Security-Policy');
+
   return (
     <div>
-      CSP: <pre>{headers().get('Content-Security-Policy')}</pre>
+      CSP: <pre>{cspHeader}</pre>
       <ClerkLoaded>
         <p>clerk loaded</p>
       </ClerkLoaded>

integration/templates/next-app-router/src/app/only-admin/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>User is admin</div>;
+}

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

@@ -1,7 +1,7 @@
 import { auth } from '@clerk/nextjs/server';
 
-export default function Home({ params }: { params: { id: string } }) {
-  const { orgId } = auth();
+export default async function Home({ params }: { params: { id: string } }) {
+  const { orgId } = await auth();
 
   if (params.id != orgId) {
     console.log('Mismatch - returning nothing for now...', params.id, orgId);

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

@@ -1,7 +1,7 @@
 import { auth } from '@clerk/nextjs/server';
 
-export default function Home({ params }: { params: { id: string } }) {
-  const { orgId } = auth();
+export default async function Home({ params }: { params: { id: string } }) {
+  const { orgId } = await auth();
 
   if (params.id != orgId) {
     console.log('Mismatch - returning nothing for now...', params.id, orgId);

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

@@ -1,7 +1,7 @@
 import { auth } from '@clerk/nextjs/server';
 
-export default function Home({ params }: { params: { slug: string } }) {
-  const { orgSlug } = auth();
+export default async function Home({ params }: { params: { slug: string } }) {
+  const { orgSlug } = await auth();
 
   if (params.slug != orgSlug) {
     console.log('Mismatch - returning nothing for now...', params.slug, orgSlug);

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

@@ -1,7 +1,7 @@
 import { auth } from '@clerk/nextjs/server';
 
-export default function Home({ params }: { params: { slug: string } }) {
-  const { orgSlug } = auth();
+export default async function Home({ params }: { params: { slug: string } }) {
+  const { orgSlug } = await auth();
 
   if (params.slug != orgSlug) {
     console.log('Mismatch - returning nothing for now...', params.slug, orgSlug);

integration/templates/next-app-router/src/app/page-protected/page.tsx

@@ -1,6 +1,7 @@
 import { auth } from '@clerk/nextjs/server';
 
-export default function Page() {
-  auth().protect();
+export default async function Page() {
+  await auth.protect();
+
   return <div>Protected Page</div>;
 }

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

@@ -1,7 +1,7 @@
 import { auth } from '@clerk/nextjs/server';
 
-export default function Home(): {} {
-  const { orgId } = auth();
+export default async function Home() {
+  const { orgId } = await auth();
 
   if (orgId != null) {
     console.log('Oh no, this page should only activate on the personal account!');

integration/templates/next-app-router/src/app/settings/auth-has/page.tsx

@@ -1,7 +1,7 @@
 import { auth } from '@clerk/nextjs/server';
 
-export default function Page() {
-  const { userId, has } = auth();
+export default async function Page() {
+  const { userId, has } = await auth();
   if (!userId || !has({ permission: 'org:posts:manage' })) {
     return <p>User is missing permissions</p>;
   }

integration/templates/next-app-router/src/app/settings/auth-protect/page.tsx

@@ -1,6 +1,6 @@
 import { auth } from '@clerk/nextjs/server';
 
-export default function Page() {
-  auth().protect({ role: 'admin' });
+export default async function Page() {
+  await auth.protect({ role: 'admin' });
   return <p>User has access</p>;
 }

integration/templates/next-app-router/src/middleware.ts

@@ -9,11 +9,16 @@ const csp = `default-src 'self';
 `;
 
 const isProtectedRoute = createRouteMatcher(['/protected(.*)', '/user(.*)', '/switcher(.*)']);
+const isAdminRoute = createRouteMatcher(['/only-admin(.*)']);
 const isCSPRoute = createRouteMatcher(['/csp']);
 
-export default clerkMiddleware((auth, req) => {
+export default clerkMiddleware(async (auth, req) => {
   if (isProtectedRoute(req)) {
-    auth().protect();
+    await auth.protect();
+  }
+
+  if (isAdminRoute(req)) {
+    await auth.protect({ role: 'admin' });
   }
 
   if (isCSPRoute(req)) {

integration/tests/dynamic-keys.test.ts

@@ -13,22 +13,24 @@ test.describe('dynamic keys @nextjs', () => {
       .clone()
       .addFile(
         'src/middleware.ts',
-        () => `import { clerkClient, clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
-        import { NextResponse } from 'next/server'
+        () => `import { clerkClient, clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
+        import { NextResponse } from 'next/server';
 
         const isProtectedRoute = createRouteMatcher(['/protected']);
         const shouldFetchBapi = createRouteMatcher(['/fetch-bapi-from-middleware']);
 
         export default clerkMiddleware(async (auth, request) => {
           if (isProtectedRoute(request)) {
-            auth().protect();
+            await auth.protect();
           }
 
           if (shouldFetchBapi(request)){
-            const count = await clerkClient().users.getCount();
+            const client = await clerkClient();
+
+            const count = await client.users?.getCount();
 
             if (count){
-              return NextResponse.redirect(new URL('/users-count', request.url))
+              return NextResponse.redirect(new URL('/users-count', request.url));
             }
           }
         }, {
@@ -45,7 +47,7 @@ test.describe('dynamic keys @nextjs', () => {
         () => `import { clerkClient } from '@clerk/nextjs/server'
 
         export default async function Page(){
-          const count = await clerkClient().users.getCount()
+          const count = await clerkClient().users?.getCount() ?? 0;
 
           return <p>Users count: {count}</p>
         }
@@ -62,7 +64,7 @@ test.describe('dynamic keys @nextjs', () => {
     await app.teardown();
   });
 
-  test('redirects to `signInUrl` on `auth().protect()`', async ({ page, context }) => {
+  test('redirects to `signInUrl` on `await auth.protect()`', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
 
     await u.page.goToAppHome();
@@ -74,7 +76,7 @@ test.describe('dynamic keys @nextjs', () => {
     await u.page.waitForURL(/foobar/);
   });
 
-  test('resolves auth signature with `secretKey` on `auth().protect()`', async ({ page, context }) => {
+  test('resolves auth signature with `secretKey` on `await auth.protect()`', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.page.goToRelative('/page-protected');
     await u.page.waitForURL(/foobar/);

integration/tests/handshake.test.ts

@@ -39,14 +39,10 @@ test.describe('Client handshake @generic', () => {
       .clone()
       .addFile(
         'src/middleware.ts',
-        () => `import { authMiddleware } from '@clerk/nextjs/server';
-
-    // Set the paths that don't require the user to be signed in
-    const publicPaths = ['/', /^(\\/(sign-in|sign-up|app-dir|custom)\\/*).*$/];
+        () => `import { clerkMiddleware } from '@clerk/nextjs/server';
 
     export const middleware = (req, evt) => {
-      return authMiddleware({
-        publicRoutes: publicPaths,
+      return clerkMiddleware({
         publishableKey: req.headers.get("x-publishable-key"),
         secretKey: req.headers.get("x-secret-key"),
         proxyUrl: req.headers.get("x-proxy-url"),
@@ -1256,6 +1252,12 @@ test.describe('Client handshake with organization activation @nextjs', () => {
         redirect: 'manual',
       });
 
+      if (testCase.name === 'Header-based auth should not handshake with expired auth') {
+        console.log(testCase.name);
+        console.log(res.headers.get('x-clerk-auth-status'));
+        console.log(res.headers.get('x-clerk-auth-reason'));
+      }
+
       expect(res.status).toBe(testCase.then.expectStatus);
       const redirectSearchParams = new URLSearchParams(res.headers.get('location'));
       expect(redirectSearchParams.get('organization_id')).toBe(testCase.then.fapiOrganizationIdParamValue);
@@ -1373,14 +1375,17 @@ test.describe('Client handshake with an organization activation avoids infinite
  */
 const startAppWithOrganizationSyncOptions = async (clerkAPIUrl: string): Promise<Application> => {
   const env = appConfigs.envs.withEmailCodes.clone().setEnvVariable('private', 'CLERK_API_URL', clerkAPIUrl);
+  const middlewareFile = `import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
+
+    const isProtectedRoute = createRouteMatcher(['/organizations(.*)'])
 
-  const middlewareFile = `import { authMiddleware } from '@clerk/nextjs/server';
-    // Set the paths that don't require the user to be signed in
-    const publicPaths = ['/', /^(\\/(sign-in|sign-up|app-dir|custom)\\/*).*$/];
     export const middleware = (req, evt) => {
       const orgSyncOptions = req.headers.get("x-organization-sync-options")
-      return authMiddleware({
-        publicRoutes: publicPaths,
+      return clerkMiddleware((auth, req) => {
+        if (isProtectedRoute(req) && !auth().userId) {
+          auth().redirectToSignIn()
+        }
+      }, {
         publishableKey: req.headers.get("x-publishable-key"),
         secretKey: req.headers.get("x-secret-key"),
         proxyUrl: req.headers.get("x-proxy-url"),