Patterns · Pages
Sign in
SignInPageSignInScreen
Email and password with passkey autofill, a biometric or passkey option, and recovery links.
Web
Live, at a real viewport width. Switch to Phone to see the responsive layout.
Usage
import { SignInPage } from '@nexub/patterns';
<SignInPage logo={<Logo product="Payub" />} onSubmit={signIn} onBiometric={passkey} biometricLabel="Sign in with a passkey" error={error} />On iOS & Android: SignInScreen
@nexub/react-native/patternsAlpha
import { SignInScreen } from '@nexub/react-native/patterns';
<SignInScreen onSubmit={signIn} onBiometric={unlock} biometricLabel="Sign in with Face ID" />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Autofill | autocomplete="username webauthn" for password managers and passkeys. | Platform autofill hints for iCloud Keychain and Android Autofill. |
| Biometrics | Passkeys through the browser. | Face ID or fingerprint via onBiometric. |
Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
SignInScreen props
| Prop | Type | Default | Description |
|---|---|---|---|
| onSubmitrequired | (email: string, password: string) => void | — | — |
| biometricLabel | string | — | Offer passkey/biometric sign-in (name the method: "Sign in with Face ID"). |
| onBiometric | () => void | — | — |
| onForgotPassword | () => void | — | — |
| onCreateAccount | () => void | — | — |
| loading | boolean | — | — |
| error | string | — | — |
| logo | React.ReactNode | — | — |
| title | string | 'Sign in' | Copy overrides. |
| submitLabel | string | 'Sign in' | — |