fix(clerk-js): Update server-side revalidation hooks for session status transition #6572
Conversation
🦋 Changeset detectedLatest commit: 16a87e0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
ca18c17 to
3c78bae
Compare
|
!snapshot |
3c78bae to
58ccb45
Compare
📝 WalkthroughWalkthrough
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Hey @LauraBeatris - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.1.24-snapshot.v20250818211845 --save-exact
npm i @clerk/astro@2.11.5-snapshot.v20250818211845 --save-exact
npm i @clerk/backend@2.9.3-snapshot.v20250818211845 --save-exact
npm i @clerk/chrome-extension@2.5.23-snapshot.v20250818211845 --save-exact
npm i @clerk/clerk-js@5.87.0-snapshot.v20250818211845 --save-exact
npm i @clerk/elements@0.23.56-snapshot.v20250818211845 --save-exact
npm i @clerk/clerk-expo@2.14.22-snapshot.v20250818211845 --save-exact
npm i @clerk/expo-passkeys@0.3.33-snapshot.v20250818211845 --save-exact
npm i @clerk/express@1.7.23-snapshot.v20250818211845 --save-exact
npm i @clerk/fastify@2.4.23-snapshot.v20250818211845 --save-exact
npm i @clerk/localizations@3.21.4-snapshot.v20250818211845 --save-exact
npm i @clerk/nextjs@6.31.3-snapshot.v20250818211845 --save-exact
npm i @clerk/nuxt@1.8.9-snapshot.v20250818211845 --save-exact
npm i @clerk/clerk-react@5.43.0-snapshot.v20250818211845 --save-exact
npm i @clerk/react-router@1.9.3-snapshot.v20250818211845 --save-exact
npm i @clerk/remix@4.11.3-snapshot.v20250818211845 --save-exact
npm i @clerk/shared@3.21.2-snapshot.v20250818211845 --save-exact
npm i @clerk/tanstack-react-start@0.22.3-snapshot.v20250818211845 --save-exact
npm i @clerk/testing@1.11.2-snapshot.v20250818211845 --save-exact
npm i @clerk/themes@2.4.12-snapshot.v20250818211845 --save-exact
npm i @clerk/types@4.80.0-snapshot.v20250818211845 --save-exact
npm i @clerk/vue@1.11.3-snapshot.v20250818211845 --save-exact |
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/clerk-js/src/core/clerk.ts (1)
2294-2304: Avoid unhandled promise rejections when firing onAfterSetActive during active→pending transitionThe fire-and-forget invocation can surface unhandled promise rejections if the hook rejects. Wrap with Promise.resolve().catch(...) to log (or swallow) errors without blocking.
Apply this diff:
- // Execute hooks to update server authentication context and trigger - // page protections in clerkMiddleware or server components - void onAfterSetActive(); + // Execute hooks to update server authentication context and trigger + // page protections in clerkMiddleware or server components + void Promise.resolve(onAfterSetActive()).catch(err => { + debugLogger.error( + 'onAfterSetActive() failed during active→pending transition', + { error: err }, + 'clerk', + ); + });Follow-up:
- Consider adding an integration test asserting that:
- onBeforeSetActive is not called for pending sessions.
- onAfterSetActive is invoked exactly once on active→pending transitions via updateClient().
I can sketch a minimal Jest test that stubs window.__unstable__onBeforeSetActive/__unstable__onAfterSetActive and exercises setActive/updateClient if helpful.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
.changeset/plain-candies-fly.md(1 hunks)packages/clerk-js/src/core/clerk.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
.changeset/**
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Automated releases must use Changesets.
Files:
.changeset/plain-candies-fly.md
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/clerk-js/src/core/clerk.ts
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/clerk-js/src/core/clerk.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/core/clerk.ts
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/clerk-js/src/core/clerk.ts
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/clerk-js/src/core/clerk.ts
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/clerk-js/src/core/clerk.ts
**/*
⚙️ CodeRabbit Configuration File
If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.
Files:
packages/clerk-js/src/core/clerk.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (22)
- GitHub Check: Integration Tests (vue, chrome)
- GitHub Check: Integration Tests (machine, chrome)
- GitHub Check: Integration Tests (sessions, chrome)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
- GitHub Check: Integration Tests (expo-web, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (tanstack-react-router, chrome)
- GitHub Check: Integration Tests (localhost, chrome)
- GitHub Check: Integration Tests (react-router, chrome)
- GitHub Check: Integration Tests (nuxt, chrome)
- GitHub Check: Integration Tests (generic, chrome)
- GitHub Check: Integration Tests (quickstart, chrome)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (astro, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
- GitHub Check: Integration Tests (express, chrome)
- GitHub Check: Integration Tests (ap-flows, chrome)
- GitHub Check: Integration Tests (elements, chrome)
- GitHub Check: Unit Tests (22, **)
- GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
- GitHub Check: Publish with pkg-pr-new
- GitHub Check: Static analysis
🔇 Additional comments (1)
.changeset/plain-candies-fly.md (1)
1-5: LGTM: concise and accurate changesetPatch bump and description clearly communicate the behavioral fix for Next.js active→pending transitions.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/clerk-js/src/core/clerk.ts (1)
2294-2304: Avoid unhandled promise rejections when firing onAfterSetActive non-blockingCalling the hook with
void onAfterSetActive()makes it fire-and-forget, but any rejection will surface as an unhandled promise rejection. Wrap it to swallow/log errors without blocking.Apply this diff:
- void onAfterSetActive(); + // Fire-and-forget, but avoid unhandled rejections + void Promise.resolve(onAfterSetActive()).catch(error => { + debugLogger.warn('onAfterSetActive() hook rejected during active→pending transition', { error }, 'clerk'); + });.changeset/plain-candies-fly.md (1)
5-5: Clarify the release note to capture the Vercel rewrite context and the exact hook changeHelpful for consumers scanning the changelog to understand why this matters and what changed internally.
Apply this diff:
-Fix server-side cache revalidation for Next.js when transitioning from `active` to `pending` session +Fix server-side cache revalidation in Next.js apps (notably on Vercel) when the session transitions from `active` to `pending`. We now trigger the server revalidation hook (`onAfterSetActive`) in a non-blocking way during client updates to avoid Vercel 405 rewrite issues.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
.changeset/plain-candies-fly.md(1 hunks)packages/clerk-js/src/core/clerk.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
.changeset/**
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Automated releases must use Changesets.
Files:
.changeset/plain-candies-fly.md
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/clerk-js/src/core/clerk.ts
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/clerk-js/src/core/clerk.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/core/clerk.ts
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/clerk-js/src/core/clerk.ts
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/clerk-js/src/core/clerk.ts
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/clerk-js/src/core/clerk.ts
**/*
⚙️ CodeRabbit Configuration File
If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.
Files:
packages/clerk-js/src/core/clerk.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Integration Tests (sessions, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (generic, chrome)
- GitHub Check: Integration Tests (quickstart, chrome)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
🔇 Additional comments (1)
packages/clerk-js/src/core/clerk.ts (1)
2294-2304: Good call to trigger server-side revalidation on active→pending without blockingNon-blocking invocation here sidesteps the Vercel 405 rewrite issue while still nudging SSR protections and cache revalidation paths. The transition check is tight and scoped.
| const hasTransitionedToPendingStatus = this.session.status === 'active' && session?.status === 'pending'; | ||
| if (hasTransitionedToPendingStatus) { | ||
| const onBeforeSetActive: SetActiveHook = | ||
| typeof window !== 'undefined' && typeof window.__unstable__onBeforeSetActive === 'function' | ||
| ? window.__unstable__onBeforeSetActive | ||
| : noop; | ||
|
|
||
| const onAfterSetActive: SetActiveHook = | ||
| typeof window !== 'undefined' && typeof window.__unstable__onAfterSetActive === 'function' | ||
| ? window.__unstable__onAfterSetActive | ||
| : noop; | ||
|
|
||
| // Execute hooks to update server authentication context and trigger | ||
| // page protections in clerkMiddleware or server components | ||
| void onBeforeSetActive()?.then?.(() => void onAfterSetActive()); | ||
| void onAfterSetActive(); | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Please add a regression test to cover the active→pending transition path
This behavior is critical for Next.js SSR protections. Add tests to assert:
- updateClient triggers the onAfterSetActive hook exactly once when session transitions active→pending.
- No hook call when status remains active or becomes active→active/pending→pending.
- Hook is invoked non-blocking (no await).
You can search for other hook usages that might still be awaited (potentially causing similar issues) with this script:
🏁 Script executed:
#!/bin/bash
# Find direct uses of these hooks and how they are called
rg -n -C3 "__unstable__on(Before|After)SetActive|onBeforeSetActive|onAfterSetActive"
# Specifically look for awaited invocations of onAfterSetActive
rg -n -C2 -P '\bawait\s+onAfterSetActive\s*\('
# And fire-and-forget patterns
rg -n -C2 -P 'void\s+onAfterSetActive\s*\(|Promise\.resolve\s*\(\s*onAfterSetActive\s*\('Length of output: 25498
Add regression tests for updateClient active→pending transition and review other hook usages
Please add a regression test in packages/clerk-js/src/core/__tests__/clerk.test.ts to cover the active→pending transition in updateClient:
- Verify that
onAfterSetActiveis called exactly once whensession.statuschanges from"active"to"pending". - Verify that no hook is called when the status remains
"active"or transitions"pending"→"pending". - Verify that
updateClientdoes not await the hook (i.e. it resolves before the hook’s returned promise).
Additionally, I spotted two awaited invocations of onAfterSetActive in packages/clerk-js/src/core/clerk.ts (around lines 532 and 1395). Please review those code paths to confirm whether they’re intentionally blocking or should also use a fire-and-forget pattern, and add tests or refactor as needed.
🤖 Prompt for AI Agents
In packages/clerk-js/src/core/clerk.ts around lines 2294–2304, add regression
tests in packages/clerk-js/src/core/__tests__/clerk.test.ts to cover the
updateClient active→pending transition: create a test that sets
window.__unstable__onAfterSetActive to a jest mock that returns a Promise and
assert it is called exactly once when session.status changes from "active" to
"pending", assert no hook is called when status stays "active" or transitions
"pending"→"pending", and assert updateClient does not await the hook by
resolving before the hook's promise settles (use a controllable promise and
check updateClient resolved prior to its resolution). Also review and adjust the
other two usages of onAfterSetActive in packages/clerk-js/src/core/clerk.ts
(around lines ~532 and ~1395): inspect whether they intentionally await the
hook; if they should be non-blocking, change those awaits to fire-and-forget
(call the hook without awaiting and handle errors via .catch logging) and add
tests demonstrating non-blocking behavior for those code paths.
bd57139 to
fbe8b0e
Compare
| @@ -119,7 +121,10 @@ const MembershipPreview = (props: { organization: OrganizationResource }) => { | |||
| try { | |||
| await setActive({ | |||
| organization, | |||
| redirectUrl: redirectUrlComplete, | |||
| navigate: async () => { | |||
There was a problem hiding this comment.
This is a small fix - atm the warnMissingPendingTaskHandlers utility is logging a warning when TaskChooseOrganization executes setActive with a pending session, but without using navigate
94d62e8 to
3f2207f
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx (1)
28-28: Adopted app-router navigation hook — LGTM and resolves the prior warningImporting useRouter here aligns with the new post-activation navigation flow and should stop warnMissingPendingTaskHandlers for pending sessions.
🧹 Nitpick comments (2)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx (1)
124-127: Guard navigation target and replace TODO with a tracked follow-up
- Add a null/empty guard for redirectUrlComplete to avoid invoking navigate with an undefined/empty value.
- Replace bare TODO with a tracked follow-up reference (e.g., TODO(#issue-id)) to avoid lingering comments.
- Minor duplication with CreateOrganizationScreen: consider extracting a small helper to build the post-activation navigate callback.
Apply this minimal guard within the callback:
- navigate: async () => { - // TODO - Handle next tasks - await navigate(redirectUrlComplete); - }, + navigate: async () => { + // TODO(#follow-up): Handle next tasks + if (redirectUrlComplete) { + await navigate(redirectUrlComplete); + } + },Optional follow-up (outside this hunk): factor a shared helper to avoid duplication across screens, e.g., buildPostActivationNavigate(navigate, redirectUrlComplete).
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx (1)
52-55: Harden navigate callback and align with the other screenMirror the same guard and tracked TODO as suggested in ChooseOrganizationScreen to keep behavior consistent and avoid navigating to an undefined target.
- navigate: async () => { - // TODO - Handle next tasks - await navigate(redirectUrlComplete); - }, + navigate: async () => { + // TODO(#follow-up): Handle next tasks + if (redirectUrlComplete) { + await navigate(redirectUrlComplete); + } + },Consider extracting a shared helper for this callback to prevent duplication and ensure any future changes (e.g., handling “next tasks”) stay in sync across both screens.
Also, if there are no tests covering the new navigate path in setActive, consider adding a lightweight test that:
- Mocks useRouter().navigate
- Asserts setActive receives a navigate function and that it’s invoked when setActive resolves
This will protect against regressions when iterating on the TODO.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
.changeset/plain-candies-fly.md(1 hunks)packages/clerk-js/src/core/__tests__/clerk.test.ts(0 hunks)packages/clerk-js/src/core/clerk.ts(1 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx(3 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx(3 hunks)
💤 Files with no reviewable changes (1)
- packages/clerk-js/src/core/tests/clerk.test.ts
✅ Files skipped from review due to trivial changes (1)
- .changeset/plain-candies-fly.md
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/clerk-js/src/core/clerk.ts
🧰 Additional context used
📓 Path-based instructions (10)
packages/clerk-js/src/ui/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/clerk-js-ui.mdc)
packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should always be camelCase
Use element descriptors in UI components to enable consistent theming and styling via appearance.elements
Element descriptors should generate unique, stable CSS classes for theming
Element descriptors should handle state classes (e.g., cl-loading, cl-active, cl-error, cl-open) automatically based on component state
Do not render hard-coded values; all user-facing strings must be localized using provided localization methods
Use the useLocalizations hook and localizationKeys utility for all text and error messages
Use the styled system (sx prop, theme tokens, responsive values) for custom component styling
Use useCardState for card-level state, useFormState for form-level state, and useLoadingStatus for loading states
Always use handleError utility for API errors and use translateError for localized error messages
Use useFormControl for form field state, implement proper validation, and handle loading and error states in forms
Use localization keys for all form labels and placeholders
Use element descriptors for consistent styling and follow the theme token system
Use the Card and FormContainer patterns for consistent UI structure
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
**/*.{jsx,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
**/*
⚙️ CodeRabbit Configuration File
If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.
Files:
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsxpackages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (25)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
- GitHub Check: Integration Tests (machine, chrome)
- GitHub Check: Integration Tests (nuxt, chrome)
- GitHub Check: Integration Tests (expo-web, chrome)
- GitHub Check: Integration Tests (vue, chrome)
- GitHub Check: Integration Tests (tanstack-react-router, chrome)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (generic, chrome)
- GitHub Check: Integration Tests (react-router, chrome)
- GitHub Check: Integration Tests (astro, chrome)
- GitHub Check: Integration Tests (ap-flows, chrome)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
- GitHub Check: Integration Tests (quickstart, chrome)
- GitHub Check: Integration Tests (localhost, chrome)
- GitHub Check: Integration Tests (sessions, chrome)
- GitHub Check: Integration Tests (express, chrome)
- GitHub Check: Integration Tests (elements, chrome)
- GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
- GitHub Check: Unit Tests (22, **)
- GitHub Check: Static analysis
- GitHub Check: Publish with pkg-pr-new
- GitHub Check: semgrep/ci
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (3)
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx (1)
110-110: useRouter usage looks correctDestructuring navigate from the router is appropriate for passing into setActive’s navigate callback.
packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx (2)
10-10: Importing useRouter to support app-router navigation — LGTMMatches the updated activation flow and keeps navigation within our router abstraction.
23-23: Destructuring navigate — LGTMConsistent with the ChooseOrganizationScreen usage.
Description
Fixes an issue where
auth.protect()does not redirect when the Next.js app is deployed on Vercel.onBeforeSetActivewas leading to a 405 request re-write on Vercel.onAfterSetActiveshould suffice to triggerrouter.refresh.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
Bug Fixes
Enhancements
Tests
Chores