.github/labeler.yml

@@ -65,3 +65,6 @@ actions:
 
 integration:
   - integration/**
+
+agent-toolkit:
+  - packages/agent-toolkit/**

README.md

@@ -7,61 +7,75 @@
   </a>
   <br />
 </p>
-<h1 align="center">
-  Official Clerk JavaScript SDKs
-</h1>
-<p align="center">
-  <strong>
-    Clerk helps developers build user management. We provide streamlined user experiences for your users to sign up, sign in, and manage their profile.
-  </strong>
-</p>
-
-This repository contains all the Clerk JavaScript SDKs under the `@clerk` namespace. Visit [clerk.com](https://clerk.com) to signup for an account.
-
-[![chat on Discord](https://img.shields.io/discord/856971667393609759.svg?logo=discord)](https://clerk.com/discord)
-[![documentation](https://img.shields.io/badge/documentation-clerk-green.svg)](https://clerk.com/docs)
-[![twitter](https://img.shields.io/twitter/follow/ClerkDev?style=social)](https://twitter.com/intent/follow?screen_name=ClerkDev)
+<div align="center">
+  <h1>
+    Official Clerk JavaScript SDKs
+  </h1>
+  <a href="https://www.npmjs.com/package/@clerk/clerk-js">
+    <img alt="Downloads" src="https://img.shields.io/npm/dm/@clerk/clerk-js" />
+  </a>
+  <a href="https://clerk.com/docs">
+    <img alt="Documentation" src="https://img.shields.io/badge/documentation-clerk-green.svg" />
+  </a>
+  <a href="https://discord.com/invite/b5rXHjAg7A">
+    <img alt="Discord" src="https://img.shields.io/discord/856971667393609759?color=7389D8&label&logo=discord&logoColor=ffffff" />
+  </a>
+  <a href="https://twitter.com/clerkdev">
+    <img alt="Twitter" src="https://img.shields.io/twitter/url.svg?label=%40clerkdev&style=social&url=https%3A%2F%2Ftwitter.com%2Fclerkdev" />
+  </a>
+  <br />
+  <br />
+  <p>
+    <strong>
+      Clerk helps developers build user management. We provide streamlined user experiences for your users to sign up, sign in, and manage their profile.
+    </strong>
+  </p>
+  <p>
+    This repository contains all the Clerk JavaScript SDKs under the <code>@clerk</code> namespace.
+  </p>
+</div>
 
 ---
 
-**Clerk is Hiring!**
+💼 **Clerk is hiring!**
 
-Would you like to work on Open Source software and help maintain this repository? [Apply today!](https://jobs.ashbyhq.com/clerk).
+Would you like to work on Open Source software and help maintain this repository? [Apply today](https://jobs.ashbyhq.com/clerk)!
 
 ---
 
-## 🚀 Get Started with Clerk
+## 🚀 Get started with Clerk
 
-1. [Sign up for an account](https://dashboard.clerk.com/sign-up?utm_source=github&utm_medium=clerk_js_repo_readme)
-1. Create an application in your Clerk dashboard
-1. Spin up a new codebase with one of the [quickstart guides](https://clerk.com/docs/quickstarts/overview?utm_source=github&utm_medium=clerk_js_repo_readme)
+1. [Sign up for an account](https://dashboard.clerk.com/sign-up?utm_source=github&utm_medium=clerk_js_repo_readme).
+1. Create an application in your Clerk Dashboard.
+1. Spin up a new codebase with one of the [quickstart guides](https://clerk.com/docs/quickstarts/overview?utm_source=github&utm_medium=clerk_js_repo_readme).
 
-This repository contains the SDKs for environment/platforms that Clerk supports. For example, if you want to use Clerk with Node.js you can install:
+This repository contains the SDKs for environment/platforms that Clerk supports. For example, if you want to use Clerk with Next.js, you can install:
 
 ```sh
-npm install @clerk/backend
+npm install @clerk/nextjs
 # or
-yarn add @clerk/backend
+yarn add @clerk/nextjs
 # or
-pnpm add @clerk/backend
+pnpm add @clerk/nextjs
 ```
 
 ## 🎓 Learning Clerk
 
 Clerk's full documentation is available at [clerk.com/docs](https://clerk.com/docs?utm_source=github&utm_medium=clerk_js_repo_readme).
 
-- **We recommend starting with the [Quickstart guides](https://clerk.com/docs/quickstarts/overview).** It'll enable you to quickly add Clerk to your application. If you're starting a new project and are not sure what to pick, use [Next.js](https://nextjs.org/docs/getting-started/installation) and [@clerk/nextjs](https://clerk.com/docs/quickstarts/nextjs).
-- **To learn more about Clerk's components and features, checkout the rest of the [Clerk documentation](https://clerk.com/docs?utm_source=github&utm_medium=clerk_js_repo_readme).** You'll be able to e.g. browse the [component reference](https://clerk.com/docs/components/overview?utm_source=github&utm_medium=clerk_js_repo_readme) page.
+- **We recommend starting with the [quickstart guides](https://clerk.com/docs/quickstarts/overview?utm_source=github&utm_medium=clerk_js_repo_readme).** They'll help you quickly add Clerk to your application. If you're starting a new project and aren't sure what to pick, check out our most popular quickstart: [Next.js](https://clerk.com/docs/quickstarts/nextjs?utm_source=github&utm_medium=clerk_js_repo_readme).
+- Clerk offers a comprehensive suite of components designed to seamlessly integrate authentication and multi-tenancy into your application. To learn more about **Clerk's components**, check out [the docs](https://clerk.com/docs/components/overview?utm_source=github&utm_medium=clerk_js_repo_readme).
+- Clerk's **organizations** feature provides powerful multi-tenancy capabilities, allowing you to group users, manage roles and permissions, and control access to resources. Perfect for B2B applications, enterprise software, and any multi-tenant system. Learn more [in the docs](https://clerk.com/docs/organizations/overview?utm_source=github&utm_medium=clerk_js_repo_readme).
 
-## 🚢 Release Notes
+## 🚢 Release notes
 
 Curious what we shipped recently? You can browse the [GitHub Releases](https://github.com/clerk/javascript/releases) page or look at the individual `CHANGELOG.md` files inside each package (e.g. [`clerk-js CHANGELOG`](https://github.com/clerk/javascript/blob/main/packages/clerk-js/CHANGELOG.md)).
 
-## 🤝 How to Contribute
+## 🤝 How to contribute
 
-We're open to all community contributions! If you'd like to contribute in any way, please read [our contribution guidelines](https://github.com/clerk/javascript/blob/main/docs/CONTRIBUTING.md). We'd love to have you as part of the Clerk community!
+We'd love to have you as part of the Clerk community! 💜
 
-It'll show you how to make changes to the SDKs, open pull requests, or submitting issues. If you want to add or edit localizations (e.g. how a button text is translated to your language), you can check out the [`localizations` README](./packages/localizations/README.md).
+If you'd like to contribute in any way, please read [our contribution guidelines](https://github.com/clerk/javascript/blob/main/docs/CONTRIBUTING.md). They'll show you how to submit issues, make changes to the SDKs, or open pull requests. If you want to add or edit localizations (e.g. how a button text is translated to your language), you can check out the [`localizations` README](./packages/localizations/README.md).
 
 ## 📝 License
 

docs/PUBLISH.md

@@ -16,7 +16,7 @@ To release a new stable version of all Clerk packages, find the "ci(repo): Versi
 
 An automated canary release will be take place every time a PR gets merged into `main`.
 
-- Staging versions use the following format: `@clerk/package@x.y.z-canary.commit`, where `package` is the package name, `x`,`y`,`z` are the major, minor and patch versions respectively, `canary` is a stable prerelease mame and `commit` is the id of the last commit in the branch.
+- Staging versions use the following format: `@clerk/package@x.y.z-canary.commit`, where `package` is the package name, `x`,`y`,`z` are the major, minor and patch versions respectively, `canary` is a stable prerelease name and `commit` is the id of the last commit in the branch.
 - Currently, canary version changes are _not_ committed to the repo and no git tags will be generated. Using this strategy, we avoid merge conflicts, allowing us to constantly deploy canary versions without switching the repo to a "prerelease" mode.
 - During a canary release, `@clerk/clerk-js` will also be released. If needed, use the `clerkJSVersion` prop to use a specific version, eg: `<ClerkProvider clerkJSVersion='4.1.1-canary.90012' />`
 - A package will not be published if it's not affected by a changeset.
@@ -35,7 +35,7 @@ To perform a snapshot release, simply comment `!snapshot` in your PR. Once the p
 
 Notes:
 
-- Snapshot versions use the following format: `@clerk/package@x.y.z-snapshot.commit`, where `package` is the package name, `x`,`y`,`z` are the major, minor and patch versions respectively, `snapshot` is a stable prerelease mame and `commit` is the id of the last commit in the branch.
+- Snapshot versions use the following format: `@clerk/package@x.y.z-snapshot.commit`, where `package` is the package name, `x`,`y`,`z` are the major, minor and patch versions respectively, `snapshot` is a stable prerelease name and `commit` is the id of the last commit in the branch.
 - If you want to name your snapshot release, you can pass an argument to the snapshot comment, eg `!snapshot myname` will use `myname` instead of `snapshot`, eg: `@clerk/clerk-js@4.1.1-myname.90012`. Please note: When using a custom name, the underlying id stays the same and only the tag changes. This has the consequence that npm resolves versions alphabetically. You should pin your versions and not rely on resolving through `^` or `~`.
 - Snapshot version changes are _not_ committed to the repo and no git tags will be generated - they are meant to be used as "snapshots" of the repo at a particular state for testing purposes.
 - During a snapshot release, `@clerk/clerk-js` will also be released. If needed, use the `clerkJSVersion` prop to use a specific version, eg: `<ClerkProvider clerkJSVersion='4.1.1-snapshot.90012' />`

eslint.config.mjs

@@ -19,6 +19,75 @@ const ECMA_VERSION = 2021,
   TEST_FILES = ['**/*.test.js', '**/*.test.jsx', '**/*.test.ts', '**/*.test.tsx', '**/test/**', '**/__tests__/**'],
   TYPESCRIPT_FILES = ['**/*.cts', '**/*.mts', '**/*.ts', '**/*.tsx'];
 
+const noNavigateUseClerk = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow any usage of `navigate` from `useClerk()`',
+      recommended: false,
+    },
+    messages: {
+      noNavigate:
+        'Usage of `navigate` from `useClerk()` is not allowed.\nUse `useRouter().navigate` to navigate in-between flows or `setActive({ redirectUrl })`.',
+    },
+    schema: [],
+  },
+  create(context) {
+    const sourceCode = context.getSourceCode();
+
+    return {
+      // Case 1: Destructuring `navigate` from `useClerk()`
+      VariableDeclarator(node) {
+        if (
+          node.id.type === 'ObjectPattern' && // Checks if it's an object destructuring
+          node.init?.type === 'CallExpression' &&
+          node.init.callee.name === 'useClerk'
+        ) {
+          for (const property of node.id.properties) {
+            if (property.type === 'Property' && property.key.name === 'navigate') {
+              context.report({
+                node: property,
+                messageId: 'noNavigate',
+              });
+            }
+          }
+        }
+      },
+
+      // Case 2 & 3: Accessing `navigate` on a variable or directly calling `useClerk().navigate`
+      MemberExpression(node) {
+        if (
+          node.property.name === 'navigate' &&
+          node.object.type === 'CallExpression' &&
+          node.object.callee.name === 'useClerk'
+        ) {
+          // Case 3: Direct `useClerk().navigate`
+          context.report({
+            node,
+            messageId: 'noNavigate',
+          });
+        } else if (node.property.name === 'navigate' && node.object.type === 'Identifier') {
+          // Case 2: `clerk.navigate` where `clerk` is assigned `useClerk()`
+          const scope = sourceCode.scopeManager.acquire(node);
+          if (!scope) return;
+
+          const variable = scope.variables.find(v => v.name === node.object.name);
+
+          if (
+            variable?.defs?.[0]?.node?.init?.type === 'CallExpression' &&
+            variable.defs[0].node.init.callee.name === 'useClerk'
+          ) {
+            context.report({
+              node,
+              messageId: 'noNavigate',
+            });
+          }
+        }
+      },
+    };
+  },
+};
+
 export default tseslint.config([
   {
     name: 'repo/ignores',
@@ -285,6 +354,20 @@ export default tseslint.config([
       'react-hooks/rules-of-hooks': 'warn',
     },
   },
+  {
+    name: 'packages/clerk-js',
+    files: ['packages/clerk-js/src/ui/**/*'],
+    plugins: {
+      'custom-rules': {
+        rules: {
+          'no-navigate-useClerk': noNavigateUseClerk,
+        },
+      },
+    },
+    rules: {
+      'custom-rules/no-navigate-useClerk': 'error',
+    },
+  },
   {
     name: 'packages/expo-passkeys',
     files: ['packages/expo-passkeys/src/**/*'],

integration/README.md

@@ -565,7 +565,7 @@ Currently, `u` has:
   This handler runs in the context of a new browser, as the second browser is completely isolated. The nested `u` variable shadows the `u` variable of the parent scope to make this distinction apparent.
 
 > [!TIP]
-> You can find more details in the [source code](./testUtils/index.ts) of `createTestUtils`. For example inside [`appPageObject`](./testUtils/appPageObject.ts) you can find out that `u.page` allows you to programatically go to the index page through `u.page.goToStart()`.
+> You can find more details in the [source code](./testUtils/index.ts) of `createTestUtils`. For example inside [`appPageObject`](./testUtils/appPageObject.ts) you can find out that `u.page` allows you to programmatically go to the index page through `u.page.goToStart()`.
 
 ## Concepts
 

integration/certs/README.md

@@ -24,7 +24,7 @@ During installation, `mkcert` automatically adds its root CA to your machine's t
 export NODE_EXTRA_CA_CERTS="$(mkcert -CAROOT)/rootCA.pem"
 ```
 
-or provide the `NODE_EXTRA_CA_CERTS` when runnning your tests:
+or provide the `NODE_EXTRA_CA_CERTS` when running your tests:
 
 ```shell
 NODE_EXTRA_CA_CERTS="$(mkcert -CAROOT)/rootCA.pem" playwright test...

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

@@ -0,0 +1,37 @@
+import { SignInButton, SignUpButton } from '@clerk/clerk-react';
+
+export default function Home() {
+  return (
+    <main>
+      <SignInButton
+        mode='modal'
+        forceRedirectUrl='/protected'
+        signUpForceRedirectUrl='/protected'
+      >
+        Sign in button (force)
+      </SignInButton>
+
+      <SignInButton
+        mode='modal'
+        fallbackRedirectUrl='/protected'
+      >
+        Sign in button (fallback)
+      </SignInButton>
+
+      <SignUpButton
+        mode='modal'
+        forceRedirectUrl='/protected'
+        signInForceRedirectUrl='/protected'
+      >
+        Sign up button (force)
+      </SignUpButton>
+
+      <SignUpButton
+        mode='modal'
+        fallbackRedirectUrl='/protected'
+      >
+        Sign up button (fallback)
+      </SignUpButton>
+    </main>
+  );
+}

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

@@ -18,6 +18,7 @@ import OrganizationProfile from './organization-profile';
 import OrganizationList from './organization-list';
 import CreateOrganization from './create-organization';
 import OrganizationSwitcher from './organization-switcher';
+import Buttons from './buttons';
 
 const Root = () => {
   const navigate = useNavigate();
@@ -68,6 +69,10 @@ const router = createBrowserRouter([
         path: '/protected',
         element: <Protected />,
       },
+      {
+        path: '/buttons',
+        element: <Buttons />,
+      },
       {
         path: '/custom-user-profile/*',
         element: <UserProfileCustom />,

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SignedIn, SignedOut, OrganizationSwitcher, ClerkLoaded, ClerkLoading } from '@clerk/vue';
+import { SignedIn, SignedOut, ClerkLoaded, ClerkLoading } from '@clerk/vue';
 import CustomUserButton from './components/CustomUserButton.vue';
 </script>
 
@@ -11,7 +11,6 @@ import CustomUserButton from './components/CustomUserButton.vue';
       </div>
       <SignedIn>
         <CustomUserButton />
-        <OrganizationSwitcher />
       </SignedIn>
       <SignedOut>
         <RouterLink to="/sign-in">Sign in</RouterLink>

integration/templates/vue-vite/src/components/CustomUserButton.vue

@@ -47,6 +47,14 @@ const isActionClicked = ref(false);
         <p>This is the custom terms page</p>
       </div>
     </UserButton.UserProfilePage>
+    <UserButton.UserProfileLink
+      label="Homepage"
+      url="/"
+    >
+      <template #labelIcon>
+        <div>Icon</div>
+      </template>
+    </UserButton.UserProfileLink>
   </UserButton>
   <div>Is action clicked: {{ isActionClicked }}</div>
 </template>

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

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

integration/templates/vue-vite/src/views/custom-pages/OrganizationProfile.vue

@@ -1,8 +1,30 @@
 <script setup lang="ts">
-import { OrganizationProfile } from '@clerk/vue';
+import { OrganizationProfile, OrganizationSwitcher } from '@clerk/vue';
 </script>
 
 <template>
+  <OrganizationSwitcher>
+    <OrganizationSwitcher.OrganizationProfilePage
+      label="Terms"
+      url="terms"
+    >
+      <template #labelIcon>
+        <div>Icon</div>
+      </template>
+      <div>
+        <h1>Custom Terms Page</h1>
+        <p>This is the custom terms page</p>
+      </div>
+    </OrganizationSwitcher.OrganizationProfilePage>
+    <OrganizationSwitcher.OrganizationProfileLink
+      label="Homepage"
+      url="/"
+    >
+      <template #labelIcon>
+        <div>Icon</div>
+      </template>
+    </OrganizationSwitcher.OrganizationProfileLink>
+  </OrganizationSwitcher>
   <OrganizationProfile>
     <OrganizationProfile.Page
       label="Terms"

integration/testUtils/signInPageObject.ts

@@ -24,6 +24,11 @@ export const createSignInComponentPageObject = (testArgs: TestArgs) => {
     waitForMounted: (selector = '.cl-signIn-root') => {
       return page.waitForSelector(selector, { state: 'attached' });
     },
+    waitForModal: (state?: 'open' | 'closed') => {
+      return page.waitForSelector('.cl-modalContent:has(.cl-signIn-root)', {
+        state: state === 'closed' ? 'detached' : 'attached',
+      });
+    },
     setIdentifier: (val: string) => {
       return self.getIdentifierInput().fill(val);
     },