You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
feat(mosaic): add the sign-in identifier step's phone and username fields - #10792
Adds the sign-in identifier step's other fields, following the legacy screens below. Work in progress: the table lists each legacy screen in this group, and the Mosaic column fills in as each view lands.
The identifier step names its field: { kind: 'identifier'; field; nextField? }, where field is email, email-or-username, username or phone. Phone uses PhoneInput. With nextField, the label row shows legacy's switch link ("Use phone", "Use email", "Use username", "Use email or username"), which calls the new optional onSwitchField.
New Field.Header part (.cl-field-header): a row with the label at the start and an action at the end, as in the Mosaic 2.0 sign-in designs. The action sits outside the label, so pressing it doesn't focus the control.
With onPasskey, the step shows legacy's "Use passkey instead" link under the field. Mosaic's card footer lays actions out in a row, so the link sits in the card body rather than under Continue.
New identifier variant { kind: 'identifier'; field: 'phone'; channel } for an alternative phone channel such as WhatsApp: legacy's title, description and "{provider} phone number" label, and "Use another method" beside Continue. IdentifierStep routes between it and the start screen, as CredentialStep does.
"Last used": lastUsedProviderId puts that provider in ProviderButtonGroup's lastUsed row with its badge, and the identifier step's lastUsed flag shows a badge on the field's label row when there is no switch link, as legacy does. The field badge is Mosaic's filled neutral Badge; legacy's is outlined.
While Turnstile shows an interactive challenge, the start screen spotlights it as legacy does: the providers, form and Continue are hidden (display: none and inert, still mounted so the form keeps its values). Captcha gains onInteractiveChange, which reports when clerk-js sets or clears data-cl-interactive.
With onJoinWaitlist, the step shows legacy's "Want early access? Join waitlist" in place of the sign-up prompt, for instances in waitlist mode.
"Forgot password?" moves from under the password input to the label row, as in legacy and the designs.
The field's label, placeholder and switch-link copy come from a tested identifierFieldCopy helper in sign-in.utils.ts.
The sign-up and waitlist prompts and the passkey link stay in the card body, above Continue, following the existing Mosaic sign-in layout. Legacy and the Mosaic 2.0 designs put them below Continue.
Reviewing files that changed from the base of the PR and between 6096fab and af7f19c.
You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.
Use the checkbox below for a quick retry:
Trigger review
No actionable comments were generated in the recent review.
Walkthrough
The sign-in flow now supports email, username, email-or-username, and phone identifiers. It adds an alternative provider channel, passkey and waitlist prompts, field switching, and last-used provider indicators. CAPTCHA reports changes to its interactive state. Field.Header places actions beside field labels, and the password step uses it for the forgot-password action. Stories and tests cover these changes. An empty changeset file was also added.
clerk/javascript#10796: Adds the Captcha component whose interactive attribute this PR observes.
clerk/javascript#10729: Changes sign-in contracts and components also updated in this PR.
Suggested reviewers:kylemac, alexcarpenter, ephem
Merge Risk: Low · previous review 6096f
On the alternative phone-channel sign-in screen, the phone form and Continue button likely stay usable while an interactive CAPTCHA challenge is shown. The ordinary identifier screen hides and disables them in that case. This is a minor inconsistency that can be fixed in follow-up work.
Pre-merge checks: 4
Check name
Status
Explanation
Title check
The title names the sign-in identifier step's phone and username fields, which the changeset adds. It is specific and matches the main change. It does not cover the many other parts of the changeset, …
Description check
The description states the purpose of the change: the sign-in identifier step's other fields. It lists the new field types, the Field.Header part, passkey and waitlist links, last-used indicators, cap…
Linked Issues check
Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check
Check skipped because no linked issues were found for this pull request.
Full details: Title check
Explanation
The title names the sign-in identifier step's phone and username fields, which the changeset adds. It is specific and matches the main change. It does not cover the many other parts of the changeset, such as last-used indicators, captcha behavior, and the Field.Header part, but the task does not require full coverage.
Full details: Description check
Explanation
The description states the purpose of the change: the sign-in identifier step's other fields. It lists the new field types, the Field.Header part, passkey and waitlist links, last-used indicators, captcha, and copy helpers. It also includes legacy and Mosaic comparison screenshots and a checklist. It is directly related to the changeset.
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Warning
Linked repositories: Some configured repositories could not be included in this review. Cross-repository analysis may be incomplete. Please check linked-repository access and settings.
Included review availability: This review used your included allowance. 4 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 8 reviews per hour.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds the sign-in identifier step's other fields, following the legacy screens below. Work in progress: the table lists each legacy screen in this group, and the Mosaic column fills in as each view lands.
{ kind: 'identifier'; field; nextField? }, wherefieldisemail,email-or-username,usernameorphone. Phone usesPhoneInput. WithnextField, the label row shows legacy's switch link ("Use phone", "Use email", "Use username", "Use email or username"), which calls the new optionalonSwitchField.Field.Headerpart (.cl-field-header): a row with the label at the start and an action at the end, as in the Mosaic 2.0 sign-in designs. The action sits outside thelabel, so pressing it doesn't focus the control.onPasskey, the step shows legacy's "Use passkey instead" link under the field. Mosaic's card footer lays actions out in a row, so the link sits in the card body rather than under Continue.{ kind: 'identifier'; field: 'phone'; channel }for an alternative phone channel such as WhatsApp: legacy's title, description and "{provider} phone number" label, and "Use another method" beside Continue.IdentifierSteproutes between it and the start screen, asCredentialStepdoes.lastUsedProviderIdputs that provider inProviderButtonGroup'slastUsedrow with its badge, and the identifier step'slastUsedflag shows a badge on the field's label row when there is no switch link, as legacy does. The field badge is Mosaic's filled neutralBadge; legacy's is outlined.Captcha(feat(mosaic): add the Captcha element for clerk-js Turnstile #10796) under the field, where legacy rendersCaptchaElement, so clerk-js has somewhere to show Turnstile's interactive challenge.display: noneandinert, still mounted so the form keeps its values).CaptchagainsonInteractiveChange, which reports when clerk-js sets or clearsdata-cl-interactive.onJoinWaitlist, the step shows legacy's "Want early access? Join waitlist" in place of the sign-up prompt, for instances in waitlist mode.identifierFieldCopyhelper insign-in.utils.ts.Stacked on #10796.
Legacy and Mosaic
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
🤖 Generated with Claude Code