clerk · jacekradko · Dec 5, 2025 · Dec 5, 2025 · Dec 5, 2025 · Dec 5, 2025
diff --git a/.changeset/migrate-to-show.md b/.changeset/migrate-to-show.md
@@ -0,0 +1,5 @@
+---
+'@clerk/upgrade': minor
+---
+
+Add a `transform-protect-to-show` codemod that migrates `<Protect>`, `<SignedIn>`, `<SignedOut>` usages to `<Show>` with automatic prop and import updates.
diff --git a/.changeset/show-the-guards.md b/.changeset/show-the-guards.md
@@ -0,0 +1,11 @@
+---
+'@clerk/astro': major
+'@clerk/chrome-extension': major
+'@clerk/expo': major
+'@clerk/nextjs': major
+'@clerk/react': major
+'@clerk/shared': minor
+'@clerk/vue': major
+---
+
+Introduce `<Show when={...}>` as the cross-framework authorization control component and remove `<Protect>`, `<SignedIn>`, and `<SignedOut>` in favor of `<Show>`, updating shared types and framework wrappers to align with the new API.
diff --git a/integration/presets/envs.ts b/integration/presets/envs.ts
@@ -81,26 +81,6 @@ const withEmailCodesQuickstart = withEmailCodes
   .setEnvVariable('public', 'CLERK_SIGN_IN_URL', '')
   .setEnvVariable('public', 'CLERK_SIGN_UP_URL', '');
 
-const withAPCore1ClerkV4 = environmentConfig()
-  .setId('withAPCore1ClerkV4')
-  .setEnvVariable('public', 'CLERK_TELEMETRY_DISABLED', true)
-  .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-email-codes').sk)
-  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk);
-
-// Uses staging instance which runs Core 3
-const withAPCore3ClerkV4 = environmentConfig()
-  .setId('withAPCore3ClerkV4')
-  .setEnvVariable('public', 'CLERK_TELEMETRY_DISABLED', true)
-  .setEnvVariable('private', 'CLERK_API_URL', 'https://api.clerkstage.dev')
-  .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-billing-staging').sk)
-  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-billing-staging').pk);
-
-const withAPCore1ClerkV6 = environmentConfig()
-  .setId('withAPCore1ClerkV6')
-  .setEnvVariable('public', 'CLERK_TELEMETRY_DISABLED', true)
-  .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-email-codes').sk)
-  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk);
-
 // Uses staging instance which runs Core 3
 const withAPCore3ClerkV6 = environmentConfig()
   .setId('withAPCore3ClerkV6')
@@ -213,9 +193,6 @@ export const envs = {
   base,
   sessionsProd1,
   withAPIKeys,
-  withAPCore1ClerkV4,
-  withAPCore1ClerkV6,
-  withAPCore3ClerkV4,
   withAPCore3ClerkLatest,
   withAPCore3ClerkV6,
   withBilling,

diff --git a/integration/presets/next.ts b/integration/presets/next.ts
@@ -26,24 +26,6 @@ const appRouterQuickstart = appRouter
 
 const appRouterAPWithClerkNextLatest = appRouterQuickstart.clone().setName('next-app-router-ap-clerk-next-latest');
 
-const appRouterAPWithClerkNextV4 = appRouterQuickstart
-  .clone()
-  .setName('next-app-router-ap-clerk-next-v4')
-  .addDependency('@clerk/nextjs', '4')
-  .addFile(
-    'src/middleware.ts',
-    () => `import { authMiddleware } from '@clerk/nextjs';
-
-    export default authMiddleware({
-      publicRoutes: ['/']
-    });
-
-    export const config = {
-      matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
-    };
-    `,
-  );
-
 const appRouterAPWithClerkNextV6 = appRouterQuickstart
   .clone()
   .setName('next-app-router-ap-clerk-next-v6')
@@ -54,6 +36,5 @@ export const next = {
   appRouterTurbo,
   appRouterQuickstart,
   appRouterAPWithClerkNextLatest,
-  appRouterAPWithClerkNextV4,
   appRouterAPWithClerkNextV6,
 } as const;
diff --git a/integration/scripts/logger.ts b/integration/scripts/logger.ts
@@ -34,6 +34,11 @@ export const createLogger = (opts: CreateLoggerOptions) => {
         console.info(`${chalk[prefixColor](`[${prefix}]`)} ${msg}`);
       }
     },
+    warn: (msg: string, error?: unknown) => {
+      const errorMsg = error instanceof Error ? error.message : String(error ?? '');
+      const fullMsg = errorMsg ? `${msg} ${errorMsg}` : msg;
+      console.warn(`${chalk.yellow(`[${prefix}]`)} ${fullMsg}`);
+    },
     child: (childOpts: CreateLoggerOptions) => {
       return createLogger({ prefix: `${prefix} :: ${childOpts.prefix}`, color: prefixColor });
     },

diff --git a/integration/templates/astro-hybrid/src/pages/index.astro b/integration/templates/astro-hybrid/src/pages/index.astro
@@ -1,22 +1,22 @@
 ---
-import { UserButton, SignInButton, SignedIn, SignedOut } from '@clerk/astro/components';
+import { Show, UserButton, SignInButton } from '@clerk/astro/components';
 import { OrganizationSwitcher } from '@clerk/astro/react';
 import Layout from '../layouts/Layout.astro';
 
 export const prerender = true;
 ---
 
 <Layout title='Home'>
-  <SignedOut>
+  <Show when='signedOut'>
     <h1>Signed out</h1>
     <SignInButton
       mode='modal'
       fallbackRedirectUrl='/'
     />
-  </SignedOut>
-  <SignedIn>
+  </Show>
+  <Show when='signedIn'>
     <h1>Signed in</h1>
     <UserButton />
     <OrganizationSwitcher client:only='react' />
-  </SignedIn>
+  </Show>
 </Layout>
diff --git a/integration/templates/astro-hybrid/src/pages/only-admins.astro b/integration/templates/astro-hybrid/src/pages/only-admins.astro
@@ -1,13 +1,13 @@
 ---
-import { Protect } from '@clerk/astro/components';
+import { Show } from '@clerk/astro/components';
 import Layout from '../layouts/Layout.astro';
 
 export const prerender = true;
 ---
 
 <Layout title='Protected'>
-  <Protect role='org:admin'>
+  <Show when={{ role: 'org:admin' }}>
     <h1>I'm an admin</h1>
     <h1 slot='fallback'>Not an admin</h1>
-  </Protect>
+  </Show>
 </Layout>
diff --git a/integration/templates/astro-hybrid/src/pages/only-members.astro b/integration/templates/astro-hybrid/src/pages/only-members.astro
@@ -1,16 +1,16 @@
 ---
-import { Protect } from '@clerk/astro/components';
+import { Show } from '@clerk/astro/components';
 import Layout from '../layouts/Layout.astro';
 
 export const prerender = false;
 ---
 
 <Layout title='Protected'>
-  <Protect
-    role='basic_member'
+  <Show
+    when={{ role: 'org:member' }}
     isStatic={false}
   >
     <h1>I'm a member</h1>
     <h1 slot='fallback'>Not a member</h1>
-  </Protect>
+  </Show>
 </Layout>
diff --git a/integration/templates/astro-hybrid/src/pages/ssr.astro b/integration/templates/astro-hybrid/src/pages/ssr.astro
@@ -1,22 +1,22 @@
 ---
-import { UserButton, SignInButton, SignedIn, SignedOut } from '@clerk/astro/components';
+import { Show, UserButton, SignInButton } from '@clerk/astro/components';
 import { OrganizationSwitcher } from '@clerk/astro/react';
 import Layout from '../layouts/Layout.astro';
 
 export const prerender = false;
 ---
 
 <Layout title='Home'>
-  <SignedOut isStatic={false}>
+  <Show when='signedOut' isStatic={false}>
     <h1>Signed out</h1>
     <SignInButton
       mode='modal'
       fallbackRedirectUrl='/'
     />
-  </SignedOut>
-  <SignedIn isStatic={false}>
+  </Show>
+  <Show when='signedIn' isStatic={false}>
     <h1>Signed in</h1>
     <UserButton />
     <OrganizationSwitcher client:load />
-  </SignedIn>
+  </Show>
 </Layout>
diff --git a/integration/templates/astro-node/src/layouts/Layout.astro b/integration/templates/astro-node/src/layouts/Layout.astro
@@ -5,7 +5,7 @@ interface Props {
 
 const { title } = Astro.props;
 
-import { SignedIn, SignedOut } from '@clerk/astro/components';
+import { Show } from '@clerk/astro/components';
 import { LanguagePicker } from '../components/LanguagePicker';
 import CustomUserButton from '../components/CustomUserButton.astro';
 ---
@@ -80,11 +80,11 @@ import CustomUserButton from '../components/CustomUserButton.astro';
           <div class='flex gap-5 items-center'>
             <LanguagePicker client:idle />
 
-            <SignedIn>
+            <Show when='signedIn'>
               <CustomUserButton />
-            </SignedIn>
+            </Show>
 
-            <SignedOut>
+            <Show when='signedOut'>
               <div class='sm:flex sm:gap-4'>
                 <a
                   class='inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-[#3C169C] ring-1 ring-[#230B6A] after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]'
@@ -110,7 +110,7 @@ import CustomUserButton from '../components/CustomUserButton.astro';
                   </a>
                 </div>
               </div>
-            </SignedOut>
+            </Show>
           </div>
         </div>
       </div>

diff --git a/integration/templates/astro-node/src/layouts/react/Layout.astro b/integration/templates/astro-node/src/layouts/react/Layout.astro
@@ -5,7 +5,7 @@ interface Props {
 
 const { title } = Astro.props;
 
-import { SignedIn, SignedOut, UserButton } from '@clerk/astro/react';
+import { Show, UserButton } from '@clerk/astro/react';
 import { LanguagePicker } from '../../components/LanguagePicker';
 ---
 
@@ -79,11 +79,11 @@ import { LanguagePicker } from '../../components/LanguagePicker';
           <div class='flex gap-5 items-center'>
             <LanguagePicker client:idle />
 
-            <SignedIn client:load>
+            <Show when='signedIn' client:load>
               <UserButton client:load />
-            </SignedIn>
+            </Show>
 
-            <SignedOut client:load>
+            <Show when='signedOut' client:load>
               <div class='sm:flex sm:gap-4'>
                 <a
                   class='inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-[#3C169C] ring-1 ring-[#230B6A] after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]'
@@ -109,7 +109,7 @@ import { LanguagePicker } from '../../components/LanguagePicker';
                   </a>
                 </div>
               </div>
-            </SignedOut>
+            </Show>
           </div>
         </div>
       </div>

diff --git a/integration/templates/astro-node/src/pages/billing/checkout-btn.astro b/integration/templates/astro-node/src/pages/billing/checkout-btn.astro
@@ -1,17 +1,17 @@
 ---
-import { SignedIn, __experimental_CheckoutButton as CheckoutButton } from '@clerk/astro/components';
+import { Show, __experimental_CheckoutButton as CheckoutButton } from '@clerk/astro/components';
 import Layout from '../../layouts/Layout.astro';
 ---
 
 <Layout title="Checkout Button">
   <main>
-    <SignedIn>
+    <Show when='signedIn'>
       <CheckoutButton
         planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'
         planPeriod='month'
       >
         Checkout Now
       </CheckoutButton>
-    </SignedIn>
+    </Show>
   </main>
 </Layout>
diff --git a/integration/templates/astro-node/src/pages/index.astro b/integration/templates/astro-node/src/pages/index.astro
@@ -2,12 +2,12 @@
 import Layout from '../layouts/Layout.astro';
 import Card from '../components/Card.astro';
 
-import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from '@clerk/astro/components';
+import { Show, SignOutButton, OrganizationSwitcher } from '@clerk/astro/components';
 ---
 
 <Layout title='Welcome to Astro.'>
   <h1>Welcome to <span class='text-gradient'>Astro</span></h1>
-  <SignedIn>
+  <Show when='signedIn'>
     <OrganizationSwitcher
       appearance={{
         elements: {
@@ -18,15 +18,15 @@ import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from '@clerk
       afterSelectOrganizationUrl='/organization'
     />
     <SignOutButton>Sign out!</SignOutButton>
-  </SignedIn>
+  </Show>
 
   <div class='h-12'></div>
 
   <ul
     role='list'
     class='link-card-grid'
   >
-    <SignedOut>
+    <Show when='signedOut'>
       <Card
         href='/sign-in'
         title='Log in'
@@ -37,8 +37,8 @@ import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from '@clerk
         title='Create account'
         body='Supercharge your project with new frameworks and libraries.'
       />
-    </SignedOut>
-    <SignedIn>
+    </Show>
+    <Show when='signedIn'>
       <Card
         href='/user'
         title='User Profile'
@@ -64,7 +64,7 @@ import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from '@clerk
         title='For members'
         body='Learn how Astro works and explore the official API docs.'
       />
-    </SignedIn>
+    </Show>
   </ul>
 </Layout>
 

diff --git a/integration/templates/astro-node/src/pages/only-admins.astro b/integration/templates/astro-node/src/pages/only-admins.astro
@@ -1,11 +1,12 @@
 ---
-import { Protect } from '@clerk/astro/components';
+import { Show } from '@clerk/astro/components';
 import Layout from '../layouts/Layout.astro';
 ---
 
 <Layout title='Page is only accessible by members'>
   <div class='w-full flex justify-center flex-col'>
-    <Protect role='org:admin'>
+    <Show when={{ role: 'org:admin' }}>
+      <h1 class='text-2xl text-center'>I'm an admin</h1>
       <Fragment slot='fallback'>
         <h1 class='text-2xl text-center'>Not an admin</h1>
         <a
@@ -14,7 +15,6 @@ import Layout from '../layouts/Layout.astro';
           >Go to Members Page</a
         >
       </Fragment>
-      <h1 class='text-2xl text-center'>I'm an admin</h1>
-    </Protect>
+    </Show>
   </div>
 </Layout>
diff --git a/integration/templates/astro-node/src/pages/only-members.astro b/integration/templates/astro-node/src/pages/only-members.astro
@@ -1,11 +1,12 @@
 ---
-import { Protect } from '@clerk/astro/components';
+import { Show } from '@clerk/astro/components';
 import Layout from '../layouts/Layout.astro';
 ---
 
 <Layout title='Page is only accessible by members'>
   <div class='w-full flex justify-center flex-col'>
-    <Protect role='basic_member'>
+    <Show when={{ role: 'org:member' }}>
+      <h1 class='text-2xl text-center'>I'm a member</h1>
       <Fragment slot='fallback'>
         <h1 class='text-2xl text-center'>Not a member</h1>
         <a
@@ -14,7 +15,6 @@ import Layout from '../layouts/Layout.astro';
           >Go to Admin Page</a
         >
       </Fragment>
-      <h1 class='text-2xl text-center'>I'm a member</h1>
-    </Protect>
+    </Show>
   </div>
 </Layout>