chore(clerk-js, shared): Remove SWR from clerk-js and create variants for existing internal hooks

.changeset/early-clowns-dance.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Removes SWR as direct dependency

.changeset/fuzzy-donuts-jam.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': minor
+---
+
+Creates compatibility layer for SWR hooks that were previously inside `@clerk/clerk-js`

.github/workflows/ci.yml

@@ -310,7 +310,6 @@ jobs:
  'vue',
  'nuxt',
  'react-router',
- 'machine',
  'custom',
  ]
  test-project: ["chrome"]
@@ -321,6 +320,12 @@ jobs:
  - test-name: 'billing'
  test-project: 'chrome'
  clerk-use-rq: 'true'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'false'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'true'
  - test-name: 'nextjs'
  test-project: 'chrome'
  next-version: '14'

packages/clerk-js/package.json

@@ -82,8 +82,7 @@
  "dequal": "2.0.3",
  "input-otp": "1.4.2",
  "qrcode.react": "4.2.0",
- "regenerator-runtime": "0.14.1",
- "swr": "2.3.4"
+ "regenerator-runtime": "0.14.1"
  },
  "devDependencies": {
  "@clerk/testing": "workspace:^",

packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx

@@ -1,8 +1,7 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { __experimental_useAPIKeys as useAPIKeys, useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type { CreateAPIKeyParams } from '@clerk/shared/types';
+import type { APIKeyResource } from '@clerk/shared/types';
 import { lazy, useState } from 'react';
-import useSWRMutation from 'swr/mutation';
 
 import { useProtect } from '@/ui/common';
 import { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';
@@ -69,6 +68,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  fetchPage,
  pageCount,
  count: itemCount,
+ revalidate: invalidateAll,
  } = useAPIKeys({
  subject,
  pageSize: perPage ?? API_KEYS_PAGE_SIZE,
@@ -77,12 +77,11 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  enabled: isOrg ? canReadAPIKeys : true,
  });
 
-const { invalidateAll } = useAPIKeysPagination({
+ useAPIKeysPagination({
  query,
  page,
  pageCount,
  isFetching,
- subject,
  fetchPage,
  });
 
@@ -94,11 +93,9 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  };
  const card = useCardState();
  const clerk = useClerk();
- const {
- data: createdAPIKey,
- trigger: createAPIKey,
- isMutating,
- } = useSWRMutation('api-keys-create', (_key, { arg }: { arg: CreateAPIKeyParams }) => clerk.apiKeys.create(arg));
+
+ const [apiKey, setAPIKey] = useState<APIKeyResource | null>(null);
+
  const { t } = useLocalizations();
  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
  const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');
@@ -107,19 +104,23 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
 
  const handleCreateAPIKey = async (params: OnCreateParams) => {
  try {
- await createAPIKey({
+ card.setLoading();
+ const apiKey = await clerk.apiKeys.create({
  ...params,
  subject,
  });
  invalidateAll();
  card.setError(undefined);
  setIsCopyModalOpen(true);
+ setAPIKey(apiKey);
  } catch (err: any) {
  if (isClerkAPIResponseError(err)) {
  if (err.status === 409) {
  card.setError('API Key name already exists');
  }
  }
+ } finally {
+ card.setIdle();
  }
  };
 
@@ -181,10 +182,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  <Action.Open value='add-api-key'>
  <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>
  <Action.Card sx={{ width: '100%' }}>
- <CreateAPIKeyForm
- onCreate={handleCreateAPIKey}
- isSubmitting={isMutating}
- />
+ <CreateAPIKeyForm onCreate={handleCreateAPIKey} />
  </Action.Card>
  </Flex>
  </Action.Open>
@@ -193,8 +191,8 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  isOpen={isCopyModalOpen}
  onOpen={() => setIsCopyModalOpen(true)}
  onClose={() => setIsCopyModalOpen(false)}
- apiKeyName={createdAPIKey?.name ?? ''}
- apiKeySecret={createdAPIKey?.secret ?? ''}
+ apiKeyName={apiKey?.name || ''}
+ apiKeySecret={apiKey?.secret || ''}
  modalRoot={revokeModalRoot}
  />
  </Action.Root>

packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { useAPIKeysContext } from '@/ui/contexts';
 import { Box, Col, descriptors, FormLabel, localizationKeys, Text, useLocalizations } from '@/ui/customizables';
 import { useActionContext } from '@/ui/elements/Action/ActionRoot';
+import { useCardState } from '@/ui/elements/contexts';
 import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
@@ -28,7 +29,6 @@ export type OnCreateParams = {
 
 interface CreateAPIKeyFormProps {
  onCreate: (params: OnCreateParams) => void;
- isSubmitting: boolean;
 }
 
 const EXPIRATION_DURATIONS: Record<Exclude<Expiration, 'never'>, (date: Date) => void> = {
@@ -117,10 +117,11 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
  );
 };
 
-export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, isSubmitting }) => {
+export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate }) => {
  const [selectedExpiration, setSelectedExpiration] = useState<ExpirationOption | null>(null);
  const { close: closeCardFn } = useActionContext();
  const { showDescription = false } = useAPIKeysContext();
+ const card = useCardState();
  const { t } = useLocalizations();
 
  const nameField = useFormControl('name', '', {
@@ -251,7 +252,7 @@ export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, is
  submitLabel={localizationKeys('apiKeys.formButtonPrimary__add')}
  isDisabled={!canSubmit}
  onReset={closeCardFn}
- isLoading={isSubmitting}
+ isLoading={card.isLoading}
  elementDescriptor={descriptors.apiKeysCreateFormSubmitButton}
  />
  </Form.Root>

packages/clerk-js/src/ui/components/APIKeys/utils.ts

@@ -1,12 +1,10 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useSWRConfig } from 'swr';
+import { useEffect, useRef } from 'react';
 
 type UseAPIKeysPaginationParams = {
  query: string;
  page: number;
  pageCount: number;
  isFetching: boolean;
- subject: string;
  fetchPage: (page: number) => void;
 };
 
@@ -16,27 +14,7 @@ type UseAPIKeysPaginationParams = {
  * - Adjusts page when current page exceeds available pages (e.g., after deletion)
  * - Provides cache invalidation function for mutations
  */
-export const useAPIKeysPagination = ({
- query,
- page,
- pageCount,
- isFetching,
- subject,
- fetchPage,
-}: UseAPIKeysPaginationParams) => {
- const { mutate } = useSWRConfig();
-
- // Invalidate all cache entries for this user or organization
- const invalidateAll = useCallback(() => {
- void mutate(key => {
- if (!key || typeof key !== 'object') {
- return false;
- }
- // Match all apiKeys cache entries for this user or organization, regardless of page, pageSize, or query
- return 'type' in key && key.type === 'apiKeys' && 'subject' in key && key.subject === subject;
- });
- }, [mutate, subject]);
-
+export const useAPIKeysPagination = ({ query, page, pageCount, isFetching, fetchPage }: UseAPIKeysPaginationParams) => {
  // Reset to first page when query changes
  const previousQueryRef = useRef(query);
  useEffect(() => {
@@ -53,8 +31,4 @@ export const useAPIKeysPagination = ({
  fetchPage(Math.max(1, pageCount));
  }
  }, [pageCount, page, isFetching, fetchPage]);
-
- return {
- invalidateAll,
- };
 };

packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx

@@ -1,6 +1,5 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
+import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';
 import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -31,28 +30,17 @@ export const PaymentAttemptPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: paymentAttempt,
  isLoading,
  error,
- } = useSWR(
- params.paymentAttemptId
- ? {
- type: 'payment-attempt',
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getPaymentAttempt({
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_usePaymentAttemptQuery({
+ paymentAttemptId: params.paymentAttemptId,
+ for: requesterType,
+ enabled: Boolean(params.paymentAttemptId),
+ });
 
  const subscriptionItem = paymentAttempt?.subscriptionItem;
 

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -1,4 +1,4 @@
-import { useClerk } from '@clerk/shared/react';
+import { __internal_usePlanDetailsQuery } from '@clerk/shared/react/index';
 import type {
  __internal_PlanDetailsProps,
  BillingPlanResource,
@@ -7,7 +7,6 @@ import type {
 } from '@clerk/shared/types';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Avatar } from '@/ui/elements/Avatar';
@@ -79,24 +78,17 @@ const PlanDetailsInternal = ({
  plan: initialPlan,
  initialPlanPeriod = 'month',
 }: __internal_PlanDetailsProps) => {
- const clerk = useClerk();
  const [planPeriod, setPlanPeriod] = useState<BillingSubscriptionPlanPeriod>(initialPlanPeriod);
 
  const {
  data: plan,
  isLoading,
  error,
- } = useSWR<BillingPlanResource, ClerkAPIResponseError>(
- planId || initialPlan ? { type: 'plan', id: planId || initialPlan?.id } : null,
- // @ts-expect-error we are handling it above
- () => clerk.billing.getPlan({ id: planId || initialPlan?.id }),
- {
- fallbackData: initialPlan,
- revalidateOnFocus: false,
- shouldRetryOnError: false,
- keepPreviousData: true,
- },
- );
+ } = __internal_usePlanDetailsQuery({
+ planId,
+ initialPlan,
+ enabled: Boolean(planId || initialPlan?.id),
+ });
 
  if (isLoading && !initialPlan) {
  return (

packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx

@@ -70,6 +70,7 @@ describe('PlanDetails', () => {
  it('displays spinner when loading with planId', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockImplementation(() => new Promise(() => {}));
@@ -118,6 +119,7 @@ describe('PlanDetails', () => {
  it('fetches and renders plan details when planId is provided', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockResolvedValue(mockPlan);

packages/clerk-js/src/ui/components/Statements/StatementPage.tsx

@@ -1,5 +1,4 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
-import useSWR from 'swr';
+import { __internal_useStatementQuery } from '@clerk/shared/react/index';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -25,28 +24,17 @@ export const StatementPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: statement,
  isLoading,
  error,
- } = useSWR(
- params.statementId
- ? {
- type: 'statement',
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getStatement({
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_useStatementQuery({
+ statementId: params.statementId,
+ for: requesterType,
+ enabled: Boolean(params.statementId),
+ });
 
  if (isLoading) {
  return (

.changeset/early-clowns-dance.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Removes SWR as direct dependency

.changeset/fuzzy-donuts-jam.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': minor
+---
+
+Creates compatibility layer for SWR hooks that were previously inside `@clerk/clerk-js`

.github/workflows/ci.yml

@@ -310,7 +310,6 @@ jobs:
  'vue',
  'nuxt',
  'react-router',
- 'machine',
  'custom',
  ]
  test-project: ["chrome"]
@@ -321,6 +320,12 @@ jobs:
  - test-name: 'billing'
  test-project: 'chrome'
  clerk-use-rq: 'true'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'false'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'true'
  - test-name: 'nextjs'
  test-project: 'chrome'
  next-version: '14'

packages/clerk-js/package.json

@@ -82,8 +82,7 @@
  "dequal": "2.0.3",
  "input-otp": "1.4.2",
  "qrcode.react": "4.2.0",
- "regenerator-runtime": "0.14.1",
- "swr": "2.3.4"
+ "regenerator-runtime": "0.14.1"
  },
  "devDependencies": {
  "@clerk/testing": "workspace:^",

packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx

@@ -1,8 +1,7 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { __experimental_useAPIKeys as useAPIKeys, useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type { CreateAPIKeyParams } from '@clerk/shared/types';
+import type { APIKeyResource } from '@clerk/shared/types';
 import { lazy, useState } from 'react';
-import useSWRMutation from 'swr/mutation';
 
 import { useProtect } from '@/ui/common';
 import { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';
@@ -69,6 +68,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  fetchPage,
  pageCount,
  count: itemCount,
+ revalidate: invalidateAll,
  } = useAPIKeys({
  subject,
  pageSize: perPage ?? API_KEYS_PAGE_SIZE,
@@ -77,12 +77,11 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  enabled: isOrg ? canReadAPIKeys : true,
  });
 
-const { invalidateAll } = useAPIKeysPagination({
+ useAPIKeysPagination({
  query,
  page,
  pageCount,
  isFetching,
- subject,
  fetchPage,
  });
 
@@ -94,11 +93,9 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  };
  const card = useCardState();
  const clerk = useClerk();
- const {
- data: createdAPIKey,
- trigger: createAPIKey,
- isMutating,
- } = useSWRMutation('api-keys-create', (_key, { arg }: { arg: CreateAPIKeyParams }) => clerk.apiKeys.create(arg));
+
+ const [apiKey, setAPIKey] = useState<APIKeyResource | null>(null);
+
  const { t } = useLocalizations();
  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
  const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');
@@ -107,19 +104,23 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
 
  const handleCreateAPIKey = async (params: OnCreateParams) => {
  try {
- await createAPIKey({
+ card.setLoading();
+ const apiKey = await clerk.apiKeys.create({
  ...params,
  subject,
  });
  invalidateAll();
  card.setError(undefined);
  setIsCopyModalOpen(true);
+ setAPIKey(apiKey);
  } catch (err: any) {
  if (isClerkAPIResponseError(err)) {
  if (err.status === 409) {
  card.setError('API Key name already exists');
  }
  }
+ } finally {
+ card.setIdle();
  }
  };
 
@@ -181,10 +182,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  <Action.Open value='add-api-key'>
  <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>
  <Action.Card sx={{ width: '100%' }}>
- <CreateAPIKeyForm
- onCreate={handleCreateAPIKey}
- isSubmitting={isMutating}
- />
+ <CreateAPIKeyForm onCreate={handleCreateAPIKey} />
  </Action.Card>
  </Flex>
  </Action.Open>
@@ -193,8 +191,8 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  isOpen={isCopyModalOpen}
  onOpen={() => setIsCopyModalOpen(true)}
  onClose={() => setIsCopyModalOpen(false)}
- apiKeyName={createdAPIKey?.name ?? ''}
- apiKeySecret={createdAPIKey?.secret ?? ''}
+ apiKeyName={apiKey?.name || ''}
+ apiKeySecret={apiKey?.secret || ''}
  modalRoot={revokeModalRoot}
  />
  </Action.Root>

packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { useAPIKeysContext } from '@/ui/contexts';
 import { Box, Col, descriptors, FormLabel, localizationKeys, Text, useLocalizations } from '@/ui/customizables';
 import { useActionContext } from '@/ui/elements/Action/ActionRoot';
+import { useCardState } from '@/ui/elements/contexts';
 import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
@@ -28,7 +29,6 @@ export type OnCreateParams = {
 
 interface CreateAPIKeyFormProps {
  onCreate: (params: OnCreateParams) => void;
- isSubmitting: boolean;
 }
 
 const EXPIRATION_DURATIONS: Record<Exclude<Expiration, 'never'>, (date: Date) => void> = {
@@ -117,10 +117,11 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
  );
 };
 
-export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, isSubmitting }) => {
+export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate }) => {
  const [selectedExpiration, setSelectedExpiration] = useState<ExpirationOption | null>(null);
  const { close: closeCardFn } = useActionContext();
  const { showDescription = false } = useAPIKeysContext();
+ const card = useCardState();
  const { t } = useLocalizations();
 
  const nameField = useFormControl('name', '', {
@@ -251,7 +252,7 @@ export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, is
  submitLabel={localizationKeys('apiKeys.formButtonPrimary__add')}
  isDisabled={!canSubmit}
  onReset={closeCardFn}
- isLoading={isSubmitting}
+ isLoading={card.isLoading}
  elementDescriptor={descriptors.apiKeysCreateFormSubmitButton}
  />
  </Form.Root>

packages/clerk-js/src/ui/components/APIKeys/utils.ts

@@ -1,12 +1,10 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useSWRConfig } from 'swr';
+import { useEffect, useRef } from 'react';
 
 type UseAPIKeysPaginationParams = {
  query: string;
  page: number;
  pageCount: number;
  isFetching: boolean;
- subject: string;
  fetchPage: (page: number) => void;
 };
 
@@ -16,27 +14,7 @@ type UseAPIKeysPaginationParams = {
  * - Adjusts page when current page exceeds available pages (e.g., after deletion)
  * - Provides cache invalidation function for mutations
  */
-export const useAPIKeysPagination = ({
- query,
- page,
- pageCount,
- isFetching,
- subject,
- fetchPage,
-}: UseAPIKeysPaginationParams) => {
- const { mutate } = useSWRConfig();
-
- // Invalidate all cache entries for this user or organization
- const invalidateAll = useCallback(() => {
- void mutate(key => {
- if (!key || typeof key !== 'object') {
- return false;
- }
- // Match all apiKeys cache entries for this user or organization, regardless of page, pageSize, or query
- return 'type' in key && key.type === 'apiKeys' && 'subject' in key && key.subject === subject;
- });
- }, [mutate, subject]);
-
+export const useAPIKeysPagination = ({ query, page, pageCount, isFetching, fetchPage }: UseAPIKeysPaginationParams) => {
  // Reset to first page when query changes
  const previousQueryRef = useRef(query);
  useEffect(() => {
@@ -53,8 +31,4 @@ export const useAPIKeysPagination = ({
  fetchPage(Math.max(1, pageCount));
  }
  }, [pageCount, page, isFetching, fetchPage]);
-
- return {
- invalidateAll,
- };
 };

packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx

@@ -1,6 +1,5 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
+import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';
 import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -31,28 +30,17 @@ export const PaymentAttemptPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: paymentAttempt,
  isLoading,
  error,
- } = useSWR(
- params.paymentAttemptId
- ? {
- type: 'payment-attempt',
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getPaymentAttempt({
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_usePaymentAttemptQuery({
+ paymentAttemptId: params.paymentAttemptId,
+ for: requesterType,
+ enabled: Boolean(params.paymentAttemptId),
+ });
 
  const subscriptionItem = paymentAttempt?.subscriptionItem;
 

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -1,4 +1,4 @@
-import { useClerk } from '@clerk/shared/react';
+import { __internal_usePlanDetailsQuery } from '@clerk/shared/react/index';
 import type {
  __internal_PlanDetailsProps,
  BillingPlanResource,
@@ -7,7 +7,6 @@ import type {
 } from '@clerk/shared/types';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Avatar } from '@/ui/elements/Avatar';
@@ -79,24 +78,17 @@ const PlanDetailsInternal = ({
  plan: initialPlan,
  initialPlanPeriod = 'month',
 }: __internal_PlanDetailsProps) => {
- const clerk = useClerk();
  const [planPeriod, setPlanPeriod] = useState<BillingSubscriptionPlanPeriod>(initialPlanPeriod);
 
  const {
  data: plan,
  isLoading,
  error,
- } = useSWR<BillingPlanResource, ClerkAPIResponseError>(
- planId || initialPlan ? { type: 'plan', id: planId || initialPlan?.id } : null,
- // @ts-expect-error we are handling it above
- () => clerk.billing.getPlan({ id: planId || initialPlan?.id }),
- {
- fallbackData: initialPlan,
- revalidateOnFocus: false,
- shouldRetryOnError: false,
- keepPreviousData: true,
- },
- );
+ } = __internal_usePlanDetailsQuery({
+ planId,
+ initialPlan,
+ enabled: Boolean(planId || initialPlan?.id),
+ });
 
  if (isLoading && !initialPlan) {
  return (

packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx

@@ -70,6 +70,7 @@ describe('PlanDetails', () => {
  it('displays spinner when loading with planId', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockImplementation(() => new Promise(() => {}));
@@ -118,6 +119,7 @@ describe('PlanDetails', () => {
  it('fetches and renders plan details when planId is provided', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockResolvedValue(mockPlan);

packages/clerk-js/src/ui/components/Statements/StatementPage.tsx

@@ -1,5 +1,4 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
-import useSWR from 'swr';
+import { __internal_useStatementQuery } from '@clerk/shared/react/index';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -25,28 +24,17 @@ export const StatementPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: statement,
  isLoading,
  error,
- } = useSWR(
- params.statementId
- ? {
- type: 'statement',
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getStatement({
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_useStatementQuery({
+ statementId: params.statementId,
+ for: requesterType,
+ enabled: Boolean(params.statementId),
+ });
 
  if (isLoading) {
  return (

.changeset/early-clowns-dance.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Removes SWR as direct dependency

.changeset/fuzzy-donuts-jam.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': minor
+---
+
+Creates compatibility layer for SWR hooks that were previously inside `@clerk/clerk-js`

.github/workflows/ci.yml

@@ -310,7 +310,6 @@ jobs:
  'vue',
  'nuxt',
  'react-router',
- 'machine',
  'custom',
  ]
  test-project: ["chrome"]
@@ -321,6 +320,12 @@ jobs:
  - test-name: 'billing'
  test-project: 'chrome'
  clerk-use-rq: 'true'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'false'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'true'
  - test-name: 'nextjs'
  test-project: 'chrome'
  next-version: '14'

packages/clerk-js/package.json

@@ -82,8 +82,7 @@
  "dequal": "2.0.3",
  "input-otp": "1.4.2",
  "qrcode.react": "4.2.0",
- "regenerator-runtime": "0.14.1",
- "swr": "2.3.4"
+ "regenerator-runtime": "0.14.1"
  },
  "devDependencies": {
  "@clerk/testing": "workspace:^",

packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx

@@ -1,8 +1,7 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { __experimental_useAPIKeys as useAPIKeys, useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type { CreateAPIKeyParams } from '@clerk/shared/types';
+import type { APIKeyResource } from '@clerk/shared/types';
 import { lazy, useState } from 'react';
-import useSWRMutation from 'swr/mutation';
 
 import { useProtect } from '@/ui/common';
 import { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';
@@ -69,6 +68,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  fetchPage,
  pageCount,
  count: itemCount,
+ revalidate: invalidateAll,
  } = useAPIKeys({
  subject,
  pageSize: perPage ?? API_KEYS_PAGE_SIZE,
@@ -77,12 +77,11 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  enabled: isOrg ? canReadAPIKeys : true,
  });
 
-const { invalidateAll } = useAPIKeysPagination({
+ useAPIKeysPagination({
  query,
  page,
  pageCount,
  isFetching,
- subject,
  fetchPage,
  });
 
@@ -94,11 +93,9 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  };
  const card = useCardState();
  const clerk = useClerk();
- const {
- data: createdAPIKey,
- trigger: createAPIKey,
- isMutating,
- } = useSWRMutation('api-keys-create', (_key, { arg }: { arg: CreateAPIKeyParams }) => clerk.apiKeys.create(arg));
+
+ const [apiKey, setAPIKey] = useState<APIKeyResource | null>(null);
+
  const { t } = useLocalizations();
  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
  const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');
@@ -107,19 +104,23 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
 
  const handleCreateAPIKey = async (params: OnCreateParams) => {
  try {
- await createAPIKey({
+ card.setLoading();
+ const apiKey = await clerk.apiKeys.create({
  ...params,
  subject,
  });
  invalidateAll();
  card.setError(undefined);
  setIsCopyModalOpen(true);
+ setAPIKey(apiKey);
  } catch (err: any) {
  if (isClerkAPIResponseError(err)) {
  if (err.status === 409) {
  card.setError('API Key name already exists');
  }
  }
+ } finally {
+ card.setIdle();
  }
  };
 
@@ -181,10 +182,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  <Action.Open value='add-api-key'>
  <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>
  <Action.Card sx={{ width: '100%' }}>
- <CreateAPIKeyForm
- onCreate={handleCreateAPIKey}
- isSubmitting={isMutating}
- />
+ <CreateAPIKeyForm onCreate={handleCreateAPIKey} />
  </Action.Card>
  </Flex>
  </Action.Open>
@@ -193,8 +191,8 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  isOpen={isCopyModalOpen}
  onOpen={() => setIsCopyModalOpen(true)}
  onClose={() => setIsCopyModalOpen(false)}
- apiKeyName={createdAPIKey?.name ?? ''}
- apiKeySecret={createdAPIKey?.secret ?? ''}
+ apiKeyName={apiKey?.name || ''}
+ apiKeySecret={apiKey?.secret || ''}
  modalRoot={revokeModalRoot}
  />
  </Action.Root>

packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { useAPIKeysContext } from '@/ui/contexts';
 import { Box, Col, descriptors, FormLabel, localizationKeys, Text, useLocalizations } from '@/ui/customizables';
 import { useActionContext } from '@/ui/elements/Action/ActionRoot';
+import { useCardState } from '@/ui/elements/contexts';
 import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
@@ -28,7 +29,6 @@ export type OnCreateParams = {
 
 interface CreateAPIKeyFormProps {
  onCreate: (params: OnCreateParams) => void;
- isSubmitting: boolean;
 }
 
 const EXPIRATION_DURATIONS: Record<Exclude<Expiration, 'never'>, (date: Date) => void> = {
@@ -117,10 +117,11 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
  );
 };
 
-export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, isSubmitting }) => {
+export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate }) => {
  const [selectedExpiration, setSelectedExpiration] = useState<ExpirationOption | null>(null);
  const { close: closeCardFn } = useActionContext();
  const { showDescription = false } = useAPIKeysContext();
+ const card = useCardState();
  const { t } = useLocalizations();
 
  const nameField = useFormControl('name', '', {
@@ -251,7 +252,7 @@ export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, is
  submitLabel={localizationKeys('apiKeys.formButtonPrimary__add')}
  isDisabled={!canSubmit}
  onReset={closeCardFn}
- isLoading={isSubmitting}
+ isLoading={card.isLoading}
  elementDescriptor={descriptors.apiKeysCreateFormSubmitButton}
  />
  </Form.Root>

packages/clerk-js/src/ui/components/APIKeys/utils.ts

@@ -1,12 +1,10 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useSWRConfig } from 'swr';
+import { useEffect, useRef } from 'react';
 
 type UseAPIKeysPaginationParams = {
  query: string;
  page: number;
  pageCount: number;
  isFetching: boolean;
- subject: string;
  fetchPage: (page: number) => void;
 };
 
@@ -16,27 +14,7 @@ type UseAPIKeysPaginationParams = {
  * - Adjusts page when current page exceeds available pages (e.g., after deletion)
  * - Provides cache invalidation function for mutations
  */
-export const useAPIKeysPagination = ({
- query,
- page,
- pageCount,
- isFetching,
- subject,
- fetchPage,
-}: UseAPIKeysPaginationParams) => {
- const { mutate } = useSWRConfig();
-
- // Invalidate all cache entries for this user or organization
- const invalidateAll = useCallback(() => {
- void mutate(key => {
- if (!key || typeof key !== 'object') {
- return false;
- }
- // Match all apiKeys cache entries for this user or organization, regardless of page, pageSize, or query
- return 'type' in key && key.type === 'apiKeys' && 'subject' in key && key.subject === subject;
- });
- }, [mutate, subject]);
-
+export const useAPIKeysPagination = ({ query, page, pageCount, isFetching, fetchPage }: UseAPIKeysPaginationParams) => {
  // Reset to first page when query changes
  const previousQueryRef = useRef(query);
  useEffect(() => {
@@ -53,8 +31,4 @@ export const useAPIKeysPagination = ({
  fetchPage(Math.max(1, pageCount));
  }
  }, [pageCount, page, isFetching, fetchPage]);
-
- return {
- invalidateAll,
- };
 };

packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx

@@ -1,6 +1,5 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
+import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';
 import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -31,28 +30,17 @@ export const PaymentAttemptPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: paymentAttempt,
  isLoading,
  error,
- } = useSWR(
- params.paymentAttemptId
- ? {
- type: 'payment-attempt',
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getPaymentAttempt({
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_usePaymentAttemptQuery({
+ paymentAttemptId: params.paymentAttemptId,
+ for: requesterType,
+ enabled: Boolean(params.paymentAttemptId),
+ });
 
  const subscriptionItem = paymentAttempt?.subscriptionItem;
 

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -1,4 +1,4 @@
-import { useClerk } from '@clerk/shared/react';
+import { __internal_usePlanDetailsQuery } from '@clerk/shared/react/index';
 import type {
  __internal_PlanDetailsProps,
  BillingPlanResource,
@@ -7,7 +7,6 @@ import type {
 } from '@clerk/shared/types';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Avatar } from '@/ui/elements/Avatar';
@@ -79,24 +78,17 @@ const PlanDetailsInternal = ({
  plan: initialPlan,
  initialPlanPeriod = 'month',
 }: __internal_PlanDetailsProps) => {
- const clerk = useClerk();
  const [planPeriod, setPlanPeriod] = useState<BillingSubscriptionPlanPeriod>(initialPlanPeriod);
 
  const {
  data: plan,
  isLoading,
  error,
- } = useSWR<BillingPlanResource, ClerkAPIResponseError>(
- planId || initialPlan ? { type: 'plan', id: planId || initialPlan?.id } : null,
- // @ts-expect-error we are handling it above
- () => clerk.billing.getPlan({ id: planId || initialPlan?.id }),
- {
- fallbackData: initialPlan,
- revalidateOnFocus: false,
- shouldRetryOnError: false,
- keepPreviousData: true,
- },
- );
+ } = __internal_usePlanDetailsQuery({
+ planId,
+ initialPlan,
+ enabled: Boolean(planId || initialPlan?.id),
+ });
 
  if (isLoading && !initialPlan) {
  return (

packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx

@@ -70,6 +70,7 @@ describe('PlanDetails', () => {
  it('displays spinner when loading with planId', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockImplementation(() => new Promise(() => {}));
@@ -118,6 +119,7 @@ describe('PlanDetails', () => {
  it('fetches and renders plan details when planId is provided', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockResolvedValue(mockPlan);

packages/clerk-js/src/ui/components/Statements/StatementPage.tsx

@@ -1,5 +1,4 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
-import useSWR from 'swr';
+import { __internal_useStatementQuery } from '@clerk/shared/react/index';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -25,28 +24,17 @@ export const StatementPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: statement,
  isLoading,
  error,
- } = useSWR(
- params.statementId
- ? {
- type: 'statement',
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getStatement({
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_useStatementQuery({
+ statementId: params.statementId,
+ for: requesterType,
+ enabled: Boolean(params.statementId),
+ });
 
  if (isLoading) {
  return (

.changeset/early-clowns-dance.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Removes SWR as direct dependency

.changeset/fuzzy-donuts-jam.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': minor
+---
+
+Creates compatibility layer for SWR hooks that were previously inside `@clerk/clerk-js`

.github/workflows/ci.yml

@@ -310,7 +310,6 @@ jobs:
  'vue',
  'nuxt',
  'react-router',
- 'machine',
  'custom',
  ]
  test-project: ["chrome"]
@@ -321,6 +320,12 @@ jobs:
  - test-name: 'billing'
  test-project: 'chrome'
  clerk-use-rq: 'true'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'false'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'true'
  - test-name: 'nextjs'
  test-project: 'chrome'
  next-version: '14'

packages/clerk-js/package.json

@@ -82,8 +82,7 @@
  "dequal": "2.0.3",
  "input-otp": "1.4.2",
  "qrcode.react": "4.2.0",
- "regenerator-runtime": "0.14.1",
- "swr": "2.3.4"
+ "regenerator-runtime": "0.14.1"
  },
  "devDependencies": {
  "@clerk/testing": "workspace:^",

packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx

@@ -1,8 +1,7 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { __experimental_useAPIKeys as useAPIKeys, useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type { CreateAPIKeyParams } from '@clerk/shared/types';
+import type { APIKeyResource } from '@clerk/shared/types';
 import { lazy, useState } from 'react';
-import useSWRMutation from 'swr/mutation';
 
 import { useProtect } from '@/ui/common';
 import { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';
@@ -69,6 +68,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  fetchPage,
  pageCount,
  count: itemCount,
+ revalidate: invalidateAll,
  } = useAPIKeys({
  subject,
  pageSize: perPage ?? API_KEYS_PAGE_SIZE,
@@ -77,12 +77,11 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  enabled: isOrg ? canReadAPIKeys : true,
  });
 
-const { invalidateAll } = useAPIKeysPagination({
+ useAPIKeysPagination({
  query,
  page,
  pageCount,
  isFetching,
- subject,
  fetchPage,
  });
 
@@ -94,11 +93,9 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  };
  const card = useCardState();
  const clerk = useClerk();
- const {
- data: createdAPIKey,
- trigger: createAPIKey,
- isMutating,
- } = useSWRMutation('api-keys-create', (_key, { arg }: { arg: CreateAPIKeyParams }) => clerk.apiKeys.create(arg));
+
+ const [apiKey, setAPIKey] = useState<APIKeyResource | null>(null);
+
  const { t } = useLocalizations();
  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
  const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');
@@ -107,19 +104,23 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
 
  const handleCreateAPIKey = async (params: OnCreateParams) => {
  try {
- await createAPIKey({
+ card.setLoading();
+ const apiKey = await clerk.apiKeys.create({
  ...params,
  subject,
  });
  invalidateAll();
  card.setError(undefined);
  setIsCopyModalOpen(true);
+ setAPIKey(apiKey);
  } catch (err: any) {
  if (isClerkAPIResponseError(err)) {
  if (err.status === 409) {
  card.setError('API Key name already exists');
  }
  }
+ } finally {
+ card.setIdle();
  }
  };
 
@@ -181,10 +182,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  <Action.Open value='add-api-key'>
  <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>
  <Action.Card sx={{ width: '100%' }}>
- <CreateAPIKeyForm
- onCreate={handleCreateAPIKey}
- isSubmitting={isMutating}
- />
+ <CreateAPIKeyForm onCreate={handleCreateAPIKey} />
  </Action.Card>
  </Flex>
  </Action.Open>
@@ -193,8 +191,8 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  isOpen={isCopyModalOpen}
  onOpen={() => setIsCopyModalOpen(true)}
  onClose={() => setIsCopyModalOpen(false)}
- apiKeyName={createdAPIKey?.name ?? ''}
- apiKeySecret={createdAPIKey?.secret ?? ''}
+ apiKeyName={apiKey?.name || ''}
+ apiKeySecret={apiKey?.secret || ''}
  modalRoot={revokeModalRoot}
  />
  </Action.Root>

packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { useAPIKeysContext } from '@/ui/contexts';
 import { Box, Col, descriptors, FormLabel, localizationKeys, Text, useLocalizations } from '@/ui/customizables';
 import { useActionContext } from '@/ui/elements/Action/ActionRoot';
+import { useCardState } from '@/ui/elements/contexts';
 import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
@@ -28,7 +29,6 @@ export type OnCreateParams = {
 
 interface CreateAPIKeyFormProps {
  onCreate: (params: OnCreateParams) => void;
- isSubmitting: boolean;
 }
 
 const EXPIRATION_DURATIONS: Record<Exclude<Expiration, 'never'>, (date: Date) => void> = {
@@ -117,10 +117,11 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
  );
 };
 
-export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, isSubmitting }) => {
+export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate }) => {
  const [selectedExpiration, setSelectedExpiration] = useState<ExpirationOption | null>(null);
  const { close: closeCardFn } = useActionContext();
  const { showDescription = false } = useAPIKeysContext();
+ const card = useCardState();
  const { t } = useLocalizations();
 
  const nameField = useFormControl('name', '', {
@@ -251,7 +252,7 @@ export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, is
  submitLabel={localizationKeys('apiKeys.formButtonPrimary__add')}
  isDisabled={!canSubmit}
  onReset={closeCardFn}
- isLoading={isSubmitting}
+ isLoading={card.isLoading}
  elementDescriptor={descriptors.apiKeysCreateFormSubmitButton}
  />
  </Form.Root>

packages/clerk-js/src/ui/components/APIKeys/utils.ts

@@ -1,12 +1,10 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useSWRConfig } from 'swr';
+import { useEffect, useRef } from 'react';
 
 type UseAPIKeysPaginationParams = {
  query: string;
  page: number;
  pageCount: number;
  isFetching: boolean;
- subject: string;
  fetchPage: (page: number) => void;
 };
 
@@ -16,27 +14,7 @@ type UseAPIKeysPaginationParams = {
  * - Adjusts page when current page exceeds available pages (e.g., after deletion)
  * - Provides cache invalidation function for mutations
  */
-export const useAPIKeysPagination = ({
- query,
- page,
- pageCount,
- isFetching,
- subject,
- fetchPage,
-}: UseAPIKeysPaginationParams) => {
- const { mutate } = useSWRConfig();
-
- // Invalidate all cache entries for this user or organization
- const invalidateAll = useCallback(() => {
- void mutate(key => {
- if (!key || typeof key !== 'object') {
- return false;
- }
- // Match all apiKeys cache entries for this user or organization, regardless of page, pageSize, or query
- return 'type' in key && key.type === 'apiKeys' && 'subject' in key && key.subject === subject;
- });
- }, [mutate, subject]);
-
+export const useAPIKeysPagination = ({ query, page, pageCount, isFetching, fetchPage }: UseAPIKeysPaginationParams) => {
  // Reset to first page when query changes
  const previousQueryRef = useRef(query);
  useEffect(() => {
@@ -53,8 +31,4 @@ export const useAPIKeysPagination = ({
  fetchPage(Math.max(1, pageCount));
  }
  }, [pageCount, page, isFetching, fetchPage]);
-
- return {
- invalidateAll,
- };
 };

packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx

@@ -1,6 +1,5 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
+import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';
 import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -31,28 +30,17 @@ export const PaymentAttemptPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: paymentAttempt,
  isLoading,
  error,
- } = useSWR(
- params.paymentAttemptId
- ? {
- type: 'payment-attempt',
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getPaymentAttempt({
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_usePaymentAttemptQuery({
+ paymentAttemptId: params.paymentAttemptId,
+ for: requesterType,
+ enabled: Boolean(params.paymentAttemptId),
+ });
 
  const subscriptionItem = paymentAttempt?.subscriptionItem;
 

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -1,4 +1,4 @@
-import { useClerk } from '@clerk/shared/react';
+import { __internal_usePlanDetailsQuery } from '@clerk/shared/react/index';
 import type {
  __internal_PlanDetailsProps,
  BillingPlanResource,
@@ -7,7 +7,6 @@ import type {
 } from '@clerk/shared/types';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Avatar } from '@/ui/elements/Avatar';
@@ -79,24 +78,17 @@ const PlanDetailsInternal = ({
  plan: initialPlan,
  initialPlanPeriod = 'month',
 }: __internal_PlanDetailsProps) => {
- const clerk = useClerk();
  const [planPeriod, setPlanPeriod] = useState<BillingSubscriptionPlanPeriod>(initialPlanPeriod);
 
  const {
  data: plan,
  isLoading,
  error,
- } = useSWR<BillingPlanResource, ClerkAPIResponseError>(
- planId || initialPlan ? { type: 'plan', id: planId || initialPlan?.id } : null,
- // @ts-expect-error we are handling it above
- () => clerk.billing.getPlan({ id: planId || initialPlan?.id }),
- {
- fallbackData: initialPlan,
- revalidateOnFocus: false,
- shouldRetryOnError: false,
- keepPreviousData: true,
- },
- );
+ } = __internal_usePlanDetailsQuery({
+ planId,
+ initialPlan,
+ enabled: Boolean(planId || initialPlan?.id),
+ });
 
  if (isLoading && !initialPlan) {
  return (

packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx

@@ -70,6 +70,7 @@ describe('PlanDetails', () => {
  it('displays spinner when loading with planId', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockImplementation(() => new Promise(() => {}));
@@ -118,6 +119,7 @@ describe('PlanDetails', () => {
  it('fetches and renders plan details when planId is provided', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockResolvedValue(mockPlan);

packages/clerk-js/src/ui/components/Statements/StatementPage.tsx

@@ -1,5 +1,4 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
-import useSWR from 'swr';
+import { __internal_useStatementQuery } from '@clerk/shared/react/index';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -25,28 +24,17 @@ export const StatementPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: statement,
  isLoading,
  error,
- } = useSWR(
- params.statementId
- ? {
- type: 'statement',
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getStatement({
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_useStatementQuery({
+ statementId: params.statementId,
+ for: requesterType,
+ enabled: Boolean(params.statementId),
+ });
 
  if (isLoading) {
  return (

.changeset/early-clowns-dance.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Removes SWR as direct dependency

.changeset/fuzzy-donuts-jam.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': minor
+---
+
+Creates compatibility layer for SWR hooks that were previously inside `@clerk/clerk-js`

.github/workflows/ci.yml

@@ -310,7 +310,6 @@ jobs:
  'vue',
  'nuxt',
  'react-router',
- 'machine',
  'custom',
  ]
  test-project: ["chrome"]
@@ -321,6 +320,12 @@ jobs:
  - test-name: 'billing'
  test-project: 'chrome'
  clerk-use-rq: 'true'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'false'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'true'
  - test-name: 'nextjs'
  test-project: 'chrome'
  next-version: '14'

packages/clerk-js/package.json

@@ -82,8 +82,7 @@
  "dequal": "2.0.3",
  "input-otp": "1.4.2",
  "qrcode.react": "4.2.0",
- "regenerator-runtime": "0.14.1",
- "swr": "2.3.4"
+ "regenerator-runtime": "0.14.1"
  },
  "devDependencies": {
  "@clerk/testing": "workspace:^",

packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx

@@ -1,8 +1,7 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { __experimental_useAPIKeys as useAPIKeys, useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type { CreateAPIKeyParams } from '@clerk/shared/types';
+import type { APIKeyResource } from '@clerk/shared/types';
 import { lazy, useState } from 'react';
-import useSWRMutation from 'swr/mutation';
 
 import { useProtect } from '@/ui/common';
 import { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';
@@ -69,6 +68,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  fetchPage,
  pageCount,
  count: itemCount,
+ revalidate: invalidateAll,
  } = useAPIKeys({
  subject,
  pageSize: perPage ?? API_KEYS_PAGE_SIZE,
@@ -77,12 +77,11 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  enabled: isOrg ? canReadAPIKeys : true,
  });
 
-const { invalidateAll } = useAPIKeysPagination({
+ useAPIKeysPagination({
  query,
  page,
  pageCount,
  isFetching,
- subject,
  fetchPage,
  });
 
@@ -94,11 +93,9 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  };
  const card = useCardState();
  const clerk = useClerk();
- const {
- data: createdAPIKey,
- trigger: createAPIKey,
- isMutating,
- } = useSWRMutation('api-keys-create', (_key, { arg }: { arg: CreateAPIKeyParams }) => clerk.apiKeys.create(arg));
+
+ const [apiKey, setAPIKey] = useState<APIKeyResource | null>(null);
+
  const { t } = useLocalizations();
  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
  const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');
@@ -107,19 +104,23 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
 
  const handleCreateAPIKey = async (params: OnCreateParams) => {
  try {
- await createAPIKey({
+ card.setLoading();
+ const apiKey = await clerk.apiKeys.create({
  ...params,
  subject,
  });
  invalidateAll();
  card.setError(undefined);
  setIsCopyModalOpen(true);
+ setAPIKey(apiKey);
  } catch (err: any) {
  if (isClerkAPIResponseError(err)) {
  if (err.status === 409) {
  card.setError('API Key name already exists');
  }
  }
+ } finally {
+ card.setIdle();
  }
  };
 
@@ -181,10 +182,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  <Action.Open value='add-api-key'>
  <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>
  <Action.Card sx={{ width: '100%' }}>
- <CreateAPIKeyForm
- onCreate={handleCreateAPIKey}
- isSubmitting={isMutating}
- />
+ <CreateAPIKeyForm onCreate={handleCreateAPIKey} />
  </Action.Card>
  </Flex>
  </Action.Open>
@@ -193,8 +191,8 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  isOpen={isCopyModalOpen}
  onOpen={() => setIsCopyModalOpen(true)}
  onClose={() => setIsCopyModalOpen(false)}
- apiKeyName={createdAPIKey?.name ?? ''}
- apiKeySecret={createdAPIKey?.secret ?? ''}
+ apiKeyName={apiKey?.name || ''}
+ apiKeySecret={apiKey?.secret || ''}
  modalRoot={revokeModalRoot}
  />
  </Action.Root>

packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { useAPIKeysContext } from '@/ui/contexts';
 import { Box, Col, descriptors, FormLabel, localizationKeys, Text, useLocalizations } from '@/ui/customizables';
 import { useActionContext } from '@/ui/elements/Action/ActionRoot';
+import { useCardState } from '@/ui/elements/contexts';
 import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
@@ -28,7 +29,6 @@ export type OnCreateParams = {
 
 interface CreateAPIKeyFormProps {
  onCreate: (params: OnCreateParams) => void;
- isSubmitting: boolean;
 }
 
 const EXPIRATION_DURATIONS: Record<Exclude<Expiration, 'never'>, (date: Date) => void> = {
@@ -117,10 +117,11 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
  );
 };
 
-export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, isSubmitting }) => {
+export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate }) => {
  const [selectedExpiration, setSelectedExpiration] = useState<ExpirationOption | null>(null);
  const { close: closeCardFn } = useActionContext();
  const { showDescription = false } = useAPIKeysContext();
+ const card = useCardState();
  const { t } = useLocalizations();
 
  const nameField = useFormControl('name', '', {
@@ -251,7 +252,7 @@ export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, is
  submitLabel={localizationKeys('apiKeys.formButtonPrimary__add')}
  isDisabled={!canSubmit}
  onReset={closeCardFn}
- isLoading={isSubmitting}
+ isLoading={card.isLoading}
  elementDescriptor={descriptors.apiKeysCreateFormSubmitButton}
  />
  </Form.Root>

packages/clerk-js/src/ui/components/APIKeys/utils.ts

@@ -1,12 +1,10 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useSWRConfig } from 'swr';
+import { useEffect, useRef } from 'react';
 
 type UseAPIKeysPaginationParams = {
  query: string;
  page: number;
  pageCount: number;
  isFetching: boolean;
- subject: string;
  fetchPage: (page: number) => void;
 };
 
@@ -16,27 +14,7 @@ type UseAPIKeysPaginationParams = {
  * - Adjusts page when current page exceeds available pages (e.g., after deletion)
  * - Provides cache invalidation function for mutations
  */
-export const useAPIKeysPagination = ({
- query,
- page,
- pageCount,
- isFetching,
- subject,
- fetchPage,
-}: UseAPIKeysPaginationParams) => {
- const { mutate } = useSWRConfig();
-
- // Invalidate all cache entries for this user or organization
- const invalidateAll = useCallback(() => {
- void mutate(key => {
- if (!key || typeof key !== 'object') {
- return false;
- }
- // Match all apiKeys cache entries for this user or organization, regardless of page, pageSize, or query
- return 'type' in key && key.type === 'apiKeys' && 'subject' in key && key.subject === subject;
- });
- }, [mutate, subject]);
-
+export const useAPIKeysPagination = ({ query, page, pageCount, isFetching, fetchPage }: UseAPIKeysPaginationParams) => {
  // Reset to first page when query changes
  const previousQueryRef = useRef(query);
  useEffect(() => {
@@ -53,8 +31,4 @@ export const useAPIKeysPagination = ({
  fetchPage(Math.max(1, pageCount));
  }
  }, [pageCount, page, isFetching, fetchPage]);
-
- return {
- invalidateAll,
- };
 };

packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx

@@ -1,6 +1,5 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
+import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';
 import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -31,28 +30,17 @@ export const PaymentAttemptPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: paymentAttempt,
  isLoading,
  error,
- } = useSWR(
- params.paymentAttemptId
- ? {
- type: 'payment-attempt',
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getPaymentAttempt({
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_usePaymentAttemptQuery({
+ paymentAttemptId: params.paymentAttemptId,
+ for: requesterType,
+ enabled: Boolean(params.paymentAttemptId),
+ });
 
  const subscriptionItem = paymentAttempt?.subscriptionItem;
 

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -1,4 +1,4 @@
-import { useClerk } from '@clerk/shared/react';
+import { __internal_usePlanDetailsQuery } from '@clerk/shared/react/index';
 import type {
  __internal_PlanDetailsProps,
  BillingPlanResource,
@@ -7,7 +7,6 @@ import type {
 } from '@clerk/shared/types';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Avatar } from '@/ui/elements/Avatar';
@@ -79,24 +78,17 @@ const PlanDetailsInternal = ({
  plan: initialPlan,
  initialPlanPeriod = 'month',
 }: __internal_PlanDetailsProps) => {
- const clerk = useClerk();
  const [planPeriod, setPlanPeriod] = useState<BillingSubscriptionPlanPeriod>(initialPlanPeriod);
 
  const {
  data: plan,
  isLoading,
  error,
- } = useSWR<BillingPlanResource, ClerkAPIResponseError>(
- planId || initialPlan ? { type: 'plan', id: planId || initialPlan?.id } : null,
- // @ts-expect-error we are handling it above
- () => clerk.billing.getPlan({ id: planId || initialPlan?.id }),
- {
- fallbackData: initialPlan,
- revalidateOnFocus: false,
- shouldRetryOnError: false,
- keepPreviousData: true,
- },
- );
+ } = __internal_usePlanDetailsQuery({
+ planId,
+ initialPlan,
+ enabled: Boolean(planId || initialPlan?.id),
+ });
 
  if (isLoading && !initialPlan) {
  return (

packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx

@@ -70,6 +70,7 @@ describe('PlanDetails', () => {
  it('displays spinner when loading with planId', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockImplementation(() => new Promise(() => {}));
@@ -118,6 +119,7 @@ describe('PlanDetails', () => {
  it('fetches and renders plan details when planId is provided', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockResolvedValue(mockPlan);

packages/clerk-js/src/ui/components/Statements/StatementPage.tsx

@@ -1,5 +1,4 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
-import useSWR from 'swr';
+import { __internal_useStatementQuery } from '@clerk/shared/react/index';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -25,28 +24,17 @@ export const StatementPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: statement,
  isLoading,
  error,
- } = useSWR(
- params.statementId
- ? {
- type: 'statement',
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getStatement({
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_useStatementQuery({
+ statementId: params.statementId,
+ for: requesterType,
+ enabled: Boolean(params.statementId),
+ });
 
  if (isLoading) {
  return (

.changeset/early-clowns-dance.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Removes SWR as direct dependency

.changeset/fuzzy-donuts-jam.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': minor
+---
+
+Creates compatibility layer for SWR hooks that were previously inside `@clerk/clerk-js`

.github/workflows/ci.yml

@@ -310,7 +310,6 @@ jobs:
  'vue',
  'nuxt',
  'react-router',
- 'machine',
  'custom',
  ]
  test-project: ["chrome"]
@@ -321,6 +320,12 @@ jobs:
  - test-name: 'billing'
  test-project: 'chrome'
  clerk-use-rq: 'true'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'false'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'true'
  - test-name: 'nextjs'
  test-project: 'chrome'
  next-version: '14'

packages/clerk-js/package.json

@@ -82,8 +82,7 @@
  "dequal": "2.0.3",
  "input-otp": "1.4.2",
  "qrcode.react": "4.2.0",
- "regenerator-runtime": "0.14.1",
- "swr": "2.3.4"
+ "regenerator-runtime": "0.14.1"
  },
  "devDependencies": {
  "@clerk/testing": "workspace:^",

packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx

@@ -1,8 +1,7 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { __experimental_useAPIKeys as useAPIKeys, useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type { CreateAPIKeyParams } from '@clerk/shared/types';
+import type { APIKeyResource } from '@clerk/shared/types';
 import { lazy, useState } from 'react';
-import useSWRMutation from 'swr/mutation';
 
 import { useProtect } from '@/ui/common';
 import { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';
@@ -69,6 +68,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  fetchPage,
  pageCount,
  count: itemCount,
+ revalidate: invalidateAll,
  } = useAPIKeys({
  subject,
  pageSize: perPage ?? API_KEYS_PAGE_SIZE,
@@ -77,12 +77,11 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  enabled: isOrg ? canReadAPIKeys : true,
  });
 
-const { invalidateAll } = useAPIKeysPagination({
+ useAPIKeysPagination({
  query,
  page,
  pageCount,
  isFetching,
- subject,
  fetchPage,
  });
 
@@ -94,11 +93,9 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  };
  const card = useCardState();
  const clerk = useClerk();
- const {
- data: createdAPIKey,
- trigger: createAPIKey,
- isMutating,
- } = useSWRMutation('api-keys-create', (_key, { arg }: { arg: CreateAPIKeyParams }) => clerk.apiKeys.create(arg));
+
+ const [apiKey, setAPIKey] = useState<APIKeyResource | null>(null);
+
  const { t } = useLocalizations();
  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
  const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');
@@ -107,19 +104,23 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
 
  const handleCreateAPIKey = async (params: OnCreateParams) => {
  try {
- await createAPIKey({
+ card.setLoading();
+ const apiKey = await clerk.apiKeys.create({
  ...params,
  subject,
  });
  invalidateAll();
  card.setError(undefined);
  setIsCopyModalOpen(true);
+ setAPIKey(apiKey);
  } catch (err: any) {
  if (isClerkAPIResponseError(err)) {
  if (err.status === 409) {
  card.setError('API Key name already exists');
  }
  }
+ } finally {
+ card.setIdle();
  }
  };
 
@@ -181,10 +182,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  <Action.Open value='add-api-key'>
  <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>
  <Action.Card sx={{ width: '100%' }}>
- <CreateAPIKeyForm
- onCreate={handleCreateAPIKey}
- isSubmitting={isMutating}
- />
+ <CreateAPIKeyForm onCreate={handleCreateAPIKey} />
  </Action.Card>
  </Flex>
  </Action.Open>
@@ -193,8 +191,8 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  isOpen={isCopyModalOpen}
  onOpen={() => setIsCopyModalOpen(true)}
  onClose={() => setIsCopyModalOpen(false)}
- apiKeyName={createdAPIKey?.name ?? ''}
- apiKeySecret={createdAPIKey?.secret ?? ''}
+ apiKeyName={apiKey?.name || ''}
+ apiKeySecret={apiKey?.secret || ''}
  modalRoot={revokeModalRoot}
  />
  </Action.Root>

packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { useAPIKeysContext } from '@/ui/contexts';
 import { Box, Col, descriptors, FormLabel, localizationKeys, Text, useLocalizations } from '@/ui/customizables';
 import { useActionContext } from '@/ui/elements/Action/ActionRoot';
+import { useCardState } from '@/ui/elements/contexts';
 import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
@@ -28,7 +29,6 @@ export type OnCreateParams = {
 
 interface CreateAPIKeyFormProps {
  onCreate: (params: OnCreateParams) => void;
- isSubmitting: boolean;
 }
 
 const EXPIRATION_DURATIONS: Record<Exclude<Expiration, 'never'>, (date: Date) => void> = {
@@ -117,10 +117,11 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
  );
 };
 
-export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, isSubmitting }) => {
+export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate }) => {
  const [selectedExpiration, setSelectedExpiration] = useState<ExpirationOption | null>(null);
  const { close: closeCardFn } = useActionContext();
  const { showDescription = false } = useAPIKeysContext();
+ const card = useCardState();
  const { t } = useLocalizations();
 
  const nameField = useFormControl('name', '', {
@@ -251,7 +252,7 @@ export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, is
  submitLabel={localizationKeys('apiKeys.formButtonPrimary__add')}
  isDisabled={!canSubmit}
  onReset={closeCardFn}
- isLoading={isSubmitting}
+ isLoading={card.isLoading}
  elementDescriptor={descriptors.apiKeysCreateFormSubmitButton}
  />
  </Form.Root>

packages/clerk-js/src/ui/components/APIKeys/utils.ts

@@ -1,12 +1,10 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useSWRConfig } from 'swr';
+import { useEffect, useRef } from 'react';
 
 type UseAPIKeysPaginationParams = {
  query: string;
  page: number;
  pageCount: number;
  isFetching: boolean;
- subject: string;
  fetchPage: (page: number) => void;
 };
 
@@ -16,27 +14,7 @@ type UseAPIKeysPaginationParams = {
  * - Adjusts page when current page exceeds available pages (e.g., after deletion)
  * - Provides cache invalidation function for mutations
  */
-export const useAPIKeysPagination = ({
- query,
- page,
- pageCount,
- isFetching,
- subject,
- fetchPage,
-}: UseAPIKeysPaginationParams) => {
- const { mutate } = useSWRConfig();
-
- // Invalidate all cache entries for this user or organization
- const invalidateAll = useCallback(() => {
- void mutate(key => {
- if (!key || typeof key !== 'object') {
- return false;
- }
- // Match all apiKeys cache entries for this user or organization, regardless of page, pageSize, or query
- return 'type' in key && key.type === 'apiKeys' && 'subject' in key && key.subject === subject;
- });
- }, [mutate, subject]);
-
+export const useAPIKeysPagination = ({ query, page, pageCount, isFetching, fetchPage }: UseAPIKeysPaginationParams) => {
  // Reset to first page when query changes
  const previousQueryRef = useRef(query);
  useEffect(() => {
@@ -53,8 +31,4 @@ export const useAPIKeysPagination = ({
  fetchPage(Math.max(1, pageCount));
  }
  }, [pageCount, page, isFetching, fetchPage]);
-
- return {
- invalidateAll,
- };
 };

packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx

@@ -1,6 +1,5 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
+import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';
 import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -31,28 +30,17 @@ export const PaymentAttemptPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: paymentAttempt,
  isLoading,
  error,
- } = useSWR(
- params.paymentAttemptId
- ? {
- type: 'payment-attempt',
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getPaymentAttempt({
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_usePaymentAttemptQuery({
+ paymentAttemptId: params.paymentAttemptId,
+ for: requesterType,
+ enabled: Boolean(params.paymentAttemptId),
+ });
 
  const subscriptionItem = paymentAttempt?.subscriptionItem;
 

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -1,4 +1,4 @@
-import { useClerk } from '@clerk/shared/react';
+import { __internal_usePlanDetailsQuery } from '@clerk/shared/react/index';
 import type {
  __internal_PlanDetailsProps,
  BillingPlanResource,
@@ -7,7 +7,6 @@ import type {
 } from '@clerk/shared/types';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Avatar } from '@/ui/elements/Avatar';
@@ -79,24 +78,17 @@ const PlanDetailsInternal = ({
  plan: initialPlan,
  initialPlanPeriod = 'month',
 }: __internal_PlanDetailsProps) => {
- const clerk = useClerk();
  const [planPeriod, setPlanPeriod] = useState<BillingSubscriptionPlanPeriod>(initialPlanPeriod);
 
  const {
  data: plan,
  isLoading,
  error,
- } = useSWR<BillingPlanResource, ClerkAPIResponseError>(
- planId || initialPlan ? { type: 'plan', id: planId || initialPlan?.id } : null,
- // @ts-expect-error we are handling it above
- () => clerk.billing.getPlan({ id: planId || initialPlan?.id }),
- {
- fallbackData: initialPlan,
- revalidateOnFocus: false,
- shouldRetryOnError: false,
- keepPreviousData: true,
- },
- );
+ } = __internal_usePlanDetailsQuery({
+ planId,
+ initialPlan,
+ enabled: Boolean(planId || initialPlan?.id),
+ });
 
  if (isLoading && !initialPlan) {
  return (

packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx

@@ -70,6 +70,7 @@ describe('PlanDetails', () => {
  it('displays spinner when loading with planId', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockImplementation(() => new Promise(() => {}));
@@ -118,6 +119,7 @@ describe('PlanDetails', () => {
  it('fetches and renders plan details when planId is provided', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockResolvedValue(mockPlan);

packages/clerk-js/src/ui/components/Statements/StatementPage.tsx

@@ -1,5 +1,4 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
-import useSWR from 'swr';
+import { __internal_useStatementQuery } from '@clerk/shared/react/index';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -25,28 +24,17 @@ export const StatementPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: statement,
  isLoading,
  error,
- } = useSWR(
- params.statementId
- ? {
- type: 'statement',
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getStatement({
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_useStatementQuery({
+ statementId: params.statementId,
+ for: requesterType,
+ enabled: Boolean(params.statementId),
+ });
 
  if (isLoading) {
  return (

.changeset/early-clowns-dance.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Removes SWR as direct dependency

.changeset/fuzzy-donuts-jam.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': minor
+---
+
+Creates compatibility layer for SWR hooks that were previously inside `@clerk/clerk-js`

.github/workflows/ci.yml

@@ -310,7 +310,6 @@ jobs:
  'vue',
  'nuxt',
  'react-router',
- 'machine',
  'custom',
  ]
  test-project: ["chrome"]
@@ -321,6 +320,12 @@ jobs:
  - test-name: 'billing'
  test-project: 'chrome'
  clerk-use-rq: 'true'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'false'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'true'
  - test-name: 'nextjs'
  test-project: 'chrome'
  next-version: '14'

packages/clerk-js/package.json

@@ -82,8 +82,7 @@
  "dequal": "2.0.3",
  "input-otp": "1.4.2",
  "qrcode.react": "4.2.0",
- "regenerator-runtime": "0.14.1",
- "swr": "2.3.4"
+ "regenerator-runtime": "0.14.1"
  },
  "devDependencies": {
  "@clerk/testing": "workspace:^",

packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx

@@ -1,8 +1,7 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { __experimental_useAPIKeys as useAPIKeys, useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type { CreateAPIKeyParams } from '@clerk/shared/types';
+import type { APIKeyResource } from '@clerk/shared/types';
 import { lazy, useState } from 'react';
-import useSWRMutation from 'swr/mutation';
 
 import { useProtect } from '@/ui/common';
 import { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';
@@ -69,6 +68,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  fetchPage,
  pageCount,
  count: itemCount,
+ revalidate: invalidateAll,
  } = useAPIKeys({
  subject,
  pageSize: perPage ?? API_KEYS_PAGE_SIZE,
@@ -77,12 +77,11 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  enabled: isOrg ? canReadAPIKeys : true,
  });
 
-const { invalidateAll } = useAPIKeysPagination({
+ useAPIKeysPagination({
  query,
  page,
  pageCount,
  isFetching,
- subject,
  fetchPage,
  });
 
@@ -94,11 +93,9 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  };
  const card = useCardState();
  const clerk = useClerk();
- const {
- data: createdAPIKey,
- trigger: createAPIKey,
- isMutating,
- } = useSWRMutation('api-keys-create', (_key, { arg }: { arg: CreateAPIKeyParams }) => clerk.apiKeys.create(arg));
+
+ const [apiKey, setAPIKey] = useState<APIKeyResource | null>(null);
+
  const { t } = useLocalizations();
  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
  const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');
@@ -107,19 +104,23 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
 
  const handleCreateAPIKey = async (params: OnCreateParams) => {
  try {
- await createAPIKey({
+ card.setLoading();
+ const apiKey = await clerk.apiKeys.create({
  ...params,
  subject,
  });
  invalidateAll();
  card.setError(undefined);
  setIsCopyModalOpen(true);
+ setAPIKey(apiKey);
  } catch (err: any) {
  if (isClerkAPIResponseError(err)) {
  if (err.status === 409) {
  card.setError('API Key name already exists');
  }
  }
+ } finally {
+ card.setIdle();
  }
  };
 
@@ -181,10 +182,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  <Action.Open value='add-api-key'>
  <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>
  <Action.Card sx={{ width: '100%' }}>
- <CreateAPIKeyForm
- onCreate={handleCreateAPIKey}
- isSubmitting={isMutating}
- />
+ <CreateAPIKeyForm onCreate={handleCreateAPIKey} />
  </Action.Card>
  </Flex>
  </Action.Open>
@@ -193,8 +191,8 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  isOpen={isCopyModalOpen}
  onOpen={() => setIsCopyModalOpen(true)}
  onClose={() => setIsCopyModalOpen(false)}
- apiKeyName={createdAPIKey?.name ?? ''}
- apiKeySecret={createdAPIKey?.secret ?? ''}
+ apiKeyName={apiKey?.name || ''}
+ apiKeySecret={apiKey?.secret || ''}
  modalRoot={revokeModalRoot}
  />
  </Action.Root>

packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { useAPIKeysContext } from '@/ui/contexts';
 import { Box, Col, descriptors, FormLabel, localizationKeys, Text, useLocalizations } from '@/ui/customizables';
 import { useActionContext } from '@/ui/elements/Action/ActionRoot';
+import { useCardState } from '@/ui/elements/contexts';
 import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
@@ -28,7 +29,6 @@ export type OnCreateParams = {
 
 interface CreateAPIKeyFormProps {
  onCreate: (params: OnCreateParams) => void;
- isSubmitting: boolean;
 }
 
 const EXPIRATION_DURATIONS: Record<Exclude<Expiration, 'never'>, (date: Date) => void> = {
@@ -117,10 +117,11 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
  );
 };
 
-export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, isSubmitting }) => {
+export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate }) => {
  const [selectedExpiration, setSelectedExpiration] = useState<ExpirationOption | null>(null);
  const { close: closeCardFn } = useActionContext();
  const { showDescription = false } = useAPIKeysContext();
+ const card = useCardState();
  const { t } = useLocalizations();
 
  const nameField = useFormControl('name', '', {
@@ -251,7 +252,7 @@ export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, is
  submitLabel={localizationKeys('apiKeys.formButtonPrimary__add')}
  isDisabled={!canSubmit}
  onReset={closeCardFn}
- isLoading={isSubmitting}
+ isLoading={card.isLoading}
  elementDescriptor={descriptors.apiKeysCreateFormSubmitButton}
  />
  </Form.Root>

packages/clerk-js/src/ui/components/APIKeys/utils.ts

@@ -1,12 +1,10 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useSWRConfig } from 'swr';
+import { useEffect, useRef } from 'react';
 
 type UseAPIKeysPaginationParams = {
  query: string;
  page: number;
  pageCount: number;
  isFetching: boolean;
- subject: string;
  fetchPage: (page: number) => void;
 };
 
@@ -16,27 +14,7 @@ type UseAPIKeysPaginationParams = {
  * - Adjusts page when current page exceeds available pages (e.g., after deletion)
  * - Provides cache invalidation function for mutations
  */
-export const useAPIKeysPagination = ({
- query,
- page,
- pageCount,
- isFetching,
- subject,
- fetchPage,
-}: UseAPIKeysPaginationParams) => {
- const { mutate } = useSWRConfig();
-
- // Invalidate all cache entries for this user or organization
- const invalidateAll = useCallback(() => {
- void mutate(key => {
- if (!key || typeof key !== 'object') {
- return false;
- }
- // Match all apiKeys cache entries for this user or organization, regardless of page, pageSize, or query
- return 'type' in key && key.type === 'apiKeys' && 'subject' in key && key.subject === subject;
- });
- }, [mutate, subject]);
-
+export const useAPIKeysPagination = ({ query, page, pageCount, isFetching, fetchPage }: UseAPIKeysPaginationParams) => {
  // Reset to first page when query changes
  const previousQueryRef = useRef(query);
  useEffect(() => {
@@ -53,8 +31,4 @@ export const useAPIKeysPagination = ({
  fetchPage(Math.max(1, pageCount));
  }
  }, [pageCount, page, isFetching, fetchPage]);
-
- return {
- invalidateAll,
- };
 };

packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx

@@ -1,6 +1,5 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
+import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';
 import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -31,28 +30,17 @@ export const PaymentAttemptPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: paymentAttempt,
  isLoading,
  error,
- } = useSWR(
- params.paymentAttemptId
- ? {
- type: 'payment-attempt',
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getPaymentAttempt({
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_usePaymentAttemptQuery({
+ paymentAttemptId: params.paymentAttemptId,
+ for: requesterType,
+ enabled: Boolean(params.paymentAttemptId),
+ });
 
  const subscriptionItem = paymentAttempt?.subscriptionItem;
 

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -1,4 +1,4 @@
-import { useClerk } from '@clerk/shared/react';
+import { __internal_usePlanDetailsQuery } from '@clerk/shared/react/index';
 import type {
  __internal_PlanDetailsProps,
  BillingPlanResource,
@@ -7,7 +7,6 @@ import type {
 } from '@clerk/shared/types';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Avatar } from '@/ui/elements/Avatar';
@@ -79,24 +78,17 @@ const PlanDetailsInternal = ({
  plan: initialPlan,
  initialPlanPeriod = 'month',
 }: __internal_PlanDetailsProps) => {
- const clerk = useClerk();
  const [planPeriod, setPlanPeriod] = useState<BillingSubscriptionPlanPeriod>(initialPlanPeriod);
 
  const {
  data: plan,
  isLoading,
  error,
- } = useSWR<BillingPlanResource, ClerkAPIResponseError>(
- planId || initialPlan ? { type: 'plan', id: planId || initialPlan?.id } : null,
- // @ts-expect-error we are handling it above
- () => clerk.billing.getPlan({ id: planId || initialPlan?.id }),
- {
- fallbackData: initialPlan,
- revalidateOnFocus: false,
- shouldRetryOnError: false,
- keepPreviousData: true,
- },
- );
+ } = __internal_usePlanDetailsQuery({
+ planId,
+ initialPlan,
+ enabled: Boolean(planId || initialPlan?.id),
+ });
 
  if (isLoading && !initialPlan) {
  return (

packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx

@@ -70,6 +70,7 @@ describe('PlanDetails', () => {
  it('displays spinner when loading with planId', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockImplementation(() => new Promise(() => {}));
@@ -118,6 +119,7 @@ describe('PlanDetails', () => {
  it('fetches and renders plan details when planId is provided', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockResolvedValue(mockPlan);

packages/clerk-js/src/ui/components/Statements/StatementPage.tsx

@@ -1,5 +1,4 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
-import useSWR from 'swr';
+import { __internal_useStatementQuery } from '@clerk/shared/react/index';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -25,28 +24,17 @@ export const StatementPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: statement,
  isLoading,
  error,
- } = useSWR(
- params.statementId
- ? {
- type: 'statement',
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getStatement({
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_useStatementQuery({
+ statementId: params.statementId,
+ for: requesterType,
+ enabled: Boolean(params.statementId),
+ });
 
  if (isLoading) {
  return (

.changeset/early-clowns-dance.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Removes SWR as direct dependency

.changeset/fuzzy-donuts-jam.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': minor
+---
+
+Creates compatibility layer for SWR hooks that were previously inside `@clerk/clerk-js`

.github/workflows/ci.yml

@@ -310,7 +310,6 @@ jobs:
  'vue',
  'nuxt',
  'react-router',
- 'machine',
  'custom',
  ]
  test-project: ["chrome"]
@@ -321,6 +320,12 @@ jobs:
  - test-name: 'billing'
  test-project: 'chrome'
  clerk-use-rq: 'true'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'false'
+ - test-name: 'machine'
+ test-project: 'chrome'
+ clerk-use-rq: 'true'
  - test-name: 'nextjs'
  test-project: 'chrome'
  next-version: '14'

packages/clerk-js/package.json

@@ -82,8 +82,7 @@
  "dequal": "2.0.3",
  "input-otp": "1.4.2",
  "qrcode.react": "4.2.0",
- "regenerator-runtime": "0.14.1",
- "swr": "2.3.4"
+ "regenerator-runtime": "0.14.1"
  },
  "devDependencies": {
  "@clerk/testing": "workspace:^",

packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx

@@ -1,8 +1,7 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { __experimental_useAPIKeys as useAPIKeys, useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type { CreateAPIKeyParams } from '@clerk/shared/types';
+import type { APIKeyResource } from '@clerk/shared/types';
 import { lazy, useState } from 'react';
-import useSWRMutation from 'swr/mutation';
 
 import { useProtect } from '@/ui/common';
 import { useAPIKeysContext, withCoreUserGuard } from '@/ui/contexts';
@@ -69,6 +68,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  fetchPage,
  pageCount,
  count: itemCount,
+ revalidate: invalidateAll,
  } = useAPIKeys({
  subject,
  pageSize: perPage ?? API_KEYS_PAGE_SIZE,
@@ -77,12 +77,11 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  enabled: isOrg ? canReadAPIKeys : true,
  });
 
-const { invalidateAll } = useAPIKeysPagination({
+ useAPIKeysPagination({
  query,
  page,
  pageCount,
  isFetching,
- subject,
  fetchPage,
  });
 
@@ -94,11 +93,9 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  };
  const card = useCardState();
  const clerk = useClerk();
- const {
- data: createdAPIKey,
- trigger: createAPIKey,
- isMutating,
- } = useSWRMutation('api-keys-create', (_key, { arg }: { arg: CreateAPIKeyParams }) => clerk.apiKeys.create(arg));
+
+ const [apiKey, setAPIKey] = useState<APIKeyResource | null>(null);
+
  const { t } = useLocalizations();
  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
  const [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');
@@ -107,19 +104,23 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
 
  const handleCreateAPIKey = async (params: OnCreateParams) => {
  try {
- await createAPIKey({
+ card.setLoading();
+ const apiKey = await clerk.apiKeys.create({
  ...params,
  subject,
  });
  invalidateAll();
  card.setError(undefined);
  setIsCopyModalOpen(true);
+ setAPIKey(apiKey);
  } catch (err: any) {
  if (isClerkAPIResponseError(err)) {
  if (err.status === 409) {
  card.setError('API Key name already exists');
  }
  }
+ } finally {
+ card.setIdle();
  }
  };
 
@@ -181,10 +182,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  <Action.Open value='add-api-key'>
  <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>
  <Action.Card sx={{ width: '100%' }}>
- <CreateAPIKeyForm
- onCreate={handleCreateAPIKey}
- isSubmitting={isMutating}
- />
+ <CreateAPIKeyForm onCreate={handleCreateAPIKey} />
  </Action.Card>
  </Flex>
  </Action.Open>
@@ -193,8 +191,8 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
  isOpen={isCopyModalOpen}
  onOpen={() => setIsCopyModalOpen(true)}
  onClose={() => setIsCopyModalOpen(false)}
- apiKeyName={createdAPIKey?.name ?? ''}
- apiKeySecret={createdAPIKey?.secret ?? ''}
+ apiKeyName={apiKey?.name || ''}
+ apiKeySecret={apiKey?.secret || ''}
  modalRoot={revokeModalRoot}
  />
  </Action.Root>

packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { useAPIKeysContext } from '@/ui/contexts';
 import { Box, Col, descriptors, FormLabel, localizationKeys, Text, useLocalizations } from '@/ui/customizables';
 import { useActionContext } from '@/ui/elements/Action/ActionRoot';
+import { useCardState } from '@/ui/elements/contexts';
 import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
@@ -28,7 +29,6 @@ export type OnCreateParams = {
 
 interface CreateAPIKeyFormProps {
  onCreate: (params: OnCreateParams) => void;
- isSubmitting: boolean;
 }
 
 const EXPIRATION_DURATIONS: Record<Exclude<Expiration, 'never'>, (date: Date) => void> = {
@@ -117,10 +117,11 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
  );
 };
 
-export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, isSubmitting }) => {
+export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate }) => {
  const [selectedExpiration, setSelectedExpiration] = useState<ExpirationOption | null>(null);
  const { close: closeCardFn } = useActionContext();
  const { showDescription = false } = useAPIKeysContext();
+ const card = useCardState();
  const { t } = useLocalizations();
 
  const nameField = useFormControl('name', '', {
@@ -251,7 +252,7 @@ export const CreateAPIKeyForm: React.FC<CreateAPIKeyFormProps> = ({ onCreate, is
  submitLabel={localizationKeys('apiKeys.formButtonPrimary__add')}
  isDisabled={!canSubmit}
  onReset={closeCardFn}
- isLoading={isSubmitting}
+ isLoading={card.isLoading}
  elementDescriptor={descriptors.apiKeysCreateFormSubmitButton}
  />
  </Form.Root>

packages/clerk-js/src/ui/components/APIKeys/utils.ts

@@ -1,12 +1,10 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { useSWRConfig } from 'swr';
+import { useEffect, useRef } from 'react';
 
 type UseAPIKeysPaginationParams = {
  query: string;
  page: number;
  pageCount: number;
  isFetching: boolean;
- subject: string;
  fetchPage: (page: number) => void;
 };
 
@@ -16,27 +14,7 @@ type UseAPIKeysPaginationParams = {
  * - Adjusts page when current page exceeds available pages (e.g., after deletion)
  * - Provides cache invalidation function for mutations
  */
-export const useAPIKeysPagination = ({
- query,
- page,
- pageCount,
- isFetching,
- subject,
- fetchPage,
-}: UseAPIKeysPaginationParams) => {
- const { mutate } = useSWRConfig();
-
- // Invalidate all cache entries for this user or organization
- const invalidateAll = useCallback(() => {
- void mutate(key => {
- if (!key || typeof key !== 'object') {
- return false;
- }
- // Match all apiKeys cache entries for this user or organization, regardless of page, pageSize, or query
- return 'type' in key && key.type === 'apiKeys' && 'subject' in key && key.subject === subject;
- });
- }, [mutate, subject]);
-
+export const useAPIKeysPagination = ({ query, page, pageCount, isFetching, fetchPage }: UseAPIKeysPaginationParams) => {
  // Reset to first page when query changes
  const previousQueryRef = useRef(query);
  useEffect(() => {
@@ -53,8 +31,4 @@ export const useAPIKeysPagination = ({
  fetchPage(Math.max(1, pageCount));
  }
  }, [pageCount, page, isFetching, fetchPage]);
-
- return {
- invalidateAll,
- };
 };

packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx

@@ -1,6 +1,5 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
+import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';
 import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -31,28 +30,17 @@ export const PaymentAttemptPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: paymentAttempt,
  isLoading,
  error,
- } = useSWR(
- params.paymentAttemptId
- ? {
- type: 'payment-attempt',
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getPaymentAttempt({
- id: params.paymentAttemptId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_usePaymentAttemptQuery({
+ paymentAttemptId: params.paymentAttemptId,
+ for: requesterType,
+ enabled: Boolean(params.paymentAttemptId),
+ });
 
  const subscriptionItem = paymentAttempt?.subscriptionItem;
 

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -1,4 +1,4 @@
-import { useClerk } from '@clerk/shared/react';
+import { __internal_usePlanDetailsQuery } from '@clerk/shared/react/index';
 import type {
  __internal_PlanDetailsProps,
  BillingPlanResource,
@@ -7,7 +7,6 @@ import type {
 } from '@clerk/shared/types';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
-import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Avatar } from '@/ui/elements/Avatar';
@@ -79,24 +78,17 @@ const PlanDetailsInternal = ({
  plan: initialPlan,
  initialPlanPeriod = 'month',
 }: __internal_PlanDetailsProps) => {
- const clerk = useClerk();
  const [planPeriod, setPlanPeriod] = useState<BillingSubscriptionPlanPeriod>(initialPlanPeriod);
 
  const {
  data: plan,
  isLoading,
  error,
- } = useSWR<BillingPlanResource, ClerkAPIResponseError>(
- planId || initialPlan ? { type: 'plan', id: planId || initialPlan?.id } : null,
- // @ts-expect-error we are handling it above
- () => clerk.billing.getPlan({ id: planId || initialPlan?.id }),
- {
- fallbackData: initialPlan,
- revalidateOnFocus: false,
- shouldRetryOnError: false,
- keepPreviousData: true,
- },
- );
+ } = __internal_usePlanDetailsQuery({
+ planId,
+ initialPlan,
+ enabled: Boolean(planId || initialPlan?.id),
+ });
 
  if (isLoading && !initialPlan) {
  return (

packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx

@@ -70,6 +70,7 @@ describe('PlanDetails', () => {
  it('displays spinner when loading with planId', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockImplementation(() => new Promise(() => {}));
@@ -118,6 +119,7 @@ describe('PlanDetails', () => {
  it('fetches and renders plan details when planId is provided', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withUser({ email_addresses: ['test@clerk.com'] });
+ f.withBilling();
  });
 
  fixtures.clerk.billing.getPlan.mockResolvedValue(mockPlan);

packages/clerk-js/src/ui/components/Statements/StatementPage.tsx

@@ -1,5 +1,4 @@
-import { useClerk, useOrganizationContext } from '@clerk/shared/react';
-import useSWR from 'swr';
+import { __internal_useStatementQuery } from '@clerk/shared/react/index';
 
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
@@ -25,28 +24,17 @@ export const StatementPage = () => {
  const subscriberType = useSubscriberTypeContext();
  const localizationRoot = useSubscriberTypeLocalizationRoot();
  const { t, translateError } = useLocalizations();
- const clerk = useClerk();
- // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
- const organizationCtx = useOrganizationContext();
+ const requesterType = subscriberType === 'organization' ? 'organization' : 'user';
 
  const {
  data: statement,
  isLoading,
  error,
- } = useSWR(
- params.statementId
- ? {
- type: 'statement',
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }
- : null,
- () =>
- clerk.billing.getStatement({
- id: params.statementId,
- orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
- }),
- );
+ } = __internal_useStatementQuery({
+ statementId: params.statementId,
+ for: requesterType,
+ enabled: Boolean(params.statementId),
+ });
 
  if (isLoading) {
  return (