Authentication
Sign In
A complete login form for app users. It handles email/password sign-in, remember-me autofill, token persistence, and navigation to the next auth screens. App name is sourced from app settings context, not component-level logo props.
Use it as the main front door into your app.
Subtitle app name comes from currentApp?.name with ‘app’ fallback.
Connect the full auth journey through screen IDs.
Four things worth knowing
BuilderSignin is a production-ready sign-in flow that handles credentials, persistence, and screen routing without extra builder logic.
Email and password login
Validates credentials and submits sign-in requests to API_ENDPOINTS.userApp.signin with built-in loading and error handling.
Remember Me support
Saves credentials using iOS Keychain, Android Keystore, or browser localStorage so returning users can be pre-filled automatically.
Session persistence
Stores token and profile data after successful login so user context is available immediately in runtime.
App-level identity rule
App name is read from currentApp?.name (fallback ‘app’). logoText and logoUrl are intentionally not editable in this component.
Find it, drop it, wire it up
Where to find it
- Open the Builder component picker.
- Go to Authentication.
- Select Sign In.
- Drop it onto your login or welcome screen.
Recommended setup
- Set Sign Up, Forgot Password, and Home destination screens.
- Set Heading Text and Subtitle Text in Content.
- Set Primary Color, Font Family, and Component Size in Style.
- Preview the flow and confirm successful sign-in routes to
homeScreenId.
What you can configure in the editor
| Group | Prop | Default | What it controls |
|---|---|---|---|
| Content | headingText | Welcome Back | Main heading shown at the top of the form. |
| Content | subtitleText | none | Supporting text shown below the heading. App name is injected from app settings context. |
| Style | fontFamily | theme default | Font family used across labels, inputs, and buttons. |
| Style | primaryColor | #007AFF | Primary accent for sign-in button, links, and focus treatments. |
| Style | sizeVariant | preset-based | Controls overall scale for spacing, typography, and button/input dimensions. |
| Action | signupScreenId | none | Destination screen for the “Sign Up” link. |
| Action | forgotPasswordScreenId | none | Destination screen for the “Forgot Password?” link. |
| Action | homeScreenId | none | Destination screen after successful sign-in. |
| Runtime | isPreview | false | Turns inputs and buttons on only in preview or live runtime mode. |
Make it yours
| Setting | Where | What changes |
|---|---|---|
| Primary Color | Style | Sign-in button colour, action links, and active/focus highlights. |
| Font Family | Style | Typography family across headings, fields, and button text. |
| Component Size | Style | Scales paddings, input height, and button size with one preset. |
| Heading Text | Content | Main welcome heading shown above the email and password inputs. |
| Subtitle Text | Content | Supporting line under the heading; combines with app name from app settings context. |
Common mistakes to avoid
Don’t look for app name in component props
Sign In app name comes from app settings (currentApp?.name). Change it in Settings & Deploy, not in Sign In component properties.
Logo fields are intentionally removed
logoText and logoUrl are not exposed for auth-signin. If they appear, refresh and verify registry defaultProps and propDefinitions.
Wire all three destinations
Set signupScreenId, forgotPasswordScreenId, and homeScreenId so every auth path is complete.
Run QA after property changes
After updating auth-signin, confirm there is no Logo Image/App Name field, then verify sign-in success routes to homeScreenId and links route correctly in Preview.