chore(ui,shared,localizations): Add verify/add email address step to <ConfigureSSO />#8520
chore(ui,shared,localizations): Add verify/add email address step to <ConfigureSSO />#8520LauraBeatris wants to merge 7 commits into
<ConfigureSSO />#8520Conversation
🦋 Changeset detectedLatest commit: 76fc187 The changes in this PR will be included in the next version bump. This PR includes changesets to release 20 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.
|
LauraBeatris
changed the title
<ConfigureSSO /><ConfigureSSO />
|
I'll add unit tests once #8515 gets merged since it introduces the spec over there |
LauraBeatris
force-pushed
the
laura/orgs-1455-configuresso-addverify-email-address-step
branch
from
9c16c94 to
367857b
Compare
LauraBeatris
force-pushed
the
laura/orgs-1455-configuresso-addverify-email-address-step
branch
from
367857b to
53e04c8
Compare
LauraBeatris
force-pushed
the
laura/orgs-1455-configuresso-addverify-email-address-step
branch
from
53e04c8 to
d27cc13
Compare
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR adds a new email verification step to the experimental ConfigureSSO flow. The change spans multi-language localization strings across 40+ supported languages, TypeScript type definitions for the new localization structure, React components for email entry and OTP verification, and supporting assets. The implementation detects when the configured domain is already taken by another organization and provides appropriate early-exit messaging. The feature is broken into three sub-components: ProvideEmailStep for email collection, EnterVerificationCodeStep for OTP-based verification, and EmailAlreadyVerified for displaying verified-state confirmation. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx`:
- Around line 223-227: The Continue button currently calls goNext() directly
(Step.Footer.Continue onClick={() => goNext()}) which skips createEmailAddress()
and causes EnterVerificationCodeStep to receive no emailToVerify; change the
onClick to call handleSubmit (or the wrapper that executes createEmailAddress()
then advances) so the add+verify flow runs createEmailAddress() before moving
forward, ensuring emailToVerify is set for EnterVerificationCodeStep and
preserving the existing isLoading/isDisabled checks.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 62663121-c78d-41df-9d3f-35a4875f7f1a
⛔ Files ignored due to path filters (1)
packages/ui/src/icons/duotone-at-symbol.svgis excluded by!**/*.svg
📒 Files selected for processing (53)
.changeset/thirty-cups-guess.mdpackages/localizations/src/ar-SA.tspackages/localizations/src/be-BY.tspackages/localizations/src/bg-BG.tspackages/localizations/src/bn-IN.tspackages/localizations/src/ca-ES.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/da-DK.tspackages/localizations/src/de-DE.tspackages/localizations/src/el-GR.tspackages/localizations/src/en-GB.tspackages/localizations/src/en-US.tspackages/localizations/src/es-CR.tspackages/localizations/src/es-ES.tspackages/localizations/src/es-MX.tspackages/localizations/src/es-UY.tspackages/localizations/src/fa-IR.tspackages/localizations/src/fi-FI.tspackages/localizations/src/fr-FR.tspackages/localizations/src/he-IL.tspackages/localizations/src/hi-IN.tspackages/localizations/src/hr-HR.tspackages/localizations/src/hu-HU.tspackages/localizations/src/id-ID.tspackages/localizations/src/is-IS.tspackages/localizations/src/it-IT.tspackages/localizations/src/ja-JP.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.tspackages/localizations/src/mn-MN.tspackages/localizations/src/ms-MY.tspackages/localizations/src/nb-NO.tspackages/localizations/src/nl-BE.tspackages/localizations/src/nl-NL.tspackages/localizations/src/pl-PL.tspackages/localizations/src/pt-BR.tspackages/localizations/src/pt-PT.tspackages/localizations/src/ro-RO.tspackages/localizations/src/ru-RU.tspackages/localizations/src/sk-SK.tspackages/localizations/src/sr-RS.tspackages/localizations/src/sv-SE.tspackages/localizations/src/ta-IN.tspackages/localizations/src/te-IN.tspackages/localizations/src/th-TH.tspackages/localizations/src/tr-TR.tspackages/localizations/src/uk-UA.tspackages/localizations/src/vi-VN.tspackages/localizations/src/zh-CN.tspackages/localizations/src/zh-TW.tspackages/shared/src/types/localization.tspackages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsxpackages/ui/src/icons/index.ts
LauraBeatris
force-pushed
the
laura/orgs-1455-configuresso-addverify-email-address-step
branch
from
d27cc13 to
0b25a46
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx (1)
229-232:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winRoute the Continue CTA through
handleSubmit.This still skips
createEmailAddress()and advances straight to the OTP step. In the add+verify path, that can leaveemailToVerifyunset, soEnterVerificationCodeStepreturnsnulland the flow dead-ends. As per coding guidelines, "Use proper form submission handling in React components".Suggested fix
<Step.Footer.Continue - onClick={() => goNext()} + onClick={() => { + void handleSubmit(); + }} isLoading={card.isLoading} isDisabled={!canSubmit || card.isLoading} />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx` around lines 229 - 232, The Continue button currently calls goNext() directly which skips form submission and createEmailAddress(), leaving emailToVerify unset and causing EnterVerificationCodeStep to return null; change the Step.Footer.Continue onClick to call handleSubmit (the existing form submit handler) instead of goNext so the form validates and createEmailAddress() runs before advancing, keep the isLoading and isDisabled props (card.isLoading and !canSubmit || card.isLoading) as-is, and ensure handleSubmit ultimately calls goNext() only after createEmailAddress() completes successfully.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx`:
- Line 247: The Previous button in VerifyDomainStep is currently always disabled
(using useWizard's goPrev) which prevents returning to the email-entry step;
update the disable logic so the back action is only disabled when this step is
actually the first step—use the wizard state (e.g., an isFirst or
currentStep/index value from useWizard or the wizard context) to conditionally
enable goPrev, and apply the same change in the other occurrence around lines
335-343 so users can recover from a mistyped email by navigating back to the
email-entry component instead of being stuck on the OTP screen.
---
Duplicate comments:
In `@packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx`:
- Around line 229-232: The Continue button currently calls goNext() directly
which skips form submission and createEmailAddress(), leaving emailToVerify
unset and causing EnterVerificationCodeStep to return null; change the
Step.Footer.Continue onClick to call handleSubmit (the existing form submit
handler) instead of goNext so the form validates and createEmailAddress() runs
before advancing, keep the isLoading and isDisabled props (card.isLoading and
!canSubmit || card.isLoading) as-is, and ensure handleSubmit ultimately calls
goNext() only after createEmailAddress() completes successfully.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 1004fa64-a006-455f-9ec2-98e4c515e64d
📒 Files selected for processing (2)
.changeset/thirty-cups-guess.mdpackages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx
✅ Files skipped from review due to trivial changes (1)
- .changeset/thirty-cups-guess.md
LauraBeatris
force-pushed
the
laura/orgs-1455-configuresso-addverify-email-address-step
branch
from
0b25a46 to
f5501fd
Compare
LauraBeatris
force-pushed
the
laura/orgs-1455-configuresso-addverify-email-address-step
branch
from
f6c0ce7 to
3e2e08b
Compare
|
We should add unit tests for this step once we have the select provider screen |
| /> | ||
| <Col | ||
| gap={1} | ||
| sx={t => ({ textAlign: 'center', maxWidth: t.sizes.$66 })} |
There was a problem hiding this comment.
What do you think of using the maxWidth from the MissingManageEnterpriseConnectionsPermission step? Might look a bit better.
| /> | ||
| </Col> | ||
| </Col> | ||
| </Step> |
There was a problem hiding this comment.
We are just missing the footer and the Step.Header here as per the design.
| > | ||
| <Heading | ||
| textVariant='h1' | ||
| sx={t => ({ fontSize: t.fontSizes.$lg })} |
There was a problem hiding this comment.
I think we could add a textWrap: balance here too.
2 participants
Description
Add + verify
CleanShot.2026-05-11.at.15.55.03.mp4
Verify only
CleanShot.2026-05-11.at.16.06.36.mp4
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change