-
Notifications
You must be signed in to change notification settings - Fork 370
feat(clerk-js): Introduce navigate
for setActive
#6486
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
🦋 Changeset detectedLatest commit: ea2307e The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 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 Git ↗︎
|
onPendingStatus
onPendingSession
970cf52
to
cd73364
Compare
c3ad953
to
45a338c
Compare
beb0443
to
1b3771c
Compare
d270d37
to
d185134
Compare
7d15782
to
3a2faca
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
packages/clerk-js/src/ui/common/withRedirect.tsx (1)
31-41
: Redirect effect never re-runs; navigation may not trigger when condition flips to true laterIf
shouldRedirect
becomes true after mount (e.g., session transitions to pending), the effect won’t run due to[]
deps, so you rendernull
but never navigate. Also, prefervoid navigate(...)
instead of disabling the lint rule.Refactor the effect to depend on
shouldRedirect
and guard repeat navigations with a ref:- const shouldRedirect = condition(clerk, environment, options); - React.useEffect(() => { - if (shouldRedirect) { - if (warning && isDevelopmentFromPublishableKey(clerk.publishableKey)) { - console.info(warning); - } - // TODO: Fix this properly - // eslint-disable-next-line @typescript-eslint/no-floating-promises - navigate(redirectUrl({ clerk, environment, options })); - } - }, []); + const shouldRedirect = condition(clerk, environment, options); + const didNavigateRef = React.useRef(false); + React.useEffect(() => { + if (!shouldRedirect || didNavigateRef.current) { + return; + } + didNavigateRef.current = true; + if (warning && isDevelopmentFromPublishableKey(clerk.publishableKey)) { + console.info(warning); + } + void navigate(redirectUrl({ clerk, environment, options })); + }, [shouldRedirect, clerk, environment, options, warning, navigate, redirectUrl]);
🧹 Nitpick comments (2)
packages/clerk-js/src/core/clerk.ts (2)
1197-1216
: Document the newnavigate
param insetActive
JSDoc
setActive
is a public API. Add JSDoc for the newnavigate
callback, precedence vstaskUrls
, and behavior when session is pending, to align with coding guidelines./** * Set the active session and/or organization. * When the session is pending: * - If `navigate` is provided, it takes precedence and is invoked with `{ session }`. * - Else, falls back to `options.taskUrls[currentTask.key]` if available. * - `redirectUrl` is preserved and appended to the navigation target. */
1197-1361
: Add tests for new behaviorCover the following:
- Precedence: when both
navigate
andtaskUrls
are provided,navigate
is used.redirectUrl
is preserved for both hash and non-hashtaskUrl
s.- Pending sessions do not trigger
onBeforeSetActive
/onAfterSetActive
or transitive state.warnMissingPendingTaskHandlers
does not log when globaltaskUrls
are set.I can draft Jest tests for these scenarios if helpful.
Also applies to: 1827-1941
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap
is excluded by!**/*.snap
packages/remix/src/__tests__/__snapshots__/exports.test.ts.snap
is excluded by!**/*.snap
packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap
is excluded by!**/*.snap
📒 Files selected for processing (41)
.changeset/rich-donuts-agree.md
(1 hunks).changeset/warm-rocks-flow.md
(1 hunks)packages/clerk-js/src/core/__tests__/clerk.test.ts
(5 hunks)packages/clerk-js/src/core/clerk.ts
(17 hunks)packages/clerk-js/src/core/sessionTasks.ts
(1 hunks)packages/clerk-js/src/ui/common/redirects.ts
(0 hunks)packages/clerk-js/src/ui/common/withRedirect.tsx
(3 hunks)packages/clerk-js/src/ui/components/SessionTasks/index.tsx
(5 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
(2 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
(3 hunks)packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInSSOCallback.tsx
(1 hunks)packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
(5 hunks)packages/clerk-js/src/ui/components/SignIn/index.tsx
(1 hunks)packages/clerk-js/src/ui/components/SignIn/shared.ts
(3 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpSSOCallback.tsx
(1 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
(5 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignUp/index.tsx
(1 hunks)packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
(3 hunks)packages/clerk-js/src/ui/contexts/components/SignIn.ts
(4 hunks)packages/clerk-js/src/ui/contexts/components/SignUp.ts
(4 hunks)packages/clerk-js/src/ui/lazyModules/components.ts
(1 hunks)packages/clerk-js/src/ui/types.ts
(2 hunks)packages/clerk-js/src/utils/componentGuards.ts
(1 hunks)packages/nextjs/src/client-boundary/controlComponents.ts
(1 hunks)packages/nextjs/src/index.ts
(0 hunks)packages/react/src/components/controlComponents.tsx
(0 hunks)packages/react/src/components/index.ts
(0 hunks)packages/react/src/isomorphicClerk.ts
(0 hunks)packages/types/src/clerk.ts
(3 hunks)packages/vue/src/components/controlComponents.ts
(0 hunks)
💤 Files with no reviewable changes (6)
- packages/nextjs/src/index.ts
- packages/react/src/components/index.ts
- packages/vue/src/components/controlComponents.ts
- packages/react/src/components/controlComponents.tsx
- packages/react/src/isomorphicClerk.ts
- packages/clerk-js/src/ui/common/redirects.ts
🚧 Files skipped from review as they are similar to previous changes (32)
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
- packages/clerk-js/src/utils/componentGuards.ts
- packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
- .changeset/warm-rocks-flow.md
- packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx
- packages/clerk-js/src/ui/lazyModules/components.ts
- packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
- packages/clerk-js/src/ui/components/SignIn/index.tsx
- .changeset/rich-donuts-agree.md
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
- packages/clerk-js/src/ui/components/SignUp/index.tsx
- packages/clerk-js/src/ui/components/SignIn/shared.ts
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpSSOCallback.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInSSOCallback.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
- packages/nextjs/src/client-boundary/controlComponents.ts
- packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
- packages/clerk-js/src/core/tests/clerk.test.ts
- packages/clerk-js/src/ui/components/SessionTasks/index.tsx
- packages/clerk-js/src/ui/contexts/components/SignIn.ts
- packages/clerk-js/src/ui/contexts/components/SignUp.ts
- packages/clerk-js/src/core/sessionTasks.ts
- packages/types/src/clerk.ts
- packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx
🧰 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/types.ts
packages/clerk-js/src/ui/common/withRedirect.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/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
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/ui/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
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/ui/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
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/ui/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
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
Avoidany
type - preferunknown
when type is uncertain, then narrow with type guards
Useinterface
for object shapes that might be extended
Usetype
for unions, primitives, and computed types
Preferreadonly
properties for immutable data structures
Useprivate
for internal implementation details
Useprotected
for inheritance hierarchies
Usepublic
explicitly for clarity in public APIs
Preferreadonly
for 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 assertions
for literal types:as const
Usesatisfies
operator 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 ...
Noany
types without justification
Proper error handling with typed errors
Consistent use ofreadonly
for 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/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
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/ui/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
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/ui/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
packages/clerk-js/src/core/clerk.ts
**/*.{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/common/withRedirect.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/common/withRedirect.tsx
🧬 Code Graph Analysis (1)
packages/clerk-js/src/ui/types.ts (1)
packages/types/src/clerk.ts (1)
SetActiveNavigate
(955-955)
⏰ 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). (9)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
- GitHub Check: Integration Tests (tanstack-react-router, chrome)
- GitHub Check: Integration Tests (react-router, chrome)
- GitHub Check: Integration Tests (vue, chrome)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
- GitHub Check: Integration Tests (astro, chrome)
- GitHub Check: Integration Tests (generic, chrome)
🔇 Additional comments (12)
packages/clerk-js/src/ui/types.ts (1)
15-15
: Type-only import of SetActiveNavigate looks correctConsistent with TS best practices and used solely for typing.
packages/clerk-js/src/ui/common/withRedirect.tsx (4)
63-66
: Guard logic update LGTMUsing
isSignedInAndSingleSessionModeEnabled
simplifies and centralizes the guard. Approved.
82-85
: Guard logic update LGTMSame as SignIn: the guard is correct and consistent.
100-107
: Solid: prevent navigate('') by tying condition to taskUrl availabilityCondition now depends on both
currentTask
andsignInCtx?.taskUrl
, and the redirect URL is non-null-asserted only when condition is true. Good defensive check.
121-128
: Solid: same fix for SignUp variantMirrors SignIn logic; prevents empty navigation correctly.
packages/clerk-js/src/core/clerk.ts (7)
553-563
: Correct guard before opening SignInUsing
isSignedInAndSingleSessionModeEnabled
to block opening in single-session mode is clean and consistent with the UI HOCs.
685-695
: Correct guard before opening SignUpSame reasoning as SignIn. Approved.
1231-1233
: Good: avoid false positives inwarnMissingPendingTaskHandlers
Merging
this.#options
withparams
ensurestaskUrls
and other globals are considered. Approved.
1263-1269
: Nice: avoid cache revalidation/unmounts for pending sessionsSkipping
onBeforeSetActive
and transitive state when pending prevents AIO unmounts. Approved.
1827-1833
: Good extraction: centralized pending task navigation for SSOUsing
navigateIfTaskExists
inside thesetActive
navigate callback aligns with the new API and keeps SSO flows consistent.
1835-1839
: Call sites correctly passnavigate
tosetActive
Consistent usage across all branches ensures pending tasks are handled uniformly.
Also applies to: 1849-1853, 1899-1903, 1913-1916, 1938-1941
1303-1321
: VerifyredirectUrl
preservation target (hash vs query)You’re currently appending
redirectUrl
viahashSearchParams
. For non-hash routes (e.g.,/onboarding/choose-organization
), this should be query params. The refactor above switches to hash vs query based on the target URL string.Please verify with a route that:
- Uses pathname routing (no
#
) → expects?redirectUrl=...
- Uses hash routing (contains
#
) → expects#...redirectUrl=...
If needed, I can add unit tests covering both cases.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
packages/clerk-js/src/ui/common/withRedirect.tsx (1)
31-41
: Redirect side-effect misses dependencies → navigation may never fire
useEffect
is declared with an empty dependency array, butshouldRedirect
can becometrue
after mount (e.g. whentaskUrl
arrives asynchronously).
React will then never re-run the effect, so users stay on the wrong page.- React.useEffect(() => { + React.useEffect(() => { if (shouldRedirect) { … } - }, []); + }, [shouldRedirect, navigate, redirectUrl, clerk, environment, options, warning]);Add at least
shouldRedirect
(and other stable refs if required) to guarantee the redirect happens once the condition is satisfied.
♻️ Duplicate comments (2)
packages/clerk-js/src/ui/common/withRedirect.tsx (1)
114-133
: Same duplication note as abovepackages/clerk-js/src/core/clerk.ts (1)
2130-2135
: Same navigation helper duplicatedSee previous comment – the repetition here reinforces the need for a shared helper.
🧹 Nitpick comments (4)
packages/clerk-js/src/ui/types.ts (1)
28-41
: Optionally re-export SetActiveNavigate for convenience and consistencyUI consumers already import many types from this barrel; re-exporting SetActiveNavigate here would keep the ergonomics consistent.
Apply this diff to re-export:
export type { __internal_OAuthConsentProps, __internal_UserVerificationProps, CreateOrganizationProps, GoogleOneTapProps, OrganizationListProps, OrganizationProfileProps, OrganizationSwitcherProps, SignInProps, SignUpProps, UserButtonProps, UserProfileProps, WaitlistProps, + SetActiveNavigate, } from '@clerk/types';
packages/clerk-js/src/ui/common/withRedirect.tsx (1)
93-112
: New HOCs duplicate logic – extract a parametric helper
withRedirectToSignInTask
andwithRedirectToSignUpTask
are almost identical except for the context used. A tiny factory can eliminate duplication and reduce maintenance overhead.const makeTaskRedirect = <Ctx, P extends AvailableComponentProps>( useCtx: () => { taskUrl?: string }, display: string, ) => (Component: ComponentType<P>) => { const dispName = Component.displayName || Component.name || 'Component'; Component.displayName = dispName; const HOC = (props: P) => { const ctx = useCtx(); return withRedirect( Component, clerk => Boolean(clerk.session?.currentTask && ctx.taskUrl), () => ctx.taskUrl!, // eslint-disable-line )(props); }; HOC.displayName = `${display}(${dispName})`; return HOC; }; export const withRedirectToSignInTask = makeTaskRedirect( useSignInContext, 'withRedirectToSignInTask', ); export const withRedirectToSignUpTask = makeTaskRedirect( useSignUpContext, 'withRedirectToSignUpTask', );Keeps the file shorter and avoids future drift.
packages/clerk-js/src/core/clerk.ts (2)
1197-1200
: Add JSDoc for the newnavigate
parameter insetActive
setActive
is a public API but the newnavigate
callback is undocumented.
Please add a short JSDoc block that explains:• the purpose of the callback
• the expected signature (({ session }) => Promise<void> | void
)
• how it interacts withredirectUrl
/taskUrls
.This keeps the public surface self-documenting and aligns with the coding-guideline requirement that “All public APIs must be documented with JSDoc”.
1827-1833
: DuplicatesetActiveNavigate
lambdas – consider extracting a helperThe same
navigateIfTaskExists
wrapper is defined here and again inauthenticateWithWeb3
.
Factor it into a small util (e.g.createTaskNavigate(displayConfig.signInUrl, this.navigate)
) to avoid copy-paste drift.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap
is excluded by!**/*.snap
packages/remix/src/__tests__/__snapshots__/exports.test.ts.snap
is excluded by!**/*.snap
packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap
is excluded by!**/*.snap
📒 Files selected for processing (41)
.changeset/rich-donuts-agree.md
(1 hunks).changeset/warm-rocks-flow.md
(1 hunks)packages/clerk-js/src/core/__tests__/clerk.test.ts
(5 hunks)packages/clerk-js/src/core/clerk.ts
(17 hunks)packages/clerk-js/src/core/sessionTasks.ts
(1 hunks)packages/clerk-js/src/ui/common/redirects.ts
(0 hunks)packages/clerk-js/src/ui/common/withRedirect.tsx
(3 hunks)packages/clerk-js/src/ui/components/SessionTasks/index.tsx
(5 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
(2 hunks)packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
(3 hunks)packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInSSOCallback.tsx
(1 hunks)packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
(5 hunks)packages/clerk-js/src/ui/components/SignIn/index.tsx
(1 hunks)packages/clerk-js/src/ui/components/SignIn/shared.ts
(3 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpSSOCallback.tsx
(1 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
(5 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignUp/index.tsx
(1 hunks)packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
(3 hunks)packages/clerk-js/src/ui/contexts/components/SignIn.ts
(4 hunks)packages/clerk-js/src/ui/contexts/components/SignUp.ts
(4 hunks)packages/clerk-js/src/ui/lazyModules/components.ts
(1 hunks)packages/clerk-js/src/ui/types.ts
(2 hunks)packages/clerk-js/src/utils/componentGuards.ts
(1 hunks)packages/nextjs/src/client-boundary/controlComponents.ts
(1 hunks)packages/nextjs/src/index.ts
(0 hunks)packages/react/src/components/controlComponents.tsx
(0 hunks)packages/react/src/components/index.ts
(0 hunks)packages/react/src/isomorphicClerk.ts
(0 hunks)packages/types/src/clerk.ts
(3 hunks)packages/vue/src/components/controlComponents.ts
(0 hunks)
💤 Files with no reviewable changes (6)
- packages/nextjs/src/index.ts
- packages/react/src/components/index.ts
- packages/vue/src/components/controlComponents.ts
- packages/clerk-js/src/ui/common/redirects.ts
- packages/react/src/components/controlComponents.tsx
- packages/react/src/isomorphicClerk.ts
🚧 Files skipped from review as they are similar to previous changes (32)
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
- .changeset/warm-rocks-flow.md
- packages/clerk-js/src/utils/componentGuards.ts
- packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
- packages/clerk-js/src/ui/components/SignIn/index.tsx
- packages/clerk-js/src/ui/components/SignUp/index.tsx
- packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
- packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
- .changeset/rich-donuts-agree.md
- packages/clerk-js/src/ui/components/SignUp/SignUpSSOCallback.tsx
- packages/clerk-js/src/ui/lazyModules/components.ts
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInSSOCallback.tsx
- packages/clerk-js/src/ui/components/SignIn/shared.ts
- packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
- packages/nextjs/src/client-boundary/controlComponents.ts
- packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx
- packages/clerk-js/src/core/sessionTasks.ts
- packages/clerk-js/src/ui/contexts/components/SignUp.ts
- packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
- packages/clerk-js/src/ui/components/SessionTasks/index.tsx
- packages/clerk-js/src/ui/contexts/components/SignIn.ts
- packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
- packages/clerk-js/src/core/tests/clerk.test.ts
- packages/types/src/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/types.ts
packages/clerk-js/src/ui/common/withRedirect.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/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
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/ui/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
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/ui/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
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/ui/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
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
Avoidany
type - preferunknown
when type is uncertain, then narrow with type guards
Useinterface
for object shapes that might be extended
Usetype
for unions, primitives, and computed types
Preferreadonly
properties for immutable data structures
Useprivate
for internal implementation details
Useprotected
for inheritance hierarchies
Usepublic
explicitly for clarity in public APIs
Preferreadonly
for 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 assertions
for literal types:as const
Usesatisfies
operator 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 ...
Noany
types without justification
Proper error handling with typed errors
Consistent use ofreadonly
for 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/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
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/ui/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
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/ui/types.ts
packages/clerk-js/src/ui/common/withRedirect.tsx
packages/clerk-js/src/core/clerk.ts
**/*.{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/common/withRedirect.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/common/withRedirect.tsx
🧬 Code Graph Analysis (2)
packages/clerk-js/src/ui/types.ts (1)
packages/types/src/clerk.ts (1)
SetActiveNavigate
(955-955)
packages/clerk-js/src/ui/common/withRedirect.tsx (4)
packages/clerk-js/src/utils/componentGuards.ts (1)
isSignedInAndSingleSessionModeEnabled
(9-11)packages/clerk-js/src/core/warnings.ts (1)
warnings
(63-63)packages/clerk-js/src/ui/contexts/components/SignIn.ts (1)
useSignInContext
(38-158)packages/clerk-js/src/ui/contexts/components/SignUp.ts (1)
useSignUpContext
(37-152)
⏰ 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). (9)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
- GitHub Check: Integration Tests (tanstack-react-router, chrome)
- GitHub Check: Integration Tests (react-router, chrome)
- GitHub Check: Integration Tests (vue, chrome)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
- GitHub Check: Integration Tests (astro, chrome)
- GitHub Check: Integration Tests (generic, chrome)
🔇 Additional comments (5)
packages/clerk-js/src/ui/types.ts (1)
15-15
: Type-only import of SetActiveNavigate — LGTMCorrectly added as a type-only import and used downstream. No issues.
packages/clerk-js/src/ui/common/withRedirect.tsx (1)
9-9
: Import looks goodThe new guard is correctly imported from
../../utils
.packages/clerk-js/src/core/clerk.ts (3)
1230-1232
: Nice fix – false-positive warning eliminatedPassing the merged object
{ …this.#options, …params }
towarnMissingPendingTaskHandlers
ensurestaskUrls
is present and prevents the earlier false-positive warning.
Looks good.
1304-1308
:redirectUrl
may be lost when a task URL is usedWhen both
taskUrl
andredirectUrl
are provided, the code appendsredirectUrl
as a hash/search param to the task URL:const taskUrlWithRedirect = redirectUrl ? buildURL({ base: taskUrl, hashSearchParams: { redirectUrl } }, { stringify: true }) : taskUrl;If the router for task screens expects the original query string (e.g.
?redirect_url=
) instead of a fragment param, the downstream page won’t see it.Consider preserving the original query style, or at least verifying that the consumer of the task URL can parse
#redirectUrl=
. Otherwise users might never be redirected back after completing the task.
1355-1358
: Skip ofonAfterSetActive
for pending sessions – double-check side-effects
onAfterSetActive
is suppressed for pending sessions to keep AIOs mounted.
Confirm no other code relies on this hook to resume polling or clean up resources aftersetActive
, otherwise long-running side-effects might leak until the next non-pending activation.If unsure, add a comment explaining the rationale and any expected downstream behaviour.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
♻️ Duplicate comments (2)
packages/clerk-js/src/ui/contexts/components/SignUp.ts (2)
118-130
: DRY: extract shared onPendingSession handler to avoid duplication with SignIn.tsThe onPendingSession logic is identical in SignIn.ts. Extract to a shared utility (e.g., ui/common/sessionTasks.ts) that accepts clerk, signUpUrl/signInUrl (base), and navigate, returning a SetActiveNavigate. Use it in both SignIn and SignUp for consistency.
118-125
: Broaden onPendingSession: honor taskUrls, preserve redirect params, and await navigationThe callback hardcodes a relative route via INTERNAL_SESSION_TASK_ROUTE_BY_KEY and drops preserved/redirect params. This is likely the root cause for the SSO callback E2E failures and the “preserving redirectUrl” TODO. Use buildTaskURL and taskUrls override, append preserved params, and await navigate.
Apply:
- const onPendingSession: SetActiveNavigate = async ({ session }) => { - const currentTaskKey = session.currentTask?.key; - if (!currentTaskKey) { - return; - } - - return navigate(`../tasks/${INTERNAL_SESSION_TASK_ROUTE_BY_KEY[currentTaskKey]}`); - }; + const onPendingSession: SetActiveNavigate = async ({ session }) => { + const task = session.currentTask; + if (!task) { + return; + } + const customTaskUrl = clerk.__internal_getOption('taskUrls')?.[task.key]; + const defaultTaskUrl = buildTaskURL(task, { base: signUpUrl }); + // Preserve redirect/auth params across the navigation + const target = buildURL( + { base: customTaskUrl ?? defaultTaskUrl, hashSearchParams: [redirectUrls.getPreservedSearchParams()] }, + { stringify: true }, + ); + await navigate(target); + };
🧹 Nitpick comments (2)
packages/clerk-js/src/ui/contexts/components/SignUp.ts (2)
6-6
: Remove reliance on INTERNAL_SESSION_TASK_ROUTE_BY_KEYAfter switching onPendingSession to buildTaskURL, the INTERNAL_SESSION_TASK_ROUTE_BY_KEY import becomes unnecessary and brittle for future tasks. Prefer the centralized URL builder.
-import { buildTaskURL, INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '@/core/sessionTasks'; +import { buildTaskURL } from '@/core/sessionTasks';
31-32
: Context additions look good — add minimal docsAdding onPendingSession and taskUrl to the context aligns with the new API. Please add a brief JSDoc on both fields to guide integrators (what they represent, when they’re set, and how to use them).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/clerk-js/src/ui/components/SessionTasks/index.tsx
(5 hunks)packages/clerk-js/src/ui/contexts/components/SignIn.ts
(4 hunks)packages/clerk-js/src/ui/contexts/components/SignUp.ts
(4 hunks)packages/types/src/clerk.ts
(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/clerk-js/src/ui/contexts/components/SignIn.ts
- packages/clerk-js/src/ui/components/SessionTasks/index.tsx
- packages/types/src/clerk.ts
🧰 Additional context used
📓 Path-based instructions (8)
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/contexts/components/SignUp.ts
**/*.{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/contexts/components/SignUp.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/ui/contexts/components/SignUp.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/contexts/components/SignUp.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/ui/contexts/components/SignUp.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
Avoidany
type - preferunknown
when type is uncertain, then narrow with type guards
Useinterface
for object shapes that might be extended
Usetype
for unions, primitives, and computed types
Preferreadonly
properties for immutable data structures
Useprivate
for internal implementation details
Useprotected
for inheritance hierarchies
Usepublic
explicitly for clarity in public APIs
Preferreadonly
for 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 assertions
for literal types:as const
Usesatisfies
operator 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 ...
Noany
types without justification
Proper error handling with typed errors
Consistent use ofreadonly
for 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/contexts/components/SignUp.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/ui/contexts/components/SignUp.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/ui/contexts/components/SignUp.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). (5)
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
♻️ Duplicate comments (2)
packages/clerk-js/src/ui/contexts/components/SignIn.ts (1)
132-135
:taskUrl
computed from stale session instance
clerk.session
may still point to the previous session while a new pending session is being activated, so
clerk.session?.currentTask
can beundefined
and the URL never resolves.Use the freshly resolved session instead (pass it in, or read via context) to avoid a
null
task URL.-const taskUrl = clerk.session?.currentTask +const taskUrl = newSession?.currentTaskpackages/clerk-js/src/core/clerk.ts (1)
1325-1328
: Unhandled errors & type mismatch insetActiveNavigate
invocation
await setActiveNavigate({ session: newSession });
- The call is unguarded—if consumer code throws, Clerk stays in an inconsistent state with
__internal_setActiveInProgress
stucktrue
.- The library-supplied helpers expect
{ session, redirectUrl }
; omittingredirectUrl
violates the declared
signature inSignInContext
and several AIO helpers, leading to TypeScript errors downstream.- if (setActiveNavigate && newSession) { - await setActiveNavigate({ session: newSession }); + if (setActiveNavigate && newSession) { + try { + await setActiveNavigate({ session: newSession, redirectUrl: redirectUrl ?? this.buildAfterSignInUrl() }); + } catch (err) { + logger.error('setActive.navigate callback failed', err); + } return; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
packages/clerk-js/src/core/clerk.ts
(18 hunks)packages/clerk-js/src/ui/components/SessionTasks/index.tsx
(5 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)packages/clerk-js/src/ui/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
(5 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx
(2 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
(5 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx
(2 hunks)packages/clerk-js/src/ui/contexts/components/SignIn.ts
(4 hunks)packages/clerk-js/src/ui/contexts/components/SignUp.ts
(4 hunks)packages/clerk-js/src/ui/types.ts
(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (15)
- packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
- packages/clerk-js/src/ui/types.ts
- packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOneAlternativeChannelCodeForm.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpVerificationCodeForm.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
- packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
- packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpEmailLinkCard.tsx
- packages/clerk-js/src/ui/components/SessionTasks/index.tsx
- packages/clerk-js/src/ui/contexts/components/SignUp.ts
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
🧰 Additional context used
📓 Path-based instructions (8)
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/contexts/components/SignIn.ts
**/*.{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/contexts/components/SignIn.ts
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/ui/contexts/components/SignIn.ts
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/ui/contexts/components/SignIn.ts
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/ui/contexts/components/SignIn.ts
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
Avoidany
type - preferunknown
when type is uncertain, then narrow with type guards
Useinterface
for object shapes that might be extended
Usetype
for unions, primitives, and computed types
Preferreadonly
properties for immutable data structures
Useprivate
for internal implementation details
Useprotected
for inheritance hierarchies
Usepublic
explicitly for clarity in public APIs
Preferreadonly
for 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 assertions
for literal types:as const
Usesatisfies
operator 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 ...
Noany
types without justification
Proper error handling with typed errors
Consistent use ofreadonly
for 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/contexts/components/SignIn.ts
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/ui/contexts/components/SignIn.ts
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/ui/contexts/components/SignIn.ts
packages/clerk-js/src/core/clerk.ts
🧠 Learnings (1)
📚 Learning: 2025-08-08T19:00:08.931Z
Learnt from: LauraBeatris
PR: clerk/javascript#6486
File: packages/clerk-js/src/core/clerk.ts:1303-1344
Timestamp: 2025-08-08T19:00:08.931Z
Learning: In Clerk's navigation system for pending sessions, `taskUrls` (configured at the ClerkProvider level) should take priority over the `navigate` callback (from All-In-One components). This ensures that explicit provider-level configuration overrides component-level navigation logic, providing developers with predictable control over navigation behavior.
Applied to files:
packages/clerk-js/src/core/clerk.ts
🧬 Code Graph Analysis (1)
packages/clerk-js/src/ui/contexts/components/SignIn.ts (3)
packages/types/src/session.ts (1)
SessionResource
(208-261)packages/react/src/isomorphicClerk.ts (1)
session
(663-669)packages/clerk-js/src/core/sessionTasks.ts (2)
INTERNAL_SESSION_TASK_ROUTE_BY_KEY
(9-11)buildTaskURL
(16-24)
⏰ 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). (5)
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
f5580f1
to
ba01f12
Compare
9cca405
to
9547dbd
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts (1)
22-22
: Avoidany
in error handlingUse
unknown
and narrow insidehandleError
to comply with TS guidelines and ESLint.Apply:
- handleError: (err: any) => void; + handleError: (err: unknown) => void;If helpful, I can follow up with a small
handleError
helper that safely narrows Clerk/FAPI errors and formats localized messages.
🧹 Nitpick comments (2)
packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts (2)
27-27
: Tighten the return type ofnavigateOnSetActive
Prefer
Promise<void>
overPromise<unknown>
to convey intent and improve DX. No value is consumed downstream.Apply:
- navigateOnSetActive: (opts: { session: SessionResource; redirectUrl: string }) => Promise<unknown>; + navigateOnSetActive: (opts: { session: SessionResource; redirectUrl: string }) => Promise<void>;
113-137
: Add explicit return type tohasOptionalFields
Small clarity win and aligns with our TS rules for explicit return types.
Apply:
-export function hasOptionalFields( +export function hasOptionalFields( signUp: SignUpResource, identifierAttribute: 'emailAddress' | 'phoneNumber' | 'username', -) { +): boolean {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
(6 hunks)packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts
(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
🧰 Additional context used
📓 Path-based instructions (8)
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/SignIn/handleCombinedFlowTransfer.ts
**/*.{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/SignIn/handleCombinedFlowTransfer.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/ui/components/SignIn/handleCombinedFlowTransfer.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.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/ui/components/SignIn/handleCombinedFlowTransfer.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
Avoidany
type - preferunknown
when type is uncertain, then narrow with type guards
Useinterface
for object shapes that might be extended
Usetype
for unions, primitives, and computed types
Preferreadonly
properties for immutable data structures
Useprivate
for internal implementation details
Useprotected
for inheritance hierarchies
Usepublic
explicitly for clarity in public APIs
Preferreadonly
for 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 assertions
for literal types:as const
Usesatisfies
operator 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 ...
Noany
types without justification
Proper error handling with typed errors
Consistent use ofreadonly
for 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/SignIn/handleCombinedFlowTransfer.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/ui/components/SignIn/handleCombinedFlowTransfer.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/ui/components/SignIn/handleCombinedFlowTransfer.ts
🧬 Code Graph Analysis (1)
packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts (1)
packages/types/src/session.ts (1)
SessionResource
(208-261)
⏰ 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). (5)
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Build Packages
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (1)
packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts (1)
1-8
: Type-only imports LGTMUsing
import type
and addingSessionResource
is correct and aligns with our TS guidelines.
packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts
Show resolved
Hide resolved
packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts
Show resolved
Hide resolved
6077ee5
to
ea2307e
Compare
Description
This PR introduces a new API to navigate on
setActive
, that can be leveraged for after-auth flows to handle pending sessions, featuring a callback mechanism that enables developers to integrate their application logic, such as navigation.Previously, our flows were mistakenly navigating after
setActive
, which could cause issues with session revalidation and re-render of pages.From now on, we're proposing two options to deal with after-auth:
taskUrls
ornavigate
navigate
A callback function that can be provided as an
setActive
option.taskUrls
(existing)A map of URLs per session task key that can be provided as a Clerk option. On
setActive
, it'll be used for navigation.AIOs behavior
CleanShot.2025-08-07.at.22.30.57.mp4
Checklist
pnpm test
runs as expected.pnpm build
runs as expected.Type of change
Summary by CodeRabbit
Summary by CodeRabbit
New Features
navigate
callback to the session activation method to enable flexible navigation control.Bug Fixes
Refactor
RedirectToTask
component.navigate
callback.Chores