feat(clerk-js,types,localizations): Choose enterprise connection on sign-in/sign-up #6947
Conversation
🦋 Changeset detectedLatest commit: d2494ed 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 GitHub.
|
WalkthroughAdds an enterprise connection selection step to sign-in and sign-up flows. Introduces new types and APIs, UI components and routes, localization and appearance keys, guard/routing logic, and propagates enterpriseConnectionId through authenticateWithRedirect and EnterpriseSSOConfig. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as Sign-In UI
participant SI as SignIn Resource
participant IdP as Enterprise IdP
rect rgba(200,220,255,0.15)
User->>UI: Open sign-in
UI->>UI: hasMultipleEnterpriseConnections(...)
alt multiple connections
UI->>User: Show ChooseEnterpriseConnectionCard
User->>UI: Select connection (id)
UI->>SI: authenticateWithRedirect({ strategy: enterprise_sso, enterpriseConnectionId, redirectUrl })
SI-->>User: Redirect to IdP
IdP-->>SI: Callback to redirectUrl
SI-->>UI: Resume sign-in
else single/no connection
UI->>SI: authenticateWithRedirect(...) or continue factor-one
end
end
sequenceDiagram
autonumber
actor User
participant UI as Sign-Up UI
participant SU as SignUp Resource
participant API as Backend
participant IdP as Enterprise IdP
rect rgba(220,255,220,0.15)
User->>UI: Start sign-up
UI->>SU: submit start
SU-->>UI: Error (enterprise_connection_id_is_required_with_multiple_connections)
UI->>API: GET /client/sign_ups/{id}/enterprise_connections
API-->>UI: [ {id,name}, ... ]
UI->>User: Show ChooseEnterpriseConnectionCard
User->>UI: Select connection (id)
UI->>SU: authenticateWithRedirect({ strategy: enterprise_sso, enterpriseConnectionId, redirectUrl, redirectUrlComplete })
SU-->>User: Redirect to IdP
IdP-->>SU: Callback to redirectUrl
SU-->>UI: Complete sign-up
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
LauraBeatris
changed the title
LauraBeatris
force-pushed
the
laura/choose-enterprise-account
branch
from
1ce59b8 to
f47eff7
Compare
LauraBeatris
changed the title
LauraBeatris
changed the title
LauraBeatris
force-pushed
the
laura/choose-enterprise-account
branch
from
f47eff7 to
494dc23
Compare
| onClick: () => void; | ||
| }; | ||
|
|
||
| const ChooseEnterpriseConnectionButton = (props: ChooseEnterpriseConnectionButtonProps): JSX.Element => { |
There was a problem hiding this comment.
Any way to reuse the SocialButtonBlock component vs creating this duplication?
There was a problem hiding this comment.
I thought of not reusing since this is an experimental UI, and I wanted to minimize the changes for the core flows.
We could extract SocialButtonBlock to a UI component that receives custom descriptors, and rename it to a more generic approach for enterprise connections.
LauraBeatris
force-pushed
the
laura/choose-enterprise-account
branch
from
494dc23 to
6bc07fb
Compare
LauraBeatris
force-pushed
the
laura/choose-enterprise-account
branch
from
6bc07fb to
96be4fd
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/clerk-js/src/core/resources/SignIn.ts (1)
318-335: Propagate enterpriseConnectionId when creating a new sign-in.We drop the selected enterprise connection on the initial
create()call, so the server can’t bind the session to the user’s choice. ForwardenterpriseConnectionIdalongside the other params.await this.create({ strategy, identifier, redirectUrl, actionCompleteRedirectUrl, + enterpriseConnectionId, });
🧹 Nitpick comments (2)
packages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx (1)
11-11: Add JSDoc comment to internal component.Per coding guidelines, internal components should have documentation explaining their purpose, especially for experimental features.
Apply this diff:
+/** + * Internal component for choosing enterprise connections during sign-up. + * Fetches available enterprise connections and allows the user to select one. + * @experimental This component is feature-flagged and subject to change. + */ const SignUpChooseEnterpriseConnectionInternal = () => {packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx (1)
22-25: Redundant guard check.The
hasMultipleEnterpriseConnectionscheck is redundant since thewithEnterpriseConnectionsGuardHOC already prevents rendering when this condition is false. The comment "provides type safety" doesn't hold because TypeScript cannot narrow the type based on the HOC's runtime check.Consider removing this check to reduce redundancy:
- if (!hasMultipleEnterpriseConnections(signIn.supportedFirstFactors)) { - // This should not happen due to the HOC guard, but provides type safety - return null; - } - const enterpriseConnections = signIn.supportedFirstFactors.map(ff => ({
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (21)
.changeset/upset-results-win.md(1 hunks)packages/clerk-js/src/core/resources/SignIn.ts(3 hunks)packages/clerk-js/src/core/resources/SignUp.ts(5 hunks)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx(4 hunks)packages/clerk-js/src/ui/components/SignIn/shared.ts(2 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx(1 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx(2 hunks)packages/clerk-js/src/ui/components/SignUp/index.tsx(2 hunks)packages/clerk-js/src/ui/customizables/elementDescriptors.ts(1 hunks)packages/clerk-js/src/ui/elements/contexts/index.tsx(1 hunks)packages/localizations/src/en-US.ts(2 hunks)packages/types/src/appearance.ts(1 hunks)packages/types/src/factors.ts(2 hunks)packages/types/src/json.ts(1 hunks)packages/types/src/localization.ts(2 hunks)packages/types/src/redirects.ts(1 hunks)packages/types/src/signIn.ts(2 hunks)packages/types/src/signUp.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (13)
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/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignIn/shared.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.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/SignUp/SignUpStart.tsxpackages/types/src/factors.tspackages/types/src/signUp.tspackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/types/src/json.tspackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/types/src/localization.tspackages/clerk-js/src/ui/components/SignIn/shared.tspackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/localizations/src/en-US.tspackages/types/src/appearance.tspackages/clerk-js/src/core/resources/SignUp.tspackages/types/src/signIn.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/core/resources/SignIn.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/SignUp/SignUpStart.tsxpackages/types/src/factors.tspackages/types/src/signUp.tspackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/types/src/json.tspackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/types/src/localization.tspackages/clerk-js/src/ui/components/SignIn/shared.tspackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/localizations/src/en-US.tspackages/types/src/appearance.tspackages/clerk-js/src/core/resources/SignUp.tspackages/types/src/signIn.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/core/resources/SignIn.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/types/src/factors.tspackages/types/src/signUp.tspackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/types/src/json.tspackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/types/src/localization.tspackages/clerk-js/src/ui/components/SignIn/shared.tspackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/localizations/src/en-US.tspackages/types/src/appearance.tspackages/clerk-js/src/core/resources/SignUp.tspackages/types/src/signIn.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/core/resources/SignIn.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/SignUp/SignUpStart.tsxpackages/types/src/factors.tspackages/types/src/signUp.tspackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/types/src/json.tspackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/types/src/localization.tspackages/clerk-js/src/ui/components/SignIn/shared.tspackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/localizations/src/en-US.tspackages/types/src/appearance.tspackages/clerk-js/src/core/resources/SignUp.tspackages/types/src/signIn.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/core/resources/SignIn.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/ui/components/SignUp/SignUpStart.tsxpackages/types/src/factors.tspackages/types/src/signUp.tspackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/types/src/json.tspackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/types/src/localization.tspackages/clerk-js/src/ui/components/SignIn/shared.tspackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/localizations/src/en-US.tspackages/types/src/appearance.tspackages/clerk-js/src/core/resources/SignUp.tspackages/types/src/signIn.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/core/resources/SignIn.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/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.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/SignUp/SignUpStart.tsxpackages/types/src/factors.tspackages/types/src/signUp.tspackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/types/src/json.tspackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/types/src/localization.tspackages/clerk-js/src/ui/components/SignIn/shared.tspackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/localizations/src/en-US.tspackages/types/src/appearance.tspackages/clerk-js/src/core/resources/SignUp.tspackages/types/src/signIn.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/core/resources/SignIn.ts
**/*.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/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx
packages/clerk-js/src/ui/customizables/elementDescriptors.ts
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
Append new element descriptors to APPEARANCE_KEYS in packages/clerk-js/src/ui/customizables/elementDescriptors.ts
Files:
packages/clerk-js/src/ui/customizables/elementDescriptors.ts
.changeset/**
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Automated releases must use Changesets.
Files:
.changeset/upset-results-win.md
packages/localizations/**/*
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Localization files must be placed in 'packages/localizations/'.
Files:
packages/localizations/src/en-US.ts
packages/types/src/appearance.ts
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
Add new element descriptor types in packages/types/src/appearance.ts before using them elsewhere
Files:
packages/types/src/appearance.ts
🧠 Learnings (1)
📚 Learning: 2025-07-18T15:25:18.331Z
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/clerk-js-ui.mdc:0-0
Timestamp: 2025-07-18T15:25:18.331Z
Learning: Applies to packages/clerk-js/src/ui/customizables/elementDescriptors.ts : Append new element descriptors to APPEARANCE_KEYS in packages/clerk-js/src/ui/customizables/elementDescriptors.ts
Applied to files:
packages/clerk-js/src/ui/customizables/elementDescriptors.ts
🧬 Code graph analysis (11)
packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx (1)
packages/clerk-js/src/ui/utils/errorHandler.ts (1)
handleError(64-86)
packages/types/src/signUp.ts (1)
packages/types/src/resource.ts (1)
ClerkResource(8-21)
packages/types/src/json.ts (1)
packages/backend/src/api/resources/JSON.ts (1)
ClerkResourceJSON(78-87)
packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx (4)
packages/clerk-js/src/ui/contexts/components/SignIn.ts (1)
useSignInContext(38-169)packages/clerk-js/src/ui/common/redirects.ts (1)
buildSSOCallbackURL(28-46)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (1)
ChooseEnterpriseConnectionCard(18-54)packages/clerk-js/src/ui/common/withRedirect.tsx (1)
withRedirect(16-53)
packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (5)
packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
useCardState(42-70)packages/clerk-js/src/ui/elements/Header.tsx (1)
Header(103-108)packages/clerk-js/src/ui/customizables/index.ts (2)
Grid(18-18)Flex(16-16)packages/clerk-js/src/ui/customizables/elementDescriptors.ts (1)
descriptors(575-575)packages/clerk-js/src/ui/styledSystem/types.ts (1)
PropsOfComponent(58-58)
packages/clerk-js/src/ui/components/SignIn/shared.ts (2)
packages/types/src/signInCommon.ts (1)
SignInFirstFactor(74-85)packages/types/src/factors.ts (1)
EnterpriseSSOFactor(64-74)
packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx (1)
packages/clerk-js/src/ui/components/SignIn/shared.ts (1)
hasMultipleEnterpriseConnections(88-88)
packages/clerk-js/src/core/resources/SignUp.ts (2)
packages/types/src/signUp.ts (1)
SignUpEnterpriseConnectionResource(126-129)packages/types/src/json.ts (1)
SignUpEnterpriseConnectionJSON(146-149)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (2)
packages/clerk-js/src/ui/components/SignIn/shared.ts (1)
hasMultipleEnterpriseConnections(88-88)packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx (1)
SignInChooseEnterpriseConnection(79-81)
packages/clerk-js/src/ui/components/SignUp/index.tsx (1)
packages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx (1)
SignUpChooseEnterpriseConnection(56-58)
packages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx (6)
packages/clerk-js/src/ui/contexts/components/SignUp.ts (1)
useSignUpContext(37-158)packages/clerk-js/src/ui/hooks/useFetch.ts (1)
useFetch(85-190)packages/clerk-js/src/ui/customizables/Flow.tsx (1)
Flow(41-44)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (1)
ChooseEnterpriseConnectionCard(18-54)packages/clerk-js/src/ui/common/withRedirect.tsx (1)
withRedirectToAfterSignUp(74-91)packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
withCardStateProvider(72-81)
⏰ 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: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (12)
packages/types/src/factors.ts (2)
64-74: LGTM! Experimental fields properly added to EnterpriseSSOFactor.The optional
enterpriseConnectionIdandenterpriseConnectionNamefields are correctly marked as experimental and maintain backward compatibility.
123-131: LGTM! Experimental field properly added to EnterpriseSSOConfig.The optional
enterpriseConnectionIdfield is correctly marked as experimental and aligns with the factor definition.packages/types/src/signUp.ts (1)
117-129: LGTM! Experimental enterprise connections API properly added to SignUp.The new
__experimental_getEnterpriseConnectionsmethod andSignUpEnterpriseConnectionResourceinterface follow established experimental patterns and correctly extendClerkResource.packages/types/src/signIn.ts (1)
83-86: LGTM! Experimental API method properly added.The
__experimental_getEnterpriseConnectionsmethod follows established experimental patterns.packages/clerk-js/src/ui/components/SignUp/index.tsx (1)
12-12: LGTM! New route properly integrated.The enterprise connection route follows the established routing pattern and correctly renders the imported component.
Also applies to: 86-88
packages/types/src/json.ts (1)
143-149: LGTM! JSON interface properly defined.The
SignUpEnterpriseConnectionJSONinterface correctly extendsClerkResourceJSONand is appropriately marked as experimental..changeset/upset-results-win.md (1)
1-7: LGTM! Changeset properly formatted.The changeset correctly marks all affected packages as minor updates and clearly describes the experimental feature.
packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
126-127: LGTM! Flow metadata type correctly extended.The
chooseEnterpriseConnectionpart follows the established pattern for flow metadata tracking.packages/types/src/redirects.ts (1)
95-98: LGTM! Experimental field properly added to redirect params.The optional
enterpriseConnectionIdfield is correctly marked as experimental and maintains backward compatibility while enabling enterprise connection selection through redirect flows.packages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx (1)
53-58: LGTM!The HOC composition follows the established pattern seen in other components, with proper ordering of redirect handling (outer) and card state provision (inner). The
@experimentalannotation appropriately flags this as a feature-flagged component.packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx (2)
58-77: LGTM!The guard HOC follows the established
withRedirectpattern correctly, with proper display name preservation and clear warning messaging. The redirect condition appropriately gates access to the component when multiple enterprise connections aren't available.
79-81: LGTM!The export composition correctly applies the
withEnterpriseConnectionsGuardHOC to provide runtime protection against rendering when multiple connections aren't available.
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx
Show resolved
Hide resolved
packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx
Show resolved
Hide resolved
packages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
packages/types/src/json.ts (1)
143-149: Consider removing the redundantidfield.The
idfield is already defined in the baseClerkResourceJSONinterface (as shown in the relevant code snippet frompackages/backend/src/api/resources/JSON.ts). While redefining it here is not an error, it's redundant.Apply this diff to remove the redundancy:
/** * @experimental */ export interface SignUpEnterpriseConnectionJSON extends ClerkResourceJSON { - id: string; name: string; }packages/types/src/signIn.ts (1)
83-86: Add JSDoc description for the experimental method.The
__experimental_getEnterpriseConnectionsmethod lacks a description of its purpose, parameters, and return value. Consider adding documentation similar to other methods in this interface.Example:
/** + * Fetches all available enterprise connections for the current sign-in session. + * + * @returns A promise that resolves to an array of enterprise connection resources * @experimental */ __experimental_getEnterpriseConnections: () => Promise<SignInEnterpriseConnectionResource[]>;packages/types/src/factors.ts (1)
66-73: Consider adding JSDoc descriptions for experimental fields.While the
@experimentaltag is present, adding brief descriptions would improve developer experience. For example:/** + * The ID of the specific enterprise connection to use for authentication. * @experimental */ enterpriseConnectionId?: string; /** + * The display name of the enterprise connection. * @experimental */ enterpriseConnectionName?: string;Also applies to: 127-130
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (21)
.changeset/upset-results-win.md(1 hunks)packages/clerk-js/src/core/resources/SignIn.ts(3 hunks)packages/clerk-js/src/core/resources/SignUp.ts(5 hunks)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx(4 hunks)packages/clerk-js/src/ui/components/SignIn/shared.ts(2 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx(1 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx(2 hunks)packages/clerk-js/src/ui/components/SignUp/index.tsx(2 hunks)packages/clerk-js/src/ui/customizables/elementDescriptors.ts(1 hunks)packages/clerk-js/src/ui/elements/contexts/index.tsx(1 hunks)packages/localizations/src/en-US.ts(2 hunks)packages/types/src/appearance.ts(1 hunks)packages/types/src/factors.ts(2 hunks)packages/types/src/json.ts(1 hunks)packages/types/src/localization.ts(2 hunks)packages/types/src/redirects.ts(1 hunks)packages/types/src/signIn.ts(2 hunks)packages/types/src/signUp.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (13)
**/*.{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/types/src/redirects.tspackages/types/src/json.tspackages/types/src/factors.tspackages/localizations/src/en-US.tspackages/types/src/appearance.tspackages/types/src/signUp.tspackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/clerk-js/src/core/resources/SignIn.tspackages/types/src/localization.tspackages/types/src/signIn.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/shared.tspackages/clerk-js/src/core/resources/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/types/src/redirects.tspackages/types/src/json.tspackages/types/src/factors.tspackages/localizations/src/en-US.tspackages/types/src/appearance.tspackages/types/src/signUp.tspackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/clerk-js/src/core/resources/SignIn.tspackages/types/src/localization.tspackages/types/src/signIn.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/shared.tspackages/clerk-js/src/core/resources/SignUp.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/types/src/redirects.tspackages/types/src/json.tspackages/types/src/factors.tspackages/localizations/src/en-US.tspackages/types/src/appearance.tspackages/types/src/signUp.tspackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/clerk-js/src/core/resources/SignIn.tspackages/types/src/localization.tspackages/types/src/signIn.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/shared.tspackages/clerk-js/src/core/resources/SignUp.ts
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/types/src/redirects.tspackages/types/src/json.tspackages/types/src/factors.tspackages/localizations/src/en-US.tspackages/types/src/appearance.tspackages/types/src/signUp.tspackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/clerk-js/src/core/resources/SignIn.tspackages/types/src/localization.tspackages/types/src/signIn.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/shared.tspackages/clerk-js/src/core/resources/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
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/types/src/redirects.tspackages/types/src/json.tspackages/types/src/factors.tspackages/localizations/src/en-US.tspackages/types/src/appearance.tspackages/types/src/signUp.tspackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/clerk-js/src/core/resources/SignIn.tspackages/types/src/localization.tspackages/types/src/signIn.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/shared.tspackages/clerk-js/src/core/resources/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/types/src/redirects.tspackages/types/src/json.tspackages/types/src/factors.tspackages/localizations/src/en-US.tspackages/types/src/appearance.tspackages/types/src/signUp.tspackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/clerk-js/src/core/resources/SignIn.tspackages/types/src/localization.tspackages/types/src/signIn.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/shared.tspackages/clerk-js/src/core/resources/SignUp.ts
packages/localizations/**/*
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Localization files must be placed in 'packages/localizations/'.
Files:
packages/localizations/src/en-US.ts
packages/types/src/appearance.ts
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
Add new element descriptor types in packages/types/src/appearance.ts before using them elsewhere
Files:
packages/types/src/appearance.ts
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/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/customizables/elementDescriptors.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/components/SignIn/shared.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/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.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/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
packages/clerk-js/src/ui/customizables/elementDescriptors.ts
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
Append new element descriptors to APPEARANCE_KEYS in packages/clerk-js/src/ui/customizables/elementDescriptors.ts
Files:
packages/clerk-js/src/ui/customizables/elementDescriptors.ts
.changeset/**
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Automated releases must use Changesets.
Files:
.changeset/upset-results-win.md
🧠 Learnings (1)
📚 Learning: 2025-07-18T15:25:18.331Z
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/clerk-js-ui.mdc:0-0
Timestamp: 2025-07-18T15:25:18.331Z
Learning: Applies to packages/clerk-js/src/ui/customizables/elementDescriptors.ts : Append new element descriptors to APPEARANCE_KEYS in packages/clerk-js/src/ui/customizables/elementDescriptors.ts
Applied to files:
packages/clerk-js/src/ui/customizables/elementDescriptors.ts
🧬 Code graph analysis (11)
packages/types/src/json.ts (1)
packages/backend/src/api/resources/JSON.ts (1)
ClerkResourceJSON(78-87)
packages/types/src/signUp.ts (1)
packages/types/src/resource.ts (1)
ClerkResource(8-21)
packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (5)
packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
useCardState(42-70)packages/clerk-js/src/ui/elements/Header.tsx (1)
Header(103-108)packages/clerk-js/src/ui/customizables/index.ts (2)
Grid(18-18)Flex(16-16)packages/clerk-js/src/ui/customizables/elementDescriptors.ts (1)
descriptors(575-575)packages/clerk-js/src/ui/styledSystem/types.ts (1)
PropsOfComponent(58-58)
packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx (1)
packages/clerk-js/src/ui/utils/errorHandler.ts (1)
handleError(64-86)
packages/clerk-js/src/ui/components/SignUp/index.tsx (1)
packages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx (1)
SignUpChooseEnterpriseConnection(56-58)
packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx (1)
packages/clerk-js/src/ui/components/SignIn/shared.ts (1)
hasMultipleEnterpriseConnections(88-88)
packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx (4)
packages/clerk-js/src/ui/contexts/components/SignIn.ts (1)
useSignInContext(38-169)packages/clerk-js/src/ui/common/redirects.ts (1)
buildSSOCallbackURL(28-46)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (1)
ChooseEnterpriseConnectionCard(18-54)packages/clerk-js/src/ui/common/withRedirect.tsx (1)
withRedirect(16-53)
packages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx (6)
packages/clerk-js/src/ui/contexts/components/SignUp.ts (1)
useSignUpContext(37-158)packages/clerk-js/src/ui/hooks/useFetch.ts (1)
useFetch(85-190)packages/clerk-js/src/ui/customizables/Flow.tsx (1)
Flow(41-44)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (1)
ChooseEnterpriseConnectionCard(18-54)packages/clerk-js/src/ui/common/withRedirect.tsx (1)
withRedirectToAfterSignUp(74-91)packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
withCardStateProvider(72-81)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (2)
packages/clerk-js/src/ui/components/SignIn/shared.ts (1)
hasMultipleEnterpriseConnections(88-88)packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx (1)
SignInChooseEnterpriseConnection(79-81)
packages/clerk-js/src/ui/components/SignIn/shared.ts (2)
packages/types/src/signInCommon.ts (1)
SignInFirstFactor(74-85)packages/types/src/factors.ts (1)
EnterpriseSSOFactor(64-74)
packages/clerk-js/src/core/resources/SignUp.ts (2)
packages/types/src/signUp.ts (1)
SignUpEnterpriseConnectionResource(126-129)packages/types/src/json.ts (1)
SignUpEnterpriseConnectionJSON(146-149)
⏰ 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: pr-title-lint
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (18)
.changeset/upset-results-win.md (1)
1-7: LGTM!The changeset correctly documents the minor version updates for the three affected packages and provides a clear description of the experimental feature being introduced.
packages/clerk-js/src/ui/components/SignIn/shared.ts (1)
66-86: LGTM!The type guard function is well-implemented with proper null checks and uses
Array.every()to ensure all factors meet the criteria. The type predicate correctly narrows the type to the specific enterprise SSO factor variant with required connection properties.packages/types/src/redirects.ts (1)
95-98: LGTM!The addition of the optional
enterpriseConnectionIdfield is straightforward and properly marked as experimental. This aligns with the broader enterprise connection selection feature being introduced.packages/clerk-js/src/ui/components/SignUp/index.tsx (2)
12-12: LGTM!The import statement correctly brings in the new
SignUpChooseEnterpriseConnectioncomponent.
86-88: LGTM!The new route is properly integrated into the sign-up flow, following the existing routing patterns and using consistent kebab-case naming for the path.
packages/types/src/signUp.ts (2)
117-121: LGTM!The experimental method is properly declared with the
__experimental_prefix convention and returns the appropriate promise type. The experimental JSDoc annotation is correctly placed.
123-129: LGTM!The
SignUpEnterpriseConnectionResourceinterface correctly extendsClerkResourceand defines the necessary fields. The experimental annotation is properly applied.packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (2)
15-16: LGTM!The imports are correctly added for the new enterprise connection selection functionality.
128-134: LGTM!The early return is well-placed to intercept the sign-in flow when multiple enterprise connections are available. By checking this condition before the individual factor handling, you ensure users are presented with the enterprise connection chooser when appropriate. The conditional rendering logic is clean and properly marked as experimental.
packages/types/src/localization.ts (1)
364-367: LGTM! Localization structure is correct.The new
chooseEnterpriseConnectionlocalization keys follow the established pattern and are consistently added to bothsignUpandsignInsections with appropriatetitleandsubtitlefields.Also applies to: 522-525
packages/clerk-js/src/ui/customizables/elementDescriptors.ts (1)
509-511: LGTM! Element descriptors correctly appended.The new appearance keys are properly appended to
APPEARANCE_KEYSand follow the established naming conventions for UI element descriptors.Based on learnings.
packages/types/src/signIn.ts (1)
116-119: LGTM! Clean interface definition.The
SignInEnterpriseConnectionResourceinterface is well-defined with the necessaryidandnamefields for enterprise connection selection.packages/clerk-js/src/core/resources/SignIn.ts (2)
220-226: LGTM! Correct propagation of enterpriseConnectionId.The implementation correctly extends the
enterprise_ssostrategy to accept and propagateenterpriseConnectionIdthrough the authentication flow. The parameter is properly typed as optional inEnterpriseSSOConfig.
308-344: LGTM! Proper parameter handling in redirect flow.The
enterpriseConnectionIdis correctly destructured from params and passed through toprepareFirstFactor, maintaining consistency with other optional parameters likeoidcPrompt.packages/localizations/src/en-US.ts (1)
717-720: LGTM! Localization text is clear and consistent.The English localization entries for enterprise connection selection are well-written and maintain consistency between sign-in and sign-up flows. The subtitle provides clear guidance to users.
Also applies to: 809-812
packages/types/src/factors.ts (1)
64-74: LGTM! Type extensions are backward-compatible.The optional experimental fields extend
EnterpriseSSOFactorandEnterpriseSSOConfigwithout breaking existing code, properly supporting the new enterprise connection selection feature.Also applies to: 123-131
packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
126-127: LGTM! Flow metadata properly extended.Adding
'chooseEnterpriseConnection'to theFlowMetadata.partunion enables proper flow routing for the enterprise connection selection step.packages/types/src/appearance.ts (1)
644-646: LGTM! Appearance config properly extended.The new
ElementsConfigproperties align with the element descriptors added inelementDescriptors.tsand follow established naming conventions for UI theming.
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx (2)
15-15: Consider adding explicit return types.The coding guidelines recommend explicit return types for functions. Adding them improves type safety and serves as inline documentation.
Apply this diff:
-const SignInChooseEnterpriseConnectionInternal = () => { +const SignInChooseEnterpriseConnectionInternal = (): JSX.Element | null => {For
handleEnterpriseSSO, the return type should match whatauthenticateWithRedirectreturns (likely aPromise):- const handleEnterpriseSSO = (enterpriseConnectionId: string) => { + const handleEnterpriseSSO = (enterpriseConnectionId: string): Promise<void> => {Note: Verify the actual return type of
authenticateWithRedirectfrom the types and adjust accordingly.Also applies to: 32-32
66-71: Consider explicit parameter names in the condition function.The condition function on line 68 doesn't use the parameters that
withRedirectpasses to it. While this works in JavaScript, explicitly accepting (and optionally prefixing with_to indicate they're unused) improves code clarity and prevents potential linting warnings.Apply this diff:
return withRedirect( Component, - () => !hasMultipleEnterpriseConnections(signIn.supportedFirstFactors), + (_clerk, _environment, _options) => !hasMultipleEnterpriseConnections(signIn.supportedFirstFactors), ({ clerk }) => signInCtx.signInUrl || clerk.buildSignInUrl(), 'There are no enterprise connections available to sign-in. Clerk is redirecting to the `signInUrl` instead.', )(props);
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx(1 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx
🧰 Additional context used
📓 Path-based instructions (9)
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/SignInChooseEnterpriseConnection.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/SignIn/SignInChooseEnterpriseConnection.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/SignIn/SignInChooseEnterpriseConnection.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.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/SignIn/SignInChooseEnterpriseConnection.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/SignIn/SignInChooseEnterpriseConnection.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/SignIn/SignInChooseEnterpriseConnection.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/SignIn/SignInChooseEnterpriseConnection.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/SignIn/SignInChooseEnterpriseConnection.tsx
🧬 Code graph analysis (1)
packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx (4)
packages/clerk-js/src/ui/contexts/components/SignIn.ts (1)
useSignInContext(38-169)packages/clerk-js/src/ui/common/redirects.ts (1)
buildSSOCallbackURL(28-46)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (1)
ChooseEnterpriseConnectionCard(20-55)packages/clerk-js/src/ui/common/withRedirect.tsx (1)
withRedirect(16-53)
⏰ 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). (2)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
@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: |
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx
Show resolved
Hide resolved
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx
Show resolved
Hide resolved
packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx
Outdated
Show resolved
Hide resolved
packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx
Show resolved
Hide resolved
packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx
Outdated
Show resolved
Hide resolved
LauraBeatris
changed the title
LauraBeatris
force-pushed
the
laura/choose-enterprise-account
branch
from
2b4eab2 to
a7378c7
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx (1)
16-18: Consider handling fetch errors.The
useFetchhook returns anerrorproperty that isn't being captured. While the fetch failure may not break the UI (the component returnsnullwhen there are no connections), handling errors explicitly would provide better user feedback.Apply this diff to capture and handle errors:
- const { data: enterpriseConnections, isLoading } = useFetch(signUp?.__experimental_getEnterpriseConnections, { + const { data: enterpriseConnections, isLoading, error } = useFetch(signUp?.__experimental_getEnterpriseConnections, { signUpId: signUp.id, }); + + React.useEffect(() => { + if (error) { + card.setError(error); + } + }, [error, card]);Additionally, import React at the top of the file if not already present.
packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx (1)
257-257: Optional: Simplify boolean coercion.The double negation
!!is unnecessary sincehasOnlyEnterpriseSSOFirstFactorsalready returns a boolean. This can be simplified for clarity.Apply this diff to simplify:
- const isRedirectingToSSOProvider = !!hasOnlyEnterpriseSSOFirstFactors(signIn); + const isRedirectingToSSOProvider = hasOnlyEnterpriseSSOFirstFactors(signIn);
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (21)
.changeset/upset-results-win.md(1 hunks)packages/clerk-js/bundlewatch.config.json(1 hunks)packages/clerk-js/src/core/resources/SignIn.ts(3 hunks)packages/clerk-js/src/core/resources/SignUp.ts(5 hunks)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx(4 hunks)packages/clerk-js/src/ui/components/SignIn/shared.ts(2 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx(1 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx(2 hunks)packages/clerk-js/src/ui/components/SignUp/index.tsx(2 hunks)packages/clerk-js/src/ui/customizables/elementDescriptors.ts(1 hunks)packages/clerk-js/src/ui/elements/contexts/index.tsx(1 hunks)packages/localizations/src/en-US.ts(2 hunks)packages/types/src/appearance.ts(1 hunks)packages/types/src/factors.ts(2 hunks)packages/types/src/json.ts(1 hunks)packages/types/src/localization.ts(2 hunks)packages/types/src/redirects.ts(1 hunks)packages/types/src/signUp.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (13)
- .changeset/upset-results-win.md
- packages/clerk-js/src/ui/customizables/elementDescriptors.ts
- packages/types/src/signUp.ts
- packages/types/src/appearance.ts
- packages/clerk-js/bundlewatch.config.json
- packages/types/src/factors.ts
- packages/clerk-js/src/core/resources/SignIn.ts
- packages/clerk-js/src/ui/components/SignIn/shared.ts
- packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx
- packages/clerk-js/src/ui/components/SignUp/index.tsx
- packages/types/src/json.ts
- packages/types/src/localization.ts
- packages/clerk-js/src/ui/components/SignUp/SignUpStart.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/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.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/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/localizations/src/en-US.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/core/resources/SignUp.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.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/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/localizations/src/en-US.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/core/resources/SignUp.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/localizations/src/en-US.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/core/resources/SignUp.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.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/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/localizations/src/en-US.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/core/resources/SignUp.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.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/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/localizations/src/en-US.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/core/resources/SignUp.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.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/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.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/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/localizations/src/en-US.tspackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/core/resources/SignUp.tspackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.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/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
packages/localizations/**/*
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Localization files must be placed in 'packages/localizations/'.
Files:
packages/localizations/src/en-US.ts
🧬 Code graph analysis (5)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx (5)
packages/clerk-js/src/ui/contexts/components/SignIn.ts (1)
useSignInContext(38-169)packages/clerk-js/src/ui/common/redirects.ts (1)
buildSSOCallbackURL(28-46)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (1)
ChooseEnterpriseConnectionCard(20-55)packages/clerk-js/src/ui/common/withRedirect.tsx (1)
withRedirect(16-53)packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
withCardStateProvider(72-81)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (2)
packages/clerk-js/src/ui/components/SignIn/shared.ts (1)
hasMultipleEnterpriseConnections(88-88)packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx (1)
SignInFactorOneEnterpriseConnections(80-82)
packages/clerk-js/src/core/resources/SignUp.ts (2)
packages/types/src/signUp.ts (1)
SignUpEnterpriseConnectionResource(126-129)packages/types/src/json.ts (1)
SignUpEnterpriseConnectionJSON(146-149)
packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx (6)
packages/clerk-js/src/ui/contexts/components/SignUp.ts (1)
useSignUpContext(37-158)packages/clerk-js/src/ui/hooks/useFetch.ts (1)
useFetch(85-190)packages/clerk-js/src/ui/customizables/Flow.tsx (1)
Flow(41-44)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (1)
ChooseEnterpriseConnectionCard(20-55)packages/clerk-js/src/ui/common/withRedirect.tsx (1)
withRedirectToAfterSignUp(74-91)packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
withCardStateProvider(72-81)
packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx (1)
packages/clerk-js/src/ui/components/SignIn/shared.ts (1)
hasMultipleEnterpriseConnections(88-88)
⏰ 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). (26)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (handshake:staging, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
- GitHub Check: Integration Tests (custom, chrome)
- GitHub Check: Integration Tests (react-router, chrome)
- GitHub Check: Integration Tests (handshake, chrome)
- GitHub Check: Integration Tests (expo-web, chrome)
- GitHub Check: Integration Tests (machine, chrome)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (astro, chrome)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
- GitHub Check: Integration Tests (nuxt, chrome)
- GitHub Check: Integration Tests (vue, chrome)
- GitHub Check: Integration Tests (localhost, chrome)
- GitHub Check: Integration Tests (elements, chrome)
- GitHub Check: Integration Tests (sessions, chrome)
- GitHub Check: Integration Tests (sessions:staging, chrome)
- GitHub Check: Integration Tests (express, chrome)
- GitHub Check: Integration Tests (quickstart, chrome)
- GitHub Check: Integration Tests (ap-flows, chrome)
- GitHub Check: Integration Tests (generic, chrome)
- GitHub Check: Publish with pkg-pr-new
- GitHub Check: Static analysis
- GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
- GitHub Check: Unit Tests (22, **)
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (21)
packages/types/src/redirects.ts (1)
95-98: LGTM! Clean additive change.The optional
enterpriseConnectionIdfield is properly typed and marked as experimental, aligning with the broader feature flag approach for this enterprise connections feature.packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (2)
15-15: LGTM! Imports are properly utilized.Both
hasMultipleEnterpriseConnectionsandSignInFactorOneEnterpriseConnectionsare appropriately imported and used in the new enterprise connection flow logic below.Also applies to: 19-19
128-134: LGTM! Early return logic is sound.The enterprise connections flow is correctly positioned to intercept the normal sign-in flow when multiple enterprise connections are available. The experimental comment provides appropriate context for reviewers and maintainers.
packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
126-127: LGTM! Type extension is clean.The
'enterpriseConnections'flow part is properly added to the union type, enabling the new enterprise connection selection steps in sign-in and sign-up flows.packages/localizations/src/en-US.ts (2)
717-720: LGTM! Localization is clear and consistent.The enterprise connections localization for sign-in provides clear, user-friendly text that guides users to select their enterprise account. The structure and tone are consistent with existing localization entries.
809-812: LGTM! Consistent with sign-in localization.The sign-up enterprise connections localization mirrors the sign-in version, providing a consistent user experience across both flows.
packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx (3)
20-31: LGTM! Redirect logic is correct.The
handleEnterpriseSSOfunction properly constructs redirect URLs and initiates the enterprise SSO flow with the appropriate parameters, including theenterpriseConnectionId. The pattern of returning the promise directly fromauthenticateWithRedirectis consistent with the codebase.
33-35: LGTM! Guard logic prevents invalid route access.The early return when no enterprise connections exist is intentional guard behavior, preventing users from accessing this route directly when the feature isn't available. This aligns with the redirect guard pattern used in the sign-in flow.
37-50: LGTM! Render logic handles all states appropriately.The component correctly handles the loading, empty, and populated states with appropriate conditional rendering. The use of
Flow.PartandChooseEnterpriseConnectionCardfollows the established UI patterns.packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx (3)
42-42: LGTM! Import is properly utilized.The
hasMultipleEnterpriseConnectionsimport is correctly sourced from the shared module and used in the enterprise connection flow logic below.
228-233: LGTM! Enterprise connection branching is correct.The updated logic properly routes to
factor-onewhen either non-enterprise factors exist OR multiple enterprise connections are present, ensuring users can choose between IdP options when necessary. The explicit bracing improves readability.
386-391: LGTM! Consistent enterprise connection handling.The logic mirrors the earlier
needs_first_factorbranch (lines 228-233), ensuring consistent behavior when handling enterprise connections across different code paths.packages/clerk-js/src/core/resources/SignUp.ts (4)
19-20: LGTM! Type imports are properly used.The
SignUpEnterpriseConnectionJSONandSignUpEnterpriseConnectionResourcetypes are correctly imported and utilized in the new experimental API and resource class.
390-390: LGTM! Parameter propagation is correct.The
enterpriseConnectionIdis properly extracted from params and included in the authentication parameters, enabling the experimental enterprise connection selection flow.Also applies to: 404-404
559-568: LGTM! Experimental API follows established patterns.The
__experimental_getEnterpriseConnectionsmethod correctly fetches enterprise connections via the FAPI endpoint and maps them to resource instances. The experimental prefix appropriately signals this is feature-flagged functionality.
908-925: LGTM! Resource class follows established patterns.The
SignUpEnterpriseConnectionclass appropriately extendsBaseResourceand implements the resource interface. The simple data transfer pattern withfromJSONis consistent with other resource classes in the codebase.packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx (5)
16-26: LGTM! Component initialization is sound.The internal component properly retrieves necessary context and implements a defensive guard check for type safety, even though the HOC should prevent this scenario. This defensive programming is good practice.
28-31: LGTM! Factor mapping is correct.The mapping of
supportedFirstFactorsto enterprise connections is straightforward and safe. Based on learnings, whenhasMultipleEnterpriseConnectionsis true, FAPI only returnsenterprise_ssofactors, so no additional filtering is required.
33-45: LGTM! Redirect handler follows codebase patterns.The
handleEnterpriseSSOfunction correctly constructs redirect URLs and initiates the enterprise SSO flow. Based on learnings, returning the promise directly fromauthenticateWithRedirectwithout.catch()handlers is the established pattern across the codebase.
47-56: LGTM! Render structure is clean and consistent.The render logic properly uses
Flow.PartandChooseEnterpriseConnectionCardwith appropriate props, maintaining consistency with the sign-up flow implementation.
59-78: LGTM! HOC pattern and exports are well-structured.The
withEnterpriseConnectionsGuardHOC correctly implements redirect logic to prevent rendering when no enterprise connections are available. The export composition withwithCardStateProviderand the guard HOC ensures proper context and access control.Also applies to: 80-82
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/clerk-js/src/core/resources/SignUp.ts (1)
375-406: AddenterpriseConnectionIdtoAuthenticateWithRedirectParams.
IncludeenterpriseConnectionId?: stringin theAuthenticateWithRedirectParamstype inpackages/types/src/redirects.tsto match its usage inSignUp.authenticateWithRedirectOrPopup.
♻️ Duplicate comments (1)
packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx (1)
16-18: Capture and handle the fetch error.The
useFetchhook returns anerrorproperty that is not being captured. When the enterprise connections fetch fails, no feedback is provided to the user.Apply this diff to handle fetch errors:
- const { data: enterpriseConnections, isLoading } = useFetch(signUp?.__experimental_getEnterpriseConnections, { + const { data: enterpriseConnections, isLoading, error } = useFetch(signUp?.__experimental_getEnterpriseConnections, { signUpId: signUp.id, }); + + React.useEffect(() => { + if (error) { + const card = useCardState(); + card.setError(error); + } + }, [error]);Alternatively, you can display an error state directly in the render:
+ const card = useCardState(); + + React.useEffect(() => { + if (error) { + card.setError(error); + } + }, [error]);
🧹 Nitpick comments (10)
packages/types/src/redirects.ts (1)
95-98: LGTM! Consider adding JSDoc description.The optional
enterpriseConnectionIdfield is correctly marked as experimental and maintains backward compatibility. Consider adding a brief JSDoc description explaining what this parameter represents and when it should be used.packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx (1)
386-391: LGTM! Consider extracting the conditional logic.The logic correctly mirrors the handling in lines 228-233. Since this conditional pattern appears twice in the file, consider extracting it to a helper function for maintainability:
const shouldNavigateToFactorOne = (signInRes: SignInResource): boolean => { return !hasOnlyEnterpriseSSOFirstFactors(signInRes) || hasMultipleEnterpriseConnections(signInRes.supportedFirstFactors); };packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx (1)
37-50: Simplify the conditional rendering.The conditional logic has redundant checks. Line 33 already returns
nullwhen there are no connections and not loading, making the final: nullin line 48 unreachable.Simplify the render logic:
return ( <Flow.Part part='enterpriseConnections'> - {enterpriseConnections?.length ? ( + {isLoading ? ( + <LoadingCard /> + ) : ( <ChooseEnterpriseConnectionCard title={localizationKeys('signUp.enterpriseConnections.title')} subtitle={localizationKeys('signUp.enterpriseConnections.subtitle')} onClick={handleEnterpriseSSO} enterpriseConnections={enterpriseConnections} /> - ) : isLoading ? ( - <LoadingCard /> - ) : null} + )} </Flow.Part> );This is clearer since the early return at line 33 already handles the no-connections case.
packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (3)
20-55: LGTM! Consider the necessity of the empty footer.The component structure correctly follows established patterns, with proper error handling via
Card.Alert. The emptyCard.Footerat line 52 may not be necessary unless it's required for consistent styling/spacing across cards in the flow.
67-70: Consider logging caught errors.The error catch at line 69 only resets the loading state without logging or providing any feedback about what went wrong. While the parent component may handle errors through card state, it would be helpful to at least log the error for debugging purposes.
Apply this diff:
const handleClick = () => { setIsLoading(true); - void onClick(props.id).catch(() => setIsLoading(false)); + void onClick(props.id).catch((error) => { + console.error('Enterprise connection authentication failed:', error); + setIsLoading(false); + }); };
81-88: Address theanytype cast.The casting of
rest.sxtoanyat line 87 bypasses TypeScript's type checking. This could hide type errors and should be avoided.Consider a type-safe approach:
sx={(theme: InternalTheme) => [ { gap: theme.space.$4, position: 'relative', justifyContent: 'flex-start', }, - (rest as any).sx, + typeof rest.sx === 'function' ? rest.sx(theme) : rest.sx, ]}Or better yet, properly type the sx prop in the component's prop type definition to allow both function and object forms.
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx (3)
16-17: Add explicit return type for the internal component.Aligns with TS guidelines and improves readability.
Apply this diff:
-const SignInFactorOneEnterpriseConnectionsInternal = () => { +const SignInFactorOneEnterpriseConnectionsInternal = (): JSX.Element | null => {
80-82: Document the exported component as experimental.Public exports should have JSDoc. Marking it clarifies stability.
Apply this diff:
+/** + * @experimental Choose enterprise connection step for factor-one sign-in. + */ export const SignInFactorOneEnterpriseConnections = withCardStateProvider( withEnterpriseConnectionsGuard(SignInFactorOneEnterpriseConnectionsInternal), );
28-31: Optional: strengthen type narrowing for enterpriseConnections.If hasMultipleEnterpriseConnections doesn’t narrow the factor type, TS may see id/name as possibly undefined. Consider a type guard in hasMultipleEnterpriseConnections or inline narrowing to ensure id/name are non-null. Runtime filtering isn’t required here (FAPI guarantees), this is for type safety only. Based on learnings
packages/clerk-js/src/core/resources/SignUp.ts (1)
908-925: Add JSDoc for the new resource class.Document intent and experimental status to align with public API guidelines.
Apply this diff:
+/** + * @experimental Internal resource wrapper for SignUp enterprise connections. + * Not exported publicly; instances are returned via __experimental_getEnterpriseConnections. + */ class SignUpEnterpriseConnection extends BaseResource implements SignUpEnterpriseConnectionResource {
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (21)
.changeset/upset-results-win.md(1 hunks)packages/clerk-js/bundlewatch.config.json(1 hunks)packages/clerk-js/src/core/resources/SignIn.ts(3 hunks)packages/clerk-js/src/core/resources/SignUp.ts(5 hunks)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx(4 hunks)packages/clerk-js/src/ui/components/SignIn/shared.ts(2 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx(1 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx(2 hunks)packages/clerk-js/src/ui/components/SignUp/index.tsx(2 hunks)packages/clerk-js/src/ui/customizables/elementDescriptors.ts(1 hunks)packages/clerk-js/src/ui/elements/contexts/index.tsx(1 hunks)packages/localizations/src/en-US.ts(2 hunks)packages/types/src/appearance.ts(1 hunks)packages/types/src/factors.ts(2 hunks)packages/types/src/json.ts(1 hunks)packages/types/src/localization.ts(2 hunks)packages/types/src/redirects.ts(1 hunks)packages/types/src/signUp.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (11)
- packages/types/src/json.ts
- packages/clerk-js/src/ui/customizables/elementDescriptors.ts
- .changeset/upset-results-win.md
- packages/types/src/appearance.ts
- packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
- packages/clerk-js/bundlewatch.config.json
- packages/types/src/factors.ts
- packages/localizations/src/en-US.ts
- packages/clerk-js/src/ui/components/SignIn/shared.ts
- packages/types/src/localization.ts
- packages/types/src/signUp.ts
🧰 Additional context used
📓 Path-based instructions (9)
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/SignInFactorOne.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.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/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/core/resources/SignIn.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/core/resources/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/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/core/resources/SignIn.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/core/resources/SignUp.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/SignInFactorOne.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/core/resources/SignIn.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/core/resources/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/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/core/resources/SignIn.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/core/resources/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
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/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/core/resources/SignIn.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/core/resources/SignUp.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/components/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.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/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/types/src/redirects.tspackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/core/resources/SignIn.tspackages/clerk-js/src/ui/components/SignIn/SignInStart.tsxpackages/clerk-js/src/core/resources/SignUp.ts
**/*.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/SignIn/SignInFactorOne.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsxpackages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
🧬 Code graph analysis (7)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (2)
packages/clerk-js/src/ui/components/SignIn/shared.ts (1)
hasMultipleEnterpriseConnections(88-88)packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx (1)
SignInFactorOneEnterpriseConnections(80-82)
packages/clerk-js/src/ui/components/SignUp/index.tsx (1)
packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx (1)
SignUpEnterpriseConnections(56-58)
packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (5)
packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
useCardState(42-70)packages/clerk-js/src/ui/elements/Header.tsx (1)
Header(103-108)packages/clerk-js/src/ui/customizables/index.ts (2)
Grid(18-18)Flex(16-16)packages/clerk-js/src/ui/customizables/elementDescriptors.ts (1)
descriptors(575-575)packages/clerk-js/src/ui/styledSystem/types.ts (1)
PropsOfComponent(58-58)
packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx (5)
packages/clerk-js/src/ui/contexts/components/SignUp.ts (1)
useSignUpContext(37-158)packages/clerk-js/src/ui/hooks/useFetch.ts (1)
useFetch(85-190)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (1)
ChooseEnterpriseConnectionCard(20-55)packages/clerk-js/src/ui/common/withRedirect.tsx (1)
withRedirectToAfterSignUp(74-91)packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
withCardStateProvider(72-81)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx (6)
packages/clerk-js/src/ui/contexts/components/SignIn.ts (1)
useSignInContext(38-169)packages/clerk-js/src/ui/common/redirects.ts (1)
buildSSOCallbackURL(28-46)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (1)
ChooseEnterpriseConnectionCard(20-55)packages/clerk-js/src/ui/types.ts (1)
AvailableComponentProps(45-62)packages/clerk-js/src/ui/common/withRedirect.tsx (1)
withRedirect(16-53)packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
withCardStateProvider(72-81)
packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx (1)
packages/clerk-js/src/ui/components/SignIn/shared.ts (1)
hasMultipleEnterpriseConnections(88-88)
packages/clerk-js/src/core/resources/SignUp.ts (2)
packages/types/src/signUp.ts (1)
SignUpEnterpriseConnectionResource(126-129)packages/types/src/json.ts (1)
SignUpEnterpriseConnectionJSON(146-149)
⏰ 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). (4)
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Build Packages
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (16)
packages/clerk-js/src/ui/components/SignUp/index.tsx (2)
13-13: LGTM!The import is correctly placed with other route component imports.
86-88: LGTM!The route definition is correctly positioned in the flow. The component itself handles the guard logic (returning
nullwhen no enterprise connections exist), so direct navigation to this route is appropriately handled.packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx (2)
15-15: LGTM!The imports are correctly placed and used in the component logic.
Also applies to: 19-19
128-134: LGTM!The early return for multiple enterprise connections is correctly placed before the main factor selection logic, ensuring this specialized flow takes precedence when applicable. The experimental annotation appropriately flags this as a feature-flagged path.
packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
126-127: LGTM!The addition of
'enterpriseConnections'to theFlowMetadata.partunion is consistent with the existing pattern and properly supports the new enterprise connections flow.packages/clerk-js/src/core/resources/SignIn.ts (3)
225-225: LGTM!The
enterpriseConnectionIdis correctly included in theEnterpriseSSOConfigconstruction for theenterprise_ssostrategy.
312-313: LGTM!The destructuring correctly extracts
enterpriseConnectionIdfrom the params for use in the authentication flow.
333-333: LGTM!The
enterpriseConnectionIdis correctly passed toprepareFirstFactorfor the enterprise SSO flow, completing the parameter propagation chain.packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx (3)
42-42: LGTM!The import is correctly placed with other shared utilities.
228-233: LGTM!The updated logic correctly handles the enterprise connections flow:
- Navigates to
'factor-one'when there are non-enterprise factors OR multiple enterprise connections (requiring user selection)- Directly authenticates when there's only one enterprise connection and no other factors
This appropriately balances automatic SSO redirect with user choice.
257-257: LGTM!The explicit boolean coercion improves code clarity, though
hasOnlyEnterpriseSSOFirstFactorsalready returns a boolean.packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx (3)
1-10: LGTM!All imports are properly organized and used in the component implementation.
20-31: Verify error handling for enterprise SSO authentication.The
handleEnterpriseSSOfunction returns a promise that could reject, but error handling is not explicit. WhileChooseEnterpriseConnectionButtoncatches rejections to reset the loading state (line 69 in ChooseEnterpriseConnectionCard.tsx), authentication errors may not be displayed to the user.Verify that
authenticateWithRedirecterrors are properly surfaced to the user, either through:
- The
withCardStateProviderHOC automatically catching and displaying errors, or- Explicit error handling in
handleEnterpriseSSOIf errors are not handled, consider wrapping the call:
const handleEnterpriseSSO = async (enterpriseConnectionId: string) => { const redirectUrl = ctx.ssoCallbackUrl; const redirectUrlComplete = ctx.afterSignUpUrl || '/'; try { return await signUp.authenticateWithRedirect({ strategy: 'enterprise_sso', redirectUrl, redirectUrlComplete, continueSignUp: true, enterpriseConnectionId, }); } catch (error) { card.setError(error); throw error; } };
53-58: LGTM!The HOC composition correctly wraps the component with redirect guard and card state provider. The experimental annotation appropriately flags this feature.
packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (2)
1-15: LGTM!The imports and type definitions are well-structured. The
onClickhandler correctly types the async operation, and theenterpriseConnectionsstructure is appropriate for the use case.
57-62: LGTM!The type definition correctly extends
SimpleButtonprops while customizing theonClicksignature to pass the enterprise connectionid. The optionallabelprovides appropriate flexibility.
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx
Show resolved
Hide resolved
LauraBeatris
force-pushed
the
laura/choose-enterprise-account
branch
from
a7378c7 to
d2494ed
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/clerk-js/src/ui/components/SignUp/index.tsx (1)
86-88: Consider adding a route guard for enterprise connections.The route lacks a
canActivateguard, unlikeverify-email-addressandverify-phone-numberroutes. Without a guard, users could manually navigate to or refresh on this route when no enterprise connections are available, potentially causing errors or showing an empty state.Consider adding a guard to verify enterprise connections are available:
- <Route path='enterprise-connections'> + <Route + path='enterprise-connections' + canActivate={clerk => { + const connections = clerk.client.signUp.__experimental_getEnterpriseConnections?.(); + return connections && connections.length > 1; + }} + > <SignUpEnterpriseConnections /> </Route>Note: Adjust the guard logic based on how
__experimental_getEnterpriseConnectionsshould be accessed (sync vs async).
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
.typedoc/__tests__/__snapshots__/file-structure.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (11)
packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx(1 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx(1 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx(2 hunks)packages/clerk-js/src/ui/components/SignUp/index.tsx(2 hunks)packages/clerk-js/src/ui/customizables/elementDescriptors.ts(1 hunks)packages/clerk-js/src/ui/elements/contexts/index.tsx(1 hunks)packages/localizations/src/en-US.ts(2 hunks)packages/types/src/appearance.ts(1 hunks)packages/types/src/localization.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (8)
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx
- packages/types/src/localization.ts
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
- packages/types/src/appearance.ts
- packages/clerk-js/src/ui/customizables/elementDescriptors.ts
- packages/localizations/src/en-US.ts
- packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx
🧰 Additional context used
📓 Path-based instructions (9)
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/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.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/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.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/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/components/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.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/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.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/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.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/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.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/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.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/SignUp/index.tsxpackages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/elements/contexts/index.tsx
🧬 Code graph analysis (2)
packages/clerk-js/src/ui/components/SignUp/index.tsx (1)
packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx (1)
SignUpEnterpriseConnections(56-58)
packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx (1)
packages/clerk-js/src/ui/utils/errorHandler.ts (1)
handleError(64-86)
⏰ 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). (27)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (nuxt, chrome)
- GitHub Check: Integration Tests (react-router, chrome)
- GitHub Check: Integration Tests (machine, chrome)
- GitHub Check: Integration Tests (astro, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (custom, chrome)
- GitHub Check: Integration Tests (expo-web, chrome)
- GitHub Check: Integration Tests (handshake:staging, chrome)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
- GitHub Check: Integration Tests (vue, chrome)
- GitHub Check: Integration Tests (sessions:staging, chrome)
- GitHub Check: Integration Tests (elements, chrome)
- GitHub Check: Integration Tests (quickstart, chrome)
- GitHub Check: Integration Tests (handshake, chrome)
- GitHub Check: Integration Tests (sessions, chrome)
- GitHub Check: Integration Tests (ap-flows, chrome)
- GitHub Check: Integration Tests (express, chrome)
- GitHub Check: Integration Tests (localhost, chrome)
- GitHub Check: Integration Tests (generic, chrome)
- GitHub Check: Publish with pkg-pr-new
- GitHub Check: Unit Tests (22, **)
- GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
- GitHub Check: Static analysis
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (4)
packages/clerk-js/src/ui/components/SignUp/index.tsx (1)
13-13: LGTM!The import is correctly structured and matches the exported component from
SignUpEnterpriseConnections.tsx.packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx (2)
6-6: LGTM!The import is correctly sourced and necessary for the enhanced error handling.
359-371: LGTM!The error handling logic is well-structured with proper type checking before accessing error properties. The navigation to the enterprise connection selection flow is correctly implemented with a relative path and early return to prevent further error processing.
Based on learnings: The error code
'enterprise_connection_id_is_required_with_multiple_connections'is confirmed to be correct for this experimental feature.packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
126-127: LGTM!The addition of
'enterpriseConnections'to theFlowMetadata.partunion type is correctly implemented and follows the existing naming convention (camelCase), consistent with similar values like'chooseOrganization'.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx (1)
63-73: Don’t invoke the HOC as a function; render the wrapped component to preserve Hooks semantics.Calling withRedirect(...)(props) executes hooks outside React’s render boundary and can break hook ordering.
- return withRedirect( - Component, - () => !hasMultipleEnterpriseConnections(signIn.supportedFirstFactors), - ({ clerk }) => signInCtx.signInUrl || clerk.buildSignInUrl(), - 'There are no enterprise connections available to sign-in. Clerk is redirecting to the `signInUrl` instead.', - )(props); + const Guarded = withRedirect( + Component, + () => !hasMultipleEnterpriseConnections(signIn.supportedFirstFactors), + ({ clerk }) => signInCtx.signInUrl || clerk.buildSignInUrl(), + 'There are no enterprise connections available to sign-in. Clerk is redirecting to the `signInUrl` instead.', + ); + return <Guarded {...props} />;
🧹 Nitpick comments (6)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx (2)
16-16: Add explicit return type for the component.Declare return type to satisfy TS public API/style guidance.
-const SignInFactorOneEnterpriseConnectionsInternal = () => { +const SignInFactorOneEnterpriseConnectionsInternal = (): JSX.Element | null => {
28-31: Defensive label fallback for missing enterpriseConnectionName.If name can be undefined, prefer a non-empty label (e.g., fall back to id) to avoid blank buttons. No hard-coded strings.
- const enterpriseConnections = signIn.supportedFirstFactors.map(ff => ({ - id: ff.enterpriseConnectionId, - name: ff.enterpriseConnectionName, - })); + const enterpriseConnections = signIn.supportedFirstFactors.map(ff => ({ + id: ff.enterpriseConnectionId, + name: ff.enterpriseConnectionName ?? ff.enterpriseConnectionId ?? '', + }));packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (4)
13-15: Widen onClick return type to accept authenticateWithRedirect’s Promise.authenticateWithRedirect often returns a non-void Promise; narrowing to Promise can cause type friction. Use Promise.
- onClick: (id: string) => Promise<void>; + onClick: (id: string) => Promise<unknown>; @@ - onClick: (id: string) => Promise<void>; + onClick: (id: string) => Promise<unknown>;Also applies to: 58-61
63-70: Surface errors to Card.Alert using card.setError.Currently, errors only stop the spinner. Also set the card error so users see feedback.
-const ChooseEnterpriseConnectionButton = (props: ChooseEnterpriseConnectionButtonProps): JSX.Element => { - const { label, onClick, ...rest } = props; - const [isLoading, setIsLoading] = useState(false); +const ChooseEnterpriseConnectionButton = (props: ChooseEnterpriseConnectionButtonProps): JSX.Element => { + const { label, onClick, ...rest } = props; + const [isLoading, setIsLoading] = useState(false); + const card = useCardState(); @@ - const handleClick = () => { + const handleClick = () => { setIsLoading(true); - void onClick(props.id).catch(() => setIsLoading(false)); + void onClick(props.id).catch(err => { + card.setError(err); + setIsLoading(false); + }); };
81-89: Avoid any-cast on sx; destructure and pass typed sx instead.Destructure sx from rest with the correct prop type and spread it to eliminate (rest as any).sx.
Example:
const { sx: sxProp, ...buttonProps } = rest as PropsOfComponent<typeof SimpleButton>; ... <SimpleButton {...buttonProps} sx={(theme) => [ { /* styles */ }, sxProp ]} />
20-25: Add brief JSDoc for the exported component props.Public export; document props (especially enterpriseConnections shape) for consumers.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
.typedoc/__tests__/__snapshots__/file-structure.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (11)
packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx(1 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx(2 hunks)packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx(1 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx(1 hunks)packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx(2 hunks)packages/clerk-js/src/ui/components/SignUp/index.tsx(2 hunks)packages/clerk-js/src/ui/customizables/elementDescriptors.ts(1 hunks)packages/clerk-js/src/ui/elements/contexts/index.tsx(1 hunks)packages/localizations/src/en-US.ts(2 hunks)packages/types/src/appearance.ts(1 hunks)packages/types/src/localization.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (7)
- packages/types/src/appearance.ts
- packages/clerk-js/src/ui/components/SignUp/index.tsx
- packages/localizations/src/en-US.ts
- packages/clerk-js/src/ui/customizables/elementDescriptors.ts
- packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
- packages/clerk-js/src/ui/components/SignUp/SignUpEnterpriseConnections.tsx
- packages/clerk-js/src/ui/elements/contexts/index.tsx
🧰 Additional context used
📓 Path-based instructions (9)
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/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.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/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/types/src/localization.tspackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.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/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/types/src/localization.tspackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/types/src/localization.tspackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.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/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/types/src/localization.tspackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.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/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/types/src/localization.tspackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.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/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.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/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/types/src/localization.tspackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.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/SignUp/SignUpStart.tsxpackages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsxpackages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx
🧬 Code graph analysis (3)
packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx (1)
packages/clerk-js/src/ui/utils/errorHandler.ts (1)
handleError(64-86)
packages/clerk-js/src/ui/components/SignIn/SignInFactorOneEnterpriseConnections.tsx (7)
packages/clerk-js/src/ui/contexts/components/SignIn.ts (1)
useSignInContext(38-169)packages/clerk-js/src/ui/common/redirects.ts (1)
buildSSOCallbackURL(28-46)packages/clerk-js/src/ui/customizables/Flow.tsx (1)
Flow(41-44)packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (1)
ChooseEnterpriseConnectionCard(20-55)packages/clerk-js/src/ui/types.ts (1)
AvailableComponentProps(45-62)packages/clerk-js/src/ui/common/withRedirect.tsx (1)
withRedirect(16-53)packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
withCardStateProvider(72-81)
packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx (4)
packages/clerk-js/src/ui/elements/contexts/index.tsx (1)
useCardState(42-70)packages/clerk-js/src/ui/customizables/index.ts (2)
Grid(18-18)Flex(16-16)packages/clerk-js/src/ui/customizables/elementDescriptors.ts (1)
descriptors(575-575)packages/clerk-js/src/ui/styledSystem/types.ts (1)
PropsOfComponent(58-58)
⏰ 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). (4)
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (4)
packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx (2)
6-6: LGTM!The import is correctly added and necessary for the type guard used in the enhanced error handling.
359-371: LGTM! Well-implemented experimental enterprise connection error handling.The error handling logic is correct and well-structured:
- Proper type guard with
isClerkAPIResponseError- Safe navigation of nested error properties with optional chaining
- Correct navigation path ('./enterprise-connections' for relative routing)
- Appropriate fallback to
handleErrorfor other errors- Both branches return correctly
The implementation aligns with the experimental enterprise connections feature and matches the confirmed error code.
Based on learnings.
packages/types/src/localization.ts (2)
522-525: LGTM; ensure default translations exist.The signIn.enterpriseConnections entries look correct—please verify that en-US (and all shipped locales) define both title and subtitle to avoid empty headings.
364-367: Verify signUp.enterpriseConnections nesting
Type definitions placeenterpriseConnectionsat the root ofsignUp, but PR notes referencesignUp.start.enterpriseConnections. Confirm that your localization resources use the same path as the types, and adjust either the TS types or the resource hierarchy so keys aren’t missing at runtime.
Description
Introduces a new factor-one flow that allows end-users to choose between different enterprise connections, instead of being directly redirected to a single IdP application.
This flow is currently being feature-flagged for a specific enterprise customer, and the implementation here is aiming to be as simple as possible to unblock their use case.
Sign-in flow
CleanShot.2025-10-09.at.16.04.32.mp4
Sign-up flow
CleanShot.2025-10-09.at.16.10.22.mp4
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Localization
Style
Chores