Authentication
Email Verification
The post-signup verification step for confirming a user’s email address. It accepts a six-digit code, supports resend, resolves the target email from signup context, and routes back to Sign In after success.
Use it directly after successful account creation.
No component-level logo or app-name editing in this screen.
Use this key when checking registry defaults and property definitions.
Four things worth knowing
BuilderConfirmCode is the verification step between signup and sign-in. It validates the code, verifies/resends via auth endpoints, and uses the pending signup email when available.
6-digit code validation
Accepts exactly six digits before submitting verify requests, and blocks invalid formats with user-facing feedback.
Email resolution with fallback
Uses pendingVerificationEmail from app context first, then falls back to username if context is missing.
Verify + resend endpoints
Calls API_ENDPOINTS.userApp.verifyEmail and API_ENDPOINTS.userApp.resendVerification with normalized appId.
Built-in return navigation
Routes users back to Sign In after success using signinScreenId and onScreenNavigate, with onBackToSignin fallback support.
Find it, drop it, wire it up
Where to find it
- Open the Builder component picker.
- Go to Authentication.
- Select Email Verification.
- Drop it onto the screen that follows Sign Up.
Recommended setup
- Set Sign In destination via
signinScreenId. - Set heading/subtitle text in Content and style values in Style.
- Only use
usernameas a fallback when signup context is not present. - Run verification and resend tests in Preview mode before publishing.
What you can configure in the editor
| Group | Prop | Default | What it controls |
|---|---|---|---|
| Content | headingText | Verify Your Email | Main heading shown above the confirmation input. |
| Content | subtitleText | auto-generated | Supporting text shown below heading; usually includes the resolved verification email. |
| Style | fontFamily | theme default | Typography family for heading, labels, and action controls. |
| Style | primaryColor | #007AFF | Accent color for verify button, resend action, and interactive highlights. |
| Style | sizeVariant | preset-based | Scales spacing, input dimensions, and button sizing. |
| Identity fallback | username | none | Fallback email when pendingVerificationEmail is missing from context. |
| Action | signinScreenId | none | Sign In destination after success and back-link navigation. |
| Action | homeScreenId | none | Optional post-verify destination for auth flows that route onward after sign-in handoff. |
| Runtime | isPreview | false | Enables interactive verification controls only in preview/live runtime. |
Make it yours
| Setting | Where | What changes |
|---|---|---|
| Primary Color | Style | Verify button styling, resend action accent, and focus highlights. |
| Font Family | Style | Typography family across heading, labels, and code input UI. |
| Component Size | Style | Scales spacing, code input dimensions, and button sizing presets. |
| Heading Text | Content | Main prompt shown above verification code input. |
| Subtitle Text | Content | Context line that explains where the code was sent. |
Common mistakes to avoid
Keep logo/app-name fields out of this component
logoUrl and logoText are intentionally removed. Branding identity belongs to app-level settings, not confirm-code properties.
Ensure email is available before testing
The component needs pendingVerificationEmail or username. If both are missing, verify/resend should block and show an alert.
Test both invalid and valid code paths
Confirm non-6-digit input triggers validation, then verify a valid code completes and routes the user back to Sign In correctly.
Validate resend and navigation wiring after changes
After editing auth-confirm registry fields, test resend success/failure alerts and ensure signinScreenId routing still works in Preview.