Authentication
Forgot Password
A two-step password recovery flow that starts with an email-based reset request and finishes with a code-confirmed password change, all inside a single component view.
Link it directly from the Sign In screen when users cannot access their account.
Users stay in one place while the component switches between reset request and password confirmation.
The sign-in link stays visible throughout both steps.
Four things worth knowing
BuilderForgotPassword combines the whole password recovery sequence into one component. Users request a code, then immediately switch into the password reset step without a page reload or route change.
Email-based reset request
Step 1 collects the user’s email and triggers the reset code request through the backend.
Code and password confirmation
Step 2 collects the verification code, new password, and confirmation before completing the reset.
Password guidance built in
Shows password requirement hint text and includes secure inputs with show/hide toggles.
Automatic return path
After a successful reset, the user is routed back to Sign In so they can log in with the new password immediately.
Find it, drop it, wire it up
Where to find it
- Open the Builder component picker.
- Go to Authentication.
- Select Forgot Password.
- Drop it onto a recovery screen linked from Sign In.
Recommended setup
- Connect
signinScreenIdso users can always get back to the login screen. - Customize both step headings if your tone changes between request and confirmation.
- Keep the same accent color as Sign In and Sign Up for visual continuity.
- Use one dedicated screen only - the component handles the step switching internally.
What you can configure in the editor
| Group | Prop | Default | What it controls |
|---|---|---|---|
| Step 1 text | headingText, subtitleText | Reset Password, long helper copy | Controls the first-step heading and the message that explains the email reset request. |
| Step 2 text | confirmHeadingText, confirmSubtitleText | Set New Password, long helper copy | Controls the second-step heading and the guidance shown when entering the code and new password. |
| Branding | primaryColor, logoUrl, logoText | #007AFF, none, Your App | Sets the main accent color and the optional brand presentation at the top of the form. |
| Layout | customWidth, sizeVariant | auto, preset-based | Adjusts width and all related sizing for text, spacing, and buttons. |
| Navigation | signinScreenId, onScreenNavigate, onBackToSignin | none | Controls where the persistent return link goes and where success should land. |
| Data | appId, tenantId | Runtime context | Scopes the reset requests to the active app and backend tenant. |
| Overrides | onSubmit | none | Lets advanced builders replace the default step-one request behavior with a custom backend flow. |
| Runtime | isPreview, homeScreenId | false, reserved | Turns interactivity on in preview/live mode. homeScreenId is currently reserved and not used in the flow. |
Make it yours
| Setting | Where | What changes |
|---|---|---|
| Primary Color | Style | Reset action buttons, interactive links, and focus highlights in both steps. |
| Component Size | Style | Global scaling for spacing, field sizes, and buttons in request and confirm states. |
| Heading Text | Content | Main heading shown in step 1 when requesting a reset code. |
| Confirm Heading Text | Content | Main heading shown in step 2 while setting a new password. |
| Subtitle Texts | Content | Guidance copy for each step, including reset instructions and password rules. |
Common mistakes to avoid
One screen is enough
You do not need separate builder screens for request and confirmation. The component swaps views internally.
Keep the password hint visible
The requirement hint helps reduce failed reset attempts, especially in stricter-password apps.
Preview mode is required
The inputs and buttons remain disabled on the canvas. Test the full reset experience in preview mode instead.