Sign In
One configurable sign-in flow modelled on top mobile apps: Apple / Google / Microsoft / GitHub buttons, phone number + SMS code with a dial-code picker and resend countdown, and email with a password (plus sign-up strength meter and forgot password), a one-time code or a magic link with a 'Check your inbox' screen. Every method is optional; steps slide in direction-aware, respect Reduce Motion, and stay clear of the keyboard. Monochrome by default.
Installation
Copies the screen into src/components/blocks along with every component it uses.
Props
| Prop | Type | Default |
|---|---|---|
| methods Options in display order. OAuth ones render as 'Continue with X'; phone / email open their step. Exactly one of phone / email and no OAuth skips the welcome step. | ('apple' | 'google' | 'microsoft' | 'github' | 'phone' | 'email')[] | ['apple', 'google', 'phone', 'email'] |
| emailMode What follows the email step: a password, a one-time email code, or a magic link + 'Check your inbox'. | 'password' | 'code' | 'magic-link' | 'password' |
| mode / defaultMode Controlled / initial mode. Sign-up shows 'Create account' and a password strength meter. | 'sign-in' | 'sign-up' | 'sign-in' |
| onModeChange The footer 'Sign up' / 'Sign in' link toggled the mode. | (mode) => void | — |
| initialStep Step to open on mount (demos, deep links). Back still walks a sensible stack. | 'welcome' | 'phone' | 'otp' | 'email' | 'password' | 'email-code' | 'check-email' | 'forgot' | 'welcome' |
| defaultPhone Prefill the number (digits; a leading dial code is stripped). | string | '' |
| defaultEmail Prefill the email field. | string | '' |
| countryCode Selected dial code. +91 formats as '98765 43210' and needs 10 digits; others accept 7–15. | string | '+91' |
| countries Dial-code picker list (tap the chip). One entry hides the picker. | { code, dial, flag? }[] | IN, US, GB, AE, SG, AU |
| otpLength Digits in the one-time code. | number | 6 |
| resendSeconds Countdown before 'Resend code' / 'Resend' is available. | number | 30 |
| onOAuth OAuth button pressed. Spinner while pending; resolve → onSuccess, throw → message shown inline. | (provider) => void | Promise | — |
| onSendPhoneCode Send an SMS code to the E.164 number ('+919876543210'). Resolve to open the code step; also used by Resend. | (fullPhone: string) => void | Promise | — |
| onVerifyPhoneCode Called when the cells fill. Resolve → success state then onSuccess; throw → error on the cells. | (fullPhone, code) => void | Promise | — |
| onEmailPassword Password step submitted. Resolve → onSuccess; throw → message under the field. | ({ email, password, mode }) => void | Promise | — |
| onSendEmailCode emailMode 'code': send the code. Resolve to open the code step. | (email) => void | Promise | — |
| onVerifyEmailCode emailMode 'code': check the code. Resolve → onSuccess. | (email, code) => void | Promise | — |
| onSendMagicLink emailMode 'magic-link': send the link. Resolve to show 'Check your inbox'. | (email) => void | Promise | — |
| onForgotPassword 'Send reset link' pressed on the forgot step. Resolve to show 'Check your inbox'. | (email) => void | Promise | — |
| onSuccess Called after any successful final step (OAuth, code verified, email + password). | () => void | — |
| onBack Shows a back button on the first step. | () => void | — |
| onTerms / onPrivacy Make 'Terms' / 'Privacy Policy' in the legal line tappable. | () => void | — |
| appName Used in the default title and the logo initial. | string | 'Northwind' |
| logo Replace the welcome logo. | ReactNode | monochrome initial mark |
| title Welcome heading. | string | `Welcome to ${appName}` |
| subtitle Line under the welcome heading. | string | 'Sign in to continue.' |
| accent Primary buttons, links and focus rings (black in light, white in dark by default). | string | theme accent |
| style Root style. | StyleProp<ViewStyle> | — |
| error / onDismissError Controlled error shown on the current step; onDismissError fires when the user edits or navigates. | string / () => void | — |
| onSignUp Pressed 'Sign up' — called instead of toggling the mode. | () => void | — |
| onSubmit / onSocial / providers Aliases of onEmailPassword / onOAuth; providers (apple / google) sets the OAuth part of methods when methods isn't given. | deprecated | — |
Source
Did you like the content?