feat(nextjs,clerk-react): Experimental protectComponent, protectAction, protectRoute

.changeset/cold-mails-call.md

@@ -0,0 +1,6 @@
+---
+"@clerk/types": patch
+"@clerk/clerk-js": patch
+---
+
+Updated `__experimental_closeUserVerification` to accept an "unstable_notify" property

.changeset/dirty-moles-collect.md

@@ -0,0 +1,8 @@
+---
+"@clerk/nextjs": minor
+---
+
+Exports a new set of experimental authorization helpers:
+- `__experimental_protectComponent` (HoC)
+- `__experimental_protectAction` (HoF)
+- `__experimental_protectRoute` (HoF)

.changeset/green-buckets-battle.md

@@ -0,0 +1,9 @@
+---
+"@clerk/shared": minor
+---
+
+Export two React component, which are used internally from `__experimental_protectComponent`:
+- UserVerificationModal
+- UserVerificationTrigger
+
+Export a new utility `__internal_findFailedProtectConfiguration` for shared usage across @clerk/clerk-react and @clerk/nextjs

.changeset/ninety-islands-confess.md

@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-react": minor
+---
+
+Exports a new `__experimental_protectComponent` HoC.

integration/playwright.config.ts

@@ -13,7 +13,7 @@ export const common: PlaywrightTestConfig = {
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  timeout: 90000,
+  timeout: 9000000,
   maxFailures: process.env.CI ? 1 : undefined,
   workers: process.env.CI ? '50%' : '70%',
   reporter: process.env.CI ? 'line' : 'list',

integration/presets/envs.ts

@@ -51,6 +51,13 @@ const withCustomRoles = base
   .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-custom-roles').sk)
   .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-custom-roles').pk);
 
+const withReverification = base
+  .clone()
+  .setId('withReverification')
+  .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-reverification').sk)
+  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-reverification').pk)
+  .setEnvVariable('private', 'CLERK_ENCRYPTION_KEY', constants.E2E_CLERK_ENCRYPTION_KEY || 'a-key');
+
 const withEmailCodesQuickstart = withEmailCodes
   .clone()
   .setEnvVariable('public', 'CLERK_SIGN_IN_URL', '')
@@ -100,6 +107,7 @@ export const envs = {
   withEmailCodes_destroy_client,
   withEmailLinks,
   withCustomRoles,
+  withReverification,
   withEmailCodesQuickstart,
   withAPCore1ClerkLatest,
   withAPCore1ClerkV4,

integration/presets/longRunningApps.ts

@@ -29,6 +29,7 @@ export const createLongRunningApps = () => {
       env: envs.withEmailCodes_destroy_client,
     },
     { id: 'next.appRouter.withCustomRoles', config: next.appRouter, env: envs.withCustomRoles },
+    { id: 'next.appRouter.withReverification', config: next.appRouter, env: envs.withReverification },
     { 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/templates/next-app-router/next.config.js

@@ -3,6 +3,9 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  experimental: {
+    serverActions: true,
+  },
 };
 
 module.exports = nextConfig;

integration/templates/next-app-router/src/app/api/(protectRoute)/log-user-id-all/route.ts

@@ -0,0 +1,20 @@
+import { __experimental_protectRoute } from '@clerk/nextjs/server';
+
+export const POST = __experimental_protectRoute()
+  .with({
+    role: 'org:admin',
+  })
+  .with({
+    reverification: {
+      level: 'secondFactor',
+      afterMinutes: 1,
+    },
+  })
+  .route(auth => {
+    return new Response(
+      JSON.stringify({
+        userId: auth.userId,
+      }),
+      { status: 200 },
+    );
+  });

integration/templates/next-app-router/src/app/api/(protectRoute)/log-user-id-reverification/route.ts

@@ -0,0 +1,17 @@
+import { __experimental_protectRoute } from '@clerk/nextjs/server';
+
+export const POST = __experimental_protectRoute()
+  .with({
+    reverification: {
+      level: 'secondFactor',
+      afterMinutes: 1,
+    },
+  })
+  .route(auth => {
+    return new Response(
+      JSON.stringify({
+        userId: auth.userId,
+      }),
+      { status: 200 },
+    );
+  });

integration/templates/next-app-router/src/app/api/(protectRoute)/log-user-id-role/route.ts

@@ -0,0 +1,14 @@
+import { __experimental_protectRoute } from '@clerk/nextjs/server';
+
+export const POST = __experimental_protectRoute()
+  .with({
+    role: 'org:admin',
+  })
+  .route(auth => {
+    return new Response(
+      JSON.stringify({
+        userId: auth.userId,
+      }),
+      { status: 200 },
+    );
+  });

integration/templates/next-app-router/src/app/api/(protectRoute)/log-user-id/route.ts

@@ -0,0 +1,10 @@
+import { __experimental_protectRoute } from '@clerk/nextjs/server';
+
+export const POST = __experimental_protectRoute().route(auth => {
+  return new Response(
+    JSON.stringify({
+      userId: auth.userId,
+    }),
+    { status: 200 },
+  );
+});

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

@@ -0,0 +1,15 @@
+import { __experimental_protectRoute } from '@clerk/nextjs/server';
+
+// export function GET() {
+//   const { userId } = auth().protect(has => has({ role: 'admin' }) || has({ role: 'org:editor' }));
+//   return new Response(JSON.stringify({ userId }));
+// }
+
+export const GET = __experimental_protectRoute()
+  .with({
+    role: 'org:admin',
+  })
+  .route(_auth => {
+    const { userId } = _auth;
+    return new Response(JSON.stringify({ userId }));
+  });

integration/templates/next-app-router/src/app/protect-action/actions.ts

@@ -0,0 +1,49 @@
+'use server';
+import { __experimental_protectAction } from '@clerk/nextjs/server';
+
+const logUserIdAction = __experimental_protectAction().action(auth => {
+  return {
+    userId: auth.userId,
+  };
+});
+
+const logUserIdActionRole = __experimental_protectAction()
+  .with({
+    role: 'org:admin',
+  })
+  .action(auth => {
+    return {
+      userId: auth.userId,
+    };
+  });
+
+const logUserIdActionReverification = __experimental_protectAction()
+  .with({
+    reverification: {
+      level: 'secondFactor',
+      afterMinutes: 1,
+    },
+  })
+  .action(auth => {
+    return {
+      userId: auth.userId,
+    };
+  });
+
+const logUserIdActionStack = __experimental_protectAction()
+  .with({
+    role: 'org:admin',
+  })
+  .with({
+    reverification: {
+      level: 'secondFactor',
+      afterMinutes: 1,
+    },
+  })
+  .action(auth => {
+    return {
+      userId: auth.userId,
+    };
+  });
+
+export { logUserIdAction, logUserIdActionRole, logUserIdActionReverification, logUserIdActionStack };

integration/templates/next-app-router/src/app/protect-action/page-component.tsx

@@ -0,0 +1,23 @@
+'use client';
+import { useState, useTransition } from 'react';
+
+export function PageComponent({ action }: { action: () => Promise<any> }) {
+  const [pending, startTransition] = useTransition();
+  const [res, setRes] = useState(null);
+
+  return (
+    <>
+      <button
+        disabled={pending}
+        onClick={() => {
+          startTransition(async () => {
+            await action().then(setRes);
+          });
+        }}
+      >
+        LogUserId
+      </button>
+      <pre>{JSON.stringify(res)}</pre>
+    </>
+  );
+}

integration/templates/next-app-router/src/app/protect-action/signed-out-with-all/page.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { logUserIdActionStack } from '@/app/protect-action/actions';
+import { PageComponent } from '@/app/protect-action/page-component';
+
+function Page() {
+  // @ts-ignore
+  return <PageComponent action={logUserIdActionStack} />;
+}
+
+export default Page;

integration/templates/next-app-router/src/app/protect-action/signed-out-with-reverification/page.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { logUserIdActionReverification } from '@/app/protect-action/actions';
+import { PageComponent } from '@/app/protect-action/page-component';
+
+function Page() {
+  // @ts-ignore
+  return <PageComponent action={logUserIdActionReverification} />;
+}
+
+export default Page;

integration/templates/next-app-router/src/app/protect-action/signed-out-with-role/page.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { logUserIdActionRole } from '@/app/protect-action/actions';
+import { PageComponent } from '@/app/protect-action/page-component';
+
+function Page() {
+  // @ts-ignore
+  return <PageComponent action={logUserIdActionRole} />;
+}
+
+export default Page;

integration/templates/next-app-router/src/app/protect-action/signed-out/page.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { logUserIdAction } from '@/app/protect-action/actions';
+import { PageComponent } from '@/app/protect-action/page-component';
+
+function Page() {
+  // @ts-ignore
+  return <PageComponent action={logUserIdAction} />;
+}
+
+export default Page;

integration/templates/next-app-router/src/app/protect-route/page-component.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+export function PageComponent({ url }: { url: string }) {
+  const [res, setRes] = useState(null);
+
+  return (
+    <>
+      <button
+        onClick={async () => {
+          await fetch(url, {
+            method: 'POST',
+          })
+            .then(res => res.json())
+            .then(setRes);
+        }}
+      >
+        LogUserId
+      </button>
+      <pre>{JSON.stringify(res)}</pre>
+    </>
+  );
+}

integration/templates/next-app-router/src/app/protect-route/signed-out-with-all/page.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { PageComponent } from '@/app/protect-route/page-component';
+
+function Page() {
+  return <PageComponent url={'/api/log-user-id-all'} />;
+}
+
+export default Page;

integration/templates/next-app-router/src/app/protect-route/signed-out-with-reverification/page.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { PageComponent } from '@/app/protect-route/page-component';
+
+function Page() {
+  return <PageComponent url={'/api/log-user-id-reverification'} />;
+}
+
+export default Page;

integration/templates/next-app-router/src/app/protect-route/signed-out-with-role/page.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { PageComponent } from '@/app/protect-route/page-component';
+
+function Page() {
+  return <PageComponent url={'/api/log-user-id-role'} />;
+}
+
+export default Page;

integration/templates/next-app-router/src/app/protect-route/signed-out/page.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { PageComponent } from '@/app/protect-route/page-component';
+
+function Page() {
+  return <PageComponent url={'/api/log-user-id'} />;
+}
+
+export default Page;

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

@@ -0,0 +1,8 @@
+import { __experimental_protectComponent } from '@clerk/nextjs';
+
+const Page = __experimental_protectComponent({
+  fallback: 'redirectToSignIn',
+}).component(() => {
+  return <div>Protected Page</div>;
+});
+export default Page;

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

@@ -0,0 +1,14 @@
+import { __experimental_protectComponent } from '@clerk/nextjs';
+
+const Page = __experimental_protectComponent({
+  fallback: () => <p>Signed out!</p>,
+})
+  .with({
+    permission: 'org:posts:manage',
+    fallback: () => <p>User is missing permissions</p>,
+  })
+  .component(() => {
+    return <p>User has access</p>;
+  });
+
+export default Page;

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

@@ -0,0 +1,13 @@
+import { __experimental_protectComponent } from '@clerk/nextjs';
+
+const Page = __experimental_protectComponent({
+  fallback: 'redirectToSignIn',
+})
+  .with({
+    role: 'org:admin',
+  })
+  .component(() => {
+    return <p>User has access</p>;
+  });
+
+export default Page;