feat(clerk-js,clerk-react,types): Signal phone code support #6650
Conversation
🦋 Changeset detectedLatest commit: b1ac39a 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.
|
WalkthroughIntroduces phone code verification for sign-in and sign-up flows, updates React state proxies to expose phoneCode actions, augments public types (signIn/signUp futures), adjusts a type import path, and adds a changeset noting experimental “Signal phone code support.” No unrelated runtime logic changed. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant UI as App UI
participant React as React State Proxy
participant JS as clerk-js SignInFuture
participant API as Backend API
Note over UI,API: Sign-in with phone code (send)
UI->>React: signIn.phoneCode.sendCode({ phoneNumber, channel })
React->>JS: forward call (gated)
JS->>API: POST /prepare_first_factor { strategy: "phone_code", phoneNumberId, channel }
API-->>JS: { status, error? }
JS-->>React: { error? }
React-->>UI: { error? }
Note over UI,API: Sign-in with phone code (verify)
UI->>React: signIn.phoneCode.verifyCode({ code })
React->>JS: forward call
JS->>API: POST /attempt_first_factor { strategy: "phone_code", code }
API-->>JS: { status, error? }
JS-->>React: { error? }
React-->>UI: { error? }
sequenceDiagram
autonumber
participant UI as App UI
participant React as React State Proxy
participant JS as clerk-js SignUpFuture
participant API as Backend API
participant Captcha as Captcha Provider
Note over UI,API: Sign-up phone code (send)
UI->>React: signUp.verifications.sendPhoneCode({ phoneNumber, channel })
React->>JS: forward call (gated)
alt No sign-up id yet
JS->>Captcha: getCaptchaToken()
Captcha-->>JS: { token, widgetType, error? }
JS->>API: POST /sign_ups { phoneNumber, captchaToken, captchaWidgetType, captchaError }
API-->>JS: { id }
end
JS->>API: POST /prepare_verification { strategy: "phone_code", channel }
API-->>JS: { status, error? }
JS-->>React: { error? }
React-->>UI: { error? }
Note over UI,API: Sign-up phone code (verify)
UI->>React: signUp.verifications.verifyPhoneCode({ code })
React->>JS: forward call
JS->>API: POST /attempt_verification { strategy: "phone_code", code }
API-->>JS: { status, error? }
JS-->>React: { error? }
React-->>UI: { error? }
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
@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: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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/types/src/signUp.ts (1)
1-1: Incorrect import path in packages/types/src/signUp.tsThe module
phoneCodeChannelis a local file in the same directory, so the import must use a relative path. Please update the import on line 1:
- packages/types/src/signUp.ts (line 1): change from a bare module specifier to a relative path
-import type { PhoneCodeChannel } from 'phoneCodeChannel'; +import type { PhoneCodeChannel } from './phoneCodeChannel';
🧹 Nitpick comments (5)
.changeset/hungry-dogs-stick.md (1)
7-7: Clarify the changelog entry with scope and API surface (SMS/WhatsApp).Spell out what changed for consumers and mention channels to reduce ambiguity.
-[Experimental] Signal phone code support +[Experimental] Signal phone code support + +- Add phone-code verification to custom “Signal” flows for sign-in and sign-up. +- New actions: + - signIn.__internal_future.phoneCode.sendCode({ phoneNumber?, channel?: 'sms' | 'whatsapp' }) + - signIn.__internal_future.phoneCode.verifyCode({ code }) + - signUp.__internal_future.verifications.sendPhoneCode({ phoneNumber?, channel?: 'sms' | 'whatsapp' }) + - signUp.__internal_future.verifications.verifyPhoneCode({ code }) + +Notes: API is experimental and may change.packages/types/src/signUp.ts (1)
136-138: Unify channel typing with PhoneCodeChannel and document the new methods.Avoid duplicating the union; reuse the central type and add brief JSDoc for the public API.
verifications: { sendEmailCode: () => Promise<{ error: unknown }>; verifyEmailCode: (params: { code: string }) => Promise<{ error: unknown }>; - sendPhoneCode: (params?: { phoneNumber?: string; channel?: 'sms' | 'whatsapp' }) => Promise<{ error: unknown }>; - verifyPhoneCode: (params: { code: string }) => Promise<{ error: unknown }>; + /** + * Send a phone verification code. + * When called before a sign-up exists, `phoneNumber` seeds the pending sign-up. + */ + sendPhoneCode: (params?: { phoneNumber?: string; channel?: PhoneCodeChannel }) => Promise<{ error: unknown }>; + /** Verify a previously sent phone verification code. */ + verifyPhoneCode: (params: { code: string }) => Promise<{ error: unknown }>; };packages/types/src/signIn.ts (1)
156-159: Type reuse and JSDoc for phoneCode.Mirror emailCode docs and reuse a shared channel type to avoid drift.
phoneCode: { - sendCode: (params?: { phoneNumber?: string; channel?: 'sms' | 'whatsapp' }) => Promise<{ error: unknown }>; - verifyCode: (params: { code: string }) => Promise<{ error: unknown }>; + /** Send a phone verification code for the first factor. */ + sendCode: (params?: { phoneNumber?: string; channel?: PhoneCodeChannel }) => Promise<{ error: unknown }>; + /** Verify a previously sent phone verification code. */ + verifyCode: (params: { code: string }) => Promise<{ error: unknown }>; };Add the import at the top of this file:
import type { PhoneCodeChannel } from './phoneCodeChannel';packages/clerk-js/src/core/resources/SignIn.ts (2)
498-502: Add JSDoc for the new phoneCode surface.Public/experimental API needs JSDoc (params, defaults, error cases) to match project guidelines.
Apply this diff above the property:
+ /** + * @experimental This API is subject to change. + * + * Phone code sign-in helpers for custom flows. + * - sendCode({ phoneNumber, channel }): Initiates a phone_code verification. `channel` defaults to 'sms'. + * - verifyCode({ code }): Verifies the received code. + */ phoneCode = { sendCode: this.sendPhoneCode.bind(this), verifyCode: this.verifyPhoneCode.bind(this), };
629-653: Improve developer guidance when factor is missing.Make the error actionable by hinting at misconfiguration and exposing available strategies.
Apply this diff:
- if (!phoneCodeFactor) { - throw new Error('Phone code factor not found'); - } + if (!phoneCodeFactor) { + const available = (this.resource.supportedFirstFactors ?? []).map(f => f.strategy).join(', ') || 'none'; + throw new Error( + `Phone code factor not found. Ensure 'phone_code' is enabled for your instance. Available strategies: ${available}`, + ); + }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (6)
.changeset/hungry-dogs-stick.md(1 hunks)packages/clerk-js/src/core/resources/SignIn.ts(2 hunks)packages/clerk-js/src/core/resources/SignUp.ts(2 hunks)packages/react/src/stateProxy.ts(2 hunks)packages/types/src/signIn.ts(1 hunks)packages/types/src/signUp.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{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/signUp.tspackages/types/src/signIn.tspackages/react/src/stateProxy.tspackages/clerk-js/src/core/resources/SignUp.tspackages/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/types/src/signUp.tspackages/types/src/signIn.tspackages/react/src/stateProxy.tspackages/clerk-js/src/core/resources/SignUp.tspackages/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/types/src/signUp.tspackages/types/src/signIn.tspackages/react/src/stateProxy.tspackages/clerk-js/src/core/resources/SignUp.tspackages/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/types/src/signUp.tspackages/types/src/signIn.tspackages/react/src/stateProxy.tspackages/clerk-js/src/core/resources/SignUp.tspackages/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/types/src/signUp.tspackages/types/src/signIn.tspackages/react/src/stateProxy.tspackages/clerk-js/src/core/resources/SignUp.tspackages/clerk-js/src/core/resources/SignIn.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/signUp.tspackages/types/src/signIn.tspackages/react/src/stateProxy.tspackages/clerk-js/src/core/resources/SignUp.tspackages/clerk-js/src/core/resources/SignIn.ts
.changeset/**
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Automated releases must use Changesets.
Files:
.changeset/hungry-dogs-stick.md
🧬 Code graph analysis (2)
packages/clerk-js/src/core/resources/SignUp.ts (1)
packages/clerk-js/src/utils/runAsyncResourceTask.ts (1)
runAsyncResourceTask(8-30)
packages/clerk-js/src/core/resources/SignIn.ts (1)
packages/clerk-js/src/utils/runAsyncResourceTask.ts (1)
runAsyncResourceTask(8-30)
⏰ 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 (6)
packages/clerk-js/src/core/resources/SignUp.ts (2)
475-481: Wiring looks correct.Bindings expose the new phone-code actions under verifications; consistent with email-code.
598-605: LGTM.Verification step mirrors email-code flow and uses attempt_verification with the correct strategy.
packages/react/src/stateProxy.ts (2)
59-59: LGTM: phoneCode methods exposed via proxy.Consistent with existing wrapMethods and server-guarding.
80-85: LGTM: verifications now include phone-code.Parity with email-code; names align with underlying future API.
packages/clerk-js/src/core/resources/SignIn.ts (2)
498-502: LGTM: phoneCode surface mirrors emailCode for parity.Naming and binding are consistent with existing patterns.
655-662: LGTM: verifyPhoneCode aligns with emailCode and runAsyncResourceTask pattern.Straight-through attempt of first factor with proper strategy.
| async sendPhoneCode({ | ||
| phoneNumber, | ||
| channel = 'sms', | ||
| }: { | ||
| phoneNumber?: string; | ||
| channel?: 'sms' | 'whatsapp'; | ||
| } = {}): Promise<{ error: unknown }> { | ||
| return runAsyncResourceTask(this.resource, async () => { | ||
| if (!this.resource.id) { | ||
| await this.create({ identifier: phoneNumber }); | ||
| } | ||
|
|
||
| const phoneCodeFactor = this.resource.supportedFirstFactors?.find(f => f.strategy === 'phone_code'); | ||
|
|
||
| if (!phoneCodeFactor) { | ||
| throw new Error('Phone code factor not found'); | ||
| } | ||
|
|
||
| const { phoneNumberId } = phoneCodeFactor; | ||
| await this.resource.__internal_basePost({ | ||
| body: { phoneNumberId, strategy: 'phone_code', channel }, | ||
| action: 'prepare_first_factor', | ||
| }); | ||
| }); | ||
| } |
There was a problem hiding this comment.
Bug: sendPhoneCode may POST with undefined identifier.
When no SignIn exists, create({ identifier: phoneNumber }) runs even if phoneNumber is undefined, leading to a backend 4xx. Guard before creating.
Apply this diff:
async sendPhoneCode({
phoneNumber,
channel = 'sms',
}: {
phoneNumber?: string;
channel?: 'sms' | 'whatsapp';
} = {}): Promise<{ error: unknown }> {
return runAsyncResourceTask(this.resource, async () => {
- if (!this.resource.id) {
- await this.create({ identifier: phoneNumber });
- }
+ if (!this.resource.id) {
+ if (!phoneNumber) {
+ throw new Error(
+ 'Cannot send phone code without a phone number. Provide { phoneNumber } on the first call.',
+ );
+ }
+ await this.create({ identifier: phoneNumber });
+ }
const phoneCodeFactor = this.resource.supportedFirstFactors?.find(f => f.strategy === 'phone_code');
if (!phoneCodeFactor) {
throw new Error('Phone code factor not found');
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| async sendPhoneCode({ | |
| phoneNumber, | |
| channel = 'sms', | |
| }: { | |
| phoneNumber?: string; | |
| channel?: 'sms' | 'whatsapp'; | |
| } = {}): Promise<{ error: unknown }> { | |
| return runAsyncResourceTask(this.resource, async () => { | |
| if (!this.resource.id) { | |
| await this.create({ identifier: phoneNumber }); | |
| } | |
| const phoneCodeFactor = this.resource.supportedFirstFactors?.find(f => f.strategy === 'phone_code'); | |
| if (!phoneCodeFactor) { | |
| throw new Error('Phone code factor not found'); | |
| } | |
| const { phoneNumberId } = phoneCodeFactor; | |
| await this.resource.__internal_basePost({ | |
| body: { phoneNumberId, strategy: 'phone_code', channel }, | |
| action: 'prepare_first_factor', | |
| }); | |
| }); | |
| } | |
| async sendPhoneCode({ | |
| phoneNumber, | |
| channel = 'sms', | |
| }: { | |
| phoneNumber?: string; | |
| channel?: 'sms' | 'whatsapp'; | |
| } = {}): Promise<{ error: unknown }> { | |
| return runAsyncResourceTask(this.resource, async () => { | |
| if (!this.resource.id) { | |
| if (!phoneNumber) { | |
| throw new Error( | |
| 'Cannot send phone code without a phone number. Provide { phoneNumber } on the first call.', | |
| ); | |
| } | |
| await this.create({ identifier: phoneNumber }); | |
| } | |
| const phoneCodeFactor = this.resource.supportedFirstFactors?.find(f => f.strategy === 'phone_code'); | |
| if (!phoneCodeFactor) { | |
| throw new Error('Phone code factor not found'); | |
| } | |
| const { phoneNumberId } = phoneCodeFactor; | |
| await this.resource.__internal_basePost({ | |
| body: { phoneNumberId, strategy: 'phone_code', channel }, | |
| action: 'prepare_first_factor', | |
| }); | |
| }); | |
| } |
🤖 Prompt for AI Agents
In packages/clerk-js/src/core/resources/SignIn.ts around lines 629 to 653, the
sendPhoneCode method may call create({ identifier: phoneNumber }) even when
phoneNumber is undefined causing a backend 4xx; add a guard so that if
this.resource.id is falsy and phoneNumber is undefined (or empty) you do not
call create — instead throw a clear error (or return a rejected Promise)
indicating phoneNumber is required; keep the rest of the flow unchanged so that
creation only happens when a valid phoneNumber is provided.
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/types/src/signInFuture.ts (1)
58-76: Add missingphoneCodenamespace toSignInFutureResource
In packages/types/src/signInFuture.ts (around lines 58–76), the interface lacks thephoneCodefield despite its implementation in SignIn. Add it to keep the types in sync:export interface SignInFutureResource { availableStrategies: SignInFirstFactor[]; status: SignInStatus | null; isTransferable: boolean; existingSession?: { sessionId: string }; create: (params: SignInFutureCreateParams) => Promise<{ error: unknown }>; password: (params: SignInFuturePasswordParams) => Promise<{ error: unknown }>; emailCode: { sendCode: (params: SignInFutureEmailCodeSendParams) => Promise<{ error: unknown }>; verifyCode: (params: SignInFutureEmailCodeVerifyParams) => Promise<{ error: unknown }>; }; + phoneCode: { + sendCode: (params: SignInFuturePhoneCodeSendParams) => Promise<{ error: unknown }>; + verifyCode: (params: SignInFuturePhoneCodeVerifyParams) => Promise<{ error: unknown }>; + }; resetPasswordEmailCode: { sendCode: () => Promise<{ error: unknown }>; verifyCode: (params: SignInFutureEmailCodeVerifyParams) => Promise<{ error: unknown }>; submitPassword: (params: SignInFutureResetPasswordSubmitParams) => Promise<{ error: unknown }>; }; sso: (params: SignInFutureSSOParams) => Promise<{ error: unknown }>; finalize: (params?: SignInFutureFinalizeParams) => Promise<{ error: unknown }>; }
♻️ Duplicate comments (1)
packages/clerk-js/src/core/resources/SignUp.ts (1)
601-617: Bug: passed phoneNumber ignored when a SignUp exists; add guard for missing phoneNumber.If
this.resource.idexists, a providedphoneNumbershould update the sign-up; if it doesn't exist andphoneNumberis missing, fail fast with a clear error.Apply:
async sendPhoneCode(params: SignUpFuturePhoneCodeSendParams): Promise<{ error: unknown }> { const { phoneNumber, channel = 'sms' } = params; return runAsyncResourceTask(this.resource, async () => { - if (!this.resource.id) { + if (!this.resource.id && !phoneNumber) { + throw new ClerkRuntimeError('Cannot send phone code without a phone number when sign-up is not yet created.'); + } + + if (!this.resource.id) { const { captchaToken, captchaWidgetType, captchaError } = await this.getCaptchaToken(); await this.resource.__internal_basePost({ path: this.resource.pathRoot, body: { phoneNumber, captchaToken, captchaWidgetType, captchaError }, }); - } + } else if (phoneNumber) { + // Keep phone number in sync for existing sign-ups + await this.resource.update({ phoneNumber }); + } await this.resource.__internal_basePost({ body: { strategy: 'phone_code', channel }, action: 'prepare_verification', }); }); }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
packages/clerk-js/src/core/resources/SignIn.ts(3 hunks)packages/clerk-js/src/core/resources/SignUp.ts(3 hunks)packages/types/src/factors.ts(1 hunks)packages/types/src/signInFuture.ts(2 hunks)packages/types/src/signUpFuture.ts(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/clerk-js/src/core/resources/SignIn.ts
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{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/factors.tspackages/types/src/signInFuture.tspackages/types/src/signUpFuture.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/factors.tspackages/types/src/signInFuture.tspackages/types/src/signUpFuture.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/factors.tspackages/types/src/signInFuture.tspackages/types/src/signUpFuture.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/factors.tspackages/types/src/signInFuture.tspackages/types/src/signUpFuture.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/factors.tspackages/types/src/signInFuture.tspackages/types/src/signUpFuture.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/factors.tspackages/types/src/signInFuture.tspackages/types/src/signUpFuture.tspackages/clerk-js/src/core/resources/SignUp.ts
🧬 Code graph analysis (3)
packages/types/src/signInFuture.ts (1)
packages/types/src/phoneCodeChannel.ts (1)
PhoneCodeChannel(9-9)
packages/types/src/signUpFuture.ts (1)
packages/types/src/phoneCodeChannel.ts (1)
PhoneCodeChannel(9-9)
packages/clerk-js/src/core/resources/SignUp.ts (2)
packages/types/src/signUpFuture.ts (3)
SignUpFuturePhoneCodeSendParams(18-21)SignUpFuturePhoneCodeVerifyParams(23-25)SignUpFutureSSOParams(27-37)packages/clerk-js/src/utils/runAsyncResourceTask.ts (1)
runAsyncResourceTask(8-30)
⏰ 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: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (10)
packages/types/src/factors.ts (1)
2-2: Import path change looks good.Type-only import; no API surface change.
packages/types/src/signInFuture.ts (1)
2-2: Type-only import is correct.Matches our TS guidelines.
packages/types/src/signUpFuture.ts (4)
2-2: Type-only import is correct.Consistent with our TS import rules.
52-53: Verifications extended with phone code: LGTM.Surface matches runtime behavior planned in SignUpFuture.
56-56: SSO signature updated: LGTM.Type rename applied here too.
27-36: All references updated: no occurrences of the oldSignUpFutureSSoParamsremain.packages/clerk-js/src/core/resources/SignUp.ts (4)
24-28: Import updates: LGTM.Types aligned with new phone-code and SSO params.
502-504: Expose phone-code methods on future.verifications: LGTM.API shape is consistent with emailCode verifications.
619-627: Verify method: LGTM.Correctly posts attempt_verification with strategy and code.
629-653: SSO param rename applied: LGTM.Matches types and preserves existing behavior.
| export interface SignInFuturePhoneCodeSendParams { | ||
| phoneNumber?: string; | ||
| channel?: PhoneCodeChannel; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add JSDoc for new public params.
Public types require JSDoc (see guidelines). Document when phoneNumber is required and the default channel.
Apply:
+/**
+ * Parameters for sending a phone verification code during sign-in.
+ * - Provide `phoneNumber` when no sign-in exists yet; otherwise the existing identifier is used.
+ * - `channel` defaults to `'sms'`.
+ */
export interface SignInFuturePhoneCodeSendParams {
phoneNumber?: string;
channel?: PhoneCodeChannel;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export interface SignInFuturePhoneCodeSendParams { | |
| phoneNumber?: string; | |
| channel?: PhoneCodeChannel; | |
| } | |
| /** | |
| * Parameters for sending a phone verification code during sign-in. | |
| * - Provide `phoneNumber` when no sign-in exists yet; otherwise the existing identifier is used. | |
| * - `channel` defaults to `'sms'`. | |
| */ | |
| export interface SignInFuturePhoneCodeSendParams { | |
| phoneNumber?: string; | |
| channel?: PhoneCodeChannel; | |
| } |
🤖 Prompt for AI Agents
In packages/types/src/signInFuture.ts around lines 32 to 35, the exported
SignInFuturePhoneCodeSendParams interface is missing JSDoc for this public type;
add a top-level JSDoc comment describing the purpose of the interface and
individual JSDoc comments for each property: document that phoneNumber is
required when sending a phone code (i.e., for phone/SMS delivery) and optional
otherwise, and document the channel property and its default value (e.g.,
default: PhoneCodeChannel.SMS or 'sms' depending on the enum), including any
allowed enum values; ensure comments follow the project JSDoc style and mention
optionality clearly.
| export interface SignInFuturePhoneCodeVerifyParams { | ||
| code: string; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add JSDoc for verify params.
Document expected format and length constraints if any.
+/** Parameters for verifying a phone verification code during sign-in. */
export interface SignInFuturePhoneCodeVerifyParams {
code: string;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export interface SignInFuturePhoneCodeVerifyParams { | |
| code: string; | |
| } | |
| /** Parameters for verifying a phone verification code during sign-in. */ | |
| export interface SignInFuturePhoneCodeVerifyParams { | |
| code: string; | |
| } |
🤖 Prompt for AI Agents
In packages/types/src/signInFuture.ts around lines 37 to 39, the
SignInFuturePhoneCodeVerifyParams interface lacks JSDoc; add a concise JSDoc
block above the interface that documents the purpose of the interface, the
expected format of `code` (e.g., numeric or alphanumeric), any length
constraints (min/max length or exact length), whether leading zeros are allowed,
and whether the field is required; keep the comment short and precise so
consumers know validation expectations.
| export interface SignUpFuturePhoneCodeSendParams { | ||
| phoneNumber?: string; | ||
| channel?: PhoneCodeChannel; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add JSDoc for new public params.
Clarify when phoneNumber is required and default channel.
+/**
+ * Parameters for sending a phone verification code during sign-up.
+ * - If a sign-up has not been created yet, `phoneNumber` is required.
+ * - `channel` defaults to `'sms'` if omitted.
+ */
export interface SignUpFuturePhoneCodeSendParams {
phoneNumber?: string;
channel?: PhoneCodeChannel;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export interface SignUpFuturePhoneCodeSendParams { | |
| phoneNumber?: string; | |
| channel?: PhoneCodeChannel; | |
| } | |
| /** | |
| * Parameters for sending a phone verification code during sign-up. | |
| * - If a sign-up has not been created yet, `phoneNumber` is required. | |
| * - `channel` defaults to `'sms'` if omitted. | |
| */ | |
| export interface SignUpFuturePhoneCodeSendParams { | |
| phoneNumber?: string; | |
| channel?: PhoneCodeChannel; | |
| } |
🤖 Prompt for AI Agents
In packages/types/src/signUpFuture.ts around lines 18 to 21, the new public
interface SignUpFuturePhoneCodeSendParams lacks JSDoc; add a JSDoc block for the
interface and for each field documenting that phoneNumber is required when
sending via SMS (or when the operation targets a phone) and optional otherwise,
describe the channel field and state its default (e.g., "sms") and allowed
values (PhoneCodeChannel), and include examples or notes about expected formats
(E.164) if applicable.
| export interface SignUpFuturePhoneCodeVerifyParams { | ||
| code: string; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add JSDoc for verify params.
Minimal doc for public type.
+/** Parameters for verifying a phone verification code during sign-up. */
export interface SignUpFuturePhoneCodeVerifyParams {
code: string;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export interface SignUpFuturePhoneCodeVerifyParams { | |
| code: string; | |
| } | |
| /** Parameters for verifying a phone verification code during sign-up. */ | |
| export interface SignUpFuturePhoneCodeVerifyParams { | |
| code: string; | |
| } |
🤖 Prompt for AI Agents
In packages/types/src/signUpFuture.ts around lines 23 to 25, the exported
SignUpFuturePhoneCodeVerifyParams interface lacks JSDoc; add a concise JSDoc
block above the interface describing its purpose and the code property (e.g.,
that it represents parameters for verifying a phone verification code and that
code is the one-time numeric/alpha code to verify), include type and any
constraints if applicable.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
packages/types/src/signInFuture.ts (2)
32-35: Add JSDoc for new public params (document when phoneNumber is required and channel default).Public types must be documented. Mirror the EmailCode docs and clarify optionality and defaults.
Apply:
+/** + * Parameters for sending a phone verification code during sign-in. + * Provide `phoneNumber` when the current SignIn has no identifier; otherwise the existing identifier is used. + * If omitted, `channel` defaults to `'sms'`. + */ export interface SignInFuturePhoneCodeSendParams { - phoneNumber?: string; - channel?: PhoneCodeChannel; + /** International phone number (e.g., E.164), required when no identifier exists on the SignIn. */ + phoneNumber?: string; + /** Delivery channel; defaults to `'sms'`. */ + channel?: PhoneCodeChannel; }Run to confirm the actual default channel and whether E.164 is expected so the JSDoc matches runtime:
#!/bin/bash # Inspect implementations/wiring for defaults and validations. rg -n -C3 --type=ts '\bsendPhoneCode\b|\bverifyPhoneCode\b|\bphoneCode\b' packages rg -n -C2 --type=ts -P '\bchannel\b.*(sms|whatsapp)|["'\'']sms["'\'']|["'\'']whatsapp["'\'']' packages rg -n -C3 --type=ts -P 'phone(Number)?\s*[:|]\s*string|E\.164' packages
37-39: Add JSDoc for verify params (format/length).Document expected code characteristics so consumers validate before calling.
Apply:
+/** Parameters for verifying a phone verification code during sign-in. */ export interface SignInFuturePhoneCodeVerifyParams { - code: string; + /** + * The user-entered verification code as delivered via the selected channel. + * Document the expected format/length (e.g., numeric, commonly 6 digits; leading zeros allowed) to match backend policy. + */ + code: string; }If the code length is fixed, consider adding a reusable branded alias for consistency across sign-in/sign-up:
#!/bin/bash # Look for existing code-type aliases to reuse. rg -n -C2 --type=ts -P 'type\s+.*(Verification)?Code|interface\s+.*Code' packages/types
🧹 Nitpick comments (1)
packages/types/src/signInFuture.ts (1)
69-72: Mark API surface as experimental and gate via availableStrategies in JSDoc.The changeset calls this experimental; annotate accordingly and document gating.
Apply:
export interface SignInFutureResource { @@ - phoneCode: { + /** + * Experimental: Phone verification code factor for sign-in flows. + * Requires `'phone_code'` to be present in `availableStrategies`. + * @experimental + */ + phoneCode: { sendCode: (params: SignInFuturePhoneCodeSendParams) => Promise<{ error: unknown }>; verifyCode: (params: SignInFuturePhoneCodeVerifyParams) => Promise<{ error: unknown }>; };Optionally, align error typing with existing shared error types (if any) in this package in a follow-up.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/types/src/signInFuture.ts(3 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{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/signInFuture.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/signInFuture.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/types/src/signInFuture.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/signInFuture.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/signInFuture.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/signInFuture.ts
🧬 Code graph analysis (1)
packages/types/src/signInFuture.ts (1)
packages/types/src/phoneCodeChannel.ts (1)
PhoneCodeChannel(9-9)
⏰ 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: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (1)
packages/types/src/signInFuture.ts (1)
2-2: Import looks correct and type-only.Path and naming align with the new channel union type; no action needed.
3 participants
Description
This PR adds support for phone code sign-up and sign-in to our Signal implementation for custom flows.
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Chores