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 5 commits into
<ConfigureSSO />#8520Conversation
🦋 Changeset detectedLatest commit: 0b25a46 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: |
📝 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
| <Step.Footer.Continue | ||
| onClick={() => goNext()} | ||
| isDisabled={isLastStep} | ||
| isLoading={card.isLoading} | ||
| isDisabled={!canSubmit || card.isLoading} | ||
| /> |
There was a problem hiding this comment.
Wire the add-email CTA through handleSubmit.
The primary Continue button skips createEmailAddress() and advances straight to the verification step. In the add+verify flow, that can land on EnterVerificationCodeStep with no emailToVerify, which renders nothing and blocks the user.
Suggested fix
<Step.Footer.Continue
- onClick={() => goNext()}
+ onClick={() => {
+ void handleSubmit();
+ }}
isLoading={card.isLoading}
isDisabled={!canSubmit || card.isLoading}
/>📝 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.
| <Step.Footer.Continue | |
| onClick={() => goNext()} | |
| isDisabled={isLastStep} | |
| isLoading={card.isLoading} | |
| isDisabled={!canSubmit || card.isLoading} | |
| /> | |
| <Step.Footer.Continue | |
| 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 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.
There was a problem hiding this comment.
I think this makes sense, if someone tries to click continue on the footer rather than hitting enter on the input, would skip the email creation.
There was a problem hiding this comment.
@iagodahlem, exactly — handleSubmit already has the full guard logic (canSubmit check → createEmailAddress → goNext on success), so routing the footer button through it keeps both paths (Enter key via Form.Root onSubmit and the explicit Continue click) consistent. The suggested fix should close the gap.
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
| const { user } = useUser(); | ||
| const card = useCardState(); | ||
| const codeSubmittedRef = useRef(false); | ||
| const { goNext, goPrev } = useWizard(); |
There was a problem hiding this comment.
Keep a recovery path back to the email-entry step.
Previous is hard-disabled on the OTP screen. In the add+verify flow, a typoed but valid email sends the code to the wrong address and leaves the user with no way to correct it, which blocks completion. Only disable back-navigation when this step is actually the first step. As per coding guidelines, "Implement proper error recovery in React applications".
Suggested fix
- const { goNext, goPrev } = useWizard();
+ const { goNext, goPrev, isFirstStep } = useWizard();
...
<Step.Footer.Previous
onClick={() => goPrev()}
- isDisabled
+ isDisabled={isFirstStep}
/>Also applies to: 335-343
🤖 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` at 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.
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