.changeset/gold-snails-care.md (1)

5-5: Polish the release note for clarity.

Consider a clearer, user-facing message without the bracketed prefix.

-[Experimental] Fix issue with property access for state proxy
+Fix state proxy property access after clerk-js loads

integration/templates/custom-flows-react-vite/src/lib/utils.ts (1)

4-6: Add explicit return type and spread inputs into clsx.

Improves TS clarity and avoids passing a nested array to clsx.

-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(...inputs));
+}

integration/templates/custom-flows-react-vite/src/routes/Protected.tsx (2)

5-7: Return null instead of undefined while loading/unauthenticated

Returning undefined from a React component is discouraged; return null for clarity.

-  if (!isLoaded || !user) {
-    return;
-  }
+  if (!isLoaded || !user) {
+    return null;
+  }

---

3-3: Add an explicit return type

Aligns with repo guidelines for TS/TSX public APIs.

-export function Protected() {
+export function Protected(): JSX.Element | null {

integration/templates/custom-flows-react-vite/tsconfig.app.json (2)

14-21: Enable isolatedModules for Vite/esbuild workflows

This catches non-file‑isolated patterns early and better matches bundler mode.

   "moduleResolution": "bundler",
   "allowImportingTsExtensions": true,
   "verbatimModuleSyntax": true,
   "moduleDetection": "force",
+  "isolatedModules": true,
   "noEmit": true,
   "jsx": "react-jsx",

---

22-29: Tighten strictness (optional): exactOptionalPropertyTypes

Improves correctness of optional fields in templates.

   "strict": true,
+  "exactOptionalPropertyTypes": true,
   "noUnusedLocals": true,
   "noUnusedParameters": true,

integration/templates/custom-flows-react-vite/package.json (1)

2-2: Align package name with template directory

Name currently says "hooks-revamp-vite-react". Aligning helps discoverability and avoids confusion in logs.

-  "name": "hooks-revamp-vite-react",
+  "name": "custom-flows-react-vite",

integration/templates/index.ts (1)

3-23: Optional: keep keys alphabetized for scanability

Not required, but helps maintenance when list grows.

integration/templates/custom-flows-react-vite/tsconfig.node.json (2)

16-23: Add Node/Vite types for config authoring

Provides proper typings for vite.config.ts without relying on ambient globals.

   /* Linting */
   "strict": true,
+  "types": ["node", "vite"],
   "noUnusedLocals": true,
   "noUnusedParameters": true,

---

9-15: Enable isolatedModules (optional)

Keeps config TS in line with bundler workflows.

   "moduleDetection": "force",
+  "isolatedModules": true,
   "noEmit": true,

packages/react/src/stateProxy.ts (1)

116-124: Simplify gateProperty; optional: guard against shared mutable defaults

The IIFE is unnecessary. Also, unverifiedFields’ default [] is a shared instance; if a consumer mutates it before load completes, it persists. Consider freezing or returning a new array.

Use:

-  private gateProperty<T extends object, K extends keyof T>(getTarget: () => T, key: K, defaultValue: T[K]) {
-    return (() => {
-      if (!inBrowser() || !this.isomorphicClerk.loaded) {
-        return defaultValue;
-      }
-      const t = getTarget();
-      return t[key];
-    })() as T[K];
-  }
+  private gateProperty<T extends object, K extends keyof T>(
+    getTarget: () => T,
+    key: K,
+    defaultValue: T[K],
+  ) {
+    if (!inBrowser() || !this.isomorphicClerk.loaded) {
+      return defaultValue;
+    }
+    const t = getTarget();
+    return t[key] as T[K];
+  }

Optional (call site): return an immutable default

-          return gateProp('unverifiedFields', []);
+          return gateProp('unverifiedFields', Object.freeze([]) as never[]);

integration/templates/custom-flows-react-vite/index.html (1)

7-7: Use a template-specific, descriptive title

Improves clarity for users and E2E snapshots.

-    <title>Vite + React + TS</title>
+    <title>Clerk Custom Flows (React + Vite)</title>

integration/templates/custom-flows-react-vite/src/routes/Home.tsx (1)

5-9: Use semantic

for accessibility.

Wrap navigation links in a landmark for better a11y.

-  return (
-    <div>
+  return (
+    <nav aria-label="Primary">
       <NavLink to='/sign-in'>Sign In</NavLink>
       <NavLink to='/sign-up'>Sign Up</NavLink>
-    </div>
+    </nav>

integration/templates/custom-flows-react-vite/src/components/ui/label.tsx (1)

6-17: Forward refs and add minimal JSDoc for the public UI primitive.

Forwarding refs is important for focus management and integration with form libs; also document the API.

-function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot='label'
-      className={cn(
-        'flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+/** Accessible label built on Radix UI's Label. Forwards ref for focus management. */
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <LabelPrimitive.Root
+      ref={ref}
+      data-slot='label'
+      className={cn(
+        'flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+Label.displayName = 'Label';

integration/templates/custom-flows-react-vite/src/components/ui/input.tsx (1)

5-19: Forward refs for Input; default type to 'text'; add JSDoc.

Improves interop with form libs and aligns with guidelines on refs.

-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
-  return (
-    <input
-      type={type}
-      data-slot='input'
-      className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+/** Styled input element. Forwards ref for focus control and form libraries. */
+const Input = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentPropsWithoutRef<'input'>
+>(({ className, type = 'text', ...props }, ref) => {
+  return (
+    <input
+      ref={ref}
+      type={type}
+      data-slot='input'
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+Input.displayName = 'Input';

integration/templates/custom-flows-react-vite/src/main.tsx (2)

24-24: Avoid unsafe cast on env; type it instead.

Casting with as string can mask undefined. Let the prop accept string | undefined and type the env properly.

-          clerkJSUrl={import.meta.env.VITE_CLERK_JS_URL as string}
+          clerkJSUrl={import.meta.env.VITE_CLERK_JS_URL}

Add a src/env.d.ts:

/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_CLERK_PUBLISHABLE_KEY: string;
  readonly VITE_CLERK_JS_URL?: string;
}

---

27-44: Add a catch-all route to avoid blank screens on unknown paths.

Prevents 404s from rendering nothing.

               <Route
                 path='/protected'
                 element={<Protected />}
               />
+              <Route path='*' element={<Home />} />

integration/templates/custom-flows-react-vite/src/routes/SignUp.tsx (4)

11-11: Annotate component return type.

Keeps TS strictness per guidelines.

-export function SignUp({ className, ...props }: React.ComponentProps<'div'>) {
+export function SignUp({ className, ...props }: React.ComponentProps<'div'>): JSX.Element {

---

87-87: Standardize error messages (prefer longMessage, fallback to message).

Ensures consistent UX.

-                  {errors.fields.code && <div className='text-red-500'>{errors.fields.code.message}</div>}
+                  {errors.fields.code && (
+                    <div className='text-red-500'>
+                      {errors.fields.code.longMessage ?? errors.fields.code.message}
+                    </div>
+                  )}

---

175-177: Avoid unsafe cast for global errors.

Narrow defensively to handle different shapes.

-                {errors.global.length > 0 && (
-                  <p className='text-sm text-red-600'>{(errors.global[0] as { longMessage: string }).longMessage}</p>
-                )}
+                {errors.global[0] && (
+                  <p className='text-sm text-red-600'>
+                    {'longMessage' in (errors.global[0] as any)
+                      ? (errors.global[0] as any).longMessage
+                      : String(errors.global[0])}
+                  </p>
+                )}

---

1-1: 'use client' is unnecessary in Vite.

Safe to remove in this template.

-'use client';
+/* file runs client-side in Vite; 'use client' not required */

integration/templates/custom-flows-react-vite/src/index.css (4)

25-26: Map destructive-foreground token.

Theme defines --destructive but not its foreground; many UI kits expect it.

   --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);

---

44-77: Add missing destructive-foreground variables (light mode).

Provides contrast for destructive buttons/text.

   --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);

---

79-111: Add missing destructive-foreground variables (dark mode).

Ensures contrast in dark.

   --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.205 0 0);

---

113-116: Global outline may be heavy-handed.

Applying outline-* to all elements can cause unexpected styles. Consider limiting to focus-visible.

-  * {
-    @apply border-border outline-ring/50;
-  }
+  * {
+    @apply border-border;
+  }
+  :where(:focus-visible) {
+    @apply outline-ring/50;
+  }

integration/tests/custom-flows/sign-in.test.ts (2)

25-32: Remove @ts-expect-error by aligning types, or isolate the cast

If apiUrl is intentionally unsupported in clerkSetup’s typing, narrow the cast locally to avoid blanket suppression.

-    await clerkSetup({
+    await clerkSetup({
       publishableKey,
       frontendApiUrl,
       secretKey,
-      // @ts-expect-error
-      apiUrl,
+      apiUrl: apiUrl as unknown as string,
       dotenv: false,
     });

Or extend the type in @clerk/testing/playwright if apiUrl is now a first-class option.

---

63-74: Harden error assertion to reduce flakiness

Matching "is incorrect" is brittle. Prefer a scoped assertion (field error) or regex.

-    await expect(u.page.getByText('is incorrect')).toBeVisible();
+    await expect(u.page.locator('input[name="code"] + div')).toHaveText(/incorrect|invalid/i);

If the markup differs, target the page-object’s error helper instead.

integration/tests/custom-flows/sign-up.test.ts (1)

25-32: Remove @ts-expect-error on apiUrl by narrowing the cast or updating types

Same rationale as sign-in test.

-      // @ts-expect-error
-      apiUrl,
+      apiUrl: apiUrl as unknown as string,

integration/templates/custom-flows-react-vite/src/components/ui/button.tsx (1)

35-56: forwardRef + explicit return type + JSDoc for public Button API

Improves ergonomics, complies with TS return-type guideline, and keeps refs working when asChild is used.

-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : 'button';
-
-  return (
-    <Comp
-      data-slot='button'
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
+/** Button component with variant- and size-driven styles. */
+type ButtonProps = React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & { asChild?: boolean };
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { className, variant, size, asChild = false, ...props },
+  ref,
+): JSX.Element {
+  const Comp: any = asChild ? Slot : 'button';
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+});

integration/templates/custom-flows-react-vite/src/routes/SignIn.tsx (4)

15-20: Add explicit return type and minimal JSDoc

Matches repo guidelines for public exports.

-export function SignIn({ className, ...props }: React.ComponentProps<'div'>) {
+/** Multi-strategy Clerk sign-in flow (email/phone code, password, OAuth). */
+export function SignIn({ className, ...props }: React.ComponentProps<'div'>): JSX.Element | null {

---

107-118: Human-friendly labels for strategies

Current UI shows raw identifiers (email_code, etc.). Map to readable labels.

-                  <Button
+                  <Button
                     key={strategy}
                     onClick={() => handleStrategyChange(strategy)}
                     className='w-full'
                     disabled={fetchStatus === 'fetching'}
                   >
-                    {strategy}
+                    {{
+                      email_code: 'Email code',
+                      phone_code: 'Phone code',
+                      password: 'Password',
+                      reset_password_email_code: 'Reset password via email',
+                    }[strategy]}
                   </Button>

---

192-199: A11y and UX for code input: numeric keypad + autocomplete

Improve verification UX and accessibility.

-                  <Input
+                  <Input
                     id='code'
-                    type='text'
+                    type='text'
+                    inputMode='numeric'
+                    autoComplete='one-time-code'
                     required
                     name='code'
                   />

---

141-149: A11y for password error

Consider role='alert' so errors are announced by screen readers.

-                  {errors.fields.password && <div className='text-red-500'>{errors.fields.password.message}</div>}
+                  {errors.fields.password && (
+                    <div role="alert" className="text-red-500">
+                      {errors.fields.password.message}
+                    </div>
+                  )}

Apply similarly for code errors (Line 199).

integration/templates/custom-flows-react-vite/src/components/ui/card.tsx (6)

5-13: Forward refs, stable data-slot, and explicit return type

• Expose refs for better composability.
• Prevent consumers from overriding the internal data-slot.
• Add explicit return type per TS guidelines.

-function Card({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot='card'
-      className={cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className)}
-      {...props}
-    />
-  );
-}
+const Card = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref): React.JSX.Element => {
+    return (
+      <div
+        ref={ref}
+        {...props}
+        data-slot="card"
+        className={cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className)}
+      />
+    );
+  },
+);

Add displayName (outside this range):

Card.displayName = 'Card';

Apply the same pattern to CardHeader, CardTitle, CardDescription, CardAction, CardContent, and CardFooter.

---

15-26: Verify Tailwind arbitrary variant syntax for has-selector

The class has-data-[slot=card-action]:grid-cols-[1fr_auto] looks off. Tailwind’s has- arbitrary variant expects a CSS selector in brackets. Consider has-[&_[data-slot=card-action]]:grid-cols-[1fr_auto]. Please confirm your Tailwind config compiles the current variant; otherwise, update it.

Possible fix:

-        '@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6',
+        '@container/card-header has-[&_[data-slot=card-action]]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6',

If you intended “apply pb-6 when this element has border-b”, prefer a direct conditional pattern instead of the bracket selector (see next comment).

---

28-36: Improve semantics for CardTitle (consider polymorphic “as” prop or heading element)

Using a div for a title harms document semantics. Provide an “as” prop (default h2) or switch to h2/h3. Keep types strict.

-function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.ComponentPropsWithoutRef<'h2'>>(
+  ({ className, ...props }, ref): React.JSX.Element => {
   return (
-    <div
+    <h2
+      ref={ref}
       data-slot='card-title'
       className={cn('font-semibold leading-none', className)}
       {...props}
-    />
+    />
   );
-}
+});

Optionally, implement a generic polymorphic type if you need flexible tags.

---

38-46: Prefer

semantics for CardDescription

Descriptions typically map to paragraphs for better accessibility.

-function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.ComponentPropsWithoutRef<'p'>>(
+  ({ className, ...props }, ref): React.JSX.Element => {
   return (
-    <div
+    <p
+      ref={ref}
       data-slot='card-description'
       className={cn('text-muted-foreground text-sm', className)}
       {...props}
-    />
+    />
   );
-}
+});

---

68-76: Bracket variant intent for border-t padding looks ambiguous

The selector [.border-t]:pt-6 only applies when this element also has border-t. If the intent is “add pt-6 when a top border is present on this element,” that’s redundant—just include pt-6 alongside border-t where you set it. If the intent is “add pt-6 when the parent Card has a border at the header/footer seam,” you’ll need a has- or parent-selector variant.

Examples:

• Same element: add border-t and pt-6 together where applied.
• Based on parent having border: has-[&_[data-slot=card-footer].border-t]:pt-6 or similar (confirm with your Tailwind setup).

---

78-78: Public API polish: JSDoc and exported prop types

Document these UI primitives and export prop types for consumers.

Add JSDoc and prop types:

/** Visual container for grouping related content in custom flows. */
export type CardProps = React.ComponentPropsWithoutRef<'div'>;
// Repeat for others if you diverge from div/p semantics

Also add brief JSDoc above each component describing slot purpose and expected children.

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

integration/tests/custom-flows/sign-in.test.ts (1)

1-8: Fix ESLint: sort imports and make FakeUser a type-only import

Unsorted imports and value import for a type are breaking lint. Apply:

-import { expect, test } from '@playwright/test';
-import { parsePublishableKey } from '@clerk/shared/keys';
-import { clerkSetup } from '@clerk/testing/playwright';
-
-import type { Application } from '../../models/application';
-import { appConfigs } from '../../presets';
-import { createTestUtils, FakeUser } from '../../testUtils';
+import { clerkSetup } from '@clerk/testing/playwright';
+import { parsePublishableKey } from '@clerk/shared/keys';
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../../models/application';
+import { appConfigs } from '../../presets';
+import { createTestUtils } from '../../testUtils';
+import type { FakeUser } from '../../testUtils';

integration/tests/custom-flows/sign-up.test.ts (1)

1-8: Fix ESLint: sort imports and make FakeUser a type-only import

Same lint failures here. Apply:

-import { expect, test } from '@playwright/test';
-import { parsePublishableKey } from '@clerk/shared/keys';
-import { clerkSetup } from '@clerk/testing/playwright';
-
-import type { Application } from '../../models/application';
-import { appConfigs } from '../../presets';
-import { createTestUtils, FakeUser } from '../../testUtils';
+import { clerkSetup } from '@clerk/testing/playwright';
+import { parsePublishableKey } from '@clerk/shared/keys';
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../../models/application';
+import { appConfigs } from '../../presets';
+import { createTestUtils } from '../../testUtils';
+import type { FakeUser } from '../../testUtils';

integration/tests/custom-flows/sign-in.test.ts (3)

21-25: Guard required envs before parsing the publishable key

Preempt undefineds with a clear error to aid failures.

-const publishableKey = appConfigs.envs.withEmailCodes.publicVariables.get('CLERK_PUBLISHABLE_KEY');
-const secretKey = appConfigs.envs.withEmailCodes.privateVariables.get('CLERK_SECRET_KEY');
-const apiUrl = appConfigs.envs.withEmailCodes.privateVariables.get('CLERK_API_URL');
-const { frontendApi: frontendApiUrl } = parsePublishableKey(publishableKey);
+const publishableKey = appConfigs.envs.withEmailCodes.publicVariables.get('CLERK_PUBLISHABLE_KEY');
+const secretKey = appConfigs.envs.withEmailCodes.privateVariables.get('CLERK_SECRET_KEY');
+const apiUrl = appConfigs.envs.withEmailCodes.privateVariables.get('CLERK_API_URL');
+if (!publishableKey || !secretKey || !apiUrl) {
+  throw new Error('Missing required Clerk envs: CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY, CLERK_API_URL');
+}
+const { frontendApi: frontendApiUrl } = parsePublishableKey(publishableKey);

---

26-33: Avoid @ts-expect-error by widening the local setup type to include apiUrl

Keep types clean without suppressions.

-    await clerkSetup({
-      publishableKey,
-      frontendApiUrl,
-      secretKey,
-      // @ts-expect-error
-      apiUrl,
-      dotenv: false,
-    });
+    type ClerkSetupOptsWithApi = Parameters<typeof clerkSetup>[0] & { apiUrl: string };
+    await clerkSetup({
+      publishableKey,
+      frontendApiUrl,
+      secretKey,
+      apiUrl,
+      dotenv: false,
+    } as ClerkSetupOptsWithApi);

---

57-58: Stabilize selectors for factor buttons and code input

Relying on accessible names like 'email_code'/'phone_code' and generic textbox 'code' can be brittle across i18n/branding. Prefer test ids or role+name that match product copy.

Also applies to: 84-85

integration/tests/custom-flows/sign-up.test.ts (3)

21-25: Guard required envs before parsing the publishable key

Make failures explicit and earlier.

-const publishableKey = appConfigs.envs.withEmailCodes.publicVariables.get('CLERK_PUBLISHABLE_KEY');
-const secretKey = appConfigs.envs.withEmailCodes.privateVariables.get('CLERK_SECRET_KEY');
-const apiUrl = appConfigs.envs.withEmailCodes.privateVariables.get('CLERK_API_URL');
-const { frontendApi: frontendApiUrl } = parsePublishableKey(publishableKey);
+const publishableKey = appConfigs.envs.withEmailCodes.publicVariables.get('CLERK_PUBLISHABLE_KEY');
+const secretKey = appConfigs.envs.withEmailCodes.privateVariables.get('CLERK_SECRET_KEY');
+const apiUrl = appConfigs.envs.withEmailCodes.privateVariables.get('CLERK_API_URL');
+if (!publishableKey || !secretKey || !apiUrl) {
+  throw new Error('Missing required Clerk envs: CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY, CLERK_API_URL');
+}
+const { frontendApi: frontendApiUrl } = parsePublishableKey(publishableKey);

---

26-33: Replace @ts-expect-error with a typed augmentation for apiUrl

Keep types strict without disabling checking.

-    await clerkSetup({
-      publishableKey,
-      frontendApiUrl,
-      secretKey,
-      // @ts-expect-error
-      apiUrl,
-      dotenv: false,
-    });
+    type ClerkSetupOptsWithApi = Parameters<typeof clerkSetup>[0] & { apiUrl: string };
+    await clerkSetup({
+      publishableKey,
+      frontendApiUrl,
+      secretKey,
+      apiUrl,
+      dotenv: false,
+    } as ClerkSetupOptsWithApi);

---

59-63: Narrow the network wait predicate to reduce flakiness

Consider matching the REST path prefix or method+pathname rather than substring ORs, or wait on a UI signal (e.g., factor form visible) from the page object.

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

packages/react/src/stateProxy.ts (1)

71-74: Preserve generics and simplify: pre-bind only gateProp to target; call class methods directly

Binding generic methods (gateMethod/wrapMethods) can degrade type inference. Pre-bind only gateProperty with target and invoke this.gateMethod/this.wrapMethods directly. Also shortens getters.

-    const gateProperty = this.gateProperty.bind(this);
-    const gateMethod = this.gateMethod.bind(this);
-    const wrapMethods = this.wrapMethods.bind(this);
-    const target = () => this.client.signUp.__internal_future;
+    const target = () => this.client.signUp.__internal_future;
+    const gateProp = this.gateProperty.bind(this, target);

@@
-        get status() {
-          return gateProperty(target, 'status', 'missing_requirements');
-        },
+        get status() {
+          return gateProp('status', 'missing_requirements');
+        },
@@
-        get unverifiedFields() {
-          return gateProperty(target, 'unverifiedFields', []);
-        },
+        get unverifiedFields() {
+          return gateProp('unverifiedFields', []);
+        },
@@
-        get isTransferable() {
-          return gateProperty(target, 'isTransferable', false);
-        },
+        get isTransferable() {
+          return gateProp('isTransferable', false);
+        },
@@
-        create: gateMethod(target, 'create'),
-        sso: gateMethod(target, 'sso'),
-        password: gateMethod(target, 'password'),
-        finalize: gateMethod(target, 'finalize'),
+        create: this.gateMethod(target, 'create'),
+        sso: this.gateMethod(target, 'sso'),
+        password: this.gateMethod(target, 'password'),
+        finalize: this.gateMethod(target, 'finalize'),
@@
-        verifications: wrapMethods(() => target().verifications, [
+        verifications: this.wrapMethods(() => target().verifications, [

Also applies to: 80-89, 90-96, 95-101

packages/react/src/stateProxy.ts (1)

118-126: Fallback to default on undefined and remove IIFE

If the property exists but is temporarily undefined after load, return the provided default. Also drop the IIFE for clarity.

-  private gateProperty<T extends object, K extends keyof T>(getTarget: () => T, key: K, defaultValue: T[K]) {
-    return (() => {
-      if (!inBrowser() || !this.isomorphicClerk.loaded) {
-        return defaultValue;
-      }
-      const t = getTarget();
-      return t[key];
-    })() as T[K];
-  }
+  private gateProperty<T extends object, K extends keyof T>(getTarget: () => T, key: K, defaultValue: T[K]) {
+    if (!inBrowser() || !this.isomorphicClerk.loaded) {
+      return defaultValue;
+    }
+    const t = getTarget();
+    const v = t[key];
+    return (v ?? defaultValue) as T[K];
+  }

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.