wip

Author: jacekradko

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>

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: 'basic_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>

integration/templates/astro-node/src/pages/pricing-table.astro

@@ -1,21 +1,21 @@
 ---
-import { Protect, PricingTable } from '@clerk/astro/components';
+import { Show, PricingTable } from '@clerk/astro/components';
 import Layout from '../layouts/Layout.astro';
 
 const newSubscriptionRedirectUrl = Astro.url.searchParams.get('newSubscriptionRedirectUrl');
 ---
 
 <Layout title='Pricing Table'>
  <div class='w-full flex justify-center'>
- <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} />
  </div>
 </Layout>

integration/templates/astro-node/src/pages/server-islands.astro

@@ -1,24 +1,24 @@
 ---
-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
+ <Show
  server:defer
- role='org:admin'
+ when={{ role: 'org:admin' }}
  >
  <p slot='fallback'>Loading</p>
- <Fragment slot='protect-fallback'>
+ <h1 class='text-2xl text-center'>I'm an admin</h1>
+ <Fragment slot='show-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>
  </div>
 </Layout>

packages/astro/src/astro-components/control/Show.astro

@@ -3,9 +3,10 @@ import ShowCSR from './ShowCSR.astro';
 import ShowSSR from './ShowSSR.astro';
 
 import { isStaticOutput } from 'virtual:@clerk/astro/config';
+import type { ShowWhenCondition } from '@clerk/shared/types';
 
 type Props = {
- when: 'signedIn' | 'signedOut';
+ when: ShowWhenCondition;
  isStatic?: boolean;
  /**
  * The class name to apply to the outermost element of the component.
@@ -24,4 +25,5 @@ const ShowComponent = isStaticOutput(isStatic) ? ShowCSR : ShowSSR;
  class={className}
 >
  <slot />
+ <slot name='fallback' slot='fallback' />
 </ShowComponent>

packages/astro/src/astro-components/control/ShowCSR.astro

@@ -1,51 +1,73 @@
 ---
+import type { ShowWhenCondition } from '@clerk/shared/types';
+
 type Props = {
- when: 'signedIn' | 'signedOut';
+ when: ShowWhenCondition;
  class?: string;
 };
 
 const { when, class: className } = Astro.props;
+
+// Serialize when prop for client-side use
+const whenAttr = typeof when === 'string' ? when : JSON.stringify(when);
 ---
 
 <clerk-show
  class={className}
- when={when}
+ data-when={whenAttr}
  hidden
 >
- <slot />
+ <div data-clerk-control-slot-default hidden>
+ <slot />
+ </div>
+ <div data-clerk-control-slot-fallback hidden>
+ <slot name='fallback' />
+ </div>
 </clerk-show>
 
 <script>
+ import { $authStore, $sessionStore } from '@clerk/astro/client';
  import { type AuthState, BaseClerkControlElement } from './BaseClerkControlElement';
 
  class ClerkShow extends BaseClerkControlElement {
+ private defaultSlot: HTMLDivElement | null = null;
+ private fallbackSlot: HTMLDivElement | null = null;
+
  protected onAuthStateChange(state: AuthState): void {
- const when = this.getAttribute('when');
+ this.defaultSlot = this.querySelector('[data-clerk-control-slot-default]');
+ this.fallbackSlot = this.querySelector('[data-clerk-control-slot-fallback]');
+
+ const whenAttr = this.dataset.when;
+ if (!whenAttr) return;
 
- if (when === 'signedIn') {
- if (state.userId) {
- this.removeAttribute('hidden');
- } else {
- this.setAttribute('hidden', '');
+ let isAuthorized = false;
+
+ if (whenAttr === 'signedIn') {
+ isAuthorized = !!state.userId;
+ } else if (whenAttr === 'signedOut') {
+ isAuthorized = !state.userId;
+ } else {
+ // Try to parse as JSON (object-based conditions)
+ try {
+ const when = JSON.parse(whenAttr);
+ const session = $sessionStore.get();
+ if (state.userId && session?.checkAuthorization) {
+ isAuthorized = session.checkAuthorization(when);
+ }
+ } catch {
+ // Invalid JSON, treat as unauthorized
  }
- return;
  }
 
- if (when === 'signedOut') {
- if (state.userId) {
- this.setAttribute('hidden', '');
- } else {
- this.removeAttribute('hidden');
- }
- return;
+ if (this.defaultSlot) {
+ isAuthorized ? this.defaultSlot.removeAttribute('hidden') : this.defaultSlot.setAttribute('hidden', '');
  }
 
- // Unknown state; be conservative.
- this.setAttribute('hidden', '');
+ if (this.fallbackSlot) {
+ isAuthorized ? this.fallbackSlot.setAttribute('hidden', '') : this.fallbackSlot.removeAttribute('hidden');
+ }
  }
  }
 
- if (!customElements.get('clerk-show')) {
- customElements.define('clerk-show', ClerkShow);
- }
+ customElements.define('clerk-show', ClerkShow);
 </script>

packages/astro/src/astro-components/control/ShowSSR.astro

@@ -1,11 +1,24 @@
 ---
+import type { ShowWhenCondition } from '@clerk/shared/types';
+
 type Props = {
- when: 'signedIn' | 'signedOut';
+ when: ShowWhenCondition;
 };
 
 const { when } = Astro.props;
-const { userId } = Astro.locals.auth();
+const { userId, has } = Astro.locals.auth();
+
+const isAuthorized = (() => {
+ if (when === 'signedIn') return !!userId;
+ if (when === 'signedOut') return !userId;
+ if (typeof when === 'function') return userId && when(has);
+ // Object-based conditions (role, permission, feature, plan)
+ if (typeof when === 'object' && when !== null) {
+ if (!userId) return false;
+ return has(when);
+ }
+ return false;
+})();
 ---
 
-{when === 'signedIn' ? userId ? <slot /> : null : null}
-{when === 'signedOut' ? !userId ? <slot /> : null : null}
+{isAuthorized ? <slot /> : <slot name='fallback' />}

packages/astro/src/astro-components/index.ts

@@ -2,7 +2,6 @@
  * Control Components
  */
 export { default as Show } from './control/Show.astro';
-export { default as Protect } from './control/Protect.astro';
 export { default as AuthenticateWithRedirectCallback } from './control/AuthenticateWithRedirectCallback.astro';
 
 /**

packages/astro/src/types.ts

@@ -64,6 +64,9 @@ declare global {
 
 export type { AstroClerkUpdateOptions, AstroClerkIntegrationParams, AstroClerkCreateInstanceParams, ProtectParams };
 
+// Backward compatibility alias
+export type ProtectProps = ProtectParams;
+
 export type ButtonProps<Tag> = {
  /**
  * @deprecated The `'as'` prop will be removed in a future version.