feat(astro): Add OrganizationProfile custom pages and links

.changeset/swift-stingrays-cough.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": minor
+---
+
+Add support for custom pages and links in the `<OrganizationProfile />` Astro component.

integration/templates/astro-node/src/pages/custom-pages/organization-profile.astro

@@ -0,0 +1,51 @@
+---
+import {
+ OrganizationProfile as OrganizationProfileAstro,
+ OrganizationSwitcher
+} from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+
+// Added a dedicatedPage query param to conditionally render the OrganizationProfile
+// as for some reason, the menu items in the OrganizationSwitcher
+// goes out of bounds in test environment.
+const dedicatedPage = Astro.url.searchParams.get('dedicatedPage') === 'true';
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <OrganizationSwitcher>
+ {
+ !dedicatedPage && (
+ <OrganizationSwitcher.OrganizationProfilePage label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationSwitcher.OrganizationProfilePage>
+ <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationSwitcher.OrganizationProfileLink>
+ <OrganizationSwitcher.OrganizationProfilePage label="members" />
+ )
+ }
+ </OrganizationSwitcher>
+ {
+ dedicatedPage && (
+ <OrganizationProfileAstro path="/custom-pages/organization-profile">
+ <OrganizationProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationProfileAstro.Page>
+ <OrganizationProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationProfileAstro.Link>
+ <OrganizationProfileAstro.Page label="general" />
+ </OrganizationProfileAstro>
+ )
+ }
+ </div>
+</Layout>

integration/templates/astro-node/src/pages/custom-pages/user-profile.astro

@@ -0,0 +1,22 @@
+---
+import { UserProfile as UserProfileAstro } from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <UserProfileAstro path="/custom-pages/user-profile">
+ <UserProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </UserProfileAstro.Page>
+ <UserProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </UserProfileAstro.Link>
+ <UserProfileAstro.Page label="security" />
+ </UserProfileAstro>
+ </div>
+</Layout>

integration/tests/astro/components.test.ts

@@ -164,7 +164,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
  await u.po.expect.toBeSignedIn();
 
- await u.page.goToRelative('/custom-pages');
+ await u.page.goToRelative('/custom-pages/user-profile');
  await u.po.userProfile.waitForMounted();
 
  // Check if custom pages and links are visible
@@ -176,7 +176,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
 
  // Check reordered default label. Security tab is now the last item.
- await u.page.locator('.cl-navbarButton').nth(3).click();
+ await u.page.locator('.cl-navbarButton').last().click();
  await expect(u.page.getByRole('heading', { name: 'Security' })).toBeVisible();
 
  // Click custom link and check navigation
@@ -252,7 +252,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await fakeAdmin.deleteIfExists();
  });
 
- test('test updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
+ test('updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();
  await u.po.signIn.waitForMounted();
@@ -268,6 +268,70 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByText('pour continuer vers')).toBeVisible();
  });
 
+ test('render organization profile with custom pages and links in dedicated page', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=true');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. General tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
+ test('render organization profile with custom pages and links inside organization switcher', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=false');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Open organization profile inside organization switcher
+ await u.po.organizationSwitcher.toggleTrigger();
+ await u.page.waitForSelector('.cl-organizationSwitcherPopoverCard', { state: 'visible' });
+ await u.page.locator('.cl-button__manageOrganization').click();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. Members tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'Members' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
  // ---- react/protect
  test('only admin react', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });

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

@@ -20,7 +20,7 @@ export { default as SignIn } from './interactive/SignIn.astro';
 export { default as SignUp } from './interactive/SignUp.astro';
 export { UserButton } from './interactive/UserButton';
 export { UserProfile } from './interactive/UserProfile';
-export { default as OrganizationProfile } from './interactive/OrganizationProfile.astro';
-export { default as OrganizationSwitcher } from './interactive/OrganizationSwitcher.astro';
+export { OrganizationProfile } from './interactive/OrganizationProfile';
+export { OrganizationSwitcher } from './interactive/OrganizationSwitcher';
 export { default as OrganizationList } from './interactive/OrganizationList.astro';
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';

packages/astro/src/astro-components/interactive/CustomProfilePageRenderer.astro

@@ -0,0 +1,76 @@
+---
+interface Props {
+ url: string
+ label: string
+ type: 'page' | 'link'
+ component: 'organization-profile' | 'user-profile' | 'organization-switcher'
+ reorderItemsLabels?: Readonly<Array<string>>
+}
+
+const { url, label, type, component, reorderItemsLabels = [] } = Astro.props
+
+let labelIcon = '';
+let content = ''
+
+if (Astro.slots.has('label-icon')) {
+ labelIcon = await Astro.slots.render('label-icon');
+}
+
+if (Astro.slots.has('default') && type === 'page') {
+ content = await Astro.slots.render('default');
+}
+---
+
+<script is:inline define:vars={{ url, label, content, labelIcon, type, component, reorderItemsLabels }}>
+// Get the component map from window that we set in the `<InternalUIComponentRenderer />`.
+const clerkComponentMap = window.__astro_clerk_component_props.get(component);
+
+const componentElement = document.querySelector(`[data-clerk-id^="clerk-${component}"]`);
+
+const safeId = componentElement.getAttribute('data-clerk-id');
+const currentOptions = clerkComponentMap.get(safeId);
+
+const isReorderItem = reorderItemsLabels.includes(label);
+
+let newCustomPage = { label }
+
+if (!isReorderItem) {
+ newCustomPage = {
+ ...newCustomPage,
+ url,
+ mountIcon: (el) => { el.innerHTML = labelIcon },
+ unmountIcon: () => { /* Implement cleanup if needed */ }
+ }
+
+ if (type === 'page') {
+ newCustomPage = {
+ ...newCustomPage,
+ mount: (el) => { el.innerHTML = content },
+ unmount: () => { /* Implement cleanup if needed */ }
+ }
+ }
+}
+
+// Custom <OrganizationProfile /> pages can be added inside
+// the <OrganizationSwitcher /> component.
+if (component === 'organization-switcher') {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ organizationProfileProps: {
+ ...currentOptions.organizationProfileProps,
+ customPages: [
+ ...(currentOptions?.organizationProfileProps?.customPages ?? []),
+ newCustomPage
+ ]
+ }
+ })
+} else {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ customPages: [
+ ...(currentOptions?.customPages ?? []),
+ newCustomPage,
+ ]
+ })
+}
+</script>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro

@@ -0,0 +1,10 @@
+---
+import type { OrganizationProfileProps, Without } from '@clerk/types'
+
+type Props = Without<OrganizationProfileProps, 'customPages'>
+
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />
+<slot />

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-profile">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-profile" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

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

@@ -0,0 +1,8 @@
+import _OrganizationProfile from './OrganizationProfile.astro';
+import OrganizationProfileLink from './OrganizationProfileLink.astro';
+import OrganizationProfilePage from './OrganizationProfilePage.astro';
+
+export const OrganizationProfile = Object.assign(_OrganizationProfile, {
+ Page: OrganizationProfilePage,
+ Link: OrganizationProfileLink,
+});

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-switcher">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-switcher" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

.changeset/swift-stingrays-cough.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": minor
+---
+
+Add support for custom pages and links in the `<OrganizationProfile />` Astro component.

integration/templates/astro-node/src/pages/custom-pages/organization-profile.astro

@@ -0,0 +1,51 @@
+---
+import {
+ OrganizationProfile as OrganizationProfileAstro,
+ OrganizationSwitcher
+} from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+
+// Added a dedicatedPage query param to conditionally render the OrganizationProfile
+// as for some reason, the menu items in the OrganizationSwitcher
+// goes out of bounds in test environment.
+const dedicatedPage = Astro.url.searchParams.get('dedicatedPage') === 'true';
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <OrganizationSwitcher>
+ {
+ !dedicatedPage && (
+ <OrganizationSwitcher.OrganizationProfilePage label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationSwitcher.OrganizationProfilePage>
+ <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationSwitcher.OrganizationProfileLink>
+ <OrganizationSwitcher.OrganizationProfilePage label="members" />
+ )
+ }
+ </OrganizationSwitcher>
+ {
+ dedicatedPage && (
+ <OrganizationProfileAstro path="/custom-pages/organization-profile">
+ <OrganizationProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationProfileAstro.Page>
+ <OrganizationProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationProfileAstro.Link>
+ <OrganizationProfileAstro.Page label="general" />
+ </OrganizationProfileAstro>
+ )
+ }
+ </div>
+</Layout>

integration/templates/astro-node/src/pages/custom-pages/user-profile.astro

@@ -0,0 +1,22 @@
+---
+import { UserProfile as UserProfileAstro } from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <UserProfileAstro path="/custom-pages/user-profile">
+ <UserProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </UserProfileAstro.Page>
+ <UserProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </UserProfileAstro.Link>
+ <UserProfileAstro.Page label="security" />
+ </UserProfileAstro>
+ </div>
+</Layout>

integration/tests/astro/components.test.ts

@@ -164,7 +164,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
  await u.po.expect.toBeSignedIn();
 
- await u.page.goToRelative('/custom-pages');
+ await u.page.goToRelative('/custom-pages/user-profile');
  await u.po.userProfile.waitForMounted();
 
  // Check if custom pages and links are visible
@@ -176,7 +176,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
 
  // Check reordered default label. Security tab is now the last item.
- await u.page.locator('.cl-navbarButton').nth(3).click();
+ await u.page.locator('.cl-navbarButton').last().click();
  await expect(u.page.getByRole('heading', { name: 'Security' })).toBeVisible();
 
  // Click custom link and check navigation
@@ -252,7 +252,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await fakeAdmin.deleteIfExists();
  });
 
- test('test updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
+ test('updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();
  await u.po.signIn.waitForMounted();
@@ -268,6 +268,70 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByText('pour continuer vers')).toBeVisible();
  });
 
+ test('render organization profile with custom pages and links in dedicated page', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=true');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. General tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
+ test('render organization profile with custom pages and links inside organization switcher', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=false');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Open organization profile inside organization switcher
+ await u.po.organizationSwitcher.toggleTrigger();
+ await u.page.waitForSelector('.cl-organizationSwitcherPopoverCard', { state: 'visible' });
+ await u.page.locator('.cl-button__manageOrganization').click();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. Members tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'Members' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
  // ---- react/protect
  test('only admin react', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });

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

@@ -20,7 +20,7 @@ export { default as SignIn } from './interactive/SignIn.astro';
 export { default as SignUp } from './interactive/SignUp.astro';
 export { UserButton } from './interactive/UserButton';
 export { UserProfile } from './interactive/UserProfile';
-export { default as OrganizationProfile } from './interactive/OrganizationProfile.astro';
-export { default as OrganizationSwitcher } from './interactive/OrganizationSwitcher.astro';
+export { OrganizationProfile } from './interactive/OrganizationProfile';
+export { OrganizationSwitcher } from './interactive/OrganizationSwitcher';
 export { default as OrganizationList } from './interactive/OrganizationList.astro';
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';

packages/astro/src/astro-components/interactive/CustomProfilePageRenderer.astro

@@ -0,0 +1,76 @@
+---
+interface Props {
+ url: string
+ label: string
+ type: 'page' | 'link'
+ component: 'organization-profile' | 'user-profile' | 'organization-switcher'
+ reorderItemsLabels?: Readonly<Array<string>>
+}
+
+const { url, label, type, component, reorderItemsLabels = [] } = Astro.props
+
+let labelIcon = '';
+let content = ''
+
+if (Astro.slots.has('label-icon')) {
+ labelIcon = await Astro.slots.render('label-icon');
+}
+
+if (Astro.slots.has('default') && type === 'page') {
+ content = await Astro.slots.render('default');
+}
+---
+
+<script is:inline define:vars={{ url, label, content, labelIcon, type, component, reorderItemsLabels }}>
+// Get the component map from window that we set in the `<InternalUIComponentRenderer />`.
+const clerkComponentMap = window.__astro_clerk_component_props.get(component);
+
+const componentElement = document.querySelector(`[data-clerk-id^="clerk-${component}"]`);
+
+const safeId = componentElement.getAttribute('data-clerk-id');
+const currentOptions = clerkComponentMap.get(safeId);
+
+const isReorderItem = reorderItemsLabels.includes(label);
+
+let newCustomPage = { label }
+
+if (!isReorderItem) {
+ newCustomPage = {
+ ...newCustomPage,
+ url,
+ mountIcon: (el) => { el.innerHTML = labelIcon },
+ unmountIcon: () => { /* Implement cleanup if needed */ }
+ }
+
+ if (type === 'page') {
+ newCustomPage = {
+ ...newCustomPage,
+ mount: (el) => { el.innerHTML = content },
+ unmount: () => { /* Implement cleanup if needed */ }
+ }
+ }
+}
+
+// Custom <OrganizationProfile /> pages can be added inside
+// the <OrganizationSwitcher /> component.
+if (component === 'organization-switcher') {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ organizationProfileProps: {
+ ...currentOptions.organizationProfileProps,
+ customPages: [
+ ...(currentOptions?.organizationProfileProps?.customPages ?? []),
+ newCustomPage
+ ]
+ }
+ })
+} else {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ customPages: [
+ ...(currentOptions?.customPages ?? []),
+ newCustomPage,
+ ]
+ })
+}
+</script>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro

@@ -0,0 +1,10 @@
+---
+import type { OrganizationProfileProps, Without } from '@clerk/types'
+
+type Props = Without<OrganizationProfileProps, 'customPages'>
+
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />
+<slot />

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-profile">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-profile" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

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

@@ -0,0 +1,8 @@
+import _OrganizationProfile from './OrganizationProfile.astro';
+import OrganizationProfileLink from './OrganizationProfileLink.astro';
+import OrganizationProfilePage from './OrganizationProfilePage.astro';
+
+export const OrganizationProfile = Object.assign(_OrganizationProfile, {
+ Page: OrganizationProfilePage,
+ Link: OrganizationProfileLink,
+});

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-switcher">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-switcher" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

.changeset/swift-stingrays-cough.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": minor
+---
+
+Add support for custom pages and links in the `<OrganizationProfile />` Astro component.

integration/templates/astro-node/src/pages/custom-pages/organization-profile.astro

@@ -0,0 +1,51 @@
+---
+import {
+ OrganizationProfile as OrganizationProfileAstro,
+ OrganizationSwitcher
+} from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+
+// Added a dedicatedPage query param to conditionally render the OrganizationProfile
+// as for some reason, the menu items in the OrganizationSwitcher
+// goes out of bounds in test environment.
+const dedicatedPage = Astro.url.searchParams.get('dedicatedPage') === 'true';
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <OrganizationSwitcher>
+ {
+ !dedicatedPage && (
+ <OrganizationSwitcher.OrganizationProfilePage label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationSwitcher.OrganizationProfilePage>
+ <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationSwitcher.OrganizationProfileLink>
+ <OrganizationSwitcher.OrganizationProfilePage label="members" />
+ )
+ }
+ </OrganizationSwitcher>
+ {
+ dedicatedPage && (
+ <OrganizationProfileAstro path="/custom-pages/organization-profile">
+ <OrganizationProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationProfileAstro.Page>
+ <OrganizationProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationProfileAstro.Link>
+ <OrganizationProfileAstro.Page label="general" />
+ </OrganizationProfileAstro>
+ )
+ }
+ </div>
+</Layout>

integration/templates/astro-node/src/pages/custom-pages/user-profile.astro

@@ -0,0 +1,22 @@
+---
+import { UserProfile as UserProfileAstro } from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <UserProfileAstro path="/custom-pages/user-profile">
+ <UserProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </UserProfileAstro.Page>
+ <UserProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </UserProfileAstro.Link>
+ <UserProfileAstro.Page label="security" />
+ </UserProfileAstro>
+ </div>
+</Layout>

integration/tests/astro/components.test.ts

@@ -164,7 +164,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
  await u.po.expect.toBeSignedIn();
 
- await u.page.goToRelative('/custom-pages');
+ await u.page.goToRelative('/custom-pages/user-profile');
  await u.po.userProfile.waitForMounted();
 
  // Check if custom pages and links are visible
@@ -176,7 +176,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
 
  // Check reordered default label. Security tab is now the last item.
- await u.page.locator('.cl-navbarButton').nth(3).click();
+ await u.page.locator('.cl-navbarButton').last().click();
  await expect(u.page.getByRole('heading', { name: 'Security' })).toBeVisible();
 
  // Click custom link and check navigation
@@ -252,7 +252,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await fakeAdmin.deleteIfExists();
  });
 
- test('test updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
+ test('updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();
  await u.po.signIn.waitForMounted();
@@ -268,6 +268,70 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByText('pour continuer vers')).toBeVisible();
  });
 
+ test('render organization profile with custom pages and links in dedicated page', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=true');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. General tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
+ test('render organization profile with custom pages and links inside organization switcher', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=false');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Open organization profile inside organization switcher
+ await u.po.organizationSwitcher.toggleTrigger();
+ await u.page.waitForSelector('.cl-organizationSwitcherPopoverCard', { state: 'visible' });
+ await u.page.locator('.cl-button__manageOrganization').click();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. Members tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'Members' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
  // ---- react/protect
  test('only admin react', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });

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

@@ -20,7 +20,7 @@ export { default as SignIn } from './interactive/SignIn.astro';
 export { default as SignUp } from './interactive/SignUp.astro';
 export { UserButton } from './interactive/UserButton';
 export { UserProfile } from './interactive/UserProfile';
-export { default as OrganizationProfile } from './interactive/OrganizationProfile.astro';
-export { default as OrganizationSwitcher } from './interactive/OrganizationSwitcher.astro';
+export { OrganizationProfile } from './interactive/OrganizationProfile';
+export { OrganizationSwitcher } from './interactive/OrganizationSwitcher';
 export { default as OrganizationList } from './interactive/OrganizationList.astro';
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';

packages/astro/src/astro-components/interactive/CustomProfilePageRenderer.astro

@@ -0,0 +1,76 @@
+---
+interface Props {
+ url: string
+ label: string
+ type: 'page' | 'link'
+ component: 'organization-profile' | 'user-profile' | 'organization-switcher'
+ reorderItemsLabels?: Readonly<Array<string>>
+}
+
+const { url, label, type, component, reorderItemsLabels = [] } = Astro.props
+
+let labelIcon = '';
+let content = ''
+
+if (Astro.slots.has('label-icon')) {
+ labelIcon = await Astro.slots.render('label-icon');
+}
+
+if (Astro.slots.has('default') && type === 'page') {
+ content = await Astro.slots.render('default');
+}
+---
+
+<script is:inline define:vars={{ url, label, content, labelIcon, type, component, reorderItemsLabels }}>
+// Get the component map from window that we set in the `<InternalUIComponentRenderer />`.
+const clerkComponentMap = window.__astro_clerk_component_props.get(component);
+
+const componentElement = document.querySelector(`[data-clerk-id^="clerk-${component}"]`);
+
+const safeId = componentElement.getAttribute('data-clerk-id');
+const currentOptions = clerkComponentMap.get(safeId);
+
+const isReorderItem = reorderItemsLabels.includes(label);
+
+let newCustomPage = { label }
+
+if (!isReorderItem) {
+ newCustomPage = {
+ ...newCustomPage,
+ url,
+ mountIcon: (el) => { el.innerHTML = labelIcon },
+ unmountIcon: () => { /* Implement cleanup if needed */ }
+ }
+
+ if (type === 'page') {
+ newCustomPage = {
+ ...newCustomPage,
+ mount: (el) => { el.innerHTML = content },
+ unmount: () => { /* Implement cleanup if needed */ }
+ }
+ }
+}
+
+// Custom <OrganizationProfile /> pages can be added inside
+// the <OrganizationSwitcher /> component.
+if (component === 'organization-switcher') {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ organizationProfileProps: {
+ ...currentOptions.organizationProfileProps,
+ customPages: [
+ ...(currentOptions?.organizationProfileProps?.customPages ?? []),
+ newCustomPage
+ ]
+ }
+ })
+} else {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ customPages: [
+ ...(currentOptions?.customPages ?? []),
+ newCustomPage,
+ ]
+ })
+}
+</script>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro

@@ -0,0 +1,10 @@
+---
+import type { OrganizationProfileProps, Without } from '@clerk/types'
+
+type Props = Without<OrganizationProfileProps, 'customPages'>
+
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />
+<slot />

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-profile">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-profile" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

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

@@ -0,0 +1,8 @@
+import _OrganizationProfile from './OrganizationProfile.astro';
+import OrganizationProfileLink from './OrganizationProfileLink.astro';
+import OrganizationProfilePage from './OrganizationProfilePage.astro';
+
+export const OrganizationProfile = Object.assign(_OrganizationProfile, {
+ Page: OrganizationProfilePage,
+ Link: OrganizationProfileLink,
+});

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-switcher">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-switcher" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

.changeset/swift-stingrays-cough.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": minor
+---
+
+Add support for custom pages and links in the `<OrganizationProfile />` Astro component.

integration/templates/astro-node/src/pages/custom-pages/organization-profile.astro

@@ -0,0 +1,51 @@
+---
+import {
+ OrganizationProfile as OrganizationProfileAstro,
+ OrganizationSwitcher
+} from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+
+// Added a dedicatedPage query param to conditionally render the OrganizationProfile
+// as for some reason, the menu items in the OrganizationSwitcher
+// goes out of bounds in test environment.
+const dedicatedPage = Astro.url.searchParams.get('dedicatedPage') === 'true';
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <OrganizationSwitcher>
+ {
+ !dedicatedPage && (
+ <OrganizationSwitcher.OrganizationProfilePage label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationSwitcher.OrganizationProfilePage>
+ <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationSwitcher.OrganizationProfileLink>
+ <OrganizationSwitcher.OrganizationProfilePage label="members" />
+ )
+ }
+ </OrganizationSwitcher>
+ {
+ dedicatedPage && (
+ <OrganizationProfileAstro path="/custom-pages/organization-profile">
+ <OrganizationProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationProfileAstro.Page>
+ <OrganizationProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationProfileAstro.Link>
+ <OrganizationProfileAstro.Page label="general" />
+ </OrganizationProfileAstro>
+ )
+ }
+ </div>
+</Layout>

integration/templates/astro-node/src/pages/custom-pages/user-profile.astro

@@ -0,0 +1,22 @@
+---
+import { UserProfile as UserProfileAstro } from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <UserProfileAstro path="/custom-pages/user-profile">
+ <UserProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </UserProfileAstro.Page>
+ <UserProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </UserProfileAstro.Link>
+ <UserProfileAstro.Page label="security" />
+ </UserProfileAstro>
+ </div>
+</Layout>

integration/tests/astro/components.test.ts

@@ -164,7 +164,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
  await u.po.expect.toBeSignedIn();
 
- await u.page.goToRelative('/custom-pages');
+ await u.page.goToRelative('/custom-pages/user-profile');
  await u.po.userProfile.waitForMounted();
 
  // Check if custom pages and links are visible
@@ -176,7 +176,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
 
  // Check reordered default label. Security tab is now the last item.
- await u.page.locator('.cl-navbarButton').nth(3).click();
+ await u.page.locator('.cl-navbarButton').last().click();
  await expect(u.page.getByRole('heading', { name: 'Security' })).toBeVisible();
 
  // Click custom link and check navigation
@@ -252,7 +252,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await fakeAdmin.deleteIfExists();
  });
 
- test('test updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
+ test('updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();
  await u.po.signIn.waitForMounted();
@@ -268,6 +268,70 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByText('pour continuer vers')).toBeVisible();
  });
 
+ test('render organization profile with custom pages and links in dedicated page', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=true');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. General tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
+ test('render organization profile with custom pages and links inside organization switcher', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=false');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Open organization profile inside organization switcher
+ await u.po.organizationSwitcher.toggleTrigger();
+ await u.page.waitForSelector('.cl-organizationSwitcherPopoverCard', { state: 'visible' });
+ await u.page.locator('.cl-button__manageOrganization').click();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. Members tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'Members' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
  // ---- react/protect
  test('only admin react', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });

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

@@ -20,7 +20,7 @@ export { default as SignIn } from './interactive/SignIn.astro';
 export { default as SignUp } from './interactive/SignUp.astro';
 export { UserButton } from './interactive/UserButton';
 export { UserProfile } from './interactive/UserProfile';
-export { default as OrganizationProfile } from './interactive/OrganizationProfile.astro';
-export { default as OrganizationSwitcher } from './interactive/OrganizationSwitcher.astro';
+export { OrganizationProfile } from './interactive/OrganizationProfile';
+export { OrganizationSwitcher } from './interactive/OrganizationSwitcher';
 export { default as OrganizationList } from './interactive/OrganizationList.astro';
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';

packages/astro/src/astro-components/interactive/CustomProfilePageRenderer.astro

@@ -0,0 +1,76 @@
+---
+interface Props {
+ url: string
+ label: string
+ type: 'page' | 'link'
+ component: 'organization-profile' | 'user-profile' | 'organization-switcher'
+ reorderItemsLabels?: Readonly<Array<string>>
+}
+
+const { url, label, type, component, reorderItemsLabels = [] } = Astro.props
+
+let labelIcon = '';
+let content = ''
+
+if (Astro.slots.has('label-icon')) {
+ labelIcon = await Astro.slots.render('label-icon');
+}
+
+if (Astro.slots.has('default') && type === 'page') {
+ content = await Astro.slots.render('default');
+}
+---
+
+<script is:inline define:vars={{ url, label, content, labelIcon, type, component, reorderItemsLabels }}>
+// Get the component map from window that we set in the `<InternalUIComponentRenderer />`.
+const clerkComponentMap = window.__astro_clerk_component_props.get(component);
+
+const componentElement = document.querySelector(`[data-clerk-id^="clerk-${component}"]`);
+
+const safeId = componentElement.getAttribute('data-clerk-id');
+const currentOptions = clerkComponentMap.get(safeId);
+
+const isReorderItem = reorderItemsLabels.includes(label);
+
+let newCustomPage = { label }
+
+if (!isReorderItem) {
+ newCustomPage = {
+ ...newCustomPage,
+ url,
+ mountIcon: (el) => { el.innerHTML = labelIcon },
+ unmountIcon: () => { /* Implement cleanup if needed */ }
+ }
+
+ if (type === 'page') {
+ newCustomPage = {
+ ...newCustomPage,
+ mount: (el) => { el.innerHTML = content },
+ unmount: () => { /* Implement cleanup if needed */ }
+ }
+ }
+}
+
+// Custom <OrganizationProfile /> pages can be added inside
+// the <OrganizationSwitcher /> component.
+if (component === 'organization-switcher') {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ organizationProfileProps: {
+ ...currentOptions.organizationProfileProps,
+ customPages: [
+ ...(currentOptions?.organizationProfileProps?.customPages ?? []),
+ newCustomPage
+ ]
+ }
+ })
+} else {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ customPages: [
+ ...(currentOptions?.customPages ?? []),
+ newCustomPage,
+ ]
+ })
+}
+</script>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro

@@ -0,0 +1,10 @@
+---
+import type { OrganizationProfileProps, Without } from '@clerk/types'
+
+type Props = Without<OrganizationProfileProps, 'customPages'>
+
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />
+<slot />

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-profile">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-profile" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

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

@@ -0,0 +1,8 @@
+import _OrganizationProfile from './OrganizationProfile.astro';
+import OrganizationProfileLink from './OrganizationProfileLink.astro';
+import OrganizationProfilePage from './OrganizationProfilePage.astro';
+
+export const OrganizationProfile = Object.assign(_OrganizationProfile, {
+ Page: OrganizationProfilePage,
+ Link: OrganizationProfileLink,
+});

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-switcher">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-switcher" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

.changeset/swift-stingrays-cough.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": minor
+---
+
+Add support for custom pages and links in the `<OrganizationProfile />` Astro component.

integration/templates/astro-node/src/pages/custom-pages/organization-profile.astro

@@ -0,0 +1,51 @@
+---
+import {
+ OrganizationProfile as OrganizationProfileAstro,
+ OrganizationSwitcher
+} from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+
+// Added a dedicatedPage query param to conditionally render the OrganizationProfile
+// as for some reason, the menu items in the OrganizationSwitcher
+// goes out of bounds in test environment.
+const dedicatedPage = Astro.url.searchParams.get('dedicatedPage') === 'true';
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <OrganizationSwitcher>
+ {
+ !dedicatedPage && (
+ <OrganizationSwitcher.OrganizationProfilePage label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationSwitcher.OrganizationProfilePage>
+ <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationSwitcher.OrganizationProfileLink>
+ <OrganizationSwitcher.OrganizationProfilePage label="members" />
+ )
+ }
+ </OrganizationSwitcher>
+ {
+ dedicatedPage && (
+ <OrganizationProfileAstro path="/custom-pages/organization-profile">
+ <OrganizationProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationProfileAstro.Page>
+ <OrganizationProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationProfileAstro.Link>
+ <OrganizationProfileAstro.Page label="general" />
+ </OrganizationProfileAstro>
+ )
+ }
+ </div>
+</Layout>

integration/templates/astro-node/src/pages/custom-pages/user-profile.astro

@@ -0,0 +1,22 @@
+---
+import { UserProfile as UserProfileAstro } from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <UserProfileAstro path="/custom-pages/user-profile">
+ <UserProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </UserProfileAstro.Page>
+ <UserProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </UserProfileAstro.Link>
+ <UserProfileAstro.Page label="security" />
+ </UserProfileAstro>
+ </div>
+</Layout>

integration/tests/astro/components.test.ts

@@ -164,7 +164,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
  await u.po.expect.toBeSignedIn();
 
- await u.page.goToRelative('/custom-pages');
+ await u.page.goToRelative('/custom-pages/user-profile');
  await u.po.userProfile.waitForMounted();
 
  // Check if custom pages and links are visible
@@ -176,7 +176,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
 
  // Check reordered default label. Security tab is now the last item.
- await u.page.locator('.cl-navbarButton').nth(3).click();
+ await u.page.locator('.cl-navbarButton').last().click();
  await expect(u.page.getByRole('heading', { name: 'Security' })).toBeVisible();
 
  // Click custom link and check navigation
@@ -252,7 +252,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await fakeAdmin.deleteIfExists();
  });
 
- test('test updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
+ test('updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();
  await u.po.signIn.waitForMounted();
@@ -268,6 +268,70 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByText('pour continuer vers')).toBeVisible();
  });
 
+ test('render organization profile with custom pages and links in dedicated page', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=true');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. General tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
+ test('render organization profile with custom pages and links inside organization switcher', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=false');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Open organization profile inside organization switcher
+ await u.po.organizationSwitcher.toggleTrigger();
+ await u.page.waitForSelector('.cl-organizationSwitcherPopoverCard', { state: 'visible' });
+ await u.page.locator('.cl-button__manageOrganization').click();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. Members tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'Members' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
  // ---- react/protect
  test('only admin react', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });

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

@@ -20,7 +20,7 @@ export { default as SignIn } from './interactive/SignIn.astro';
 export { default as SignUp } from './interactive/SignUp.astro';
 export { UserButton } from './interactive/UserButton';
 export { UserProfile } from './interactive/UserProfile';
-export { default as OrganizationProfile } from './interactive/OrganizationProfile.astro';
-export { default as OrganizationSwitcher } from './interactive/OrganizationSwitcher.astro';
+export { OrganizationProfile } from './interactive/OrganizationProfile';
+export { OrganizationSwitcher } from './interactive/OrganizationSwitcher';
 export { default as OrganizationList } from './interactive/OrganizationList.astro';
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';

packages/astro/src/astro-components/interactive/CustomProfilePageRenderer.astro

@@ -0,0 +1,76 @@
+---
+interface Props {
+ url: string
+ label: string
+ type: 'page' | 'link'
+ component: 'organization-profile' | 'user-profile' | 'organization-switcher'
+ reorderItemsLabels?: Readonly<Array<string>>
+}
+
+const { url, label, type, component, reorderItemsLabels = [] } = Astro.props
+
+let labelIcon = '';
+let content = ''
+
+if (Astro.slots.has('label-icon')) {
+ labelIcon = await Astro.slots.render('label-icon');
+}
+
+if (Astro.slots.has('default') && type === 'page') {
+ content = await Astro.slots.render('default');
+}
+---
+
+<script is:inline define:vars={{ url, label, content, labelIcon, type, component, reorderItemsLabels }}>
+// Get the component map from window that we set in the `<InternalUIComponentRenderer />`.
+const clerkComponentMap = window.__astro_clerk_component_props.get(component);
+
+const componentElement = document.querySelector(`[data-clerk-id^="clerk-${component}"]`);
+
+const safeId = componentElement.getAttribute('data-clerk-id');
+const currentOptions = clerkComponentMap.get(safeId);
+
+const isReorderItem = reorderItemsLabels.includes(label);
+
+let newCustomPage = { label }
+
+if (!isReorderItem) {
+ newCustomPage = {
+ ...newCustomPage,
+ url,
+ mountIcon: (el) => { el.innerHTML = labelIcon },
+ unmountIcon: () => { /* Implement cleanup if needed */ }
+ }
+
+ if (type === 'page') {
+ newCustomPage = {
+ ...newCustomPage,
+ mount: (el) => { el.innerHTML = content },
+ unmount: () => { /* Implement cleanup if needed */ }
+ }
+ }
+}
+
+// Custom <OrganizationProfile /> pages can be added inside
+// the <OrganizationSwitcher /> component.
+if (component === 'organization-switcher') {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ organizationProfileProps: {
+ ...currentOptions.organizationProfileProps,
+ customPages: [
+ ...(currentOptions?.organizationProfileProps?.customPages ?? []),
+ newCustomPage
+ ]
+ }
+ })
+} else {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ customPages: [
+ ...(currentOptions?.customPages ?? []),
+ newCustomPage,
+ ]
+ })
+}
+</script>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro

@@ -0,0 +1,10 @@
+---
+import type { OrganizationProfileProps, Without } from '@clerk/types'
+
+type Props = Without<OrganizationProfileProps, 'customPages'>
+
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />
+<slot />

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-profile">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-profile" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

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

@@ -0,0 +1,8 @@
+import _OrganizationProfile from './OrganizationProfile.astro';
+import OrganizationProfileLink from './OrganizationProfileLink.astro';
+import OrganizationProfilePage from './OrganizationProfilePage.astro';
+
+export const OrganizationProfile = Object.assign(_OrganizationProfile, {
+ Page: OrganizationProfilePage,
+ Link: OrganizationProfileLink,
+});

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-switcher">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-switcher" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

.changeset/swift-stingrays-cough.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": minor
+---
+
+Add support for custom pages and links in the `<OrganizationProfile />` Astro component.

integration/templates/astro-node/src/pages/custom-pages/organization-profile.astro

@@ -0,0 +1,51 @@
+---
+import {
+ OrganizationProfile as OrganizationProfileAstro,
+ OrganizationSwitcher
+} from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+
+// Added a dedicatedPage query param to conditionally render the OrganizationProfile
+// as for some reason, the menu items in the OrganizationSwitcher
+// goes out of bounds in test environment.
+const dedicatedPage = Astro.url.searchParams.get('dedicatedPage') === 'true';
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <OrganizationSwitcher>
+ {
+ !dedicatedPage && (
+ <OrganizationSwitcher.OrganizationProfilePage label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationSwitcher.OrganizationProfilePage>
+ <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationSwitcher.OrganizationProfileLink>
+ <OrganizationSwitcher.OrganizationProfilePage label="members" />
+ )
+ }
+ </OrganizationSwitcher>
+ {
+ dedicatedPage && (
+ <OrganizationProfileAstro path="/custom-pages/organization-profile">
+ <OrganizationProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationProfileAstro.Page>
+ <OrganizationProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationProfileAstro.Link>
+ <OrganizationProfileAstro.Page label="general" />
+ </OrganizationProfileAstro>
+ )
+ }
+ </div>
+</Layout>

integration/templates/astro-node/src/pages/custom-pages/user-profile.astro

@@ -0,0 +1,22 @@
+---
+import { UserProfile as UserProfileAstro } from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <UserProfileAstro path="/custom-pages/user-profile">
+ <UserProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </UserProfileAstro.Page>
+ <UserProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </UserProfileAstro.Link>
+ <UserProfileAstro.Page label="security" />
+ </UserProfileAstro>
+ </div>
+</Layout>

integration/tests/astro/components.test.ts

@@ -164,7 +164,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
  await u.po.expect.toBeSignedIn();
 
- await u.page.goToRelative('/custom-pages');
+ await u.page.goToRelative('/custom-pages/user-profile');
  await u.po.userProfile.waitForMounted();
 
  // Check if custom pages and links are visible
@@ -176,7 +176,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
 
  // Check reordered default label. Security tab is now the last item.
- await u.page.locator('.cl-navbarButton').nth(3).click();
+ await u.page.locator('.cl-navbarButton').last().click();
  await expect(u.page.getByRole('heading', { name: 'Security' })).toBeVisible();
 
  // Click custom link and check navigation
@@ -252,7 +252,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await fakeAdmin.deleteIfExists();
  });
 
- test('test updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
+ test('updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();
  await u.po.signIn.waitForMounted();
@@ -268,6 +268,70 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByText('pour continuer vers')).toBeVisible();
  });
 
+ test('render organization profile with custom pages and links in dedicated page', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=true');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. General tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
+ test('render organization profile with custom pages and links inside organization switcher', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=false');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Open organization profile inside organization switcher
+ await u.po.organizationSwitcher.toggleTrigger();
+ await u.page.waitForSelector('.cl-organizationSwitcherPopoverCard', { state: 'visible' });
+ await u.page.locator('.cl-button__manageOrganization').click();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. Members tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'Members' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
  // ---- react/protect
  test('only admin react', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });

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

@@ -20,7 +20,7 @@ export { default as SignIn } from './interactive/SignIn.astro';
 export { default as SignUp } from './interactive/SignUp.astro';
 export { UserButton } from './interactive/UserButton';
 export { UserProfile } from './interactive/UserProfile';
-export { default as OrganizationProfile } from './interactive/OrganizationProfile.astro';
-export { default as OrganizationSwitcher } from './interactive/OrganizationSwitcher.astro';
+export { OrganizationProfile } from './interactive/OrganizationProfile';
+export { OrganizationSwitcher } from './interactive/OrganizationSwitcher';
 export { default as OrganizationList } from './interactive/OrganizationList.astro';
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';

packages/astro/src/astro-components/interactive/CustomProfilePageRenderer.astro

@@ -0,0 +1,76 @@
+---
+interface Props {
+ url: string
+ label: string
+ type: 'page' | 'link'
+ component: 'organization-profile' | 'user-profile' | 'organization-switcher'
+ reorderItemsLabels?: Readonly<Array<string>>
+}
+
+const { url, label, type, component, reorderItemsLabels = [] } = Astro.props
+
+let labelIcon = '';
+let content = ''
+
+if (Astro.slots.has('label-icon')) {
+ labelIcon = await Astro.slots.render('label-icon');
+}
+
+if (Astro.slots.has('default') && type === 'page') {
+ content = await Astro.slots.render('default');
+}
+---
+
+<script is:inline define:vars={{ url, label, content, labelIcon, type, component, reorderItemsLabels }}>
+// Get the component map from window that we set in the `<InternalUIComponentRenderer />`.
+const clerkComponentMap = window.__astro_clerk_component_props.get(component);
+
+const componentElement = document.querySelector(`[data-clerk-id^="clerk-${component}"]`);
+
+const safeId = componentElement.getAttribute('data-clerk-id');
+const currentOptions = clerkComponentMap.get(safeId);
+
+const isReorderItem = reorderItemsLabels.includes(label);
+
+let newCustomPage = { label }
+
+if (!isReorderItem) {
+ newCustomPage = {
+ ...newCustomPage,
+ url,
+ mountIcon: (el) => { el.innerHTML = labelIcon },
+ unmountIcon: () => { /* Implement cleanup if needed */ }
+ }
+
+ if (type === 'page') {
+ newCustomPage = {
+ ...newCustomPage,
+ mount: (el) => { el.innerHTML = content },
+ unmount: () => { /* Implement cleanup if needed */ }
+ }
+ }
+}
+
+// Custom <OrganizationProfile /> pages can be added inside
+// the <OrganizationSwitcher /> component.
+if (component === 'organization-switcher') {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ organizationProfileProps: {
+ ...currentOptions.organizationProfileProps,
+ customPages: [
+ ...(currentOptions?.organizationProfileProps?.customPages ?? []),
+ newCustomPage
+ ]
+ }
+ })
+} else {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ customPages: [
+ ...(currentOptions?.customPages ?? []),
+ newCustomPage,
+ ]
+ })
+}
+</script>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro

@@ -0,0 +1,10 @@
+---
+import type { OrganizationProfileProps, Without } from '@clerk/types'
+
+type Props = Without<OrganizationProfileProps, 'customPages'>
+
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />
+<slot />

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-profile">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-profile" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

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

@@ -0,0 +1,8 @@
+import _OrganizationProfile from './OrganizationProfile.astro';
+import OrganizationProfileLink from './OrganizationProfileLink.astro';
+import OrganizationProfilePage from './OrganizationProfilePage.astro';
+
+export const OrganizationProfile = Object.assign(_OrganizationProfile, {
+ Page: OrganizationProfilePage,
+ Link: OrganizationProfileLink,
+});

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-switcher">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-switcher" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

.changeset/swift-stingrays-cough.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": minor
+---
+
+Add support for custom pages and links in the `<OrganizationProfile />` Astro component.

integration/templates/astro-node/src/pages/custom-pages/organization-profile.astro

@@ -0,0 +1,51 @@
+---
+import {
+ OrganizationProfile as OrganizationProfileAstro,
+ OrganizationSwitcher
+} from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+
+// Added a dedicatedPage query param to conditionally render the OrganizationProfile
+// as for some reason, the menu items in the OrganizationSwitcher
+// goes out of bounds in test environment.
+const dedicatedPage = Astro.url.searchParams.get('dedicatedPage') === 'true';
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <OrganizationSwitcher>
+ {
+ !dedicatedPage && (
+ <OrganizationSwitcher.OrganizationProfilePage label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationSwitcher.OrganizationProfilePage>
+ <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationSwitcher.OrganizationProfileLink>
+ <OrganizationSwitcher.OrganizationProfilePage label="members" />
+ )
+ }
+ </OrganizationSwitcher>
+ {
+ dedicatedPage && (
+ <OrganizationProfileAstro path="/custom-pages/organization-profile">
+ <OrganizationProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationProfileAstro.Page>
+ <OrganizationProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationProfileAstro.Link>
+ <OrganizationProfileAstro.Page label="general" />
+ </OrganizationProfileAstro>
+ )
+ }
+ </div>
+</Layout>

integration/templates/astro-node/src/pages/custom-pages/user-profile.astro

@@ -0,0 +1,22 @@
+---
+import { UserProfile as UserProfileAstro } from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <UserProfileAstro path="/custom-pages/user-profile">
+ <UserProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </UserProfileAstro.Page>
+ <UserProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </UserProfileAstro.Link>
+ <UserProfileAstro.Page label="security" />
+ </UserProfileAstro>
+ </div>
+</Layout>

integration/tests/astro/components.test.ts

@@ -164,7 +164,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
  await u.po.expect.toBeSignedIn();
 
- await u.page.goToRelative('/custom-pages');
+ await u.page.goToRelative('/custom-pages/user-profile');
  await u.po.userProfile.waitForMounted();
 
  // Check if custom pages and links are visible
@@ -176,7 +176,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
 
  // Check reordered default label. Security tab is now the last item.
- await u.page.locator('.cl-navbarButton').nth(3).click();
+ await u.page.locator('.cl-navbarButton').last().click();
  await expect(u.page.getByRole('heading', { name: 'Security' })).toBeVisible();
 
  // Click custom link and check navigation
@@ -252,7 +252,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await fakeAdmin.deleteIfExists();
  });
 
- test('test updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
+ test('updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();
  await u.po.signIn.waitForMounted();
@@ -268,6 +268,70 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByText('pour continuer vers')).toBeVisible();
  });
 
+ test('render organization profile with custom pages and links in dedicated page', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=true');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. General tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
+ test('render organization profile with custom pages and links inside organization switcher', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=false');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Open organization profile inside organization switcher
+ await u.po.organizationSwitcher.toggleTrigger();
+ await u.page.waitForSelector('.cl-organizationSwitcherPopoverCard', { state: 'visible' });
+ await u.page.locator('.cl-button__manageOrganization').click();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. Members tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'Members' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
  // ---- react/protect
  test('only admin react', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });

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

@@ -20,7 +20,7 @@ export { default as SignIn } from './interactive/SignIn.astro';
 export { default as SignUp } from './interactive/SignUp.astro';
 export { UserButton } from './interactive/UserButton';
 export { UserProfile } from './interactive/UserProfile';
-export { default as OrganizationProfile } from './interactive/OrganizationProfile.astro';
-export { default as OrganizationSwitcher } from './interactive/OrganizationSwitcher.astro';
+export { OrganizationProfile } from './interactive/OrganizationProfile';
+export { OrganizationSwitcher } from './interactive/OrganizationSwitcher';
 export { default as OrganizationList } from './interactive/OrganizationList.astro';
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';

packages/astro/src/astro-components/interactive/CustomProfilePageRenderer.astro

@@ -0,0 +1,76 @@
+---
+interface Props {
+ url: string
+ label: string
+ type: 'page' | 'link'
+ component: 'organization-profile' | 'user-profile' | 'organization-switcher'
+ reorderItemsLabels?: Readonly<Array<string>>
+}
+
+const { url, label, type, component, reorderItemsLabels = [] } = Astro.props
+
+let labelIcon = '';
+let content = ''
+
+if (Astro.slots.has('label-icon')) {
+ labelIcon = await Astro.slots.render('label-icon');
+}
+
+if (Astro.slots.has('default') && type === 'page') {
+ content = await Astro.slots.render('default');
+}
+---
+
+<script is:inline define:vars={{ url, label, content, labelIcon, type, component, reorderItemsLabels }}>
+// Get the component map from window that we set in the `<InternalUIComponentRenderer />`.
+const clerkComponentMap = window.__astro_clerk_component_props.get(component);
+
+const componentElement = document.querySelector(`[data-clerk-id^="clerk-${component}"]`);
+
+const safeId = componentElement.getAttribute('data-clerk-id');
+const currentOptions = clerkComponentMap.get(safeId);
+
+const isReorderItem = reorderItemsLabels.includes(label);
+
+let newCustomPage = { label }
+
+if (!isReorderItem) {
+ newCustomPage = {
+ ...newCustomPage,
+ url,
+ mountIcon: (el) => { el.innerHTML = labelIcon },
+ unmountIcon: () => { /* Implement cleanup if needed */ }
+ }
+
+ if (type === 'page') {
+ newCustomPage = {
+ ...newCustomPage,
+ mount: (el) => { el.innerHTML = content },
+ unmount: () => { /* Implement cleanup if needed */ }
+ }
+ }
+}
+
+// Custom <OrganizationProfile /> pages can be added inside
+// the <OrganizationSwitcher /> component.
+if (component === 'organization-switcher') {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ organizationProfileProps: {
+ ...currentOptions.organizationProfileProps,
+ customPages: [
+ ...(currentOptions?.organizationProfileProps?.customPages ?? []),
+ newCustomPage
+ ]
+ }
+ })
+} else {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ customPages: [
+ ...(currentOptions?.customPages ?? []),
+ newCustomPage,
+ ]
+ })
+}
+</script>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro

@@ -0,0 +1,10 @@
+---
+import type { OrganizationProfileProps, Without } from '@clerk/types'
+
+type Props = Without<OrganizationProfileProps, 'customPages'>
+
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />
+<slot />

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-profile">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-profile" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

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

@@ -0,0 +1,8 @@
+import _OrganizationProfile from './OrganizationProfile.astro';
+import OrganizationProfileLink from './OrganizationProfileLink.astro';
+import OrganizationProfilePage from './OrganizationProfilePage.astro';
+
+export const OrganizationProfile = Object.assign(_OrganizationProfile, {
+ Page: OrganizationProfilePage,
+ Link: OrganizationProfileLink,
+});

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-switcher">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-switcher" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

.changeset/swift-stingrays-cough.md

@@ -0,0 +1,5 @@
+---
+"@clerk/astro": minor
+---
+
+Add support for custom pages and links in the `<OrganizationProfile />` Astro component.

integration/templates/astro-node/src/pages/custom-pages/organization-profile.astro

@@ -0,0 +1,51 @@
+---
+import {
+ OrganizationProfile as OrganizationProfileAstro,
+ OrganizationSwitcher
+} from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+
+// Added a dedicatedPage query param to conditionally render the OrganizationProfile
+// as for some reason, the menu items in the OrganizationSwitcher
+// goes out of bounds in test environment.
+const dedicatedPage = Astro.url.searchParams.get('dedicatedPage') === 'true';
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <OrganizationSwitcher>
+ {
+ !dedicatedPage && (
+ <OrganizationSwitcher.OrganizationProfilePage label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationSwitcher.OrganizationProfilePage>
+ <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationSwitcher.OrganizationProfileLink>
+ <OrganizationSwitcher.OrganizationProfilePage label="members" />
+ )
+ }
+ </OrganizationSwitcher>
+ {
+ dedicatedPage && (
+ <OrganizationProfileAstro path="/custom-pages/organization-profile">
+ <OrganizationProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </OrganizationProfileAstro.Page>
+ <OrganizationProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </OrganizationProfileAstro.Link>
+ <OrganizationProfileAstro.Page label="general" />
+ </OrganizationProfileAstro>
+ )
+ }
+ </div>
+</Layout>

integration/templates/astro-node/src/pages/custom-pages/user-profile.astro

@@ -0,0 +1,22 @@
+---
+import { UserProfile as UserProfileAstro } from "@clerk/astro/components";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Custom Pages">
+ <div class="w-full flex justify-center">
+ <UserProfileAstro path="/custom-pages/user-profile">
+ <UserProfileAstro.Page label="Terms" url="terms">
+ <div slot="label-icon">Icon</div>
+ <div>
+ <h1>Custom Terms Page</h1>
+ <p>This is the custom terms page</p>
+ </div>
+ </UserProfileAstro.Page>
+ <UserProfileAstro.Link label="Homepage" url="/">
+ <div slot="label-icon">Icon</div>
+ </UserProfileAstro.Link>
+ <UserProfileAstro.Page label="security" />
+ </UserProfileAstro>
+ </div>
+</Layout>

integration/tests/astro/components.test.ts

@@ -164,7 +164,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
  await u.po.expect.toBeSignedIn();
 
- await u.page.goToRelative('/custom-pages');
+ await u.page.goToRelative('/custom-pages/user-profile');
  await u.po.userProfile.waitForMounted();
 
  // Check if custom pages and links are visible
@@ -176,7 +176,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
 
  // Check reordered default label. Security tab is now the last item.
- await u.page.locator('.cl-navbarButton').nth(3).click();
+ await u.page.locator('.cl-navbarButton').last().click();
  await expect(u.page.getByRole('heading', { name: 'Security' })).toBeVisible();
 
  // Click custom link and check navigation
@@ -252,7 +252,7 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await fakeAdmin.deleteIfExists();
  });
 
- test('test updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
+ test('updateClerkOptions by changing localization on the fly', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();
  await u.po.signIn.waitForMounted();
@@ -268,6 +268,70 @@ testAgainstRunningApps({ withPattern: ['astro.node.withCustomRoles'] })('basic f
  await expect(u.page.getByText('pour continuer vers')).toBeVisible();
  });
 
+ test('render organization profile with custom pages and links in dedicated page', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=true');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. General tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
+ test('render organization profile with custom pages and links inside organization switcher', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.page.goToRelative('/sign-in');
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/custom-pages/organization-profile?dedicatedPage=false');
+ await u.po.organizationSwitcher.waitForMounted();
+ await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+ // Open organization profile inside organization switcher
+ await u.po.organizationSwitcher.toggleTrigger();
+ await u.page.waitForSelector('.cl-organizationSwitcherPopoverCard', { state: 'visible' });
+ await u.page.locator('.cl-button__manageOrganization').click();
+
+ // Check if custom pages and links are visible
+ await expect(u.page.getByRole('button', { name: /Terms/i })).toBeVisible();
+ await expect(u.page.getByRole('button', { name: /Homepage/i })).toBeVisible();
+
+ // Navigate to custom page
+ await u.page.getByRole('button', { name: /Terms/i }).click();
+ await expect(u.page.getByRole('heading', { name: 'Custom Terms Page' })).toBeVisible();
+
+ // Check reordered default label. Members tab is now the last item.
+ await u.page.locator('.cl-navbarButton').last().click();
+ await expect(u.page.getByRole('heading', { name: 'Members' })).toBeVisible();
+
+ // Click custom link and check navigation
+ await u.page.getByRole('button', { name: /Homepage/i }).click();
+ await u.page.waitForAppUrl('/');
+ });
+
  // ---- react/protect
  test('only admin react', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });

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

@@ -20,7 +20,7 @@ export { default as SignIn } from './interactive/SignIn.astro';
 export { default as SignUp } from './interactive/SignUp.astro';
 export { UserButton } from './interactive/UserButton';
 export { UserProfile } from './interactive/UserProfile';
-export { default as OrganizationProfile } from './interactive/OrganizationProfile.astro';
-export { default as OrganizationSwitcher } from './interactive/OrganizationSwitcher.astro';
+export { OrganizationProfile } from './interactive/OrganizationProfile';
+export { OrganizationSwitcher } from './interactive/OrganizationSwitcher';
 export { default as OrganizationList } from './interactive/OrganizationList.astro';
 export { default as GoogleOneTap } from './interactive/GoogleOneTap.astro';

packages/astro/src/astro-components/interactive/CustomProfilePageRenderer.astro

@@ -0,0 +1,76 @@
+---
+interface Props {
+ url: string
+ label: string
+ type: 'page' | 'link'
+ component: 'organization-profile' | 'user-profile' | 'organization-switcher'
+ reorderItemsLabels?: Readonly<Array<string>>
+}
+
+const { url, label, type, component, reorderItemsLabels = [] } = Astro.props
+
+let labelIcon = '';
+let content = ''
+
+if (Astro.slots.has('label-icon')) {
+ labelIcon = await Astro.slots.render('label-icon');
+}
+
+if (Astro.slots.has('default') && type === 'page') {
+ content = await Astro.slots.render('default');
+}
+---
+
+<script is:inline define:vars={{ url, label, content, labelIcon, type, component, reorderItemsLabels }}>
+// Get the component map from window that we set in the `<InternalUIComponentRenderer />`.
+const clerkComponentMap = window.__astro_clerk_component_props.get(component);
+
+const componentElement = document.querySelector(`[data-clerk-id^="clerk-${component}"]`);
+
+const safeId = componentElement.getAttribute('data-clerk-id');
+const currentOptions = clerkComponentMap.get(safeId);
+
+const isReorderItem = reorderItemsLabels.includes(label);
+
+let newCustomPage = { label }
+
+if (!isReorderItem) {
+ newCustomPage = {
+ ...newCustomPage,
+ url,
+ mountIcon: (el) => { el.innerHTML = labelIcon },
+ unmountIcon: () => { /* Implement cleanup if needed */ }
+ }
+
+ if (type === 'page') {
+ newCustomPage = {
+ ...newCustomPage,
+ mount: (el) => { el.innerHTML = content },
+ unmount: () => { /* Implement cleanup if needed */ }
+ }
+ }
+}
+
+// Custom <OrganizationProfile /> pages can be added inside
+// the <OrganizationSwitcher /> component.
+if (component === 'organization-switcher') {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ organizationProfileProps: {
+ ...currentOptions.organizationProfileProps,
+ customPages: [
+ ...(currentOptions?.organizationProfileProps?.customPages ?? []),
+ newCustomPage
+ ]
+ }
+ })
+} else {
+ clerkComponentMap.set(safeId, {
+ ...currentOptions,
+ customPages: [
+ ...(currentOptions?.customPages ?? []),
+ newCustomPage,
+ ]
+ })
+}
+</script>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro

@@ -0,0 +1,10 @@
+---
+import type { OrganizationProfileProps, Without } from '@clerk/types'
+
+type Props = Without<OrganizationProfileProps, 'customPages'>
+
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+---
+
+<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />
+<slot />

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-profile">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-profile" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>

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

@@ -0,0 +1,8 @@
+import _OrganizationProfile from './OrganizationProfile.astro';
+import OrganizationProfileLink from './OrganizationProfileLink.astro';
+import OrganizationProfilePage from './OrganizationProfilePage.astro';
+
+export const OrganizationProfile = Object.assign(_OrganizationProfile, {
+ Page: OrganizationProfilePage,
+ Link: OrganizationProfileLink,
+});

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfileLink.astro

@@ -0,0 +1,14 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+interface Props {
+ url: string
+ label: string
+}
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-switcher">
+ <slot name="label-icon" slot="label-icon" />
+</CustomProfilePageRenderer>

packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro

@@ -0,0 +1,24 @@
+---
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+
+const reorderItemsLabels = ['general', 'members'] as const;
+type ReorderItemsLabels = typeof reorderItemsLabels[number];
+
+type Props<Label extends string> = {
+ label: Label
+} & (Label extends ReorderItemsLabels
+ ? {
+ url?: string
+ }
+ : {
+ url: string
+ }
+)
+
+const { url, label } = Astro.props
+---
+
+<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-switcher" reorderItemsLabels={reorderItemsLabels}>
+ <slot name="label-icon" slot="label-icon" />
+ <slot />
+</CustomProfilePageRenderer>