feat(repo): Migrate Protect to Show

.changeset/migrate-to-show.md

@@ -0,0 +1,5 @@
+---
+'@clerk/upgrade': minor
+---
+
+Add a `transform-protect-to-show` codemod that migrates client-side `<Protect>` usage to `<Show>` with automatic prop and import updates.

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

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>

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>

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>

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>

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>

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>
 

integration/templates/astro-node/src/pages/react/index.astro

@@ -2,12 +2,12 @@
 import Layout from '../../layouts/react/Layout.astro';
 import Card from '../../components/Card.astro';
 
-import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from '@clerk/astro/react';
+import { Show, SignOutButton, OrganizationSwitcher } from '@clerk/astro/react';
 ---
 
 <Layout title='Welcome to Astro.'>
   <h1>Welcome to <span class='text-gradient'>Astro</span> + React</h1>
-  <SignedIn client:load>
+  <Show when='signedIn' client:load>
     <OrganizationSwitcher
       client:load
       appearance={{
@@ -19,7 +19,7 @@ import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from '@clerk
       afterSelectOrganizationUrl='/organization'
     />
     <SignOutButton client:load>Sign out!</SignOutButton>
-  </SignedIn>
+  </Show>
 
   <div class='h-12'></div>
 
@@ -31,7 +31,7 @@ import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from '@clerk
     role='list'
     class='link-card-grid'
   >
-    <SignedOut client:load>
+    <Show when='signedOut' client:load>
       <Card
         href='/sign-in'
         title='Log in'
@@ -42,8 +42,8 @@ import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from '@clerk
         title='Create account'
         body='Supercharge your project with new frameworks and libraries.'
       />
-    </SignedOut>
-    <SignedIn client:load>
+    </Show>
+    <Show when='signedIn' client:load>
       <Card
         href='/user'
         title='User Profile'
@@ -69,7 +69,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>
 

integration/templates/astro-node/src/pages/react/only-admins.astro

@@ -1,23 +1,28 @@
 ---
-import { Protect } from '@clerk/astro/react';
+import { Show } from '@clerk/astro/react';
 import Layout from '../../layouts/react/Layout.astro';
 ---
 
 <Layout title='Page is only accessible by members'>
   <div class='w-full flex justify-center flex-col'>
-    <Protect
+    <Show
       client:load
-      role='org:admin'
+      when={{ role: 'org:admin' }}
     >
-      <Fragment slot='fallback'>
-        <h1 class='text-2xl text-center'>Not an admin</h1>
-        <a
-          class='text-sm text-center text-gray-100 transition hover:text-gray-400'
-          href='/only-members'
-          >Go to Members Page</a
-        >
-      </Fragment>
       <h1 class='text-2xl text-center'>I'm an admin</h1>
-    </Protect>
+    </Show>
+
+    <Show
+      client:load
+      when={(has) => !has({ role: 'org:admin' })}
+    >
+      <h1 class='text-2xl text-center'>Not an admin</h1>
+      <a
+        class='text-sm text-center text-gray-100 transition hover:text-gray-400'
+        href='/only-members'
+      >
+        Go to Members Page
+      </a>
+    </Show>
   </div>
 </Layout>

integration/templates/astro-node/src/pages/react/only-members.astro

@@ -1,23 +1,28 @@
 ---
-import { Protect } from '@clerk/astro/react';
+import { Show } from '@clerk/astro/react';
 import Layout from '../../layouts/react/Layout.astro';
 ---
 
 <Layout title='Page is only accessible by members'>
   <div class='w-full flex justify-center flex-col'>
-    <Protect
+    <Show
       client:load
-      role='basic_member'
+      when={{ role: 'basic_member' }}
     >
-      <Fragment slot='fallback'>
-        <h1 class='text-2xl text-center'>Not a member</h1>
-        <a
-          class='text-sm text-center text-gray-100 transition hover:text-gray-400'
-          href='/only-admins'
-          >Go to Admin Page</a
-        >
-      </Fragment>
       <h1 class='text-2xl text-center'>I'm a member</h1>
-    </Protect>
+    </Show>
+
+    <Show
+      client:load
+      when={(has) => !has({ role: 'basic_member' })}
+    >
+      <h1 class='text-2xl text-center'>Not a member</h1>
+      <a
+        class='text-sm text-center text-gray-100 transition hover:text-gray-400'
+        href='/only-admins'
+      >
+        Go to Admin Page
+      </a>
+    </Show>
   </div>
 </Layout>

integration/templates/astro-node/src/pages/transitions/index.astro

@@ -1,15 +1,15 @@
 ---
-import { SignedIn, SignedOut, UserButton } from '@clerk/astro/components';
+import { Show, UserButton } from '@clerk/astro/components';
 import Layout from '../../layouts/ViewTransitionsLayout.astro';
 ---
 
 <Layout title='Sign in'>
   <div class='w-full flex justify-center'>
-    <SignedOut>
+    <Show when='signedOut'>
       <a href='/transitions/sign-in'>Sign in</a>
-    </SignedOut>
-    <SignedIn>
+    </Show>
+    <Show when='signedIn'>
       <UserButton />
-    </SignedIn>
+    </Show>
   </div>
 </Layout>

integration/templates/expo-web/app/index.tsx

@@ -1,6 +1,6 @@
-import { Text, View } from 'react-native';
-import { SignedIn, SignedOut } from '@clerk/expo';
+import { Show } from '@clerk/expo';
 import { UserButton } from '@clerk/expo/web';
+import { Text, View } from 'react-native';
 
 export default function Index() {
   return (
@@ -11,13 +11,13 @@ export default function Index() {
         alignItems: 'center',
       }}
     >
-      <SignedIn>
+      <Show when='signedIn'>
         <Text>You are signed in!</Text>
         <UserButton />
-      </SignedIn>
-      <SignedOut>
+      </Show>
+      <Show when='signedOut'>
         <Text>You are signed out</Text>
-      </SignedOut>
+      </Show>
     </View>
   );
 }