.lintstagedrc.json

@@ -1,4 +1,4 @@
 {
-  "*.{mjs,js,jsx,ts,tsx}": ["pnpm eslint --fix", "pnpm prettier --write"],
+  "*.{mjs,js,jsx,ts,tsx,vue}": ["pnpm eslint --fix", "pnpm prettier --write"],
   "*.{json,md,mdx}": ["pnpm prettier --write"]
 }

integration/templates/next-app-router/src/app/sign-in-or-up/[[...catchall]]/page.tsx

@@ -5,9 +5,10 @@ export default function Page() {
     <div>
       <SignIn
         routing={'path'}
-        path={'/sign-in'}
+        path={'/sign-in-or-up'}
         signUpUrl={'/sign-up'}
         fallback={<>Loading sign in</>}
+        unsafeMetadata={{ position: 'goalie' }}
         withSignUp
       />
     </div>

integration/templates/next-app-router/src/app/sign-up/[[...catchall]]/page.tsx

@@ -8,6 +8,7 @@ export default function Page() {
         path={'/sign-up'}
         signInUrl={'/sign-in'}
         fallback={<>Loading sign up</>}
+        unsafeMetadata={{ position: 'goalie' }}
       />
     </div>
   );

integration/templates/react-vite/src/custom-user-button/with-dynamic-label-and-custom-pages.tsx

@@ -0,0 +1,68 @@
+import { UserButton } from '@clerk/clerk-react';
+import { PageContextProvider } from '../PageContext.tsx';
+import React from 'react';
+
+export default function Page() {
+  const [open, setIsOpen] = React.useState(false);
+  const [theme, setTheme] = React.useState('light');
+  const [notifications, setNotifications] = React.useState(false);
+  const [language, setLanguage] = React.useState('en');
+
+  return (
+    <PageContextProvider>
+      <UserButton
+        fallback={<>Loading user button</>}
+        userProfileProps={{ appearance: { elements: { modalBackdrop: { zIndex: '100' } } } }}
+      >
+        <UserButton.MenuItems>
+          <UserButton.Action
+            label={`Chat is ${open ? 'ON' : 'OFF'}`}
+            labelIcon={<span>🌐</span>}
+            onClick={() => setIsOpen(!open)}
+          />
+          <UserButton.Action
+            label={`Theme: ${theme === 'light' ? '☀️ Light' : '🌙 Dark'}`}
+            labelIcon={<span>🌐</span>}
+            onClick={() => setTheme(t => (t === 'light' ? 'dark' : 'light'))}
+          />
+          <UserButton.Action
+            label={`Notifications ${notifications ? '🔔 ON' : '🔕 OFF'}`}
+            labelIcon={<span>🌐</span>}
+            onClick={() => setNotifications(n => !n)}
+          />
+          <UserButton.Action
+            label={`Language: ${language.toUpperCase()}`}
+            labelIcon={<span>🌍</span>}
+            onClick={() => setLanguage(l => (l === 'en' ? 'es' : 'en'))}
+          />
+          <UserButton.Action label={'manageAccount'} />
+          <UserButton.Action label={'signOut'} />
+          <UserButton.Link
+            href={'http://clerk.com'}
+            label={'Visit Clerk'}
+            labelIcon={<span>🌐</span>}
+          />
+
+          <UserButton.Link
+            href={'/user'}
+            label={'Visit User page'}
+            labelIcon={<span>🌐</span>}
+          />
+
+          <UserButton.Action
+            label={'Custom Alert'}
+            labelIcon={<span>🔔</span>}
+            onClick={() => alert('custom-alert')}
+          />
+        </UserButton.MenuItems>
+        <UserButton.UserProfilePage
+          label='Notifications Page'
+          url='notifications'
+          labelIcon={<span>🔔</span>}
+        >
+          <h1 data-page='notifications-page'>Notifications page</h1>
+        </UserButton.UserProfilePage>
+      </UserButton>
+    </PageContextProvider>
+  );
+}

integration/templates/react-vite/src/custom-user-button/with-dynamic-labels.tsx

@@ -1,25 +1,7 @@
 import { UserButton } from '@clerk/clerk-react';
-import { useContext } from 'react';
-import { PageContext, PageContextProvider } from '../PageContext.tsx';
+import { PageContextProvider } from '../PageContext.tsx';
 import React from 'react';
 
-function Page1() {
-  const { counter, setCounter } = useContext(PageContext);
-
-  return (
-    <>
-      <h1 data-page={1}>Page 1</h1>
-      <p data-page={1}>Counter: {counter}</p>
-      <button
-        data-page={1}
-        onClick={() => setCounter(a => a + 1)}
-      >
-        Update
-      </button>
-    </>
-  );
-}
-
 export default function Page() {
   const [open, setIsOpen] = React.useState(false);
   const [theme, setTheme] = React.useState('light');

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

@@ -11,6 +11,7 @@ import UserProfile from './user';
 import UserProfileCustom from './custom-user-profile';
 import UserButtonCustom from './custom-user-button';
 import UserButtonCustomDynamicLabels from './custom-user-button/with-dynamic-labels.tsx';
+import UserButtonCustomDynamicLabelsAndCustomPages from './custom-user-button/with-dynamic-label-and-custom-pages.tsx';
 import UserButtonCustomTrigger from './custom-user-button-trigger';
 import UserButton from './user-button';
 import Waitlist from './waitlist';
@@ -85,6 +86,10 @@ const router = createBrowserRouter([
         path: '/custom-user-button-dynamic-labels',
         element: <UserButtonCustomDynamicLabels />,
       },
+      {
+        path: '/custom-user-button-dynamic-labels-and-custom-pages',
+        element: <UserButtonCustomDynamicLabelsAndCustomPages />,
+      },
       {
         path: '/custom-user-button-trigger',
         element: <UserButtonCustomTrigger />,

integration/testUtils/usersService.ts

@@ -55,6 +55,7 @@ export type UserService = {
   createBapiUser: (fakeUser: FakeUser) => Promise<User>;
   deleteIfExists: (opts: { id?: string; email?: string }) => Promise<void>;
   createFakeOrganization: (userId: string) => Promise<FakeOrganization>;
+  getUser: (opts: { id?: string; email?: string }) => Promise<User | undefined>;
 };
 
 /**
@@ -116,6 +117,29 @@ export const createUserService = (clerkClient: ClerkClient) => {
 
       await clerkClient.users.deleteUser(id);
     },
+    getUser: async (opts: { id?: string; email?: string }) => {
+      if (opts.id) {
+        try {
+          const user = await clerkClient.users.getUser(opts.id);
+          return user;
+        } catch (err) {
+          console.log(`Error fetching user "${opts.id}": ${err.message}`);
+          return;
+        }
+      }
+
+      if (opts.email) {
+        const { data: users } = await clerkClient.users.getUserList({ emailAddress: [opts.email] });
+        if (users.length > 0) {
+          return users[0];
+        } else {
+          console.log(`User "${opts.email}" does not exist!`);
+          return;
+        }
+      }
+
+      throw new Error('Either id or email must be provided');
+    },
     createFakeOrganization: async userId => {
       const name = faker.animal.dog();
       const organization = await clerkClient.organizations.createOrganization({

integration/tests/custom-pages.test.ts

@@ -8,6 +8,7 @@ const CUSTOM_PROFILE_PAGE = '/custom-user-profile';
 const CUSTOM_BUTTON_PAGE = '/custom-user-button';
 const CUSTOM_BUTTON_TRIGGER_PAGE = '/custom-user-button-trigger';
 const CUSTOM_BUTTON_DYNAMIC_LABELS_PAGE = '/custom-user-button-dynamic-labels';
+const CUSTOM_BUTTON_DYNAMIC_LABELS_AND_CUSTOM_PAGES_PAGE = '/custom-user-button-dynamic-labels-and-custom-pages';
 
 async function waitForMountedComponent(
   component: 'UserButton' | 'UserProfile',
@@ -375,5 +376,72 @@ testAgainstRunningApps({ withPattern: ['react.vite.withEmailCodes'] })(
         await expect(languageButton).toHaveText('🌍Language: EN');
       });
     });
+
+    test.describe('User Button with dynamic labels and custom page', () => {
+      test('click Chat is OFF and ensure that state has been changed', async ({ page, context }) => {
+        const u = createTestUtils({ app, page, context });
+        await u.po.signIn.goTo();
+        await u.po.signIn.waitForMounted();
+        await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+        await u.po.expect.toBeSignedIn();
+
+        await u.page.goToRelative(CUSTOM_BUTTON_DYNAMIC_LABELS_AND_CUSTOM_PAGES_PAGE);
+        await u.po.userButton.waitForMounted();
+        await u.po.userButton.toggleTrigger();
+        await u.po.userButton.waitForPopover();
+
+        const pagesContainer = u.page.locator('div.cl-userButtonPopoverActions__multiSession').first();
+        const buttons = await pagesContainer.locator('button').all();
+
+        expect(buttons.length).toBe(9);
+
+        const expectedTexts = [
+          '🌐Chat is OFF',
+          '🌐Theme: ☀️ Light',
+          '🌐Notifications 🔕 OFF',
+          '🌍Language: EN',
+          'Manage account',
+          'Sign out',
+          '🌐Visit Clerk',
+          '🌐Visit User page',
+          '🔔Custom Alert',
+        ];
+
+        for (let i = 0; i < buttons.length; i++) {
+          await expect(buttons[i]).toHaveText(expectedTexts[i]);
+        }
+
+        const chatButton = buttons[0];
+        const notificationsButton = buttons[2];
+        const languageButton = buttons[3];
+        const manageAccountButton = buttons[4];
+
+        // Test chat toggle
+        await chatButton.click();
+        await u.po.userButton.toggleTrigger();
+        await u.po.userButton.waitForPopover();
+        await expect(chatButton).toHaveText('🌐Chat is ON');
+        await expect(languageButton).toHaveText('🌍Language: EN');
+
+        await notificationsButton.click();
+        await u.po.userButton.toggleTrigger();
+        await u.po.userButton.waitForPopover();
+        await expect(notificationsButton).toHaveText('🌐Notifications 🔔 ON');
+        await expect(chatButton).toHaveText('🌐Chat is ON');
+        await expect(languageButton).toHaveText('🌍Language: EN');
+
+        await manageAccountButton.click();
+        await u.po.userProfile.waitForMounted();
+
+        const userProfilePageButtons = await u.page.locator('button.cl-navbarButton__custom-page-0').all();
+        const [notificationsPage] = userProfilePageButtons;
+        await expect(notificationsPage.locator('div.cl-navbarButtonIcon__custom-page-0')).toHaveText('🔔');
+
+        await notificationsPage.click();
+
+        const orderSent = page.locator('h1[data-page="notifications-page"]');
+        await orderSent.waitFor({ state: 'attached' });
+      });
+    });
   },
 );

integration/tests/nuxt/middleware.test.ts

@@ -24,10 +24,10 @@ test.describe('custom middleware @nuxt', () => {
       )
       .addFile(
         'server/middleware/clerk.js',
-        () => `import { clerkMiddleware, createRouteMatcher } from '@clerk/nuxt/server';
+        () => `import { clerkMiddleware, createRouteMatcher, getAuth } from '@clerk/nuxt/server';
 
         export default clerkMiddleware((event) => {
-          const { userId } = event.context.auth
+          const { userId } = getAuth(event);
           const isProtectedRoute = createRouteMatcher(['/api/me']);
 
           if (!userId && isProtectedRoute(event)) {

integration/tests/sign-in-or-up-component.test.ts

@@ -22,6 +22,6 @@ test.describe('sign-in-or-up component initialization flow @nextjs', () => {
   test('flows are combined', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.page.goToRelative('/sign-in-or-up');
-    await expect(u.page.getByText(`Don’t have an account?`)).toBeHidden();
+    await expect(u.page.getByText(`Continue to`)).toBeVisible();
   });
 });

integration/tests/sign-out-smoke.test.ts

@@ -22,6 +22,18 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign out
 
   test('sign out through all open tabs at once', async ({ page, context }) => {
     const mainTab = createTestUtils({ app, page, context });
+    await mainTab.page.addInitScript(() => {
+      /**
+       * Playwright may define connection incorrectly, we are overriding to null
+       */
+      if (
+        navigator.onLine &&
+        // @ts-expect-error Cannot find `connection`
+        (navigator?.connection?.rtt === 0 || navigator?.downlink?.rtt === 0)
+      ) {
+        Object.defineProperty(Object.getPrototypeOf(navigator), 'connection', { value: null });
+      }
+    });
     await mainTab.po.signIn.goTo();
     await mainTab.po.signIn.setIdentifier(fakeUser.email);
     await mainTab.po.signIn.continue();

integration/tests/unsafeMetadata.test.ts

@@ -0,0 +1,71 @@
+import { expect, test } from '@playwright/test';
+
+import { appConfigs } from '../presets';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('unsafeMetadata @nextjs', ({ app }) => {
+  test.describe.configure({ mode: 'parallel' });
+
+  test.afterAll(async () => {
+    await app.teardown();
+  });
+
+  test('sign up persists unsafeMetadata', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    const fakeUser = u.services.users.createFakeUser({
+      fictionalEmail: true,
+      withPhoneNumber: true,
+      withUsername: true,
+    });
+
+    // Go to sign up page
+    await u.po.signUp.goTo();
+
+    // Fill in sign up form
+    await u.po.signUp.signUpWithEmailAndPassword({
+      email: fakeUser.email,
+      password: fakeUser.password,
+    });
+
+    // Verify email
+    await u.po.signUp.enterTestOtpCode();
+
+    // Check if user is signed in
+    await u.po.expect.toBeSignedIn();
+
+    const user = await u.services.users.getUser({ email: fakeUser.email });
+    expect(user?.unsafeMetadata).toEqual({ position: 'goalie' });
+
+    await fakeUser.deleteIfExists();
+  });
+
+  test('combined sign up persists unsafeMetadata', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    const fakeUser = u.services.users.createFakeUser({
+      fictionalEmail: true,
+      withPassword: true,
+      withUsername: true,
+    });
+
+    await u.page.goToRelative('/sign-in-or-up');
+    await u.po.signIn.setIdentifier(fakeUser.username);
+    await u.po.signIn.continue();
+    await u.page.waitForAppUrl('/sign-in-or-up/create');
+
+    const prefilledUsername = u.po.signUp.getUsernameInput();
+    await expect(prefilledUsername).toHaveValue(fakeUser.username);
+
+    await u.po.signUp.setEmailAddress(fakeUser.email);
+    await u.po.signUp.setPassword(fakeUser.password);
+    await u.po.signUp.continue();
+
+    await u.po.signUp.enterTestOtpCode();
+
+    await u.po.expect.toBeSignedIn();
+
+    const user = await u.services.users.getUser({ email: fakeUser.email });
+    expect(user?.unsafeMetadata).toEqual({ position: 'goalie' });
+
+    await fakeUser.deleteIfExists();
+  });
+});

package.json

@@ -75,7 +75,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/cross-spawn": "^6.0.3",
     "@types/jest": "^29.3.1",
-    "@types/node": "^22.13.1",
+    "@types/node": "^22.13.4",
     "@types/react": "catalog:react",
     "@types/react-dom": "catalog:react",
     "@vitest/coverage-v8": "3.0.2",

packages/agent-toolkit/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @clerk/agent-toolkit
 
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies [[`d76c4699990b8477745c2584b1b98d5c92f9ace6`](https://github.com/clerk/javascript/commit/d76c4699990b8477745c2584b1b98d5c92f9ace6), [`a9b0087fca3f427f65907b358d9b5bc0c95921d8`](https://github.com/clerk/javascript/commit/a9b0087fca3f427f65907b358d9b5bc0c95921d8), [`92d17d7c087470b262fa5407cb6720fe6b17d333`](https://github.com/clerk/javascript/commit/92d17d7c087470b262fa5407cb6720fe6b17d333)]:
+  - @clerk/shared@2.22.0
+  - @clerk/types@4.46.1
+  - @clerk/backend@1.24.2
+
 ## 0.0.2
 
 ### Patch Changes