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/react': major
+'@clerk/nextjs': major
+'@clerk/expo': major
+'@clerk/chrome-extension': major
+'@clerk/shared': minor
+'@clerk/astro': patch
+'@clerk/vue': patch
+---
+
+Restrict `<Protect>` to App Router server usage and introduce `<Show when={...}>` as the client-side authorization component, updating shared types and Astro/Vue wrappers to align with the new API.

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>
   );
 }

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

@@ -1,17 +1,17 @@
-import { SignedIn, SignedOut, SignInButton, SignUpButton, UserButton } from '@clerk/nextjs';
+import { Show, SignInButton, SignUpButton, UserButton } from '@clerk/nextjs';
 
 export default function Home() {
   return (
     <header>
-      <SignedOut>
+      <Show when='signedOut'>
         <p>signed-out-state</p>
         <SignInButton />
         <SignUpButton />
-      </SignedOut>
-      <SignedIn>
+      </Show>
+      <Show when='signedIn'>
         <p>signed-in-state</p>
         <UserButton />
-      </SignedIn>
+      </Show>
     </header>
   );
 }

integration/templates/next-app-router/src/app/billing/checkout-btn/page.tsx

@@ -1,17 +1,17 @@
-import { SignedIn } from '@clerk/nextjs';
+import { Show } from '@clerk/nextjs';
 import { CheckoutButton } from '@clerk/nextjs/experimental';
 
 export default function Home() {
   return (
     <main>
-      <SignedIn>
+      <Show when='signedIn'>
         <CheckoutButton
           planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'
           planPeriod='month'
         >
           Checkout Now
         </CheckoutButton>
-      </SignedIn>
+      </Show>
     </main>
   );
 }

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

@@ -1,4 +1,4 @@
-import { Protect, SignedIn, SignedOut, SignIn, UserButton } from '@clerk/nextjs';
+import { Show, SignIn, UserButton } from '@clerk/nextjs';
 import Link from 'next/link';
 import { ClientId } from './client-id';
 
@@ -7,18 +7,23 @@ export default function Home() {
     <main>
       <UserButton fallback={<>Loading user button</>} />
       <ClientId />
-      <SignedIn>SignedIn</SignedIn>
-      <SignedOut>SignedOut</SignedOut>
-      <Protect fallback={'SignedOut from protect'}>SignedIn from protect</Protect>
-      <Protect plan='free_user'>
+      <Show when='signedIn'>SignedIn</Show>
+      <Show when='signedOut'>SignedOut</Show>
+      <Show
+        fallback={'SignedOut from protect'}
+        when='signedIn'
+      >
+        SignedIn from protect
+      </Show>
+      <Show when={{ plan: 'free_user' }}>
         <p>user in free</p>
-      </Protect>
-      <Protect plan='pro'>
+      </Show>
+      <Show when={{ plan: 'pro' }}>
         <p>user in pro</p>
-      </Protect>
-      <Protect plan='plus'>
+      </Show>
+      <Show when={{ plan: 'plus' }}>
         <p>user in plus</p>
-      </Protect>
+      </Show>
       <SignIn
         routing='hash'
         signUpUrl={'/sign-up'}

integration/templates/next-app-router/src/app/pricing-table/page.tsx

@@ -1,4 +1,4 @@
-import { PricingTable, Protect } from '@clerk/nextjs';
+import { PricingTable, Show } from '@clerk/nextjs';
 
 export default async function PricingTablePage({
   searchParams,
@@ -8,15 +8,15 @@ export default async function PricingTablePage({
   const newSubscriptionRedirectUrl = (await searchParams).newSubscriptionRedirectUrl;
   return (
     <>
-      <Protect plan='free_user'>
+      <Show when={{ plan: 'free_user' }}>
         <p>user in free</p>
-      </Protect>
-      <Protect plan='pro'>
+      </Show>
+      <Show when={{ plan: 'pro' }}>
         <p>user in pro</p>
-      </Protect>
-      <Protect plan='plus'>
+      </Show>
+      <Show when={{ plan: 'plus' }}>
         <p>user in plus</p>
-      </Protect>
+      </Show>
       <PricingTable newSubscriptionRedirectUrl={newSubscriptionRedirectUrl} />
     </>
   );

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

@@ -1,14 +1,13 @@
 'use client';
-import { Protect } from '@clerk/nextjs';
+import { Show } from '@clerk/nextjs';
 
 export default function Page() {
   return (
-    <Protect
-      permission='org:posts:manage'
-      /* @ts-ignore Need to take a look at the TS files, might be a types/react version thing */
+    <Show
       fallback={<p>User is missing permissions</p>}
+      when={{ permission: 'org:posts:manage' }}
     >
       <p>User has access</p>
-    </Protect>
+    </Show>
   );
 }

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

@@ -1,12 +1,12 @@
-import { Protect } from '@clerk/nextjs';
+import { Show } from '@clerk/nextjs';
 
 export default function Page() {
   return (
-    <Protect
-      role='org:admin'
+    <Show
       fallback={<p>User is not admin</p>}
+      when={{ role: 'org:admin' }}
     >
       <p>User has access</p>
-    </Protect>
+    </Show>
   );
 }

integration/templates/react-cra/src/App.tsx

@@ -1,15 +1,15 @@
 // @ts-ignore
 import React from 'react';
 import './App.css';
-import { SignedIn, SignedOut, SignIn, UserButton } from '@clerk/react';
+import { Show, SignIn, UserButton } from '@clerk/react';
 
 function App() {
   return (
     <main>
-      <SignedOut>
+      <Show when='signedOut'>
         <SignIn />
-      </SignedOut>
-      <SignedIn>Signed In</SignedIn>
+      </Show>
+      <Show when='signedIn'>Signed In</Show>
       <UserButton />
     </main>
   );

integration/templates/react-router-library/src/App.tsx

@@ -1,15 +1,15 @@
-import { SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/react-router';
+import { Show, SignInButton, UserButton } from '@clerk/react-router';
 import './App.css';
 
 function App() {
   return (
     <header>
-      <SignedOut>
+      <Show when='signedOut'>
         <SignInButton />
-      </SignedOut>
-      <SignedIn>
+      </Show>
+      <Show when='signedIn'>
         <UserButton />
-      </SignedIn>
+      </Show>
     </header>
   );
 }

integration/templates/react-router-node/app/routes/home.tsx

@@ -1,4 +1,4 @@
-import { SignedIn, SignedOut, UserButton } from '@clerk/react-router';
+import { Show, UserButton } from '@clerk/react-router';
 import type { Route } from './+types/home';
 
 export function meta({}: Route.MetaArgs) {
@@ -9,8 +9,8 @@ export default function Home() {
   return (
     <div>
       <UserButton />
-      <SignedIn>SignedIn</SignedIn>
-      <SignedOut>SignedOut</SignedOut>
+      <Show when='signedIn'>SignedIn</Show>
+      <Show when='signedOut'>SignedOut</Show>
     </div>
   );
 }

integration/templates/react-vite/src/App.tsx

@@ -1,4 +1,4 @@
-import { OrganizationSwitcher, SignedIn, SignedOut, UserButton } from '@clerk/react';
+import { OrganizationSwitcher, Show, UserButton } from '@clerk/react';
 import { Link } from 'react-router-dom';
 import React from 'react';
 import { ClientId } from './client-id';
@@ -9,8 +9,8 @@ function App() {
       <UserButton />
       <OrganizationSwitcher fallback={<>Loading organization switcher</>} />
       <ClientId />
-      <SignedOut>SignedOut</SignedOut>
-      <SignedIn>SignedIn</SignedIn>
+      <Show when='signedOut'>SignedOut</Show>
+      <Show when='signedIn'>SignedIn</Show>
       <Link href='/protected'>Protected</Link>
     </main>
   );

integration/templates/react-vite/src/protected/index.tsx

@@ -1,11 +1,11 @@
-import { SignedIn } from '@clerk/react';
+import { Show } from '@clerk/react';
 
 export default function Page() {
   return (
     <div>
-      <SignedIn>
+      <Show when='signedIn'>
         <div data-testid='protected'>Protected</div>
-      </SignedIn>
+      </Show>
     </div>
   );
 }

integration/templates/tanstack-react-start/src/routes/index.tsx

@@ -1,4 +1,4 @@
-import { SignedIn, UserButton, SignOutButton, SignedOut, SignIn } from '@clerk/tanstack-react-start';
+import { Show, SignIn, SignOutButton, UserButton } from '@clerk/tanstack-react-start';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/')({
@@ -9,7 +9,7 @@ function Home() {
   return (
     <div>
       <h1>Index Route</h1>
-      <SignedIn>
+      <Show when='signedIn'>
         <p>You are signed in!</p>
         <div>
           <p>View your profile here</p>
@@ -18,12 +18,12 @@ function Home() {
         <div>
           <SignOutButton />
         </div>
-      </SignedIn>
-      <SignedOut>
+      </Show>
+      <Show when='signedOut'>
         <p>You are signed out</p>
 
         <SignIn />
-      </SignedOut>
+      </Show>
     </div>
   );
 }

integration/templates/vue-vite/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SignedIn, SignedOut, ClerkLoaded, ClerkLoading } from '@clerk/vue';
+import { ClerkLoaded, ClerkLoading, Show } from '@clerk/vue';
 import CustomUserButton from './components/CustomUserButton.vue';
 import LanguagePicker from './components/LanguagePicker.vue';
 </script>
@@ -11,12 +11,12 @@ import LanguagePicker from './components/LanguagePicker.vue';
         <p class="title">Vue Clerk Integration test</p>
       </div>
       <LanguagePicker />
-      <SignedIn>
+      <Show when="signedIn">
         <CustomUserButton />
-      </SignedIn>
-      <SignedOut>
+      </Show>
+      <Show when="signedOut">
         <RouterLink to="/sign-in">Sign in</RouterLink>
-      </SignedOut>
+      </Show>
     </div>
   </header>
   <main>

integration/templates/vue-vite/src/views/Admin.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Protect } from '@clerk/vue';
+import { Show } from '@clerk/vue';
 </script>
 
 <template>
-  <Protect>
+  <Show :when="{ role: 'org:admin' }">
     <p>I am an admin</p>
     <template #fallback>
       <p>Not an admin</p>
     </template>
-  </Protect>
+  </Show>
 </template>

integration/templates/vue-vite/src/views/Home.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { SignedIn, OrganizationSwitcher, useAuth } from '@clerk/vue';
-
-const { isSignedIn } = useAuth();
+import { OrganizationSwitcher, Show } from '@clerk/vue';
 </script>
 
 <template>
-  <SignedIn>
+  <Show when="signedIn">
     <OrganizationSwitcher />
-  </SignedIn>
+  </Show>
   <div>
     <ul>
-      <li v-if="isSignedIn"><RouterLink to="/profile">Profile</RouterLink></li>
+      <Show when="signedIn">
+        <li>
+          <RouterLink to="/profile">Profile</RouterLink>
+        </li>
+      </Show>
     </ul>
   </div>
 </template>

integration/templates/vue-vite/src/views/billing/CheckoutBtn.vue

@@ -1,17 +1,17 @@
 <template>
   <main>
-    <SignedIn>
+    <Show when="signedIn">
       <CheckoutButton
         planId="cplan_2wMjqdlza0hTJc4HLCoBwAiExhF"
         planPeriod="month"
       >
         Checkout Now
       </CheckoutButton>
-    </SignedIn>
+    </Show>
   </main>
 </template>
 
 <script setup lang="ts">
-import { SignedIn } from '@clerk/vue';
+import { Show } from '@clerk/vue';
 import { CheckoutButton } from '@clerk/vue/experimental';
 </script>