feat(nextjs): Support async headers()

.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

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/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

@@ -11,9 +11,9 @@ const csp = `default-src 'self';
 const isProtectedRoute = createRouteMatcher(['/protected(.*)', '/user(.*)', '/switcher(.*)']);
 const isCSPRoute = createRouteMatcher(['/csp']);
 
-export default clerkMiddleware((auth, req) => {
+export default clerkMiddleware(async (auth, req) => {
   if (isProtectedRoute(req)) {
-    auth().protect();
+    await auth.protect();
   }
 
   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/);